@opengeoweb/core 9.6.0 → 9.7.0

package/index.esm.js

@@ -495,7 +495,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 +519,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, {
@@ -4233,7 +4240,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 +4254,8 @@ var HeaderOptionsConnect = function HeaderOptionsConnect(_ref) {
     shortcutsEnabled: shortcutsEnabled,
     onClickDockButton: onClickDockButton,
     onChangeSize: onChangeSize,
-    buttonSettings: buttonSettings
+    buttonSettings: buttonSettings,
+    mapWidth: mapWidth
   });
 };
 
@@ -4495,19 +4504,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 +4560,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 +4575,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 +4741,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 +4811,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 +6829,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 +6839,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 +6892,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.7.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

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 {};