@opengeoweb/shared 2.12.0 → 2.15.0

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, OptionKey, ArrowUp, ArrowDown, CommandKey, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/theme';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, Grid, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
+import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/theme';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
 import makeStyles from '@mui/styles/makeStyles';
@@ -101,6 +101,20 @@ function __rest(s, e) {
     return t;
 }
 
+var confirmStyle = {
+  width: {
+    xs: '100%',
+    sm: '150px'
+  },
+  marginLeft: {
+    xs: '0px!important',
+    sm: '8px!important'
+  },
+  marginTop: {
+    xs: 2,
+    sm: 0
+  }
+};
 var ConfirmationDialog = function ConfirmationDialog(_a) {
   var open = _a.open,
       title = _a.title,
@@ -116,7 +130,9 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       content = _a$content === void 0 ? null : _a$content,
       _a$disableAutoFocus = _a.disableAutoFocus,
       disableAutoFocus = _a$disableAutoFocus === void 0 ? false : _a$disableAutoFocus,
-      other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus"]);
+      _a$isLoading = _a.isLoading,
+      isLoading = _a$isLoading === void 0 ? false : _a$isLoading,
+      other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
 
   other.catchOnCancel;
       var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -200,29 +216,28 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       return _onClose('CANCELLED');
     },
     disableFocusRipple: true
-  }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
+  }, cancelLabel), isLoading ? /*#__PURE__*/React.createElement(Box, {
+    "data-testid": "confirm-dialog-spinner",
+    sx: Object.assign(Object.assign({}, confirmStyle), {
+      height: '40px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center'
+    })
+  }, /*#__PURE__*/React.createElement(CircularProgress, {
+    size: 40,
+    color: "secondary"
+  })) : /*#__PURE__*/React.createElement(Button, {
     "data-testid": "confirmationDialog-confirm",
     variant: "primary",
     // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
     sx: function sx(theme) {
-      return {
-        width: {
-          xs: '100%',
-          sm: '150px'
-        },
-        marginLeft: {
-          xs: '0px!important',
-          sm: '8px!important'
-        },
-        marginTop: {
-          xs: 2,
-          sm: 0
-        },
+      return Object.assign(Object.assign({}, confirmStyle), {
         '&:focus': {
           outline: theme.palette.geowebColors.buttons.focusDefault.outline,
           borderColor: 'transparent'
         }
-      };
+      });
     },
     onClick: onSubmit,
     autoFocus: !disableAutoFocus,
@@ -855,7 +870,7 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles(function () {
+var useStyles$6 = makeStyles(function () {
   return {
     wrapper: {
       height: '100vh',
@@ -872,7 +887,7 @@ var useStyles$7 = makeStyles(function () {
 var AppLayout = function AppLayout(_ref) {
   var header = _ref.header,
       children = _ref.children;
-  var classes = useStyles$7();
+  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.wrapper
   }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -880,7 +895,7 @@ var AppLayout = function AppLayout(_ref) {
   }, children));
 };
 
-var useStyles$6 = makeStyles(function (theme) {
+var useStyles$5 = makeStyles(function (theme) {
   var _header;
 
   return {
@@ -914,7 +929,7 @@ var AppHeader = function AppHeader(_ref) {
       userMenu = _ref.userMenu,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
-  var classes = useStyles$6();
+  var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement("header", {
     className: classes.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -1049,12 +1064,12 @@ var ResizeComponent = function ResizeComponent(_a) {
     onResizeStop: onResizeStop,
     handleComponent: {
       bottomRight: /*#__PURE__*/React__default.createElement(Resize, {
-        isRightAligned: true,
         style: {
           fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
         }
       }),
       bottomLeft: /*#__PURE__*/React__default.createElement(Resize, {
+        isRightAligned: true,
         style: {
           fill: "".concat(theme.palette.geowebColors.buttons.flat["default"].color)
         }
@@ -1160,6 +1175,51 @@ ErrorBoundary.defaultProps = {
   }
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var styles$3 = {
+  small: {
+    height: 16,
+    width: 16,
+    fontSize: '0.5rem'
+  },
+  large: {
+    height: 32,
+    width: 32,
+    fontSize: '0.938rem'
+  }
+};
+
+var Avatar = function Avatar(_ref) {
+  var children = _ref.children,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'large' : _ref$size;
+  return /*#__PURE__*/React.createElement(Avatar$1, {
+    "data-testid": "avatar",
+    sx: Object.assign(Object.assign({}, styles$3[size]), {
+      fontWeight: 500,
+      color: 'geowebColors.brand.brand',
+      backgroundColor: 'common.white',
+      border: '0.1px solid',
+      borderColor: 'geowebColors.brand.brand'
+    })
+  }, children);
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -1176,40 +1236,30 @@ ErrorBoundary.defaultProps = {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles(function (theme) {
-  return {
-    container: {
-      position: 'absolute',
-      top: 38,
-      right: 20,
-      width: 256,
-      borderRadius: 0,
-      boxShadow: theme.shadows[5],
-      background: theme.palette.geowebColors.background.surface
-    },
-    userMenu: {
-      padding: 0,
-      '& > li': {
-        paddingTop: 24,
-        paddingBottom: 24,
-        paddingLeft: 16,
-        paddingRight: 16
-      }
-    },
-    button: {
-      color: theme.palette.common.white,
-      padding: 0
-    },
-    avatar: {
-      height: 32,
-      width: 32,
-      fontSize: '0.938rem',
-      fontWeight: 500,
-      color: theme.palette.geowebColors.brand.brand,
-      backgroundColor: theme.palette.common.white
+var styles$2 = {
+  container: {
+    position: 'absolute',
+    top: 38,
+    right: 20,
+    width: 256,
+    borderRadius: 0,
+    boxShadow: 5,
+    backgroundColor: 'geowebColors.background.surface'
+  },
+  userMenu: {
+    padding: 0,
+    '& > li': {
+      paddingTop: 3,
+      paddingBottom: 3,
+      paddingLeft: 2,
+      paddingRight: 2
     }
-  };
-});
+  },
+  button: {
+    color: 'common.white',
+    padding: 0
+  }
+};
 
 var UserMenu = function UserMenu(_ref) {
   var _ref$isOpen = _ref.isOpen,
@@ -1224,22 +1274,19 @@ var UserMenu = function UserMenu(_ref) {
   } : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
-  var classes = useStyles$5();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
-    className: classes.button,
+    sx: styles$2.button,
     size: "large"
-  }, /*#__PURE__*/React__default.createElement(Avatar, {
-    className: classes.avatar
-  }, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
-    className: classes.container,
+  }, /*#__PURE__*/React__default.createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
+    sx: styles$2.container,
     "data-testid": "userMenu"
   }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
     onClickAway: onClose,
     mouseEvent: "onMouseDown"
   }, /*#__PURE__*/React__default.createElement(MenuList, {
-    className: classes.userMenu,
+    sx: styles$2.userMenu,
     variant: "menu"
   }, children))));
 };
@@ -1407,11 +1454,6 @@ var ToolHeader = function ToolHeader(_ref) {
       _ref$leftComponent = _ref.leftComponent,
       leftComponent = _ref$leftComponent === void 0 ? null : _ref$leftComponent;
   var styles = getStyle(size);
-
-  var onClickClose = function onClickClose() {
-    return onClose();
-  };
-
   var columnSizeIcon = leftComponent ? 3 : 1;
   var columnSizeTitle = leftComponent ? 6 : 10;
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -1479,7 +1521,8 @@ var ToolHeader = function ToolHeader(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "closeBtn",
-    onClick: onClickClose,
+    onClick: onClose,
+    onTouchEnd: onClose,
     size: "large",
     sx: iconStyle
   }, /*#__PURE__*/React__default.createElement(Close, {
@@ -1860,7 +1903,7 @@ var shortcuts = [{
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(OptionKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
@@ -1904,7 +1947,7 @@ var shortcuts = [{
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(OptionKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(KeyOption, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
@@ -1924,7 +1967,7 @@ var shortcuts = [{
   }, /*#__PURE__*/React__default.createElement(ArrowDown, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, "(when slider active)")),
   descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(CommandKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
+  }, /*#__PURE__*/React__default.createElement(KeyCommand, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "connect"
   }, "+"), /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
@@ -1952,7 +1995,7 @@ var shortcuts = [{
   }, "Ctrl"), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll")),
   descriptionMac: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ShortCutSegment, {
     type: "icon"
-  }, /*#__PURE__*/React__default.createElement(CommandKey, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll"))
+  }, /*#__PURE__*/React__default.createElement(KeyCommand, null)), /*#__PURE__*/React__default.createElement(ShortCutSegment, null, " + Mouse scroll"))
 }];
 var getShortcutList = function getShortcutList(shortcutList) {
   var platform = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'windows';
@@ -2289,18 +2332,20 @@ var CustomSlider = function CustomSlider(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var CustomToggleButton = function CustomToggleButton(_a) {
+var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$variant = _a.variant,
       variant = _a$variant === void 0 ? 'primary' : _a$variant,
+      className = _a.className,
       _a$value = _a.value,
       value = _a$value === void 0 ? 0 : _a$value,
-      props = __rest(_a, ["variant", "value"]);
+      props = __rest(_a, ["variant", "className", "value"]);
 
   return /*#__PURE__*/React.createElement(ToggleButton, Object.assign({
-    className: variant,
+    ref: ref,
+    className: "".concat(variant, " ").concat(className),
     value: value
   }, props));
-};
+});
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2318,7 +2363,7 @@ var CustomToggleButton = function CustomToggleButton(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var ToolButton = function ToolButton(_a) {
+var ToolButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var active = _a.active,
       _a$width = _a.width,
       width = _a$width === void 0 ? '24px' : _a$width,
@@ -2334,6 +2379,7 @@ var ToolButton = function ToolButton(_a) {
       props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
 
   return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
+    ref: ref,
     variant: variant,
     disableRipple: true,
     selected: active,
@@ -2348,7 +2394,7 @@ var ToolButton = function ToolButton(_a) {
       }
     }, sx)
   }, props), children);
-};
+});
 
 var getPosition = function getPosition(menuPosition) {
   switch (menuPosition) {
@@ -2490,10 +2536,10 @@ var ToggleMenu = function ToggleMenu(_ref) {
 var useStyles = makeStyles(function (theme) {
   return createStyles({
     button: {
-      height: 28,
-      width: 28,
+      height: 24,
+      width: 24,
       borderRadius: 5,
-      marginTop: 2,
+      marginTop: 4,
       color: function color(_ref) {
         var isActive = _ref.isActive,
             isAccessible = _ref.isAccessible,
@@ -2602,12 +2648,7 @@ var ManagerDeleteButton = function ManagerDeleteButton(_ref) {
   return /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
-    icon: /*#__PURE__*/React.createElement(Delete, {
-      sx: {
-        width: 20,
-        height: 20
-      }
-    }),
+    icon: /*#__PURE__*/React.createElement(Delete, null),
     testId: "deleteButton",
     isEnabled: isEnabled
   });
@@ -2876,7 +2917,8 @@ var TooltipSelect = function TooltipSelect(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-// Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
+var DEFAULT_ERROR_MESSAGE = 'An error has occurred'; // Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
+
 var isAxiosError = function isAxiosError(error) {
   return error.isAxiosError !== undefined;
 };
@@ -2891,7 +2933,18 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
     return data.message;
   }
 
-  return 'An error has occurred';
+  if (error.message) {
+    return error.message;
+  }
+
+  return DEFAULT_ERROR_MESSAGE;
+};
+var getErrorMessage = function getErrorMessage(error) {
+  if (isAxiosError(error)) {
+    return getAxiosErrorMessage(error);
+  }
+
+  return error.message || DEFAULT_ERROR_MESSAGE;
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getInitials, getPosition, isAxiosError, showPrompt, sliderStyles, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getErrorMessage, getInitials, getPosition, isAxiosError, showPrompt, sliderStyles, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };

package/index.umd.js

@@ -159,6 +159,20 @@
       }, content));
     };
 
+    var confirmStyle = {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      },
+      marginLeft: {
+        xs: '0px!important',
+        sm: '8px!important'
+      },
+      marginTop: {
+        xs: 2,
+        sm: 0
+      }
+    };
     var ConfirmationDialog = function ConfirmationDialog(_a) {
       var open = _a.open,
           title = _a.title,
@@ -174,7 +188,9 @@
           content = _e === void 0 ? null : _e,
           _f = _a.disableAutoFocus,
           disableAutoFocus = _f === void 0 ? false : _f,
-          other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus"]);
+          _g = _a.isLoading,
+          isLoading = _g === void 0 ? false : _g,
+          other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content", "disableAutoFocus", "isLoading"]);
 
       other.catchOnCancel;
           var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -258,29 +274,28 @@
           return _onClose('CANCELLED');
         },
         disableFocusRipple: true
-      }, cancelLabel), /*#__PURE__*/React__namespace.createElement(material.Button, {
+      }, cancelLabel), isLoading ? /*#__PURE__*/React__namespace.createElement(material.Box, {
+        "data-testid": "confirm-dialog-spinner",
+        sx: __assign(__assign({}, confirmStyle), {
+          height: '40px',
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center'
+        })
+      }, /*#__PURE__*/React__namespace.createElement(material.CircularProgress, {
+        size: 40,
+        color: "secondary"
+      })) : /*#__PURE__*/React__namespace.createElement(material.Button, {
         "data-testid": "confirmationDialog-confirm",
         variant: "primary",
         // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
         sx: function sx(theme) {
-          return {
-            width: {
-              xs: '100%',
-              sm: '150px'
-            },
-            marginLeft: {
-              xs: '0px!important',
-              sm: '8px!important'
-            },
-            marginTop: {
-              xs: 2,
-              sm: 0
-            },
+          return __assign(__assign({}, confirmStyle), {
             '&:focus': {
               outline: theme.palette.geowebColors.buttons.focusDefault.outline,
               borderColor: 'transparent'
             }
-          };
+          });
         },
         onClick: onSubmit,
         autoFocus: !disableAutoFocus,
@@ -708,7 +723,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = makeStyles__default["default"](function () {
+    var useStyles$6 = makeStyles__default["default"](function () {
       return {
         wrapper: {
           height: '100vh',
@@ -725,7 +740,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$7();
+      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -749,7 +764,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$6 = makeStyles__default["default"](function (theme) {
+    var useStyles$5 = makeStyles__default["default"](function (theme) {
       var _a;
 
       return {
@@ -783,7 +798,7 @@
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$6();
+      var classes = useStyles$5();
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -918,12 +933,12 @@
         onResizeStop: onResizeStop,
         handleComponent: {
           bottomRight: /*#__PURE__*/React__default["default"].createElement(theme.Resize, {
-            isRightAligned: true,
             style: {
               fill: "" + theme$1.palette.geowebColors.buttons.flat["default"].color
             }
           }),
           bottomLeft: /*#__PURE__*/React__default["default"].createElement(theme.Resize, {
+            isRightAligned: true,
             style: {
               fill: "" + theme$1.palette.geowebColors.buttons.flat["default"].color
             }
@@ -1021,6 +1036,35 @@
       return ErrorBoundary;
     }(React__namespace.Component);
 
+    var styles$3 = {
+      small: {
+        height: 16,
+        width: 16,
+        fontSize: '0.5rem'
+      },
+      large: {
+        height: 32,
+        width: 32,
+        fontSize: '0.938rem'
+      }
+    };
+
+    var Avatar = function Avatar(_a) {
+      var children = _a.children,
+          _b = _a.size,
+          size = _b === void 0 ? 'large' : _b;
+      return /*#__PURE__*/React__namespace.createElement(material.Avatar, {
+        "data-testid": "avatar",
+        sx: __assign(__assign({}, styles$3[size]), {
+          fontWeight: 500,
+          color: 'geowebColors.brand.brand',
+          backgroundColor: 'common.white',
+          border: '0.1px solid',
+          borderColor: 'geowebColors.brand.brand'
+        })
+      }, children);
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -1037,40 +1081,30 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = makeStyles__default["default"](function (theme) {
-      return {
-        container: {
-          position: 'absolute',
-          top: 38,
-          right: 20,
-          width: 256,
-          borderRadius: 0,
-          boxShadow: theme.shadows[5],
-          background: theme.palette.geowebColors.background.surface
-        },
-        userMenu: {
-          padding: 0,
-          '& > li': {
-            paddingTop: 24,
-            paddingBottom: 24,
-            paddingLeft: 16,
-            paddingRight: 16
-          }
-        },
-        button: {
-          color: theme.palette.common.white,
-          padding: 0
-        },
-        avatar: {
-          height: 32,
-          width: 32,
-          fontSize: '0.938rem',
-          fontWeight: 500,
-          color: theme.palette.geowebColors.brand.brand,
-          backgroundColor: theme.palette.common.white
+    var styles$2 = {
+      container: {
+        position: 'absolute',
+        top: 38,
+        right: 20,
+        width: 256,
+        borderRadius: 0,
+        boxShadow: 5,
+        backgroundColor: 'geowebColors.background.surface'
+      },
+      userMenu: {
+        padding: 0,
+        '& > li': {
+          paddingTop: 3,
+          paddingBottom: 3,
+          paddingLeft: 2,
+          paddingRight: 2
         }
-      };
-    });
+      },
+      button: {
+        color: 'common.white',
+        padding: 0
+      }
+    };
 
     var UserMenu = function UserMenu(_a) {
       var _b = _a.isOpen,
@@ -1085,22 +1119,19 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$5();
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
-        className: classes.button,
+        sx: styles$2.button,
         size: "large"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Avatar, {
-        className: classes.avatar
-      }, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(material.Paper, {
-        className: classes.container,
+      }, /*#__PURE__*/React__default["default"].createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default["default"].createElement(material.Paper, {
+        sx: styles$2.container,
         "data-testid": "userMenu"
       }, /*#__PURE__*/React__default["default"].createElement(material.ClickAwayListener, {
         onClickAway: onClose,
         mouseEvent: "onMouseDown"
       }, /*#__PURE__*/React__default["default"].createElement(material.MenuList, {
-        className: classes.userMenu,
+        sx: styles$2.userMenu,
         variant: "menu"
       }, children))));
     };
@@ -1268,11 +1299,6 @@
           _e = _a.leftComponent,
           leftComponent = _e === void 0 ? null : _e;
       var styles = getStyle(size);
-
-      var onClickClose = function onClickClose() {
-        return onClose();
-      };
-
       var columnSizeIcon = leftComponent ? 3 : 1;
       var columnSizeTitle = leftComponent ? 6 : 10;
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
@@ -1340,7 +1366,8 @@
         }
       }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "data-testid": "closeBtn",
-        onClick: onClickClose,
+        onClick: onClose,
+        onTouchEnd: onClose,
         size: "large",
         sx: iconStyle
       }, /*#__PURE__*/React__default["default"].createElement(theme.Close, {
@@ -1721,7 +1748,7 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.OptionKey, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.KeyOption, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
@@ -1765,7 +1792,7 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.OptionKey, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.KeyOption, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
@@ -1785,7 +1812,7 @@
       }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowDown, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)")),
       descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.CommandKey, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.KeyCommand, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
@@ -1813,7 +1840,7 @@
       }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll")),
       descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(theme.CommandKey, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll"))
+      }, /*#__PURE__*/React__default["default"].createElement(theme.KeyCommand, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, " + Mouse scroll"))
     }];
     var getShortcutList = function getShortcutList(shortcutList, platform) {
       if (platform === void 0) {
@@ -2183,18 +2210,20 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var CustomToggleButton = function CustomToggleButton(_a) {
+    var CustomToggleButton = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
       var _b = _a.variant,
           variant = _b === void 0 ? 'primary' : _b,
+          className = _a.className,
           _c = _a.value,
           value = _c === void 0 ? 0 : _c,
-          props = __rest(_a, ["variant", "value"]);
+          props = __rest(_a, ["variant", "className", "value"]);
 
       return /*#__PURE__*/React__namespace.createElement(material.ToggleButton, __assign({
-        className: variant,
+        ref: ref,
+        className: variant + " " + className,
         value: value
       }, props));
-    };
+    });
 
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
@@ -2212,7 +2241,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var ToolButton = function ToolButton(_a) {
+    var ToolButton = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
       var active = _a.active,
           _b = _a.width,
           width = _b === void 0 ? '24px' : _b,
@@ -2228,6 +2257,7 @@
           props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
 
       return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
+        ref: ref,
         variant: variant,
         disableRipple: true,
         selected: active,
@@ -2242,7 +2272,7 @@
           }
         }, sx)
       }, props), children);
-    };
+    });
 
     var getPosition = function getPosition(menuPosition) {
       switch (menuPosition) {
@@ -2383,10 +2413,10 @@
     var useStyles = makeStyles__default["default"](function (theme) {
       return createStyles__default["default"]({
         button: {
-          height: 28,
-          width: 28,
+          height: 24,
+          width: 24,
           borderRadius: 5,
-          marginTop: 2,
+          marginTop: 4,
           color: function color(_a) {
             var isActive = _a.isActive,
                 isAccessible = _a.isAccessible,
@@ -2495,12 +2525,7 @@
       return /*#__PURE__*/React__namespace.createElement(ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClickDelete,
-        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, {
-          sx: {
-            width: 20,
-            height: 20
-          }
-        }),
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
         testId: "deleteButton",
         isEnabled: isEnabled
       });
@@ -2786,7 +2811,8 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    // Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
+    var DEFAULT_ERROR_MESSAGE = 'An error has occurred'; // Guard function for detecting an AxiosError (typically the kind of error returned by the backend)
+
     var isAxiosError = function isAxiosError(error) {
       return error.isAxiosError !== undefined;
     };
@@ -2801,17 +2827,30 @@
         return data.message;
       }
 
-      return 'An error has occurred';
+      if (error.message) {
+        return error.message;
+      }
+
+      return DEFAULT_ERROR_MESSAGE;
+    };
+    var getErrorMessage = function getErrorMessage(error) {
+      if (isAxiosError(error)) {
+        return getAxiosErrorMessage(error);
+      }
+
+      return error.message || DEFAULT_ERROR_MESSAGE;
     };
 
     exports.AlertBanner = AlertBanner;
     exports.AlertIcon = AlertIcon;
     exports.AppHeader = AppHeader;
     exports.AppLayout = AppLayout;
+    exports.Avatar = Avatar;
     exports.ConfirmationDialog = ConfirmationDialog;
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
     exports.CustomSlider = CustomSlider;
     exports.CustomToggleButton = CustomToggleButton;
+    exports.DEFAULT_ERROR_MESSAGE = DEFAULT_ERROR_MESSAGE;
     exports.Draggable = DraggableComponent$1;
     exports.EnableButton = EnableButton;
     exports.ErrorBoundary = ErrorBoundary;
@@ -2832,6 +2871,7 @@
     exports.UserMenuItemTheme = MenuItemTheme;
     exports.calculateDialogSizeAndPosition = calculateDialogSizeAndPosition;
     exports.getAxiosErrorMessage = getAxiosErrorMessage;
+    exports.getErrorMessage = getErrorMessage;
     exports.getInitials = getInitials;
     exports.getPosition = getPosition;
     exports.isAxiosError = isAxiosError;

package/lib/components/Avatar/Avatar.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface AvatarProps {
+    children: React.ReactNode;
+    size?: 'small' | 'large';
+}
+declare const Avatar: React.FC<AvatarProps>;
+export default Avatar;

package/lib/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const AvatarLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const AvatarDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { default as Avatar } from './Avatar';

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

@@ -13,6 +13,7 @@ interface ConfirmationDialogProps extends ConfirmationOptions {
     open: boolean;
     onSubmit: () => void;
     onClose: (reason: ConfirmationAction) => void;
+    isLoading?: boolean;
 }
 export declare const ConfirmationDialog: React.FC<ConfirmationDialogProps>;
 export default ConfirmationDialog;

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

@@ -4,6 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const ConfirmationDialogCustom: () => React.ReactElement;
+export declare const ConfirmationDialogLoading: () => React.ReactElement;
 export declare const ConfirmationDialogLight: {
     (): React.ReactElement;
     storyName: string;

package/lib/components/index.d.ts

@@ -16,3 +16,4 @@ export * from './ManagerDeleteButton';
 export * from './EnableButton';
 export * from './AlertIcon';
 export * from './TooltipSelect';
+export * from './Avatar';

package/lib/utils/axiosErrorUtils/axiosErrorUtils.d.ts

@@ -1,3 +1,5 @@
 import { AxiosError } from 'axios';
+export declare const DEFAULT_ERROR_MESSAGE = "An error has occurred";
 export declare const isAxiosError: (error: AxiosError | Error) => error is AxiosError<any, any>;
 export declare const getAxiosErrorMessage: (error: AxiosError) => string;
+export declare const getErrorMessage: (error: Error | AxiosError) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "2.12.0",
+  "version": "2.15.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "@mui/material": "^5.2.8",
-    "@opengeoweb/theme": "2.12.0",
+    "@opengeoweb/theme": "2.15.0",
     "@mui/styles": "^5.2.3",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.12.0",
+    "@opengeoweb/form-fields": "2.15.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",