@opengeoweb/shared 2.10.0 → 2.14.0

package/index.esm.js

@@ -1,13 +1,12 @@
 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, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, DragHandle, ArrowLeft, ArrowRight, OptionKey, ArrowUp, ArrowDown, CommandKey, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/icons';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, 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, 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';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
-import { useThemeContext } from '@opengeoweb/theme';
 import { throttle } from 'lodash';
 import withStyles from '@mui/styles/withStyles';
 import createStyles from '@mui/styles/createStyles';
@@ -102,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,
@@ -117,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
@@ -201,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,
@@ -1050,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)
         }
@@ -1408,11 +1422,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, {
@@ -1472,14 +1481,21 @@ var ToolHeader = function ToolHeader(_ref) {
     xs: columnSizeIcon,
     container: true,
     justifyContent: "flex-end"
-  }, onClose && /*#__PURE__*/React__default.createElement(IconButton, {
+  }, onClose && /*#__PURE__*/React__default.createElement(Tooltip, {
+    title: "Close",
+    placement: "bottom",
+    sx: {
+      pointerEvents: 'none'
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "closeBtn",
-    onClick: onClickClose,
+    onClick: onClose,
+    onTouchEnd: onClose,
     size: "large",
     sx: iconStyle
   }, /*#__PURE__*/React__default.createElement(Close, {
     "data-testid": "CloseIcon"
-  })))));
+  }))))));
 };
 
 /* *
@@ -1855,7 +1871,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"
@@ -1899,7 +1915,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"
@@ -1919,7 +1935,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"
@@ -1947,7 +1963,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';
@@ -2337,7 +2353,10 @@ var ToolButton = function ToolButton(_a) {
       width: "".concat(width, "!important"),
       height: "".concat(height, "!important"),
       textTransform: 'none!important',
-      padding: '11px!important'
+      padding: '11px!important',
+      '& .MuiSvgIcon-root': {
+        marginRight: '0px!important'
+      }
     }, sx)
   }, props), children);
 };
@@ -2482,10 +2501,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,
@@ -2594,12 +2613,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
   });

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/icons'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/icons', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.icons, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.createStyles));
-})(this, (function (exports, React, material, icons, reactHookForm, formFields, makeStyles, Draggable, reResizable, theme, lodash, withStyles, createStyles) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/styles/createStyles')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', 'lodash', '@mui/styles/withStyles', '@mui/styles/createStyles'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.lodash, global.withStyles, global.createStyles));
+})(this, (function (exports, React, material, theme, reactHookForm, formFields, makeStyles, Draggable, reResizable, lodash, withStyles, createStyles) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -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
@@ -222,7 +238,7 @@
           return _onClose('CLOSED');
         },
         size: "small"
-      }, /*#__PURE__*/React__namespace.createElement(icons.Close, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.Close, {
         "data-testid": "CloseIcon"
       }))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
         sx: {
@@ -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,
@@ -569,7 +584,7 @@
 
       switch (severity) {
         case 'info':
-          return /*#__PURE__*/React__namespace.createElement(icons.Info, {
+          return /*#__PURE__*/React__namespace.createElement(theme.Info, {
             sx: {
               color: 'geowebColors.functional.notification'
             },
@@ -577,7 +592,7 @@
           });
 
         case 'success':
-          return /*#__PURE__*/React__namespace.createElement(icons.Success, {
+          return /*#__PURE__*/React__namespace.createElement(theme.Success, {
             sx: {
               color: 'geowebColors.functional.success'
             },
@@ -585,7 +600,7 @@
           });
 
         case 'warning':
-          return /*#__PURE__*/React__namespace.createElement(icons.Exclamation, {
+          return /*#__PURE__*/React__namespace.createElement(theme.Exclamation, {
             sx: {
               color: 'geowebColors.functional.warning'
             },
@@ -594,7 +609,7 @@
 
         case 'error':
         default:
-          return /*#__PURE__*/React__namespace.createElement(icons.Exclamation, {
+          return /*#__PURE__*/React__namespace.createElement(theme.Exclamation, {
             sx: {
               color: 'geowebColors.functional.error'
             },
@@ -688,7 +703,7 @@
         sx: {
           backgroundColor: 'transparent!important'
         },
-        startIcon: /*#__PURE__*/React__namespace.createElement(icons.ChevronRight, null)
+        startIcon: /*#__PURE__*/React__namespace.createElement(theme.ChevronRight, null)
       }, actionButtonProps.title.toUpperCase()));
     };
 
@@ -806,7 +821,7 @@
         justifyContent: "center",
         alignItems: "center",
         wrap: "nowrap"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.GeoWebLogo, null), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, null), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
         className: classes.title
       }, title))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -883,7 +898,7 @@
           minWidth = _e === void 0 ? 50 : _e,
           props = __rest(_a, ["startPosition", "children", "onResizeStart", "size", "setSize", "minHeight", "minWidth"]);
 
-      var theme = material.useTheme();
+      var theme$1 = material.useTheme();
       var isRightAligned = startPosition && startPosition.right !== null && startPosition.right !== undefined;
       var onStartResize = React__default["default"].useCallback(function (event, _direction, node) {
         event.stopPropagation();
@@ -917,15 +932,15 @@
         size: size,
         onResizeStop: onResizeStop,
         handleComponent: {
-          bottomRight: /*#__PURE__*/React__default["default"].createElement(icons.Resize, {
-            isRightAligned: true,
+          bottomRight: /*#__PURE__*/React__default["default"].createElement(theme.Resize, {
             style: {
-              fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
+              fill: "" + theme$1.palette.geowebColors.buttons.flat["default"].color
             }
           }),
-          bottomLeft: /*#__PURE__*/React__default["default"].createElement(icons.Resize, {
+          bottomLeft: /*#__PURE__*/React__default["default"].createElement(theme.Resize, {
+            isRightAligned: true,
             style: {
-              fill: "" + theme.palette.geowebColors.buttons.flat["default"].color
+              fill: "" + theme$1.palette.geowebColors.buttons.flat["default"].color
             }
           })
         },
@@ -1268,11 +1283,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, {
@@ -1304,7 +1314,7 @@
         sx: __assign(__assign({}, iconStyle), {
           pointerEvents: 'none'
         })
-      }, /*#__PURE__*/React__default["default"].createElement(icons.DragHandle, null))), leftComponent && leftComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null))), leftComponent && leftComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: columnSizeTitle
       }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
@@ -1327,19 +1337,26 @@
           transform: 'rotate(90deg)',
           height: 12
         })
-      }, /*#__PURE__*/React__default["default"].createElement(icons.DragHandle, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: columnSizeIcon,
         container: true,
         justifyContent: "flex-end"
-      }, onClose && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
+      }, onClose && /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+        title: "Close",
+        placement: "bottom",
+        sx: {
+          pointerEvents: 'none'
+        }
+      }, /*#__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(icons.Close, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.Close, {
         "data-testid": "CloseIcon"
-      })))));
+      }))))));
     };
 
     /* *
@@ -1704,26 +1721,26 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeft, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowLeft, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "divider"
       }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRight, null))),
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowRight, null))),
       descriptionMac: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
       }, "Ctrl"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.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"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeft, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowLeft, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "divider"
       }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRight, null)))
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowRight, null)))
     }, {
       title: 'Toggle hide/show time slider',
       description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
@@ -1759,7 +1776,7 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.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"
@@ -1772,22 +1789,22 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowUp, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowUp, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "divider"
       }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowDown, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)")),
+      }, /*#__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(icons.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"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowUp, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowUp, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "divider"
       }, "or"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowDown, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)"))
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowDown, null)), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, null, "(when slider active)"))
     }, {
       title: 'Return to current time',
       description: /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
@@ -1799,7 +1816,7 @@
         type: "connect"
       }, "+"), /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
         type: "icon"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeft, null)))
+      }, /*#__PURE__*/React__default["default"].createElement(theme.ArrowLeft, null)))
     }, {
       title: 'Change layer manager values by scrolling',
       description: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ShortCutSegment, {
@@ -1807,7 +1824,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(icons.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) {
@@ -2230,7 +2247,10 @@
           width: width + "!important",
           height: height + "!important",
           textTransform: 'none!important',
-          padding: '11px!important'
+          padding: '11px!important',
+          '& .MuiSvgIcon-root': {
+            marginRight: '0px!important'
+          }
         }, sx)
       }, props), children);
     };
@@ -2324,7 +2344,7 @@
         "data-testid": buttonTestId,
         variant: variant,
         id: buttonTestId
-      }, /*#__PURE__*/React__namespace.createElement(icons.Options, null)))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+      }, /*#__PURE__*/React__namespace.createElement(theme.Options, null)))), /*#__PURE__*/React__namespace.createElement(material.Menu, {
         anchorEl: anchorEl,
         open: isOpen,
         onClose: handleClose,
@@ -2374,10 +2394,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,
@@ -2486,12 +2506,7 @@
       return /*#__PURE__*/React__namespace.createElement(ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClickDelete,
-        icon: /*#__PURE__*/React__namespace.createElement(icons.Delete, {
-          sx: {
-            width: 20,
-            height: 20
-          }
-        }),
+        icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
         testId: "deleteButton",
         isEnabled: isEnabled
       });
@@ -2540,8 +2555,8 @@
               color: 'inherit'
             }
           },
-          icon: /*#__PURE__*/React__namespace.createElement(icons.VisibilityOff, null),
-          checkedIcon: /*#__PURE__*/React__namespace.createElement(icons.Visibility, null),
+          icon: /*#__PURE__*/React__namespace.createElement(theme.VisibilityOff, null),
+          checkedIcon: /*#__PURE__*/React__namespace.createElement(theme.Visibility, null),
           checked: isEnabled,
           disableFocusRipple: true,
           tabIndex: -1

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/package.json

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