@opengeoweb/shared 12.1.1 → 12.2.0

package/index.esm.js

@@ -1,12 +1,12 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Box, Typography, Tooltip, IconButton, useTheme, Dialog, DialogTitle, DialogContent, DialogActions, Paper, Button, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, MenuItem, Grid2, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, Menu, ListSubheader, ListItemText, ListItemIcon, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
+import { Box, Typography, useTheme, Tooltip, IconButton, Menu, ListSubheader, MenuItem, Grid2, ListItemText, ListItemIcon, DialogTitle, Button, Dialog, DialogContent, DialogActions, Paper, CircularProgress, Alert, AlertTitle, Drawer, Link, Avatar as Avatar$1, ClickAwayListener, MenuList, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Switch, Slider, ToggleButton, styled, Select, Accordion, AccordionSummary, AccordionDetails, FormLabel, TextField, InputAdornment, Chip, Stack, debounce as debounce$1, ListItemButton, Checkbox } from '@mui/material';
 import * as React from 'react';
 import React__default, { useRef, Component, useState } from 'react';
-import { Resize, Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
+import { Resize, Options, Close, ChevronLeft, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Admin, useThemeContext, ThemeTypes, KeyOption, ArrowLeft, ArrowRight, KeyCommand, ArrowUp, ArrowDown, ChevronDown, Search, Clear, Cached } from '@opengeoweb/theme';
 import 'i18next';
-import { useTranslation } from 'react-i18next';
+import { initReactI18next, useTranslation } from 'react-i18next';
 import { throttle, escapeRegExp, debounce } from 'lodash';
 import * as Sentry from '@sentry/react';
 import { parseISO, parse, format, isEqual, add as add$1, sub as sub$1, differenceInYears as differenceInYears$1, differenceInMonths as differenceInMonths$1, differenceInDays as differenceInDays$1, differenceInMinutes as differenceInMinutes$1, differenceInHours as differenceInHours$1, differenceInSeconds as differenceInSeconds$1, roundToNearestMinutes as roundToNearestMinutes$1, isBefore as isBefore$1, isAfter as isAfter$1, isValid as isValid$1, getUnixTime, fromUnixTime, set as set$1, getHours as getHours$1, startOfDay, addMinutes, addHours, setSeconds as setSeconds$1, getDay, getDayOfYear, getMonth, getWeek, getYear, isWithinInterval } from 'date-fns';
@@ -72,7 +72,8 @@ var en = {
 	"shared-filter-system-presets": "System presets",
 	"shared-filter-shared-presets": "Shared presets",
 	"shared-filter-search": "Search",
-	"shared-only": "ONLY"
+	"shared-only": "ONLY",
+	"shared-customdialog-back": "Back"
 };
 var fi = {
 	"shared-choose-app-mode": "Sovelluksen väriteema",
@@ -134,7 +135,8 @@ var fi = {
 	"shared-filter-system-presets": "Järestelmä presetit",
 	"shared-filter-shared-presets": "ei käännetty",
 	"shared-filter-search": "Etsi",
-	"shared-only": "Pelkästään"
+	"shared-only": "Pelkästään",
+	"shared-customdialog-back": "PALAA TAKAISIN"
 };
 var no = {
 	"shared-choose-app-mode": "Velg din standardmodus",
@@ -196,7 +198,8 @@ var no = {
 	"shared-filter-system-presets": "System presets",
 	"shared-filter-shared-presets": "Delte arbeidsflater",
 	"shared-filter-search": "Søk",
-	"shared-only": "BARE"
+	"shared-only": "BARE",
+	"shared-customdialog-back": "Tilbake"
 };
 var nl = {
 	"shared-choose-app-mode": "Kies je standaard app-modus",
@@ -258,7 +261,8 @@ var nl = {
 	"shared-filter-system-presets": "Systeem presets",
 	"shared-filter-shared-presets": "Gedeelde presets",
 	"shared-filter-search": "Zoeken",
-	"shared-only": "ALLEEN"
+	"shared-only": "ALLEEN",
+	"shared-customdialog-back": "Terug"
 };
 var sharedTranslations = {
 	en: en,
@@ -299,7 +303,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   if (null == r) return {};
   var t = {};
   for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
-    if (e.indexOf(n) >= 0) continue;
+    if (-1 !== e.indexOf(n)) continue;
     t[n] = r[n];
   }
   return t;
@@ -322,9 +326,9 @@ function _regeneratorRuntime() {
   function define(t, e, r) {
     return Object.defineProperty(t, e, {
       value: r,
-      enumerable: !0,
-      configurable: !0,
-      writable: !0
+      enumerable: true,
+      configurable: true,
+      writable: true
     }), t[e];
   }
   try {
@@ -417,7 +421,7 @@ function _regeneratorRuntime() {
         if ("throw" === i) throw a;
         return {
           value: t,
-          done: !0
+          done: true
         };
       }
       for (n.method = i, n.arg = a;;) {
@@ -468,7 +472,7 @@ function _regeneratorRuntime() {
   function Context(t) {
     this.tryEntries = [{
       tryLoc: "root"
-    }], t.forEach(pushTryEntry, this), this.reset(!0);
+    }], t.forEach(pushTryEntry, this), this.reset(true);
   }
   function values(e) {
     if (e || "" === e) {
@@ -478,8 +482,8 @@ function _regeneratorRuntime() {
       if (!isNaN(e.length)) {
         var o = -1,
           i = function next() {
-            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next;
-            return next.value = t, next.done = !0, next;
+            for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = false, next;
+            return next.value = t, next.done = true, next;
           };
         return i.next = i;
       }
@@ -488,10 +492,10 @@ function _regeneratorRuntime() {
   }
   return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", {
     value: GeneratorFunctionPrototype,
-    configurable: !0
+    configurable: true
   }), o(GeneratorFunctionPrototype, "constructor", {
     value: GeneratorFunction,
-    configurable: !0
+    configurable: true
   }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) {
     var e = "function" == typeof t && t.constructor;
     return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name));
@@ -520,17 +524,17 @@ function _regeneratorRuntime() {
     return r.reverse(), function next() {
       for (; r.length;) {
         var t = r.pop();
-        if (t in e) return next.value = t, next.done = !1, next;
+        if (t in e) return next.value = t, next.done = false, next;
       }
-      return next.done = !0, next;
+      return next.done = true, next;
     };
   }, e.values = values, Context.prototype = {
     constructor: Context,
     reset: function (e) {
-      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
+      if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = false, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t);
     },
     stop: function () {
-      this.done = !0;
+      this.done = true;
       var t = this.tryEntries[0].completion;
       if ("throw" === t.type) throw t.arg;
       return this.rval;
@@ -549,10 +553,10 @@ function _regeneratorRuntime() {
           var c = n.call(i, "catchLoc"),
             u = n.call(i, "finallyLoc");
           if (c && u) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
           } else if (c) {
-            if (this.prev < i.catchLoc) return handle(i.catchLoc, !0);
+            if (this.prev < i.catchLoc) return handle(i.catchLoc, true);
           } else {
             if (!u) throw Error("try statement without catch or finally");
             if (this.prev < i.finallyLoc) return handle(i.finallyLoc);
@@ -674,96 +678,14 @@ var StatusTag = function StatusTag(_ref) {
   });
 };
 
-var defaultDelay = 1000;
-var useControlledTooltip = function useControlledTooltip() {
-  var _React$useState = React.useState(false),
-    tooltipOpen = _React$useState[0],
-    setTooltipOpen = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    delayedTooltip = _React$useState2[0],
-    setDelayedTooltip = _React$useState2[1];
-  React.useEffect(function () {
-    if (tooltipOpen === true) {
-      var timer = setTimeout(function () {
-        return setDelayedTooltip(true);
-      }, defaultDelay);
-      return function () {
-        clearTimeout(timer);
-      };
-    }
-    setDelayedTooltip(false);
-    return function () {};
-  }, [tooltipOpen]);
-  return [delayedTooltip, setTooltipOpen];
-};
-var CustomTooltip = function CustomTooltip(props) {
-  return jsx(Tooltip, Object.assign({}, props, {
-    enterDelay: defaultDelay,
-    enterNextDelay: defaultDelay,
-    disableInteractive: true
-  }));
-};
-
-var _excluded$d = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"];
-var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$tooltipTitle = _ref.tooltipTitle,
-    defaultTooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'flat' : _ref$variant,
-    _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-    _ref$shouldShowAsDisa = _ref.shouldShowAsDisabled,
-    shouldShowAsDisabled = _ref$shouldShowAsDisa === void 0 ? false : _ref$shouldShowAsDisa,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    children = _ref.children,
-    className = _ref.className,
-    defaultTooltipProps = _ref.tooltipProps,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
-  var classNames = [].concat(className ? [className] : [], isSelected ? ['Mui-selected'] : [], [variant]).join(' ');
-  var tooltipTitle = (defaultTooltipProps == null ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
-  var tooltipProps = React.useMemo(function () {
-    return Object.assign({}, defaultTooltipProps, {
-      title: tooltipTitle,
-      placement: (defaultTooltipProps == null ? void 0 : defaultTooltipProps.placement) || 'top',
-      sx: {
-        pointerEvents: 'none'
-      }
-    });
-  }, [defaultTooltipProps, tooltipTitle]);
-  var renderIconButton = function renderIconButton() {
-    return jsx(IconButton, Object.assign({
-      "aria-label": tooltipTitle
-    }, props, {
-      size: size,
-      className: classNames,
-      ref: ref,
-      "aria-pressed": isSelected,
-      sx: Object.assign({}, props.sx, shouldShowAsDisabled && {
-        '&.MuiIconButton-root': {
-          color: "geowebColors.iconButtons." + variant + ".disabled.color"
-        },
-        '&.Mui-focusVisible': {
-          color: "geowebColors.iconButtons." + variant + ".default.color"
-        }
-      }),
-      children: children
-    }));
-  };
-  return tooltipTitle && !props.disabled ? jsx(CustomTooltip, Object.assign({}, tooltipProps, {
-    children: renderIconButton()
-  })) : renderIconButton();
-});
-var CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
-
-var _excluded$c = ["bounds", "setIsDragging", "children", "onStop"];
+var _excluded$d = ["bounds", "setIsDragging", "children", "onStop"];
 var DraggableComponent$1 = function DraggableComponent(_ref) {
   var _ref$bounds = _ref.bounds,
     bounds = _ref$bounds === void 0 ? 'body' : _ref$bounds,
     setIsDragging = _ref.setIsDragging,
     children = _ref.children,
     onStop = _ref.onStop,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
   var onDragStart = function onDragStart(e) {
     // This makes sure that nothing is selected during drag
     setIsDragging && setIsDragging(true);
@@ -785,7 +707,7 @@ var DraggableComponent$1 = function DraggableComponent(_ref) {
   }));
 };
 
-var _excluded$b = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
+var _excluded$c = ["children", "onResizeStart", "onResizeStop", "size", "setSize", "minHeight", "minWidth", "enable", "nodeRef"];
 var isDraggingClassName = 'is-dragging';
 var useBoundsProps = function useBoundsProps(nodeRef) {
   var _React$useState = React__default.useState({}),
@@ -828,7 +750,7 @@ var ResizeComponent = function ResizeComponent(_ref) {
       topLeft: true
     } : _ref$enable,
     nodeRef = _ref.nodeRef,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   var theme = useTheme();
   var onStartResize = React__default.useCallback(function (event, _direction, node) {
     event.stopPropagation();
@@ -871,30 +793,466 @@ var ResizeComponent = function ResizeComponent(_ref) {
           fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
         },
         sx: {
-          display: 'none'
-        },
-        className: "resizableHandle"
-      }),
-      bottomLeft: jsx(Resize, {
-        isRightAligned: true,
-        style: {
-          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
+          display: 'none'
+        },
+        className: "resizableHandle"
+      }),
+      bottomLeft: jsx(Resize, {
+        isRightAligned: true,
+        style: {
+          fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
+        },
+        sx: {
+          display: 'none'
+        },
+        className: "resizableHandle"
+      })
+    },
+    enable: enable,
+    onResizeStart: onStartResize
+  }, props, {
+    children: children
+  }));
+};
+
+var defaultDelay = 1000;
+var useControlledTooltip = function useControlledTooltip() {
+  var _React$useState = React.useState(false),
+    tooltipOpen = _React$useState[0],
+    setTooltipOpen = _React$useState[1];
+  var _React$useState2 = React.useState(false),
+    delayedTooltip = _React$useState2[0],
+    setDelayedTooltip = _React$useState2[1];
+  React.useEffect(function () {
+    if (tooltipOpen === true) {
+      var timer = setTimeout(function () {
+        return setDelayedTooltip(true);
+      }, defaultDelay);
+      return function () {
+        clearTimeout(timer);
+      };
+    }
+    setDelayedTooltip(false);
+    return function () {};
+  }, [tooltipOpen]);
+  return [delayedTooltip, setTooltipOpen];
+};
+var CustomTooltip = function CustomTooltip(props) {
+  return jsx(Tooltip, Object.assign({}, props, {
+    enterDelay: defaultDelay,
+    enterNextDelay: defaultDelay,
+    disableInteractive: true
+  }));
+};
+
+var _excluded$b = ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"];
+var CustomIconButtonNoMemo = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$tooltipTitle = _ref.tooltipTitle,
+    defaultTooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'flat' : _ref$variant,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$shouldShowAsDisa = _ref.shouldShowAsDisabled,
+    shouldShowAsDisabled = _ref$shouldShowAsDisa === void 0 ? false : _ref$shouldShowAsDisa,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    children = _ref.children,
+    className = _ref.className,
+    defaultTooltipProps = _ref.tooltipProps,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+  var classNames = [].concat(className ? [className] : [], isSelected ? ['Mui-selected'] : [], [variant]).join(' ');
+  var tooltipTitle = (defaultTooltipProps == null ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
+  var tooltipProps = React.useMemo(function () {
+    return Object.assign({}, defaultTooltipProps, {
+      title: tooltipTitle,
+      placement: (defaultTooltipProps == null ? void 0 : defaultTooltipProps.placement) || 'top',
+      sx: {
+        pointerEvents: 'none'
+      }
+    });
+  }, [defaultTooltipProps, tooltipTitle]);
+  var renderIconButton = function renderIconButton() {
+    return jsx(IconButton, Object.assign({
+      "aria-label": tooltipTitle
+    }, props, {
+      size: size,
+      className: classNames,
+      ref: ref,
+      "aria-pressed": isSelected,
+      sx: Object.assign({}, props.sx, shouldShowAsDisabled && {
+        '&.MuiIconButton-root': {
+          color: "geowebColors.iconButtons." + variant + ".disabled.color"
+        },
+        '&.Mui-focusVisible': {
+          color: "geowebColors.iconButtons." + variant + ".default.color"
+        }
+      }),
+      children: children
+    }));
+  };
+  return tooltipTitle && !props.disabled ? jsx(CustomTooltip, Object.assign({}, tooltipProps, {
+    children: renderIconButton()
+  })) : renderIconButton();
+});
+var CustomIconButton = /*#__PURE__*/React.memo(CustomIconButtonNoMemo);
+
+var getPosition = function getPosition(menuPosition) {
+  switch (menuPosition) {
+    case 'bottom':
+      return {
+        anchorOrigin: {
+          vertical: 'bottom',
+          horizontal: 'center'
+        },
+        transformOrigin: {
+          vertical: 'top',
+          horizontal: 'center'
+        }
+      };
+    // eslint-disable-next-line default-case-last
+    default:
+    case 'left':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        }
+      };
+    case 'right':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        }
+      };
+  }
+};
+var ToggleMenu = function ToggleMenu(_ref) {
+  var _ref$buttonTestId = _ref.buttonTestId,
+    buttonTestId = _ref$buttonTestId === void 0 ? 'toggleMenuButton' : _ref$buttonTestId,
+    _ref$menuPosition = _ref.menuPosition,
+    menuPosition = _ref$menuPosition === void 0 ? 'left' : _ref$menuPosition,
+    menuItems = _ref.menuItems,
+    children = _ref.children,
+    buttonSx = _ref.buttonSx,
+    _ref$tooltipTitle = _ref.tooltipTitle,
+    tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
+    _ref$menuTitle = _ref.menuTitle,
+    menuTitle = _ref$menuTitle === void 0 ? '' : _ref$menuTitle,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'tool' : _ref$variant,
+    _ref$isDefaultOpen = _ref.isDefaultOpen,
+    isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
+    _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;
+  var _React$useState = React.useState(null),
+    anchorEl = _React$useState[0],
+    setAnchorEl = _React$useState[1];
+  var isOpen = Boolean(anchorEl);
+  var _getPosition = getPosition(menuPosition),
+    anchorOrigin = _getPosition.anchorOrigin,
+    transformOrigin = _getPosition.transformOrigin;
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  var handleClose = function handleClose(event) {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
+  React.useEffect(function () {
+    if (isDefaultOpen) {
+      setAnchorEl(document.getElementById(buttonTestId));
+    }
+  }, [isDefaultOpen, buttonTestId]);
+  return jsxs(Fragment, {
+    children: [jsx(CustomIconButton, {
+      tooltipProps: {
+        placement: 'top',
+        title: tooltipTitle
+      },
+      isSelected: isOpen,
+      sx: buttonSx,
+      onClick: handleClick,
+      "data-testid": buttonTestId,
+      variant: variant,
+      id: buttonTestId,
+      disabled: isDisabled,
+      children: buttonIcon
+    }), jsxs(Menu, {
+      anchorEl: anchorEl,
+      open: isOpen,
+      onClose: function onClose(event, reason) {
+        if (reason === 'tabKeyDown') {
+          return;
+        }
+        handleClose(event);
+      },
+      anchorOrigin: anchorOrigin,
+      transformOrigin: transformOrigin,
+      BackdropProps: {
+        style: {
+          opacity: 0,
+          transition: 'none'
+        }
+      },
+      MenuListProps: Object.assign({}, children && {
+        style: {
+          padding: '0px'
+        }
+      }),
+      children: [menuTitle && jsx(ListSubheader, {
+        "data-testid": "toggleMenuTitle",
+        children: jsx(Typography, {
+          sx: {
+            fontSize: '12px'
+          },
+          children: menuTitle
+        })
+      }), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
+        var text = menuItem.text,
+          icon = menuItem.icon,
+          action = menuItem.action,
+          isDisabled = menuItem.isDisabled;
+        return jsx(MenuItem, {
+          onClick: function onClick(event) {
+            action(event);
+            handleClose(event);
+          },
+          disabled: isDisabled,
+          selected: menuItem.isSelected,
+          children: jsxs(Grid2, {
+            container: true,
+            spacing: 2,
+            justifyContent: "space-between",
+            size: "grow",
+            children: [jsx(Grid2, {
+              children: jsx(ListItemText, {
+                children: text
+              })
+            }), icon && jsx(Grid2, {
+              alignItems: "flex-end",
+              children: jsx(ListItemIcon, {
+                sx: {
+                  '&.MuiListItemIcon-root': {
+                    minWidth: '24px'
+                  }
+                },
+                children: icon
+              })
+            })]
+          })
+        }, text);
+      }) : jsx("div", {}) // Needed to make the menu work without any menuItems
+      , children]
+    })]
+  });
+};
+
+/* *
+ * 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 2025 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2025 - Finnish Meteorological Institute (FMI)
+ * Copyright 2025 - The Norwegian Meteorological Institute (MET Norway)
+ * */
+var SHARED_NAMESPACE = 'shared';
+var geowebLanguages = ['en', 'fi', 'no', 'nl'];
+var loadAllTranslations = function loadAllTranslations(i18nInstance, translationsToLoad) {
+  translationsToLoad.forEach(function (_ref) {
+    var ns = _ref.ns,
+      translations = _ref.translations;
+    geowebLanguages.forEach(function (lang) {
+      i18nInstance.addResourceBundle(lang, ns, translations[lang]);
+    });
+  });
+};
+var safelyInitI18nForTestsAndStories = function safelyInitI18nForTestsAndStories(i18nInstance, namespace, translationsToLoad, initLanguage) {
+  // This check ensures that we don't init the library many times.
+  // - in tests, the init is done globally, so this should not init
+  // - in stories, this function should init, but only once if called many times
+  if (!i18nInstance.isInitialized && !i18nInstance.isInitializing) {
+    void i18nInstance.use(initReactI18next).init({
+      lng: initLanguage != null ? initLanguage : 'en',
+      ns: namespace,
+      interpolation: {
+        escapeValue: false
+      },
+      resources: {}
+    });
+  }
+  loadAllTranslations(i18nInstance, translationsToLoad);
+};
+var useSharedTranslation = function useSharedTranslation() {
+  return useTranslation([SHARED_NAMESPACE]);
+};
+
+var Title = function Title(_ref) {
+  var title = _ref.title;
+  return jsx(Typography, {
+    sx: {
+      fontSize: '16px',
+      fontWeight: 500,
+      height: 24,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      color: 'geowebColors.typographyAndIcons.text'
+    },
+    "data-testid": "customDialog-title",
+    component: "span",
+    children: title
+  });
+};
+var CustomDialogHeader = function CustomDialogHeader(_ref2) {
+  var headerActions = _ref2.headerActions,
+    title = _ref2.title,
+    onClose = _ref2.onClose;
+  var _useSharedTranslation = useSharedTranslation(),
+    t = _useSharedTranslation.t;
+  return !headerActions ? jsxs(DialogTitle, {
+    id: "dialog-title",
+    sx: {
+      zIndex: 1,
+      padding: 2,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    },
+    children: [title && jsx(Title, {
+      title: title
+    }), jsx(CustomIconButton, {
+      "data-testid": "customDialog-close",
+      "aria-label": "close",
+      onClick: function onClick() {
+        return onClose('CLOSED');
+      },
+      sx: {
+        '&.MuiIconButton-root': {
+          color: 'geowebColors.greys.accessible'
+        }
+      },
+      children: jsx(Close, {
+        "data-testid": "CloseIcon"
+      })
+    })]
+  }) : jsxs(Grid2, {
+    container: true,
+    "data-testid": "dialog-action-header",
+    alignItems: "center",
+    sx: {
+      boxShadow: 1,
+      py: 0.5,
+      px: 1,
+      zIndex: 1
+    },
+    "aria-label": "Dialog options header",
+    children: [jsx(Grid2, {
+      size: 4,
+      children: jsx(Button, {
+        onClick: function onClick() {
+          return onClose('CLOSED');
+        },
+        variant: "flat",
+        "aria-label": "close",
+        startIcon: jsx(ChevronLeft, {}),
+        "data-testid": "contentdialog-close",
+        sx: {
+          textTransform: 'uppercase'
         },
+        children: t('shared-customdialog-back')
+      })
+    }), jsx(Grid2, {
+      sx: {
+        display: 'flex',
+        justifyContent: 'center',
+        textAlign: 'center'
+      },
+      size: 4,
+      children: title && jsx(Title, {
+        title: title
+      })
+    }), jsx(Grid2, {
+      size: 4,
+      children: jsx(Box, {
         sx: {
-          display: 'none'
+          display: 'flex',
+          justifyContent: 'flex-end',
+          'button:not(:first-of-type)': {
+            marginLeft: 1
+          }
         },
-        className: "resizableHandle"
+        children: jsxs(Box, {
+          children: [jsx(Box, {
+            display: {
+              xs: 'none',
+              lg: 'flex'
+            },
+            children: headerActions.map(function (_ref3) {
+              var action = _ref3.action,
+                text = _ref3.text,
+                variant = _ref3.variant,
+                _ref3$isDisabled = _ref3.isDisabled,
+                isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled;
+              return jsx(Button, {
+                onClick: action,
+                variant: variant || 'flat',
+                sx: {
+                  minWidth: 96
+                },
+                disabled: isDisabled,
+                children: text
+              }, text + "-" + variant);
+            })
+          }), jsx(Box, {
+            display: {
+              sm: 'block',
+              lg: 'none'
+            },
+            children: headerActions.length > 0 && jsx(ToggleMenu, {
+              menuItems: headerActions.map(function (_ref4) {
+                var text = _ref4.text,
+                  action = _ref4.action,
+                  isDisabled = _ref4.isDisabled,
+                  isSelected = _ref4.isSelected;
+                return {
+                  text: text,
+                  action: action,
+                  isDisabled: isDisabled,
+                  isSelected: isSelected
+                };
+              })
+            })
+          })]
+        })
       })
-    },
-    enable: enable,
-    onResizeStart: onStartResize
-  }, props, {
-    children: children
-  }));
+    })]
+  });
 };
 
 var _excluded$a = ["defaultSize", "onResizeStop", "hasLayout"],
-  _excluded2$2 = ["title", "onClose", "description", "actions", "children", "sx", "resizableDefaultSize", "isResizable", "hasLayout", "shouldRenderInline", "slotProps", "disableRestoreFocus"];
+  _excluded2$2 = ["title", "onClose", "description", "actions", "children", "sx", "resizableDefaultSize", "isResizable", "hasLayout", "shouldRenderInline", "slotProps", "disableRestoreFocus", "headerActions"];
 var PaperComponent = function PaperComponent(_ref) {
   var _ref$defaultSize = _ref.defaultSize,
     defaultSize = _ref$defaultSize === void 0 ? {
@@ -968,25 +1326,28 @@ var CustomDialog = function CustomDialog(_ref2) {
     slotProps = _ref2.slotProps,
     _ref2$disableRestoreF = _ref2.disableRestoreFocus,
     disableRestoreFocus = _ref2$disableRestoreF === void 0 ? true : _ref2$disableRestoreF,
+    headerActions = _ref2.headerActions,
     other = _objectWithoutPropertiesLoose(_ref2, _excluded2$2);
   var _React$useState = React.useState(resizableDefaultSize),
     size = _React$useState[0],
     setSize = _React$useState[1];
   return jsx(Dialog, Object.assign({
     "data-testid": "customDialog",
-    PaperProps: {
-      sx: Object.assign({
-        width: '560px',
-        margin: 2.5
-      }, sx)
-    },
     // fix for briefly showing default options when closing dialog
     transitionDuration: 0,
     onClose: function onClose() {
       _onClose('CLOSED');
     },
     "aria-labelledby": "dialog-title",
-    slotProps: Object.assign({}, slotProps, isResizable && {
+    slotProps: Object.assign({}, slotProps, {
+      paper: {
+        sx: Object.assign({}, !other.fullWidth && !other.maxWidth && {
+          maxWidth: '560px'
+        }, other.maxWidth && {
+          maxWidth: other.maxWidth
+        }, sx)
+      }
+    }, isResizable && {
       paper: {
         defaultSize: size,
         onResizeStop: setSize,
@@ -1017,38 +1378,10 @@ var CustomDialog = function CustomDialog(_ref2) {
     disableRestoreFocus: disableRestoreFocus
   }, other, {
     children: hasLayout ? jsxs(Fragment, {
-      children: [jsxs(DialogTitle, {
-        id: "dialog-title",
-        sx: {
-          zIndex: 1,
-          padding: 2,
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center'
-        },
-        children: [jsx(Typography, {
-          sx: {
-            fontSize: '16px',
-            fontWeight: 500
-          },
-          "data-testid": "customDialog-title",
-          component: "span",
-          children: title
-        }), jsx(CustomIconButton, {
-          "data-testid": "customDialog-close",
-          "aria-label": "close",
-          onClick: function onClick() {
-            return _onClose('CLOSED');
-          },
-          sx: {
-            '&.MuiIconButton-root': {
-              color: 'geowebColors.greys.accessible'
-            }
-          },
-          children: jsx(Close, {
-            "data-testid": "CloseIcon"
-          })
-        })]
+      children: [jsx(CustomDialogHeader, {
+        title: title,
+        headerActions: headerActions,
+        onClose: _onClose
       }), jsxs(DialogContent, {
         sx: {
           padding: '8px 16px'
@@ -1057,7 +1390,7 @@ var CustomDialog = function CustomDialog(_ref2) {
           variant: "body1",
           children: description
         }), children]
-      }), jsx(DialogActions, {
+      }), !headerActions && jsx(DialogActions, {
         sx: {
           padding: 2,
           flexDirection: {
@@ -1071,28 +1404,6 @@ var CustomDialog = function CustomDialog(_ref2) {
   }));
 };
 
-/* *
- * 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 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2023 - Finnish Meteorological Institute (FMI)
- * Copyright 2024 - The Norwegian Meteorological Institute (MET Norway)
- * */
-var SHARED_NAMESPACE = 'shared';
-var useSharedTranslation = function useSharedTranslation() {
-  return useTranslation([SHARED_NAMESPACE]);
-};
-
 var confirmStyle = {
   width: {
     xs: '100%',
@@ -3666,169 +3977,6 @@ var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, props));
 });
 
-var getPosition = function getPosition(menuPosition) {
-  switch (menuPosition) {
-    case 'bottom':
-      return {
-        anchorOrigin: {
-          vertical: 'bottom',
-          horizontal: 'center'
-        },
-        transformOrigin: {
-          vertical: 'top',
-          horizontal: 'center'
-        }
-      };
-    // eslint-disable-next-line default-case-last
-    default:
-    case 'left':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        }
-      };
-    case 'right':
-      return {
-        anchorOrigin: {
-          vertical: 'center',
-          horizontal: 'right'
-        },
-        transformOrigin: {
-          vertical: 'center',
-          horizontal: 'left'
-        }
-      };
-  }
-};
-var ToggleMenu = function ToggleMenu(_ref) {
-  var _ref$buttonTestId = _ref.buttonTestId,
-    buttonTestId = _ref$buttonTestId === void 0 ? 'toggleMenuButton' : _ref$buttonTestId,
-    _ref$menuPosition = _ref.menuPosition,
-    menuPosition = _ref$menuPosition === void 0 ? 'left' : _ref$menuPosition,
-    menuItems = _ref.menuItems,
-    children = _ref.children,
-    buttonSx = _ref.buttonSx,
-    _ref$tooltipTitle = _ref.tooltipTitle,
-    tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
-    _ref$menuTitle = _ref.menuTitle,
-    menuTitle = _ref$menuTitle === void 0 ? '' : _ref$menuTitle,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'tool' : _ref$variant,
-    _ref$isDefaultOpen = _ref.isDefaultOpen,
-    isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
-    _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;
-  var _React$useState = React.useState(null),
-    anchorEl = _React$useState[0],
-    setAnchorEl = _React$useState[1];
-  var isOpen = Boolean(anchorEl);
-  var _getPosition = getPosition(menuPosition),
-    anchorOrigin = _getPosition.anchorOrigin,
-    transformOrigin = _getPosition.transformOrigin;
-  var handleClick = function handleClick(event) {
-    event.stopPropagation();
-    setAnchorEl(event.currentTarget);
-  };
-  var handleClose = function handleClose(event) {
-    event.stopPropagation();
-    setAnchorEl(null);
-  };
-  React.useEffect(function () {
-    if (isDefaultOpen) {
-      setAnchorEl(document.getElementById(buttonTestId));
-    }
-  }, [isDefaultOpen, buttonTestId]);
-  return jsxs(Fragment, {
-    children: [jsx(CustomIconButton, {
-      tooltipProps: {
-        placement: 'top',
-        title: tooltipTitle
-      },
-      isSelected: isOpen,
-      sx: buttonSx,
-      onClick: handleClick,
-      "data-testid": buttonTestId,
-      variant: variant,
-      id: buttonTestId,
-      disabled: isDisabled,
-      children: buttonIcon
-    }), jsxs(Menu, {
-      anchorEl: anchorEl,
-      open: isOpen,
-      onClose: function onClose(event, reason) {
-        if (reason === 'tabKeyDown') {
-          return;
-        }
-        handleClose(event);
-      },
-      anchorOrigin: anchorOrigin,
-      transformOrigin: transformOrigin,
-      BackdropProps: {
-        style: {
-          opacity: 0,
-          transition: 'none'
-        }
-      },
-      MenuListProps: Object.assign({}, children && {
-        style: {
-          padding: '0px'
-        }
-      }),
-      children: [menuTitle && jsx(ListSubheader, {
-        "data-testid": "toggleMenuTitle",
-        children: jsx(Typography, {
-          sx: {
-            fontSize: '12px'
-          },
-          children: menuTitle
-        })
-      }), menuItems && menuItems.length ? menuItems.map(function (menuItem) {
-        var text = menuItem.text,
-          icon = menuItem.icon,
-          action = menuItem.action,
-          isDisabled = menuItem.isDisabled;
-        return jsx(MenuItem, {
-          onClick: function onClick(event) {
-            action(event);
-            handleClose(event);
-          },
-          disabled: isDisabled,
-          selected: menuItem.isSelected,
-          children: jsxs(Grid2, {
-            container: true,
-            spacing: 2,
-            justifyContent: "space-between",
-            size: "grow",
-            children: [jsx(Grid2, {
-              children: jsx(ListItemText, {
-                children: text
-              })
-            }), icon && jsx(Grid2, {
-              alignItems: "flex-end",
-              children: jsx(ListItemIcon, {
-                sx: {
-                  '&.MuiListItemIcon-root': {
-                    minWidth: '24px'
-                  }
-                },
-                children: icon
-              })
-            })]
-          })
-        }, text);
-      }) : jsx("div", {}) // Needed to make the menu work without any menuItems
-      , children]
-    })]
-  });
-};
-
 var _excluded$4 = ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "hasBackgroundColor", "variant", "additionalStyling", "skipLocalStyling"],
   _excluded2 = ["className", "additionalStyling"];
 var TooltipSelect = function TooltipSelect(_ref) {
@@ -4364,7 +4512,9 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
   var _ref$onPressRefresh = _ref.onPressRefresh,
     onPressRefresh = _ref$onPressRefresh === void 0 ? function () {} : _ref$onPressRefresh,
     lastUpdateTime = _ref.lastUpdateTime,
-    dataTestId = _ref.dataTestId;
+    dataTestId = _ref.dataTestId,
+    _ref$hideLabel = _ref.hideLabel,
+    hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel;
   var _useTranslation = useTranslation(SHARED_NAMESPACE),
     t = _useTranslation.t;
   return jsxs(Box, {
@@ -4374,7 +4524,7 @@ var LastUpdateTime = function LastUpdateTime(_ref) {
       height: '100%',
       justifyContent: 'flex-end'
     },
-    children: [jsx(Typography, {
+    children: [!hideLabel && jsx(Typography, {
       sx: {
         color: 'geowebColors.captions.captionStatus.rgba',
         fontSize: '10px',
@@ -4889,7 +5039,8 @@ var Filter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return jsx(Box, {
     sx: Object.assign({
-      marginBottom: '8px'
+      marginBottom: '8px',
+      width: '100%'
     }, props.sx),
     ref: ref,
     children: jsxs(Stack, {
@@ -6027,9 +6178,5 @@ var SystemScope = {
   user: 'user',
   system: 'system'
 };
-// eslint-disable-next-line no-redeclare
-var PresetScope = Object.assign({}, SystemScope, {
-  shared: 'shared'
-});
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, CanvasComponent, ConfirmationButtons, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEBOUNCE_TIMEOUT, DEFAULT_ERROR_MESSAGE, DEFAULT_FILTER_HEIGHT, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, PresetScope, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, pollingIntervalTimeout, renderCounter, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation };
+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, DraggableComponent$1 as Draggable, ErrorBoundary, Filter, FilterChip, FilterOption, LastUpdateTime, PROJECTION, ResizeComponent as Resizable, SHARED_NAMESPACE, SearchField$1 as SearchField, SearchFieldButton, SearchHighlight, StatusTag, StorybookDocsWrapper, StyledSelect, SwitchButton, SystemScope, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, UserMenuItemSentryRecording, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, calculateStartSize, createToolkitMockStore, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getLastUpdateTitle, getPosition, getWarningMessage, isAxiosAuthError, isAxiosError, loadAllTranslations, pollingIntervalTimeout, renderCounter, safelyInitI18nForTestsAndStories, sharedTranslations, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDebounce, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, useWheelStopPropagation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "12.1.1",
+  "version": "12.2.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,7 +8,7 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/theme": "12.1.1",
+    "@opengeoweb/theme": "12.2.0",
     "react-draggable": "^4.4.6",
     "re-resizable": "^6.9.11",
     "lodash": "^4.17.21",

package/src/index.d.ts

@@ -3,5 +3,5 @@ export * from './lib/components';
 export * from './lib/hooks';
 export * from './lib/utils';
 export * from './lib/types';
-export { SHARED_NAMESPACE } from './lib/utils/i18n';
+export { SHARED_NAMESPACE, loadAllTranslations, safelyInitI18nForTestsAndStories, } from './lib/utils/i18n';
 export { sharedTranslations };

package/src/lib/components/ConfirmationDialog/ConfirmationButtons.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DialogAction } from '../CustomDialog';
+import { DialogAction } from '../CustomDialog/types';
 export type ConfirmationAction = 'CANCELLED' | DialogAction;
 export interface ConfirmationButtonsProps {
     confirmLabel?: string;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ModalProps, SxProps, Theme } from '@mui/material';
-import { DialogAction } from '../CustomDialog';
+import { DialogAction } from '../CustomDialog/types';
 export interface ConfirmationOptions {
     title?: string;
     description?: string;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { DialogProps } from '@mui/material';
 import { Size } from '../DraggableResizable';
-export type DialogAction = 'CLOSED';
+import { DialogAction } from './types';
+import { HeaderAction } from './CustomDialogHeader';
 export interface CustomDialogProps extends DialogProps {
     description?: string;
     actions?: React.ReactNode;
@@ -10,6 +11,7 @@ export interface CustomDialogProps extends DialogProps {
     resizableDefaultSize?: Size;
     hasLayout?: boolean;
     shouldRenderInline?: boolean;
+    headerActions?: HeaderAction[];
 }
 export declare const CustomDialog: React.FC<CustomDialogProps>;
 export default CustomDialog;

package/src/lib/components/CustomDialog/CustomDialog.stories.d.ts

@@ -10,6 +10,8 @@ export default _default;
 type Story = StoryObj<typeof CustomDialog>;
 export declare const CustomDialogLight: Story;
 export declare const CustomDialogDark: Story;
+export declare const CustomDialogFullWidth: Story;
+export declare const CustomDialogFixedWith: Story;
 export declare const CustomDialogLargeContent: Story;
 export declare const CustomDialogLargeContentResizable: Story;
 export declare const CustomDialogResizable: Story;
@@ -17,3 +19,4 @@ export declare const CustomDialogResizableWithInitialSize: Story;
 export declare const CustomDialogRenderInline: Story;
 export declare const CustomDialogResizableNoLayout: Story;
 export declare const CustomDialogWithAutofocus: Story;
+export declare const CustomDialogHeaderActions: Story;

package/src/lib/components/CustomDialog/CustomDialogHeader.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ButtonVariant } from '@opengeoweb/theme';
+import { DialogAction } from './types';
+import { MenuItemType } from '../ToggleMenu';
+export type HeaderAction = MenuItemType & {
+    variant?: ButtonVariant;
+};
+export declare const CustomDialogHeader: React.FC<{
+    headerActions?: HeaderAction[];
+    title?: string;
+    onClose: (reason: DialogAction) => void;
+}>;
+export default CustomDialogHeader;

package/src/lib/components/CustomDialog/CustomDialogHeader.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/src/lib/components/CustomDialog/CustomDialogHeader.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CustomDialogHeader } from './CustomDialogHeader';
+type Story = StoryObj<typeof CustomDialogHeader>;
+declare const meta: Meta<typeof CustomDialogHeader>;
+export default meta;
+export declare const HeaderActions: Story;
+export declare const HeaderActionsDark: Story;
+export declare const HeaderTitle: Story;
+export declare const HeaderTitleDark: Story;
+export declare const HeaderActionsDisabled: Story;
+export declare const HeaderActionsEmpty: Story;

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

@@ -1 +1,2 @@
 export * from './CustomDialog';
+export * from './CustomDialogHeader';

package/src/lib/components/CustomDialog/types.d.ts

@@ -0,0 +1 @@
+export type DialogAction = 'CLOSED';

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

@@ -1,10 +1,11 @@
-import React from 'react';
 import { TFunction } from 'i18next';
+import React from 'react';
 export declare const getLastUpdateTitle: (time: string, t: TFunction) => string;
 interface LastUpdateTimeProps {
     onPressRefresh: () => void;
     lastUpdateTime?: string;
     dataTestId?: string;
+    hideLabel?: boolean;
 }
 declare const LastUpdateTime: React.FC<LastUpdateTimeProps>;
 export default LastUpdateTime;

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

@@ -16,5 +16,9 @@ type TooltipSelectProps = Omit<BaseSelectProps, 'sx'> & {
     skipLocalStyling?: boolean;
 };
 export declare const TooltipSelect: React.FC<TooltipSelectProps>;
+interface StyledSelectProps extends Omit<TooltipSelectProps, 'tooltip' | 'skipLocalStyling'> {
+    skipLocalStyling: boolean;
+}
+export declare const StyledSelect: import("@emotion/styled").StyledComponent<Omit<StyledSelectProps, "ref"> & React.RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
 export declare const tooltipContainerStyles: (theme: Theme, isEnabled: boolean, hasBackgroundColor?: boolean) => object;
 export {};

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

@@ -20,6 +20,8 @@ export interface ConfigType {
     GW_PRESET_BACKEND_URL?: string;
     GW_CAP_BASE_URL?: string;
     GW_DRAWINGS_BASE_URL?: string;
+    GW_WARNINGS_WORKSPACE_ID?: string;
+    GW_SPACEWEATHER_WORKSPACE_ID?: string;
     GW_TECHNICAL_RELEASE_NOTES_URL?: string;
     GW_VERSION_PROGRESS_NOTES_URL?: string;
     GW_LOCATION_BASE_URL?: string;
@@ -36,6 +38,12 @@ export interface ConfigType {
     GW_FEATURE_TAF_AUTOTAF_ENABLED?: boolean;
     GW_LANGUAGE?: string;
 }
+export interface SoundingsCollection {
+    name: string;
+    id: string;
+    url: string;
+    description: string;
+}
 export interface TimeSeriesService {
     id: string;
     description: string;
@@ -50,12 +58,6 @@ export declare const SystemScope: {
     readonly user: SystemScope;
     readonly system: SystemScope;
 };
-export type PresetScope = SystemScope | 'shared';
-export declare const PresetScope: {
-    readonly shared: PresetScope;
-    readonly user: SystemScope;
-    readonly system: SystemScope;
-};
 export interface PlotPreset {
     connectedMap?: string;
     mapId: string;

package/src/lib/utils/i18n.d.ts

@@ -1,6 +1,13 @@
 import i18n from 'i18next';
 import { UseTranslationResponse } from 'react-i18next';
 export declare const SHARED_NAMESPACE = "shared";
+type GeoWebLanguage = 'en' | 'fi' | 'no' | 'nl';
+interface TranslationToLoad {
+    ns: string;
+    translations: Record<GeoWebLanguage, Record<string, string>>;
+}
+export declare const loadAllTranslations: (i18nInstance: typeof i18n, translationsToLoad: TranslationToLoad[]) => void;
+export declare const safelyInitI18nForTestsAndStories: (i18nInstance: typeof i18n, namespace: string, translationsToLoad: TranslationToLoad[], initLanguage?: string) => void;
 export declare const initSharedI18n: () => void;
 export declare const translateKeyOutsideComponents: (key: string, params?: Record<string, string | number> | undefined) => string;
 export declare const useSharedTranslation: () => UseTranslationResponse<typeof SHARED_NAMESPACE, typeof i18n>;

package/src/lib/utils/i18n.spec.d.ts

@@ -0,0 +1 @@
+export {};