@opengeoweb/shared 20.2.0 → 21.0.0

package/dist/index.esm.js

@@ -60,6 +60,7 @@ var en = {
 	"shared-shortcut-toggle-workspace-time-scroll": "Toggle workspace time scroll ON and OFF",
 	"shared-shortcut-open-location-search": "Open location search",
 	"shared-shortcut-open-workspace-menu": "Open workspace menu",
+	"shared-shortcut-open-view-preset-menu": "Open view presets menu",
 	"shared-shortcut-zoom-to-location": "Zoom map to location",
 	"shared-shortcut-mouse-click": "+ Mouse click",
 	"shared-shortcut-split-button": "click split window button",
@@ -130,6 +131,7 @@ var fi = {
 	"shared-shortcut-toggle-workspace-time-scroll": "Aseta työtilan ajan scrollaus päälle tai pois päältä",
 	"shared-shortcut-open-location-search": "Avaa sijainnin haku",
 	"shared-shortcut-open-workspace-menu": "Avaa workspace menu",
+	"shared-shortcut-open-view-preset-menu": "Avaa view preset menu",
 	"shared-shortcut-zoom-to-location": "Zoomaa kartta sijaintiin",
 	"shared-shortcut-mouse-click": "+ hiiren napsautus",
 	"shared-shortcut-split-button": "napsauta Jaa ikkuna -painiketta",
@@ -197,6 +199,7 @@ var no = {
 	"shared-shortcut-toggle-workspace-time-scroll": "ikke oversatt",
 	"shared-shortcut-open-location-search": "Åpne stedsøk",
 	"shared-shortcut-open-workspace-menu": "Åpne arbeidsflater",
+	"shared-shortcut-open-view-preset-menu": "Åpne snarveier",
 	"shared-shortcut-zoom-to-location": "Zoom kart til sted",
 	"shared-shortcut-mouse-click": "+ museklikk",
 	"shared-shortcut-copy-view-preset-content-split-window": "kopier over viewpreset innhold når vindu deles",
@@ -266,6 +269,7 @@ var nl = {
 	"shared-shortcut-toggle-workspace-time-scroll": "Zet workspace tijd scrollen AAN en UIT",
 	"shared-shortcut-open-location-search": "Open locatie zoeken",
 	"shared-shortcut-open-workspace-menu": "Open workspace menu",
+	"shared-shortcut-open-view-preset-menu": "Open view presets menu",
 	"shared-shortcut-zoom-to-location": "Zoom kaart naar locatie",
 	"shared-shortcut-mouse-click": "+ Muisklik",
 	"shared-clear": "Wissen",
@@ -3628,6 +3632,16 @@ var ShortcutList = function ShortcutList(_ref) {
       type: "icon",
       children: "W"
     })
+  }, {
+    titleKey: 'shared-shortcut-open-view-preset-menu',
+    description: jsx(ShortCutSegment, {
+      type: "icon",
+      children: "P"
+    }),
+    descriptionMac: jsx(ShortCutSegment, {
+      type: "icon",
+      children: "P"
+    })
   }, {
     titleKey: 'shared-shortcut-zoom-to-location',
     description: jsxs(Fragment, {
@@ -6938,9 +6952,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
   });
 };
 
-var PANEL_MIN_WIDTH = 24;
-// Tall enough to show the drag handle and title of a collapsed vertical panel
-var PANEL_MIN_HEIGHT = 36;
+var PANEL_COLLAPSED_SIZE = 24;
 var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
   var name = _ref.name,
     minWidthProp = _ref.minWidth,
@@ -6953,16 +6965,21 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
     onSetCustomWidth = _ref.onSetCustomWidth,
     _onResizeStart = _ref.onResizeStart,
     _onResizeEnd = _ref.onResizeEnd,
-    customWidth = _ref.customWidth,
+    customWidthProp = _ref.customWidth,
+    initialSize = _ref.initialSize,
+    _ref$allowOverflow = _ref.allowOverflow,
+    allowOverflow = _ref$allowOverflow === void 0 ? false : _ref$allowOverflow,
     isDisplayed = _ref.isDisplayed,
     resizeOnViewCloseSignal = _ref.resizeOnViewCloseSignal,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  var customWidth = initialSize != null ? initialSize : customWidthProp;
   var isVertical = direction === 'vertical';
-  var minWidth = minWidthProp != null ? minWidthProp : isVertical ? PANEL_MIN_HEIGHT : PANEL_MIN_WIDTH;
+  var openMin = Math.max(PANEL_COLLAPSED_SIZE, minWidthProp != null ? minWidthProp : PANEL_COLLAPSED_SIZE);
   var sizeKey = isVertical ? 'height' : 'width';
   var containerRef = React.useRef(null);
   var widthRef = React.useRef(null);
+  var previousCustomWidthRef = React.useRef(customWidth);
   var isDraggingRef = React.useRef(false);
   var _React$useState = React.useState(false),
     autoSizing = _React$useState[0],
@@ -6970,14 +6987,14 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
   var _React$useState2 = React.useState(false),
     growing = _React$useState2[0],
     setGrowing = _React$useState2[1];
-  var growBasisRef = React.useRef(minWidth);
+  var growBasisRef = React.useRef(openMin);
   var previousResizeSignalRef = React.useRef(resizeOnViewCloseSignal);
   var _useResizable = useResizable({
       containerRef: containerRef,
       axis: isVertical ? 'y' : 'x',
-      min: minWidth,
+      min: PANEL_COLLAPSED_SIZE,
       max: maxWidth || undefined,
-      initial: customWidth != null ? customWidth : minWidth,
+      initial: customWidth != null ? customWidth : openMin,
       onResizeStart: function onResizeStart() {
         isDraggingRef.current = true;
         setAutoSizing(false);
@@ -6986,13 +7003,13 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
       onResizeEnd: function onResizeEnd(_ref2) {
         var position = _ref2.position;
         isDraggingRef.current = false;
-        if (position <= minWidth) {
+        if (position <= PANEL_COLLAPSED_SIZE) {
           widthRef.current = null;
           onSetIsOpen == null || onSetIsOpen(false);
         } else {
-          widthRef.current = position;
+          widthRef.current = Math.max(position, openMin);
           onSetIsOpen == null || onSetIsOpen(true);
-          onSetCustomWidth == null || onSetCustomWidth(position);
+          onSetCustomWidth == null || onSetCustomWidth(Math.max(position, openMin));
         }
         // Fire after the open/close calls so consumers tracking the drag
         // lifecycle (e.g. a "resizing" flag) reset only once the close above
@@ -7008,7 +7025,7 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
     var targetWidth = (_ref3 = (_widthRef$current = widthRef.current) != null ? _widthRef$current : customWidth) != null ? _ref3 : null;
     if (targetWidth != null) {
       setAutoSizing(false);
-      setContainerWidth(Math.max(targetWidth, minWidth));
+      setContainerWidth(Math.max(targetWidth, openMin));
       onSetIsOpen == null || onSetIsOpen(true);
       return;
     }
@@ -7016,11 +7033,15 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
     onSetIsOpen == null || onSetIsOpen(true);
   };
   var closePanel = React.useCallback(function () {
-    setContainerWidth(minWidth);
+    setContainerWidth(PANEL_COLLAPSED_SIZE);
     onSetIsOpen == null || onSetIsOpen(false);
     setAutoSizing(false);
-  }, [minWidth, setContainerWidth, onSetIsOpen]);
+  }, [setContainerWidth, onSetIsOpen]);
   React.useEffect(function () {
+    if (previousCustomWidthRef.current !== customWidth) {
+      previousCustomWidthRef.current = customWidth;
+      widthRef.current = customWidth != null ? customWidth : null;
+    }
     // While dragging, useResizable owns containerWidth based on the pointer.
     // Running the width-syncing branches here would jump away from the user's
     // drag position, so skip this effect until the drag ends.
@@ -7032,28 +7053,28 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
       var targetWidth = (_ref4 = (_widthRef$current2 = widthRef.current) != null ? _widthRef$current2 : customWidth) != null ? _ref4 : null;
       if (targetWidth != null) {
         setAutoSizing(false);
-        setContainerWidth(Math.max(targetWidth, minWidth));
+        setContainerWidth(Math.max(targetWidth, openMin));
       } else {
         setAutoSizing(true);
       }
     } else {
-      setContainerWidth(minWidth);
+      setContainerWidth(PANEL_COLLAPSED_SIZE);
       setAutoSizing(false);
     }
-  }, [isOpen, minWidth, setContainerWidth, customWidth]);
+  }, [isOpen, openMin, setContainerWidth, customWidth]);
   // Flip open/closed state during an active drag as the width crosses the
-  // minWidth threshold, so the panel can close and re-open within a
+  // collapsed-size threshold, so the panel can close and re-open within a
   // single drag gesture without waiting for pointer release.
   React.useEffect(function () {
     if (!isDraggingRef.current) {
       return;
     }
-    if (isOpen && containerWidth <= minWidth) {
+    if (isOpen && containerWidth <= PANEL_COLLAPSED_SIZE) {
       onSetIsOpen == null || onSetIsOpen(false);
-    } else if (!isOpen && containerWidth > minWidth) {
+    } else if (!isOpen && containerWidth > PANEL_COLLAPSED_SIZE) {
       onSetIsOpen == null || onSetIsOpen(true);
     }
-  }, [isOpen, containerWidth, minWidth, onSetIsOpen]);
+  }, [isOpen, containerWidth, onSetIsOpen]);
   React.useEffect(function () {
     var viewCloseSignalChanged = previousResizeSignalRef.current !== resizeOnViewCloseSignal;
     if (!viewCloseSignalChanged) {
@@ -7062,10 +7083,10 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
     previousResizeSignalRef.current = resizeOnViewCloseSignal;
     var panelCanReclaimFreedSpace = isOpen && !autoSizing && !isDraggingRef.current;
     if (panelCanReclaimFreedSpace) {
-      growBasisRef.current = Math.max(containerWidth, minWidth);
+      growBasisRef.current = Math.max(containerWidth, openMin);
       setGrowing(true);
     }
-  }, [resizeOnViewCloseSignal, isOpen, autoSizing, containerWidth, minWidth]);
+  }, [resizeOnViewCloseSignal, isOpen, autoSizing, containerWidth, openMin]);
   React.useLayoutEffect(function () {
     if (autoSizing) {
       return;
@@ -7073,14 +7094,14 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
     if (isDraggingRef.current) {
       return;
     }
-    if (!isOpen && containerWidth > minWidth) {
-      setContainerWidth(minWidth);
+    if (!isOpen && containerWidth > PANEL_COLLAPSED_SIZE) {
+      setContainerWidth(PANEL_COLLAPSED_SIZE);
       return;
     }
-    if (isOpen && containerWidth <= minWidth) {
+    if (isOpen && containerWidth <= PANEL_COLLAPSED_SIZE) {
       setAutoSizing(true);
     }
-  }, [autoSizing, containerWidth, isOpen, minWidth, setContainerWidth]);
+  }, [autoSizing, containerWidth, isOpen, setContainerWidth]);
   React.useLayoutEffect(function () {
     if (!autoSizing || !containerRef.current) {
       return;
@@ -7092,7 +7113,7 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
         return;
       }
       var rect = containerRef.current.getBoundingClientRect();
-      var calculatedWidth = Math.max(Math.round(rect[sizeKey]), minWidth);
+      var calculatedWidth = Math.max(Math.round(rect[sizeKey]), openMin);
       setContainerWidth(calculatedWidth);
       widthRef.current = calculatedWidth;
       setAutoSizing(false);
@@ -7105,7 +7126,7 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
       cancelAnimationFrame(raf1);
       cancelAnimationFrame(raf2);
     };
-  }, [autoSizing, minWidth, setContainerWidth, sizeKey]);
+  }, [autoSizing, openMin, setContainerWidth, sizeKey]);
   React.useLayoutEffect(function () {
     if (!growing || !containerRef.current) {
       return;
@@ -7117,7 +7138,7 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
         return;
       }
       var rect = containerRef.current.getBoundingClientRect();
-      var lockedWidth = Math.max(Math.round(rect[sizeKey]), minWidth);
+      var lockedWidth = Math.max(Math.round(rect[sizeKey]), openMin);
       setContainerWidth(lockedWidth);
       widthRef.current = lockedWidth;
       setGrowing(false);
@@ -7130,34 +7151,34 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
       cancelAnimationFrame(growRaf1);
       cancelAnimationFrame(growRaf2);
     };
-  }, [growing, minWidth, setContainerWidth, sizeKey]);
+  }, [growing, openMin, setContainerWidth, sizeKey]);
   var sizeProps = function sizeProps(size, min) {
     return isVertical ? {
       width: '100%',
       height: size,
       minHeight: min,
-      maxHeight: maxWidth || '100%'
+      maxHeight: maxWidth || (allowOverflow ? undefined : '100%')
     } : {
       width: size,
       minWidth: min,
-      maxWidth: maxWidth || '100%'
+      maxWidth: maxWidth || (allowOverflow ? undefined : '100%')
     };
   };
   var cardStyleWhenAuto = Object.assign({
     display: isDisplayed ? 'block' : 'none',
     flex: '1 1 100%',
     boxSizing: 'border-box'
-  }, sizeProps('auto', 0));
+  }, sizeProps('auto', isOpen ? openMin : PANEL_COLLAPSED_SIZE));
   var cardStyleWhenLocked = Object.assign({
     display: isDisplayed ? 'block' : 'none',
-    flex: '0 1 auto',
+    flex: allowOverflow ? '0 0 auto' : '0 1 auto',
     boxSizing: 'border-box'
-  }, sizeProps(containerWidth, minWidth));
+  }, sizeProps(isOpen ? Math.max(containerWidth, openMin) : containerWidth, isOpen ? openMin : PANEL_COLLAPSED_SIZE));
   var cardStyleWhenGrowing = Object.assign({
     display: isDisplayed ? 'block' : 'none',
     flex: growBasisRef.current + " 1 0px",
     boxSizing: 'border-box'
-  }, sizeProps('auto', minWidth));
+  }, sizeProps('auto', isOpen ? openMin : PANEL_COLLAPSED_SIZE));
   var getActiveCardStyle = function getActiveCardStyle() {
     if (growing) {
       return cardStyleWhenGrowing;
@@ -7200,7 +7221,8 @@ var ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
             return event.stopPropagation();
           },
           sx: {
-            paddingTop: '4px'
+            display: 'flex',
+            alignItems: 'center'
           },
           children: handleButtonComponent
         }), jsxs(Box, {
@@ -7352,7 +7374,10 @@ var ResizablePanelStandalone = /*#__PURE__*/React.forwardRef(function (_ref, ref
     onOpenChange = _ref.onOpenChange,
     onResizeStart = _ref.onResizeStart,
     onResizeEnd = _ref.onResizeEnd,
-    direction = _ref.direction;
+    direction = _ref.direction,
+    initialSize = _ref.initialSize,
+    allowOverflow = _ref.allowOverflow,
+    onSizeChange = _ref.onSizeChange;
   var _React$useState = React.useState(true),
     isOpen = _React$useState[0],
     setIsOpen = _React$useState[1];
@@ -7364,10 +7389,12 @@ var ResizablePanelStandalone = /*#__PURE__*/React.forwardRef(function (_ref, ref
     onOpenChange == null || onOpenChange(open);
   }, [onOpenChange]);
   return jsx(ResizablePanel, {
+    allowOverflow: allowOverflow,
     customWidth: customWidth,
     direction: direction,
     handleButtonComponent: handleButtonComponent,
     headerAction: headerAction,
+    initialSize: initialSize,
     isDisplayed: isDisplayed,
     isOpen: isOpen,
     maxWidth: maxWidth,
@@ -7375,7 +7402,10 @@ var ResizablePanelStandalone = /*#__PURE__*/React.forwardRef(function (_ref, ref
     name: name,
     onResizeEnd: onResizeEnd,
     onResizeStart: onResizeStart,
-    onSetCustomWidth: setCustomWidth,
+    onSetCustomWidth: function onSetCustomWidth(size) {
+      setCustomWidth(size);
+      onSizeChange == null || onSizeChange(size);
+    },
     onSetIsOpen: handleSetIsOpen,
     ref: ref,
     children: children
@@ -7383,6 +7413,234 @@ var ResizablePanelStandalone = /*#__PURE__*/React.forwardRef(function (_ref, ref
 });
 ResizablePanelStandalone.displayName = 'ResizablePanelStandalone';
 
+/* *
+ * 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 2026 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2026 - Finnish Meteorological Institute (FMI)
+ * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var SORTABLE_PANEL_GAP = 4;
+/** Equal shares, or proportional growth, constrained by each panel's limits. */
+var allocatePanelSpace = function allocatePanelSpace(panels, available) {
+  // Find the common scale whose clamped shares fill the available space.
+  // If minima exceed the viewport they deliberately produce overflow.
+  var low = 0;
+  var high = Math.max(0, available);
+  var sizeAt = function sizeAt(panel, scale) {
+    var _panel$maximum, _panel$weight;
+    return Math.max(panel.minimum, Math.min((_panel$maximum = panel.maximum) != null ? _panel$maximum : Infinity, scale * ((_panel$weight = panel.weight) != null ? _panel$weight : 1)));
+  };
+  var _loop = function _loop() {
+    var scale = (low + high) / 2;
+    var used = panels.reduce(function (sum, panel) {
+      return sum + sizeAt(panel, scale);
+    }, 0);
+    if (used > available) {
+      high = scale;
+    } else {
+      low = scale;
+    }
+  };
+  for (var iteration = 0; iteration < 60; iteration += 1) {
+    _loop();
+  }
+  return Object.fromEntries(panels.map(function (panel) {
+    return [panel.id, Math.floor(sizeAt(panel, low) + 1e-7)];
+  }));
+};
+var usePanelSizes = function usePanelSizes(panels, direction, sizing, growSignal) {
+  var viewportRef = React.useRef(null);
+  var rootRef = React.useRef(null);
+  var latestPanels = React.useRef(panels);
+  var cached = React.useRef({});
+  var localOpen = React.useRef({});
+  var userResized = React.useRef(false);
+  var previousExtent = React.useRef(undefined);
+  var previousGrowSignal = React.useRef(growSignal);
+  var _React$useState = React.useState({}),
+    sizes = _React$useState[0],
+    setSizes = _React$useState[1];
+  var measure = React.useCallback(function (grow) {
+    if (grow === void 0) {
+      grow = false;
+    }
+    var viewport = viewportRef.current;
+    var root = rootRef.current;
+    if (!sizing || !viewport || !root) {
+      return;
+    }
+    var vertical = direction === 'vertical';
+    var extent = vertical ? viewport.clientHeight : viewport.clientWidth;
+    var extentChanged = extent > 0 && previousExtent.current !== extent;
+    if (extent > 0) {
+      previousExtent.current = extent;
+    }
+    var visible = latestPanels.current.filter(function (panel) {
+      return panel.isDisplayed;
+    });
+    var rootStyle = window.getComputedStyle(root);
+    var spacing = (parseFloat(vertical ? rootStyle.paddingTop : rootStyle.paddingLeft) || 0) + (parseFloat(vertical ? rootStyle.paddingBottom : rootStyle.paddingRight) || 0) + Math.max(0, visible.length - 1) * SORTABLE_PANEL_GAP;
+    var minimum = function minimum(panel) {
+      var _panel$minWidth;
+      return Math.max(PANEL_COLLAPSED_SIZE, (_panel$minWidth = panel.minWidth) != null ? _panel$minWidth : PANEL_COLLAPSED_SIZE);
+    };
+    var open = function open(panel) {
+      var _localOpen$current$pa;
+      return (_localOpen$current$pa = localOpen.current[panel.id]) != null ? _localOpen$current$pa : panel.isOpen !== false;
+    };
+    var next = Object.assign({}, cached.current);
+    latestPanels.current.forEach(function (panel) {
+      var _next$panel$id;
+      if (((_next$panel$id = next[panel.id]) == null ? void 0 : _next$panel$id.savedSize) !== panel.customSize) {
+        delete next[panel.id];
+      }
+      if (panel.customSize !== undefined && !next[panel.id]) {
+        var _panel$maxWidth;
+        next[panel.id] = {
+          size: Math.max(minimum(panel), Math.min((_panel$maxWidth = panel.maxWidth) != null ? _panel$maxWidth : Infinity, panel.customSize)),
+          savedSize: panel.customSize
+        };
+      }
+    });
+    var pending = visible.filter(function (panel) {
+      return extent > 0 && open(panel) && panel.customSize === undefined && (!next[panel.id] || extentChanged && sizing === 'untilManualResize' && !userResized.current);
+    });
+    var pendingIds = new Set(pending.map(function (panel) {
+      return panel.id;
+    }));
+    var used = visible.reduce(function (sum, panel) {
+      var _next$panel$id$size, _next$panel$id2;
+      if (!open(panel)) {
+        return sum + PANEL_COLLAPSED_SIZE;
+      }
+      return sum + (pendingIds.has(panel.id) ? 0 : (_next$panel$id$size = (_next$panel$id2 = next[panel.id]) == null ? void 0 : _next$panel$id2.size) != null ? _next$panel$id$size : minimum(panel));
+    }, 0);
+    var allocated = allocatePanelSpace(pending.map(function (panel) {
+      return {
+        id: panel.id,
+        minimum: minimum(panel),
+        maximum: panel.maxWidth
+      };
+    }), extent - spacing - used);
+    pending.forEach(function (panel) {
+      next[panel.id] = {
+        size: allocated[panel.id]
+      };
+    });
+    if (grow && extent > 0) {
+      var closedSize = visible.filter(function (panel) {
+        return !open(panel);
+      }).length * PANEL_COLLAPSED_SIZE;
+      var grown = allocatePanelSpace(visible.filter(open).map(function (panel) {
+        var _next$panel$id$size2, _next$panel$id3, _next$panel$id$size3, _next$panel$id4;
+        return {
+          id: panel.id,
+          minimum: (_next$panel$id$size2 = (_next$panel$id3 = next[panel.id]) == null ? void 0 : _next$panel$id3.size) != null ? _next$panel$id$size2 : minimum(panel),
+          maximum: panel.maxWidth,
+          weight: (_next$panel$id$size3 = (_next$panel$id4 = next[panel.id]) == null ? void 0 : _next$panel$id4.size) != null ? _next$panel$id$size3 : minimum(panel)
+        };
+      }), extent - spacing - closedSize);
+      Object.entries(grown).forEach(function (_ref) {
+        var id = _ref[0],
+          size = _ref[1];
+        next[id] = Object.assign({}, next[id], {
+          size: size
+        });
+      });
+    }
+    var ids = new Set(latestPanels.current.map(function (panel) {
+      return panel.id;
+    }));
+    Object.keys(next).forEach(function (id) {
+      if (!ids.has(id)) {
+        delete next[id];
+        delete localOpen.current[id];
+      }
+    });
+    cached.current = next;
+    var nextSizes = Object.fromEntries(Object.entries(next).map(function (_ref2) {
+      var id = _ref2[0],
+        value = _ref2[1];
+      return [id, value.size];
+    }));
+    setSizes(function (previous) {
+      return Object.keys(previous).length === Object.keys(nextSizes).length && Object.entries(nextSizes).every(function (_ref3) {
+        var id = _ref3[0],
+          size = _ref3[1];
+        return previous[id] === size;
+      }) ? previous : nextSizes;
+    });
+  }, [direction, sizing]);
+  React.useLayoutEffect(function () {
+    panels.forEach(function (panel) {
+      var previous = latestPanels.current.find(function (_ref4) {
+        var id = _ref4.id;
+        return id === panel.id;
+      });
+      if ((previous == null ? void 0 : previous.isOpen) !== panel.isOpen) {
+        delete localOpen.current[panel.id];
+      }
+    });
+    latestPanels.current = panels;
+    var grow = previousGrowSignal.current !== growSignal;
+    previousGrowSignal.current = growSignal;
+    measure(grow);
+  }, [panels, growSignal, measure]);
+  React.useLayoutEffect(function () {
+    var viewport = viewportRef.current;
+    if (!sizing || !viewport || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    var observer = new ResizeObserver(function () {
+      return measure();
+    });
+    observer.observe(viewport);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [sizing, measure]);
+  var onSizeChange = React.useCallback(function (id, size) {
+    var _latestPanels$current;
+    userResized.current = true;
+    cached.current[id] = {
+      size: size,
+      savedSize: (_latestPanels$current = latestPanels.current.find(function (panel) {
+        return panel.id === id;
+      })) == null ? void 0 : _latestPanels$current.customSize
+    };
+    setSizes(function (previous) {
+      var _Object$assign;
+      return Object.assign({}, previous, (_Object$assign = {}, _Object$assign[id] = size, _Object$assign));
+    });
+  }, []);
+  var onResizeStart = React.useCallback(function () {
+    userResized.current = true;
+  }, []);
+  var onOpenChange = React.useCallback(function (id, open) {
+    localOpen.current[id] = open;
+    measure();
+  }, [measure]);
+  return {
+    viewportRef: viewportRef,
+    rootRef: rootRef,
+    sizes: sizes,
+    onSizeChange: onSizeChange,
+    onOpenChange: onOpenChange,
+    onResizeStart: onResizeStart
+  };
+};
+
 var SortablePanels = function SortablePanels(_ref) {
   var panels = _ref.panels,
     onOrderChange = _ref.onOrderChange,
@@ -7390,15 +7648,36 @@ var SortablePanels = function SortablePanels(_ref) {
     PanelComponent = _ref$panelComponent === void 0 ? ResizablePanelStandalone : _ref$panelComponent,
     viewId = _ref.viewId,
     _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
-  return jsx(Box, {
-    sx: {
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+    sizing = _ref.sizing,
+    _ref$allowOverflow = _ref.allowOverflow,
+    allowOverflow = _ref$allowOverflow === void 0 ? false : _ref$allowOverflow,
+    resizeOnViewCloseSignal = _ref.resizeOnViewCloseSignal;
+  var _usePanelSizes = usePanelSizes(panels, direction, sizing, resizeOnViewCloseSignal),
+    viewportRef = _usePanelSizes.viewportRef,
+    rootRef = _usePanelSizes.rootRef,
+    sizes = _usePanelSizes.sizes,
+    onSizeChange = _usePanelSizes.onSizeChange,
+    _onOpenChange = _usePanelSizes.onOpenChange,
+    _onResizeStart = _usePanelSizes.onResizeStart;
+  var content = jsx(Box, {
+    ref: rootRef,
+    sx: Object.assign({
       display: 'flex',
       flexDirection: direction === 'vertical' ? 'column' : 'row',
       width: '100%',
-      height: '100%',
+      // Vertical lists must grow with their panels so the scroll container
+      // includes the final panel and the bottom padding.
+      height: direction === 'vertical' && allowOverflow ? 'auto' : '100%',
+      boxSizing: 'border-box'
+    }, direction === 'vertical' && allowOverflow && {
+      minHeight: '100%'
+    }, {
       padding: 1
-    },
+    }, sizing && direction === 'horizontal' && allowOverflow && {
+      width: 'max-content',
+      minWidth: '100%'
+    }),
     children: jsx(ReactSortable, {
       animation: 200,
       direction: direction,
@@ -7426,15 +7705,20 @@ var SortablePanels = function SortablePanels(_ref) {
           };
         }));
       },
-      style: {
+      style: Object.assign({
         display: 'flex',
         flexDirection: direction === 'vertical' ? 'column' : 'row',
-        gap: 4,
-        width: '100%'
-      },
+        gap: SORTABLE_PANEL_GAP,
+        width: '100%',
+        minWidth: 0,
+        minHeight: 0
+      }, direction === 'vertical' && allowOverflow && {
+        flexShrink: 0
+      }),
       tag: "div",
       children: panels.map(function (panel) {
         return jsx(PanelComponent, {
+          allowOverflow: allowOverflow,
           direction: direction,
           handleButtonComponent: jsx(IconButton, {
             "aria-label": "drag-handle",
@@ -7449,13 +7733,27 @@ var SortablePanels = function SortablePanels(_ref) {
             })
           }),
           headerAction: panel.headerAction,
+          initialSize: sizing ? sizes[panel.id] : undefined,
           isDisplayed: panel.isDisplayed,
           maxWidth: panel.maxWidth,
           minWidth: panel.minWidth,
           name: panel.name,
-          onOpenChange: panel.onOpenChange,
+          onOpenChange: function onOpenChange(open) {
+            if (sizing) {
+              _onOpenChange(panel.id, open);
+            }
+            panel.onOpenChange == null || panel.onOpenChange(open);
+          },
           onResizeEnd: panel.onResizeEnd,
-          onResizeStart: panel.onResizeStart,
+          onResizeStart: function onResizeStart() {
+            if (sizing) {
+              _onResizeStart();
+            }
+            panel.onResizeStart == null || panel.onResizeStart();
+          },
+          onSizeChange: sizing ? function (size) {
+            return onSizeChange(panel.id, size);
+          } : undefined,
           panelId: panel.id,
           ref: panel.panelRef,
           viewId: viewId,
@@ -7464,6 +7762,17 @@ var SortablePanels = function SortablePanels(_ref) {
       })
     })
   });
+  return sizing ? jsx(Box, {
+    ref: viewportRef,
+    sx: {
+      width: '100%',
+      height: '100%',
+      minHeight: 0,
+      minWidth: 0,
+      overflow: allowOverflow ? 'auto' : 'hidden'
+    },
+    children: content
+  }) : content;
 };
 
 /* *
@@ -7490,4 +7799,4 @@ var SystemScope = {
   plugin: 'plugin'
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomDialogHeader, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DateTimePicker, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, LegendToggleButton, NumberWithUnitField, PROJECTION, ResizeComponent as Resizable, ResizablePanel, ResizablePanelStandalone, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, SortablePanels, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, browserNavigation, calculateDialogSizeAndPosition, calculateStartSize, convertNumericInputValue, index$1 as dateUtils, defaultDelay, getAllowedKeys, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAuthError, isAxiosAuthError, isAxiosError, isDialogFocused, isTargetInteractiveInput, linkifyText, loadAllTranslations, pickerDateToUTC, pollingIntervalTimeout, index as referenceTimeUtils, renderCounter, safelyInitI18nForTestsAndStories, sessionStorageProvider, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useResizeObserver, useScrollingInIsolation, useUserMenu, useWheelStopPropagation, utcToPickerDate };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomDialogHeader, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DateTimePicker, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, LegendToggleButton, NumberWithUnitField, PANEL_COLLAPSED_SIZE, PROJECTION, ResizeComponent as Resizable, ResizablePanel, ResizablePanelStandalone, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, SortablePanels, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, browserNavigation, calculateDialogSizeAndPosition, calculateStartSize, convertNumericInputValue, index$1 as dateUtils, defaultDelay, getAllowedKeys, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAuthError, isAxiosAuthError, isAxiosError, isDialogFocused, isTargetInteractiveInput, linkifyText, loadAllTranslations, pickerDateToUTC, pollingIntervalTimeout, index as referenceTimeUtils, renderCounter, safelyInitI18nForTestsAndStories, sessionStorageProvider, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useResizeObserver, useScrollingInIsolation, useUserMenu, useWheelStopPropagation, utcToPickerDate };

package/dist/src/lib/components/ResizablePanel/ResizablePanel.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface ResizablePanelProps {
     name: string;
+    /** Minimum expanded width, or height in vertical mode. */
     minWidth?: number;
     maxWidth?: number;
     isOpen?: boolean;
@@ -12,6 +13,9 @@ export interface ResizablePanelProps {
     onResizeStart?: () => void;
     onResizeEnd?: () => void;
     customWidth?: number;
+    /** Size allocated by the parent layout, including temporary growth. */
+    initialSize?: number;
+    allowOverflow?: boolean;
     isDisplayed?: boolean;
     resizeOnViewCloseSignal?: number;
     /**
@@ -20,4 +24,5 @@ export interface ResizablePanelProps {
      */
     direction?: 'horizontal' | 'vertical';
 }
+export declare const PANEL_COLLAPSED_SIZE = 24;
 export declare const ResizablePanel: React.ForwardRefExoticComponent<ResizablePanelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/lib/components/ResizablePanel/ResizablePanelStandalone.d.ts

@@ -17,6 +17,9 @@ export interface ResizablePanelWrapperProps {
     handleButtonComponent?: React.ReactElement;
     maxWidth?: number;
     minWidth?: number;
+    initialSize?: number;
+    allowOverflow?: boolean;
+    onSizeChange?: (size: number) => void;
     onOpenChange?: (isOpen: boolean) => void;
     onResizeStart?: () => void;
     onResizeEnd?: () => void;

package/dist/src/lib/components/ResizablePanel/index.d.ts

@@ -1,4 +1,4 @@
-export { ResizablePanel } from './ResizablePanel';
+export { ResizablePanel, PANEL_COLLAPSED_SIZE } from './ResizablePanel';
 export type { ResizablePanelProps } from './ResizablePanel';
 export { ResizablePanelStandalone } from './ResizablePanelStandalone';
 export type { ResizablePanelWrapperProps, ResizablePanelComponent, } from './ResizablePanelStandalone';

package/dist/src/lib/components/SortablePanels/SortablePanels.d.ts

@@ -4,6 +4,8 @@ export interface SortablePanelItem {
     id: string;
     name: string;
     isDisplayed: boolean;
+    isOpen?: boolean;
+    customSize?: number;
     minWidth?: number;
     maxWidth?: number;
     headerAction?: React.ReactElement;
@@ -28,5 +30,11 @@ export interface SortablePanelsProps {
     viewId?: string;
     /** Direction in which panels are laid out, sorted and resized. Defaults to 'horizontal'. */
     direction?: 'horizontal' | 'vertical';
+    /** Fit unsized panels once, or follow the viewport until a manual resize. */
+    sizing?: 'initial' | 'untilManualResize';
+    /** Preserve panel sizes and scroll when they exceed the available space. */
+    allowOverflow?: boolean;
+    /** Explicitly grow open panels in proportion to their current sizes. */
+    resizeOnViewCloseSignal?: number;
 }
-export declare const SortablePanels: ({ panels, onOrderChange, panelComponent: PanelComponent, viewId, direction, }: SortablePanelsProps) => React.ReactElement;
+export declare const SortablePanels: ({ panels, onOrderChange, panelComponent: PanelComponent, viewId, direction, sizing, allowOverflow, resizeOnViewCloseSignal, }: SortablePanelsProps) => React.ReactElement;

package/dist/src/lib/components/SortablePanels/usePanelSizes.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { SortablePanelItem } from './SortablePanels';
+export declare const SORTABLE_PANEL_GAP = 4;
+interface Allocation {
+    id: string;
+    minimum: number;
+    maximum?: number;
+    weight?: number;
+}
+/** Equal shares, or proportional growth, constrained by each panel's limits. */
+export declare const allocatePanelSpace: (panels: Allocation[], available: number) => Record<string, number>;
+export declare const usePanelSizes: (panels: SortablePanelItem[], direction: "horizontal" | "vertical", sizing: "initial" | "untilManualResize" | undefined, growSignal: number | undefined) => {
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    rootRef: React.RefObject<HTMLDivElement | null>;
+    sizes: Record<string, number>;
+    onSizeChange: (id: string, size: number) => void;
+    onResizeStart: () => void;
+    onOpenChange: (id: string, open: boolean) => void;
+};
+export {};

package/dist/src/lib/types/types.d.ts

@@ -40,6 +40,7 @@ export interface ConfigType {
     GW_FEATURE_MENU_FE_VERSION?: boolean;
     GW_FEATURE_DISPLAY_SEARCH_ON_MAP?: boolean;
     GW_FEATURE_INITIALIZE_SENTRY?: boolean;
+    GW_FEATURE_SENTRY_DSN?: string;
     GW_FEATURE_ENABLE_SPECIAL_THEMES?: boolean;
     GW_FEATURE_TAF_AUTOTAF_ENABLED?: boolean;
     GW_WARNINGS_MARITIME_WARNINGS?: boolean;
@@ -49,6 +50,7 @@ export interface ConfigType {
     GW_HIDE_AIRMET_MENU?: boolean;
     GW_FEATURE_WARNINGS_EVENT?: boolean;
     GW_FEATURE_SILENT_LOGIN?: boolean;
+    GW_FEATURE_TEMPLATE_PRESETS?: boolean;
     GW_LANGUAGE?: string;
     GW_EXTERNAL_APPLICATIONS_MENU_LINKS?: string;
     GW_PLUGIN_BACKEND_URL?: string;
@@ -100,7 +102,9 @@ export interface Plot {
     title: string;
     plotId: string;
     enabled?: boolean;
+    isOpen?: boolean;
     parameters?: PlotParameter[];
+    customSize?: number;
 }
 export interface PlotParameter {
     id?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opengeoweb/shared",
-    "version": "20.2.0",
+    "version": "21.0.0",
     "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
     "license": "Apache-2.0",
     "repository": {
@@ -20,7 +20,7 @@
         }
     },
     "dependencies": {
-        "@opengeoweb/theme": "20.2.0",
+        "@opengeoweb/theme": "21.0.0",
         "react-draggable": "^4.4.6",
         "react-resizable-layout": "^0.7.3",
         "react-sortablejs": "^6.1.4",