@opengeoweb/core 9.6.0 → 9.8.0

package/index.esm.js

@@ -462,6 +462,48 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -495,7 +537,8 @@ var HeaderOptions = function HeaderOptions(_ref) {
     shortcutsEnabled = _ref.shortcutsEnabled,
     onClickDockButton = _ref.onClickDockButton,
     onChangeSize = _ref.onChangeSize,
-    buttonSettings = _ref.buttonSettings;
+    buttonSettings = _ref.buttonSettings,
+    mapWidth = _ref.mapWidth;
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   React.useEffect(function () {
     var handleKeyDown = function handleKeyDown(event) {
@@ -518,21 +561,27 @@ var HeaderOptions = function HeaderOptions(_ref) {
     tooltipTitle: "small",
     "data-testid": "collapseSmall-btn",
     onClick: function onClick() {
-      return onChangeSize(sizeSmall);
+      if (mapWidth && mapWidth > sizeSmall.width) {
+        onChangeSize(sizeSmall);
+      }
     },
     className: "collapseSmall-btn"
   }, (_c = (_b = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.small) === null || _b === void 0 ? void 0 : _b.icon) !== null && _c !== void 0 ? _c : /*#__PURE__*/React.createElement(CollapseSmall, null))), !((_d = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.medium) === null || _d === void 0 ? void 0 : _d.isDisabled) && ( /*#__PURE__*/React.createElement(CustomIconButton, {
     tooltipTitle: "medium",
     "data-testid": "collapseMedium-btn",
     onClick: function onClick() {
-      return onChangeSize(sizeMedium);
+      if (mapWidth && mapWidth > sizeMedium.width) {
+        onChangeSize(sizeMedium);
+      }
     },
     className: "collapseMedium-btn"
   }, (_f = (_e = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.medium) === null || _e === void 0 ? void 0 : _e.icon) !== null && _f !== void 0 ? _f : /*#__PURE__*/React.createElement(CollapseMedium, null))), !((_g = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.large) === null || _g === void 0 ? void 0 : _g.isDisabled) && ( /*#__PURE__*/React.createElement(CustomIconButton, {
     tooltipTitle: "large",
     "data-testid": "collapseLarge-btn",
     onClick: function onClick() {
-      return onChangeSize(sizeLarge);
+      if (mapWidth && mapWidth > sizeLarge.width) {
+        onChangeSize(sizeLarge);
+      }
     },
     className: "collapseLarge-btn"
   }, (_j = (_h = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.large) === null || _h === void 0 ? void 0 : _h.icon) !== null && _j !== void 0 ? _j : /*#__PURE__*/React.createElement(CollapseLarge, null))), !((_k = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.dock) === null || _k === void 0 ? void 0 : _k.isDisabled) && ( /*#__PURE__*/React.createElement(CustomIconButton, {
@@ -763,14 +812,15 @@ var styles$6 = {
     }, theme.palette.geowebColors.layerManager.headerRowText);
   }
 };
-var DescriptionRow = function DescriptionRow(_ref) {
-  var mapId = _ref.mapId,
-    mapPresetsModule = _ref.mapPresetsModule,
-    _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source,
-    settings = _ref.settings,
-    isMultiMap = _ref.isMultiMap;
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+var DescriptionRow = function DescriptionRow(_a) {
+  var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+  var mapId = _a.mapId,
+    mapPresetsModule = _a.mapPresetsModule,
+    _a$source = _a.source,
+    source = _a$source === void 0 ? 'app' : _a$source,
+    settings = _a.settings,
+    isMultiMap = _a.isMultiMap,
+    gridProps = __rest(_a, ["mapId", "mapPresetsModule", "source", "settings", "isMultiMap"]);
   var _React$useState = React.useState(mapPresetsModule ? Object.assign(Object.assign({}, mapPresetsModule), {
       props: Object.assign(Object.assign({}, mapPresetsModule.props), {
         id: 'mappresets-menubuttonInline'
@@ -779,7 +829,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 1),
     mapPresetsModuleInline = _React$useState2[0];
   var hasMapPresetsModule = mapPresetsModule !== undefined;
-  return /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/React.createElement(Grid, Object.assign({
     container: true,
     item: true,
     "data-testid": "descriptionRow",
@@ -788,7 +838,7 @@ var DescriptionRow = function DescriptionRow(_ref) {
     },
     className: "descriptionRow",
     alignItems: "center"
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, gridProps), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: columnClasses.column1,
     sx: Object.assign(Object.assign({}, leftButtonsStyle), {
@@ -798,15 +848,15 @@ var DescriptionRow = function DescriptionRow(_ref) {
   }, /*#__PURE__*/React.createElement(LayerSelectButtonConnect, {
     mapId: mapId,
     source: source,
-    tooltipTitle: (_a = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _a === void 0 ? void 0 : _a.tooltipTitle,
-    icon: (_b = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _b === void 0 ? void 0 : _b.icon,
+    tooltipTitle: (_b = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _b === void 0 ? void 0 : _b.tooltipTitle,
+    icon: (_c = settings === null || settings === void 0 ? void 0 : settings.addLayer) === null || _c === void 0 ? void 0 : _c.icon,
     isMultiMap: isMultiMap
   })), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column2
   }, /*#__PURE__*/React.createElement(Box, {
     className: "header-layer ".concat(hasMapPresetsModule ? 'mappresetsModule-enabled' : ''),
     sx: styles$6.text
-  }, (_d = (_c = settings === null || settings === void 0 ? void 0 : settings.layerName) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : 'Layer'), /*#__PURE__*/React.createElement(Box, {
+  }, (_e = (_d = settings === null || settings === void 0 ? void 0 : settings.layerName) === null || _d === void 0 ? void 0 : _d.title) !== null && _e !== void 0 ? _e : 'Layer'), /*#__PURE__*/React.createElement(Box, {
     className: "header-mapPresets",
     sx: {
       marginRight: 4
@@ -815,21 +865,21 @@ var DescriptionRow = function DescriptionRow(_ref) {
     className: columnClasses.column3
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$6.text
-  }, (_f = (_e = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _e === void 0 ? void 0 : _e.title) !== null && _f !== void 0 ? _f : 'Style')), /*#__PURE__*/React.createElement(Grid, {
+  }, (_g = (_f = settings === null || settings === void 0 ? void 0 : settings.layerStyle) === null || _f === void 0 ? void 0 : _f.title) !== null && _g !== void 0 ? _g : 'Style')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column4
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$6.text
-  }, (_h = (_g = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _g === void 0 ? void 0 : _g.title) !== null && _h !== void 0 ? _h : 'Opacity')), /*#__PURE__*/React.createElement(Grid, {
+  }, (_j = (_h = settings === null || settings === void 0 ? void 0 : settings.opacity) === null || _h === void 0 ? void 0 : _h.title) !== null && _j !== void 0 ? _j : 'Opacity')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column5
   }, /*#__PURE__*/React.createElement(Box, {
     sx: styles$6.text
-  }, (_k = (_j = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _j === void 0 ? void 0 : _j.title) !== null && _k !== void 0 ? _k : 'Dimensions')), /*#__PURE__*/React.createElement(Grid, {
+  }, (_l = (_k = settings === null || settings === void 0 ? void 0 : settings.dimensions) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : 'Dimensions')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.acceptanceTime
   }, /*#__PURE__*/React.createElement(Box, {
     sx: [styles$6.text, {
       whiteSpace: 'nowrap'
     }]
-  }, (_m = (_l = settings === null || settings === void 0 ? void 0 : settings.acceptanceTime) === null || _l === void 0 ? void 0 : _l.title) !== null && _m !== void 0 ? _m : 'Acc Time')), /*#__PURE__*/React.createElement(Grid, {
+  }, (_o = (_m = settings === null || settings === void 0 ? void 0 : settings.acceptanceTime) === null || _m === void 0 ? void 0 : _m.title) !== null && _o !== void 0 ? _o : 'Acc Time')), /*#__PURE__*/React.createElement(Grid, {
     className: columnClasses.column6
   }));
 };
@@ -2410,48 +2460,6 @@ var RenderStylesConnect = function RenderStylesConnect(_ref) {
   });
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 var RenderLayersConnect = function RenderLayersConnect(_ref) {
   var layerId = _ref.layerId,
     mapId = _ref.mapId,
@@ -3102,9 +3110,10 @@ var DragHandle = function DragHandle(_ref) {
   }, icon);
 };
 
-var LayerContainerRow = function LayerContainerRow(_ref) {
-  var mapId = _ref.mapId,
-    settings = _ref.settings;
+var LayerContainerRow = function LayerContainerRow(_a) {
+  var mapId = _a.mapId,
+    settings = _a.settings,
+    gridProps = __rest(_a, ["mapId", "settings"]);
   var dispatch = useDispatch();
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -3113,10 +3122,10 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
   var layerIds = useSelector(function (store) {
     return mapSelectors.getLayerIds(store, mapId);
   });
-  var layerMoveLayer = React.useCallback(function (_ref2) {
-    var mapId = _ref2.mapId,
-      oldIndex = _ref2.oldIndex,
-      newIndex = _ref2.newIndex;
+  var layerMoveLayer = React.useCallback(function (_ref) {
+    var mapId = _ref.mapId,
+      oldIndex = _ref.oldIndex,
+      newIndex = _ref.newIndex;
     return dispatch(mapActions.layerMoveLayer({
       mapId: mapId,
       oldIndex: oldIndex,
@@ -3129,8 +3138,8 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
     activeDragIndex = _React$useState4[0],
     setActiveDragIndex = _React$useState4[1];
   var onSetList = function onSetList() {}; // since we use activeDragIndex, we don't need inner state handling of ReactSortable
-  var onStart = React.useCallback(function (_ref3) {
-    var oldIndex = _ref3.oldIndex;
+  var onStart = React.useCallback(function (_ref2) {
+    var oldIndex = _ref2.oldIndex;
     setActiveDragIndex(oldIndex);
     if (Sortable.ghost) {
       Sortable.ghost.style.opacity = '1';
@@ -3141,9 +3150,9 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
       setActiveDragIndex(null);
     }
   }, [activeDragIndex]);
-  var onSortEnd = function onSortEnd(_ref4) {
-    var oldIndex = _ref4.oldIndex,
-      newIndex = _ref4.newIndex;
+  var onSortEnd = function onSortEnd(_ref3) {
+    var oldIndex = _ref3.oldIndex,
+      newIndex = _ref3.newIndex;
     setActiveDragIndex(null);
     layerMoveLayer({
       mapId: mapId,
@@ -3185,7 +3194,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
       return window.removeEventListener('wheel', preventDefault);
     };
   }, [keyPressed, preventDefault]);
-  return /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/React.createElement(Grid, Object.assign({
     container: true,
     item: true,
     "data-testid": "layerContainerRow",
@@ -3195,7 +3204,7 @@ var LayerContainerRow = function LayerContainerRow(_ref) {
       maxHeight: 'calc(100% - 10px)',
       overflow: 'auto'
     }
-  }, /*#__PURE__*/React.createElement(ReactSortable, {
+  }, gridProps), /*#__PURE__*/React.createElement(ReactSortable, {
     tag: "div",
     list: layerIds.map(function (layerId) {
       return {
@@ -4156,18 +4165,19 @@ var _onRenderTree = function onRenderTree(_ref) {
     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 BaseLayerRow = function BaseLayerRow(_a) {
+  var _b, _c, _d, _e, _f;
+  var mapId = _a.mapId,
+    _a$preloadedAvailable = _a.preloadedAvailableBaseLayers,
+    preloadedAvailableBaseLayers = _a$preloadedAvailable === void 0 ? availableDefaultBaseLayers : _a$preloadedAvailable,
+    _a$preloadedServices = _a.preloadedServices,
+    preloadedServices = _a$preloadedServices === void 0 ? preloadedDefaultBaseServices : _a$preloadedServices,
+    _a$tooltip = _a.tooltip,
+    tooltip = _a$tooltip === void 0 ? '' : _a$tooltip,
+    settings = _a.settings,
+    gridProps = __rest(_a, ["mapId", "preloadedAvailableBaseLayers", "preloadedServices", "tooltip", "settings"]);
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement(Grid, {
+  return /*#__PURE__*/React.createElement(Grid, Object.assign({
     container: true,
     item: true,
     "data-testid": "baseLayerRow",
@@ -4176,13 +4186,13 @@ var BaseLayerRow = function BaseLayerRow(_ref2) {
       width: '100%',
       height: '36px'
     }, theme.palette.geowebColors.layerManager.baseLayerRow.root)
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, gridProps), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: columnClasses.column1,
     sx: [{
       marginTop: '-2px'
     }, leftButtonsStyle]
-  }, !((_b = (_a = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _a === void 0 ? void 0 : _a.addLayersButton) === null || _b === void 0 ? void 0 : _b.isDisabled) && ( /*#__PURE__*/React.createElement(AddLayersButton, {
+  }, !((_c = (_b = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _b === void 0 ? void 0 : _b.addLayersButton) === null || _c === void 0 ? void 0 : _c.isDisabled) && ( /*#__PURE__*/React.createElement(AddLayersButton, {
     preloadedServices: preloadedServices,
     tooltip: tooltip,
     onRenderTree: function onRenderTree(service) {
@@ -4192,14 +4202,14 @@ var BaseLayerRow = function BaseLayerRow(_ref2) {
         layerType: LayerType.baseLayer
       });
     }
-  })), (_c = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _c === void 0 ? void 0 : _c.title), /*#__PURE__*/React.createElement(Grid, {
+  })), (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerRow) === null || _d === void 0 ? void 0 : _d.title), /*#__PURE__*/React.createElement(Grid, {
     item: true,
     className: columnClasses.column2
   }, /*#__PURE__*/React.createElement(BaseLayersConnect, {
     mapId: mapId,
     preloadedAvailableBaseLayers: preloadedAvailableBaseLayers,
-    tooltipPrefix: (_d = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _d === void 0 ? void 0 : _d.tooltipPrefix,
-    icon: (_e = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _e === void 0 ? void 0 : _e.icon
+    tooltipPrefix: (_e = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _e === void 0 ? void 0 : _e.tooltipPrefix,
+    icon: (_f = settings === null || settings === void 0 ? void 0 : settings.baseLayerDropdown) === null || _f === void 0 ? void 0 : _f.icon
   })));
 };
 
@@ -4233,7 +4243,8 @@ var HeaderOptionsConnect = function HeaderOptionsConnect(_ref) {
     mapId = _ref.mapId,
     onClickDockButton = _ref.onClickDockButton,
     onChangeSize = _ref.onChangeSize,
-    buttonSettings = _ref.buttonSettings;
+    buttonSettings = _ref.buttonSettings,
+    mapWidth = _ref.mapWidth;
   var activeMapId = useSelector(function (store) {
     return uiSelectors.getActiveWindowId(store);
   });
@@ -4246,7 +4257,8 @@ var HeaderOptionsConnect = function HeaderOptionsConnect(_ref) {
     shortcutsEnabled: shortcutsEnabled,
     onClickDockButton: onClickDockButton,
     onChangeSize: onChangeSize,
-    buttonSettings: buttonSettings
+    buttonSettings: buttonSettings,
+    mapWidth: mapWidth
   });
 };
 
@@ -4495,19 +4507,51 @@ var LayerManager = function LayerManager(_ref) {
     settings = _ref.settings,
     _ref$headerSize = _ref.headerSize,
     headerSize = _ref$headerSize === void 0 ? 'medium' : _ref$headerSize,
-    isMultiMap = _ref.isMultiMap;
+    isMultiMap = _ref.isMultiMap,
+    mapWidthRef = _ref.mapWidthRef;
   var _a, _b, _c, _d, _e, _f, _g;
   var minSize = {
     width: 100,
     height: 126
   };
+  var theme = useTheme();
+  renderCounter.count(LayerManager.name);
   var startSizeCalc = calculateStartSize(minSize, size, startPosition);
   var _React$useState = React.useState(startSizeCalc),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     sizeInState = _React$useState2[0],
     setSizeInState = _React$useState2[1];
-  var theme = useTheme();
-  renderCounter.count(LayerManager.name);
+  var _React$useState3 = React.useState(),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    mapWidth = _React$useState4[0],
+    setMapWidth = _React$useState4[1];
+  React.useEffect(function () {
+    var _a;
+    setMapWidth((_a = mapWidthRef === null || mapWidthRef === void 0 ? void 0 : mapWidthRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth);
+  }, [mapWidthRef, setMapWidth]);
+  React.useEffect(function () {
+    var _a;
+    var resizeThreshold = 65;
+    if (((_a = mapWidthRef === null || mapWidthRef === void 0 ? void 0 : mapWidthRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) === mapWidth) {
+      return;
+    }
+    if (mapWidth) {
+      if (mapWidth < sizeMedium.width + resizeThreshold) {
+        setSizeInState(sizeSmall);
+      } else if (mapWidth >= sizeMedium.width + resizeThreshold && mapWidth < sizeLarge.width + resizeThreshold && sizeInState.width !== sizeSmall.width) {
+        setSizeInState(sizeMedium);
+      }
+    }
+  }, [mapWidth, sizeInState, mapWidthRef]);
+  var returnSizeValue = function returnSizeValue(sizeInState) {
+    if (sizeInState === sizeSmall) {
+      return 'sizeSmall';
+    }
+    if (sizeInState === sizeMedium) {
+      return 'sizeMedium';
+    }
+    return 'sizeLarge';
+  };
   return /*#__PURE__*/React.createElement(ToolContainerDraggable, {
     title: title,
     startSize: sizeInState,
@@ -4519,6 +4563,7 @@ var LayerManager = function LayerManager(_ref) {
     headerSize: headerSize,
     bounds: bounds,
     "data-testid": "layerManagerWindow",
+    "data-size": returnSizeValue(sizeInState),
     onMouseDown: onMouseDown,
     onFocus: function onFocus() {
       return setFocused(true);
@@ -4533,6 +4578,7 @@ var LayerManager = function LayerManager(_ref) {
       isDockedLayerManager: isDockedLayerManager,
       mapId: mapId,
       onClickDockButton: onToggleDock,
+      mapWidth: mapWidth,
       onChangeSize: function onChangeSize(_ref2) {
         var width = _ref2.width;
         setSizeInState(Object.assign(Object.assign({}, sizeInState), {
@@ -4698,7 +4744,8 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
     _ref$isDocked = _ref.isDocked,
     isDocked = _ref$isDocked === void 0 ? false : _ref$isDocked,
     _ref$source = _ref.source,
-    source = _ref$source === void 0 ? 'app' : _ref$source;
+    source = _ref$source === void 0 ? 'app' : _ref$source,
+    mapWidthRef = _ref.mapWidthRef;
   var dispatch = useDispatch();
   var dialogType = getDialogType(initialMapId, isMultiMap, isDocked);
   var activeMapId = useSelector(function (store) {
@@ -4767,9 +4814,10 @@ var LayerManagerConnect = function LayerManagerConnect(_ref) {
       } : {
         top: 85,
         left: 50
-      }
+      },
+      mapWidthRef: mapWidthRef
     });
-  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, isDocked, isMultiMap, leftHeaderComponent, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, setFocused, showMapIdInTitle, title, uiError, uiIsLoading, uiSource]);
+  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, isDocked, isMultiMap, leftHeaderComponent, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, setFocused, showMapIdInTitle, title, uiError, uiIsLoading, uiSource, mapWidthRef]);
 };
 
 /* *
@@ -6784,6 +6832,7 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   var mapControlsPositionTop = title ? 24 : 8;
+  var mapWidthRef = /*#__PURE__*/React__default.createRef();
   return React__default.useMemo(function () {
     renderCounter.count("".concat(ConfigurableMapConnect.name, "_").concat(mapId));
     return /*#__PURE__*/React__default.createElement(Box, {
@@ -6793,7 +6842,8 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
         position: 'relative',
         overflow: 'hidden'
       },
-      "data-testid": "ConfigurableMap"
+      "data-testid": "ConfigurableMap",
+      ref: mapWidthRef
     }, title && ( /*#__PURE__*/React__default.createElement(Typography, {
       "data-testid": "mapTitle",
       sx: titleStyle
@@ -6845,9 +6895,10 @@ var ConfigurableMapConnect = function ConfigurableMapConnect(_a) {
     })), /*#__PURE__*/React__default.createElement(LayerManagerConnect, {
       mapId: mapId,
       bounds: "parent",
-      isDocked: true
+      isDocked: true,
+      mapWidthRef: mapWidthRef
     }));
-  }, [children, disableTimeSlider, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayLayerManagerAndLegendButtonInMap, displaySearchButtonInMap, displayTimeInMap, id, mapControls, mapControlsPositionTop, mapId, multiLegend, showClock, title]);
+  }, [children, disableTimeSlider, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayLayerManagerAndLegendButtonInMap, displaySearchButtonInMap, displayTimeInMap, id, mapControls, mapControlsPositionTop, mapId, multiLegend, showClock, title, mapWidthRef]);
 };
 
 /* *

package/package.json

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

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { Grid } from '@mui/material';
 import { layerTypes } from '@opengeoweb/store';
 import { layerSelectTypes } from '@opengeoweb/layer-select';
 import { LayerManagerCustomSettings } from '../LayerManagerUtils';
-interface BaseLayerRowProps {
+interface BaseLayerRowProps extends React.ComponentProps<typeof Grid> {
     mapId: string;
     preloadedAvailableBaseLayers?: layerTypes.Layer[];
     preloadedServices?: layerSelectTypes.LayerSelectService[];

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

@@ -1,7 +1,8 @@
+import { Grid } from '@mui/material';
 import * as React from 'react';
 import { uiTypes } from '@opengeoweb/store';
 import { LayerManagerCustomSettings } from '../LayerManagerUtils';
-interface DescriptionRowProps {
+interface DescriptionRowProps extends React.ComponentProps<typeof Grid> {
     mapId: string;
     mapPresetsModule?: React.ReactElement;
     source?: uiTypes.Source;

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { Grid } from '@mui/material';
 import { LayerManagerCustomSettings } from '../LayerManagerUtils';
-interface LayerContainerRowProps {
+interface LayerContainerRowProps extends React.ComponentProps<typeof Grid> {
     mapId: string;
     settings?: LayerManagerCustomSettings['content'];
 }

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

@@ -26,6 +26,7 @@ interface LayerManagerProps {
     settings?: LayerManagerCustomSettings;
     headerSize?: HeaderSize;
     isMultiMap?: boolean;
+    mapWidthRef?: React.RefObject<HTMLDivElement>;
 }
 declare const LayerManager: React.FC<LayerManagerProps>;
 export default LayerManager;

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

@@ -14,6 +14,7 @@ interface LayerManagerConnectProps {
     isMultiMap?: boolean;
     isDocked?: boolean;
     source?: uiTypes.Source;
+    mapWidthRef?: React.RefObject<HTMLDivElement>;
 }
 /**
  * Layer Managerconnected to the store displaying the layers forthe active map Id

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

@@ -29,6 +29,7 @@ interface HeaderOptionsProps {
     onClickDockButton: () => void;
     onChangeSize: (size: Size) => void;
     buttonSettings?: ToolbarButtonSettings;
+    mapWidth?: number;
 }
 export declare const sizeSmall: {
     width: number;

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

@@ -6,6 +6,7 @@ interface HeaderOptionsProps {
     onClickDockButton: () => void;
     onChangeSize: (size: Size) => void;
     buttonSettings?: ToolbarButtonSettings;
+    mapWidth?: number;
 }
 export declare const areShortcutsEnabled: (activeMapId: string, mapId: string, floatingLmOpen: boolean, isDockedLayerManager: boolean) => boolean;
 declare const HeaderOptionsConnect: React.FC<HeaderOptionsProps>;

package/src/lib/storybookUtils/HelperComponents.d.ts

@@ -9,7 +9,7 @@ interface ActionCardProps {
     name: string;
     description: string;
     exampleLayers?: ExampleLayer[];
-    children?: React.ReactChild;
+    children?: React.ReactNode;
 }
 export declare const ActionCard: React.FC<ActionCardProps>;
 export {};