@opengeoweb/shared 20.1.0-nightly-20261018 → 20.2.0

package/dist/index.esm.js

@@ -1,17 +1,19 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, useTheme, Tooltip, IconButton, Menu, ListSubheader, MenuItem, Grid, FormControlLabel, Radio, ListItemText, ListItemIcon, DialogTitle, Button, Dialog, DialogContent, DialogActions, Paper, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, RadioGroup, Portal, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, Switch, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox, FormControl, InputLabel, FilledInput } from '@mui/material';
+import { Box, Typography, useTheme, Tooltip, IconButton, Menu, ListSubheader, MenuItem, Grid, FormControlLabel, Radio, ListItemText, ListItemIcon, DialogTitle, Button, Dialog, DialogContent, DialogActions, Paper, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, RadioGroup, Portal, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, Switch, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox, FormControl, InputLabel, FilledInput, Card } from '@mui/material';
 import 'i18next';
 import { initReactI18next, useTranslation } from 'react-i18next';
 import React, { useRef, useEffect, useState, Component } from 'react';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
-import { Resize, BORDER_RADIUS, Options, Close, ChevronLeft, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, ChevronDown, Search, Clear, Cached, Filter as Filter$1, Menu as Menu$1, CalendarToday } from '@opengeoweb/theme';
+import { Resize, BORDER_RADIUS, Options, Close, ChevronLeft, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, ChevronDown, Search, Clear, Cached, Filter as Filter$1, Menu as Menu$1, CalendarToday, ArrowDropDownDown, DragHandle } from '@opengeoweb/theme';
 import { throttle, isEqual, merge, escapeRegExp, debounce } from 'lodash';
 import { add as add$1, addMinutes, addHours, format, differenceInDays as differenceInDays$1, differenceInHours as differenceInHours$1, differenceInMinutes as differenceInMinutes$1, differenceInMonths as differenceInMonths$1, differenceInSeconds as differenceInSeconds$1, differenceInYears as differenceInYears$1, fromUnixTime, getHours as getHours$1, isAfter as isAfter$1, isBefore as isBefore$1, isEqual as isEqual$1, isValid as isValid$1, parseISO, roundToNearestMinutes as roundToNearestMinutes$1, set as set$1, setSeconds as setSeconds$1, parse, sub as sub$1, getUnixTime, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval, startOfDay } from 'date-fns';
 import { fi as fi$1, nl as nl$1, nb, enGB } from 'date-fns/locale';
 import { DateTimePicker as DateTimePicker$1 } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { useResizable } from 'react-resizable-layout';
+import { ReactSortable } from 'react-sortablejs';
 
 var en = {
 	"shared-choose-app-mode": "Choose your default app mode",
@@ -57,6 +59,7 @@ var en = {
 	"shared-shortcut-or": "or",
 	"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-zoom-to-location": "Zoom map to location",
 	"shared-shortcut-mouse-click": "+ Mouse click",
 	"shared-shortcut-split-button": "click split window button",
@@ -126,6 +129,7 @@ var fi = {
 	"shared-shortcut-or": "tai",
 	"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-zoom-to-location": "Zoomaa kartta sijaintiin",
 	"shared-shortcut-mouse-click": "+ hiiren napsautus",
 	"shared-shortcut-split-button": "napsauta Jaa ikkuna -painiketta",
@@ -192,6 +196,7 @@ var no = {
 	"shared-shortcut-or": "eller",
 	"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-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",
@@ -260,6 +265,7 @@ var nl = {
 	"shared-shortcut-split-button": "klik splits paneel knop",
 	"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-zoom-to-location": "Zoom kaart naar locatie",
 	"shared-shortcut-mouse-click": "+ Muisklik",
 	"shared-clear": "Wissen",
@@ -897,7 +903,8 @@ var ToggleMenu = function ToggleMenu(_ref) {
     _ref$buttonIcon = _ref.buttonIcon,
     buttonIcon = _ref$buttonIcon === void 0 ? jsx(Options, {}) : _ref$buttonIcon,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    onClose = _ref.onClose;
   var _React$useState = React.useState(null),
     anchorEl = _React$useState[0],
     setAnchorEl = _React$useState[1];
@@ -912,6 +919,7 @@ var ToggleMenu = function ToggleMenu(_ref) {
   var handleClose = function handleClose(event) {
     event.stopPropagation();
     setAnchorEl(null);
+    onClose == null || onClose();
   };
   var renderMenuItems = function renderMenuItems(items) {
     return items.map(function (menuItem) {
@@ -3610,6 +3618,16 @@ var ShortcutList = function ShortcutList(_ref) {
       type: "icon",
       children: "F"
     })
+  }, {
+    titleKey: 'shared-shortcut-open-workspace-menu',
+    description: jsx(ShortCutSegment, {
+      type: "icon",
+      children: "W"
+    }),
+    descriptionMac: jsx(ShortCutSegment, {
+      type: "icon",
+      children: "W"
+    })
   }, {
     titleKey: 'shared-shortcut-zoom-to-location',
     description: jsxs(Fragment, {
@@ -6920,6 +6938,534 @@ 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 ResizablePanel = /*#__PURE__*/React.forwardRef(function (_ref, contentRef) {
+  var name = _ref.name,
+    minWidthProp = _ref.minWidth,
+    maxWidth = _ref.maxWidth,
+    isOpen = _ref.isOpen,
+    headerAction = _ref.headerAction,
+    handleButtonComponent = _ref.handleButtonComponent,
+    children = _ref.children,
+    onSetIsOpen = _ref.onSetIsOpen,
+    onSetCustomWidth = _ref.onSetCustomWidth,
+    _onResizeStart = _ref.onResizeStart,
+    _onResizeEnd = _ref.onResizeEnd,
+    customWidth = _ref.customWidth,
+    isDisplayed = _ref.isDisplayed,
+    resizeOnViewCloseSignal = _ref.resizeOnViewCloseSignal,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  var isVertical = direction === 'vertical';
+  var minWidth = minWidthProp != null ? minWidthProp : isVertical ? PANEL_MIN_HEIGHT : PANEL_MIN_WIDTH;
+  var sizeKey = isVertical ? 'height' : 'width';
+  var containerRef = React.useRef(null);
+  var widthRef = React.useRef(null);
+  var isDraggingRef = React.useRef(false);
+  var _React$useState = React.useState(false),
+    autoSizing = _React$useState[0],
+    setAutoSizing = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    growing = _React$useState2[0],
+    setGrowing = _React$useState2[1];
+  var growBasisRef = React.useRef(minWidth);
+  var previousResizeSignalRef = React.useRef(resizeOnViewCloseSignal);
+  var _useResizable = useResizable({
+      containerRef: containerRef,
+      axis: isVertical ? 'y' : 'x',
+      min: minWidth,
+      max: maxWidth || undefined,
+      initial: customWidth != null ? customWidth : minWidth,
+      onResizeStart: function onResizeStart() {
+        isDraggingRef.current = true;
+        setAutoSizing(false);
+        _onResizeStart == null || _onResizeStart();
+      },
+      onResizeEnd: function onResizeEnd(_ref2) {
+        var position = _ref2.position;
+        isDraggingRef.current = false;
+        if (position <= minWidth) {
+          widthRef.current = null;
+          onSetIsOpen == null || onSetIsOpen(false);
+        } else {
+          widthRef.current = position;
+          onSetIsOpen == null || onSetIsOpen(true);
+          onSetCustomWidth == null || onSetCustomWidth(position);
+        }
+        // Fire after the open/close calls so consumers tracking the drag
+        // lifecycle (e.g. a "resizing" flag) reset only once the close above
+        // has been handled.
+        _onResizeEnd == null || _onResizeEnd();
+      }
+    }),
+    containerWidth = _useResizable.position,
+    setContainerWidth = _useResizable.setPosition,
+    separatorProps = _useResizable.separatorProps;
+  var openPanel = function openPanel() {
+    var _ref3, _widthRef$current;
+    var targetWidth = (_ref3 = (_widthRef$current = widthRef.current) != null ? _widthRef$current : customWidth) != null ? _ref3 : null;
+    if (targetWidth != null) {
+      setAutoSizing(false);
+      setContainerWidth(Math.max(targetWidth, minWidth));
+      onSetIsOpen == null || onSetIsOpen(true);
+      return;
+    }
+    setAutoSizing(true);
+    onSetIsOpen == null || onSetIsOpen(true);
+  };
+  var closePanel = React.useCallback(function () {
+    setContainerWidth(minWidth);
+    onSetIsOpen == null || onSetIsOpen(false);
+    setAutoSizing(false);
+  }, [minWidth, setContainerWidth, onSetIsOpen]);
+  React.useEffect(function () {
+    // 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.
+    if (isDraggingRef.current) {
+      return;
+    }
+    if (isOpen) {
+      var _ref4, _widthRef$current2;
+      var targetWidth = (_ref4 = (_widthRef$current2 = widthRef.current) != null ? _widthRef$current2 : customWidth) != null ? _ref4 : null;
+      if (targetWidth != null) {
+        setAutoSizing(false);
+        setContainerWidth(Math.max(targetWidth, minWidth));
+      } else {
+        setAutoSizing(true);
+      }
+    } else {
+      setContainerWidth(minWidth);
+      setAutoSizing(false);
+    }
+  }, [isOpen, minWidth, 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
+  // single drag gesture without waiting for pointer release.
+  React.useEffect(function () {
+    if (!isDraggingRef.current) {
+      return;
+    }
+    if (isOpen && containerWidth <= minWidth) {
+      onSetIsOpen == null || onSetIsOpen(false);
+    } else if (!isOpen && containerWidth > minWidth) {
+      onSetIsOpen == null || onSetIsOpen(true);
+    }
+  }, [isOpen, containerWidth, minWidth, onSetIsOpen]);
+  React.useEffect(function () {
+    var viewCloseSignalChanged = previousResizeSignalRef.current !== resizeOnViewCloseSignal;
+    if (!viewCloseSignalChanged) {
+      return;
+    }
+    previousResizeSignalRef.current = resizeOnViewCloseSignal;
+    var panelCanReclaimFreedSpace = isOpen && !autoSizing && !isDraggingRef.current;
+    if (panelCanReclaimFreedSpace) {
+      growBasisRef.current = Math.max(containerWidth, minWidth);
+      setGrowing(true);
+    }
+  }, [resizeOnViewCloseSignal, isOpen, autoSizing, containerWidth, minWidth]);
+  React.useLayoutEffect(function () {
+    if (autoSizing) {
+      return;
+    }
+    if (isDraggingRef.current) {
+      return;
+    }
+    if (!isOpen && containerWidth > minWidth) {
+      setContainerWidth(minWidth);
+      return;
+    }
+    if (isOpen && containerWidth <= minWidth) {
+      setAutoSizing(true);
+    }
+  }, [autoSizing, containerWidth, isOpen, minWidth, setContainerWidth]);
+  React.useLayoutEffect(function () {
+    if (!autoSizing || !containerRef.current) {
+      return;
+    }
+    var raf1 = 0;
+    var raf2 = 0;
+    var measureContainerWidth = function measureContainerWidth() {
+      if (!containerRef.current) {
+        return;
+      }
+      var rect = containerRef.current.getBoundingClientRect();
+      var calculatedWidth = Math.max(Math.round(rect[sizeKey]), minWidth);
+      setContainerWidth(calculatedWidth);
+      widthRef.current = calculatedWidth;
+      setAutoSizing(false);
+    };
+    raf1 = requestAnimationFrame(function () {
+      raf2 = requestAnimationFrame(measureContainerWidth);
+    });
+    // eslint-disable-next-line consistent-return
+    return function () {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [autoSizing, minWidth, setContainerWidth, sizeKey]);
+  React.useLayoutEffect(function () {
+    if (!growing || !containerRef.current) {
+      return;
+    }
+    var growRaf1 = 0;
+    var growRaf2 = 0;
+    var lockGrownWidth = function lockGrownWidth() {
+      if (!containerRef.current) {
+        return;
+      }
+      var rect = containerRef.current.getBoundingClientRect();
+      var lockedWidth = Math.max(Math.round(rect[sizeKey]), minWidth);
+      setContainerWidth(lockedWidth);
+      widthRef.current = lockedWidth;
+      setGrowing(false);
+    };
+    growRaf1 = requestAnimationFrame(function () {
+      growRaf2 = requestAnimationFrame(lockGrownWidth);
+    });
+    // eslint-disable-next-line consistent-return
+    return function () {
+      cancelAnimationFrame(growRaf1);
+      cancelAnimationFrame(growRaf2);
+    };
+  }, [growing, minWidth, setContainerWidth, sizeKey]);
+  var sizeProps = function sizeProps(size, min) {
+    return isVertical ? {
+      width: '100%',
+      height: size,
+      minHeight: min,
+      maxHeight: maxWidth || '100%'
+    } : {
+      width: size,
+      minWidth: min,
+      maxWidth: maxWidth || '100%'
+    };
+  };
+  var cardStyleWhenAuto = Object.assign({
+    display: isDisplayed ? 'block' : 'none',
+    flex: '1 1 100%',
+    boxSizing: 'border-box'
+  }, sizeProps('auto', 0));
+  var cardStyleWhenLocked = Object.assign({
+    display: isDisplayed ? 'block' : 'none',
+    flex: '0 1 auto',
+    boxSizing: 'border-box'
+  }, sizeProps(containerWidth, minWidth));
+  var cardStyleWhenGrowing = Object.assign({
+    display: isDisplayed ? 'block' : 'none',
+    flex: growBasisRef.current + " 1 0px",
+    boxSizing: 'border-box'
+  }, sizeProps('auto', minWidth));
+  var getActiveCardStyle = function getActiveCardStyle() {
+    if (growing) {
+      return cardStyleWhenGrowing;
+    }
+    if (autoSizing) {
+      return cardStyleWhenAuto;
+    }
+    return cardStyleWhenLocked;
+  };
+  return jsx(Card, {
+    className: "sortable-item",
+    "data-autosizing": autoSizing ? 'true' : 'false',
+    "data-growing": growing ? 'true' : 'false',
+    "data-testid": "resizable-panel",
+    ref: containerRef,
+    sx: Object.assign({}, isVertical ? {} : {
+      height: '100%'
+    }, {
+      position: 'relative'
+    }, getActiveCardStyle()),
+    children: jsxs(Box, {
+      ref: contentRef,
+      sx: {
+        height: '100%',
+        width: '100%'
+      },
+      children: [!isOpen && isVertical ? jsxs(Box, {
+        "data-testid": "closed-panel-header",
+        onClick: openPanel,
+        sx: {
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          cursor: 'pointer'
+        },
+        children: [jsx(Box, {
+          onClick: function onClick(event) {
+            return event.stopPropagation();
+          },
+          sx: {
+            paddingTop: '4px'
+          },
+          children: handleButtonComponent
+        }), jsxs(Box, {
+          sx: {
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            paddingRight: '10px',
+            overflow: 'hidden',
+            marginTop: 0
+          },
+          children: [jsx(Box, {
+            sx: {
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              marginLeft: '16px',
+              paddingTop: 0
+            },
+            children: name
+          }), jsx(ArrowDropDownDown, {
+            sx: {
+              transform: 'rotate(180deg)'
+            }
+          })]
+        })]
+      }) : null, !isOpen && !isVertical && jsxs(Box, {
+        "data-testid": "closed-panel-header",
+        onClick: openPanel,
+        sx: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          writingMode: 'vertical-lr',
+          transform: 'rotate(180deg)',
+          paddingBottom: '10px',
+          cursor: 'pointer'
+        },
+        children: [name, jsx(ArrowDropDownDown, {
+          sx: {
+            transform: 'rotate(90deg)'
+          }
+        }), jsx(Box, {
+          onClick: function onClick(event) {
+            return event.stopPropagation();
+          },
+          children: handleButtonComponent
+        })]
+      }), !!isOpen && jsx(Box, {
+        "data-testid": "open-panel-header",
+        sx: {
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%'
+        },
+        children: jsxs(Stack, {
+          sx: {
+            height: '100%'
+          },
+          children: [jsxs(Box, {
+            sx: {
+              width: '100%',
+              display: 'flex',
+              justifyContent: 'space-between',
+              flex: '0 0 auto'
+            },
+            children: [jsx(Box, {
+              onClick: function onClick(event) {
+                return event.stopPropagation();
+              },
+              sx: {
+                paddingTop: '8px'
+              },
+              children: handleButtonComponent
+            }), jsxs(Box, {
+              onClick: closePanel,
+              sx: {
+                width: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-end',
+                paddingRight: '10px',
+                overflow: 'hidden',
+                marginTop: '4px',
+                cursor: 'pointer'
+              },
+              children: [jsx(Box, {
+                onClick: function onClick(event) {
+                  return event.stopPropagation();
+                },
+                children: !!headerAction && headerAction
+              }), jsx(Box, {
+                sx: {
+                  textOverflow: 'ellipsis',
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                  marginLeft: '16px',
+                  height: '100%',
+                  paddingTop: '3px'
+                },
+                children: name
+              }), jsx(ArrowDropDownDown, {})]
+            })]
+          }), jsx(Box, {
+            sx: {
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'stretch',
+              flex: 1,
+              minHeight: 0,
+              overflow: 'hidden'
+            },
+            children: children
+          })]
+        })
+      }), jsx(Box, Object.assign({
+        "data-testid": "resizable-panel-drag-handle"
+      }, separatorProps, {
+        sx: Object.assign({
+          position: 'absolute'
+        }, isVertical ? {
+          left: 0,
+          bottom: 0,
+          width: '100%',
+          height: '5px',
+          cursor: 'row-resize'
+        } : {
+          right: 0,
+          top: 0,
+          height: '100%',
+          width: '5px',
+          cursor: 'col-resize'
+        })
+      }))]
+    })
+  });
+});
+ResizablePanel.displayName = 'ResizablePanel';
+
+var ResizablePanelStandalone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var name = _ref.name,
+    children = _ref.children,
+    headerAction = _ref.headerAction,
+    isDisplayed = _ref.isDisplayed,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
+    handleButtonComponent = _ref.handleButtonComponent,
+    onOpenChange = _ref.onOpenChange,
+    onResizeStart = _ref.onResizeStart,
+    onResizeEnd = _ref.onResizeEnd,
+    direction = _ref.direction;
+  var _React$useState = React.useState(true),
+    isOpen = _React$useState[0],
+    setIsOpen = _React$useState[1];
+  var _React$useState2 = React.useState(undefined),
+    customWidth = _React$useState2[0],
+    setCustomWidth = _React$useState2[1];
+  var handleSetIsOpen = React.useCallback(function (open) {
+    setIsOpen(open);
+    onOpenChange == null || onOpenChange(open);
+  }, [onOpenChange]);
+  return jsx(ResizablePanel, {
+    customWidth: customWidth,
+    direction: direction,
+    handleButtonComponent: handleButtonComponent,
+    headerAction: headerAction,
+    isDisplayed: isDisplayed,
+    isOpen: isOpen,
+    maxWidth: maxWidth,
+    minWidth: minWidth,
+    name: name,
+    onResizeEnd: onResizeEnd,
+    onResizeStart: onResizeStart,
+    onSetCustomWidth: setCustomWidth,
+    onSetIsOpen: handleSetIsOpen,
+    ref: ref,
+    children: children
+  });
+});
+ResizablePanelStandalone.displayName = 'ResizablePanelStandalone';
+
+var SortablePanels = function SortablePanels(_ref) {
+  var panels = _ref.panels,
+    onOrderChange = _ref.onOrderChange,
+    _ref$panelComponent = _ref.panelComponent,
+    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: {
+      display: 'flex',
+      flexDirection: direction === 'vertical' ? 'column' : 'row',
+      width: '100%',
+      height: '100%',
+      padding: 1
+    },
+    children: jsx(ReactSortable, {
+      animation: 200,
+      direction: direction,
+      draggable: ".sortable-item",
+      handle: ".drag-handle",
+      list: panels.map(function (_ref2) {
+        var id = _ref2.id,
+          name = _ref2.name,
+          isDisplayed = _ref2.isDisplayed;
+        return {
+          id: id,
+          name: name,
+          isDisplayed: isDisplayed
+        };
+      }),
+      setList: function setList(list) {
+        return onOrderChange(list.map(function (_ref3) {
+          var id = _ref3.id,
+            name = _ref3.name,
+            isDisplayed = _ref3.isDisplayed;
+          return {
+            id: id,
+            name: name,
+            isDisplayed: isDisplayed
+          };
+        }));
+      },
+      style: {
+        display: 'flex',
+        flexDirection: direction === 'vertical' ? 'column' : 'row',
+        gap: 4,
+        width: '100%'
+      },
+      tag: "div",
+      children: panels.map(function (panel) {
+        return jsx(PanelComponent, {
+          direction: direction,
+          handleButtonComponent: jsx(IconButton, {
+            "aria-label": "drag-handle",
+            className: "drag-handle",
+            size: "small",
+            sx: {
+              width: '24px',
+              height: '24px'
+            },
+            children: jsx(DragHandle, {
+              fontSize: "small"
+            })
+          }),
+          headerAction: panel.headerAction,
+          isDisplayed: panel.isDisplayed,
+          maxWidth: panel.maxWidth,
+          minWidth: panel.minWidth,
+          name: panel.name,
+          onOpenChange: panel.onOpenChange,
+          onResizeEnd: panel.onResizeEnd,
+          onResizeStart: panel.onResizeStart,
+          panelId: panel.id,
+          ref: panel.panelRef,
+          viewId: viewId,
+          children: panel.render()
+        }, panel.id);
+      })
+    })
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6944,4 +7490,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, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, SessionStorageKey, 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, 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/MultipleResizablePanelsDemo.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MultipleResizablePanelsDemo: () => React.JSX.Element;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface ResizablePanelProps {
+    name: string;
+    minWidth?: number;
+    maxWidth?: number;
+    isOpen?: boolean;
+    headerAction?: React.ReactElement;
+    handleButtonComponent?: React.ReactElement;
+    children?: React.ReactNode;
+    onSetIsOpen?: (isOpen: boolean) => void;
+    onSetCustomWidth?: (width: number) => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
+    customWidth?: number;
+    isDisplayed?: boolean;
+    resizeOnViewCloseSignal?: number;
+    /**
+     * Direction in which the panel is resized. In 'vertical' mode the panel is
+     * resized by height; minWidth/maxWidth/customWidth then apply to the height.
+     */
+    direction?: 'horizontal' | 'vertical';
+}
+export declare const ResizablePanel: React.ForwardRefExoticComponent<ResizablePanelProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface ResizablePanelWrapperProps {
+    name: string;
+    children: React.ReactNode;
+    isDisplayed: boolean;
+    /**
+     * Optional. Only used by redux-aware panel components (e.g.
+     * SoundingsPanelConnect) to key external state. Standalone usage ignores it.
+     */
+    panelId?: string;
+    /**
+     * Optional. Only used by redux-aware panel components to key external state
+     * by parent view. Standalone usage ignores it.
+     */
+    viewId?: string;
+    headerAction?: React.ReactElement;
+    handleButtonComponent?: React.ReactElement;
+    maxWidth?: number;
+    minWidth?: number;
+    onOpenChange?: (isOpen: boolean) => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
+    direction?: 'horizontal' | 'vertical';
+}
+export type ResizablePanelComponent = React.ForwardRefExoticComponent<ResizablePanelWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ResizablePanelStandalone: React.ForwardRefExoticComponent<ResizablePanelWrapperProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,4 @@
+export { ResizablePanel } 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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { ResizablePanelComponent } from '../ResizablePanel/ResizablePanelStandalone';
+export interface SortablePanelItem {
+    id: string;
+    name: string;
+    isDisplayed: boolean;
+    minWidth?: number;
+    maxWidth?: number;
+    headerAction?: React.ReactElement;
+    render: () => React.ReactNode;
+    panelRef?: React.Ref<HTMLDivElement>;
+    onOpenChange?: (isOpen: boolean) => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: () => void;
+}
+export interface SortablePanelsProps {
+    panels: SortablePanelItem[];
+    onOrderChange: (newOrder: {
+        id: string;
+        name: string;
+        isDisplayed: boolean;
+    }[]) => void;
+    panelComponent?: ResizablePanelComponent;
+    /**
+     * Optional. Forwarded to each rendered panel component. Redux-aware panel
+     * components use it to scope their external state by parent view.
+     */
+    viewId?: string;
+    /** Direction in which panels are laid out, sorted and resized. Defaults to 'horizontal'. */
+    direction?: 'horizontal' | 'vertical';
+}
+export declare const SortablePanels: ({ panels, onOrderChange, panelComponent: PanelComponent, viewId, direction, }: SortablePanelsProps) => React.ReactElement;

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

@@ -0,0 +1,2 @@
+export { SortablePanels } from './SortablePanels';
+export type { SortablePanelsProps, SortablePanelItem } from './SortablePanels';

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

@@ -38,6 +38,7 @@ interface ToggleMenuProps {
     isDefaultOpen?: boolean;
     buttonIcon?: React.ReactNode;
     isDisabled?: boolean;
+    onClose?: () => void;
 }
 export declare const ToggleMenu: React.FC<ToggleMenuProps>;
 export {};

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

@@ -27,3 +27,5 @@ export * from './LegendToggleButton';
 export * from './Storybook';
 export * from './NumberWithUnitField';
 export * from './DateTimePicker';
+export * from './ResizablePanel';
+export * from './SortablePanels';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opengeoweb/shared",
-    "version": "20.1.0-nightly-20261018",
+    "version": "20.2.0",
     "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
     "license": "Apache-2.0",
     "repository": {
@@ -20,8 +20,10 @@
         }
     },
     "dependencies": {
-        "@opengeoweb/theme": "20.1.0-nightly-20261018",
+        "@opengeoweb/theme": "20.2.0",
         "react-draggable": "^4.4.6",
+        "react-resizable-layout": "^0.7.3",
+        "react-sortablejs": "^6.1.4",
         "re-resizable": "^6.9.11",
         "lodash": "^4.18.1",
         "axios": "^1.20.0",