@opengeoweb/shared 2.12.0 → 2.13.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, 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,
@@ -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)
         }
@@ -1407,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, {
@@ -1479,7 +1489,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 +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"
@@ -1904,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"
@@ -1924,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"
@@ -1952,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';
@@ -2490,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,
@@ -2602,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

@@ -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,
@@ -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
             }
@@ -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, {
@@ -1340,7 +1350,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 +1732,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 +1776,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 +1796,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 +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(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) {
@@ -2383,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,
@@ -2495,12 +2506,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
       });

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.12.0",
+  "version": "2.13.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.13.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.13.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",