@opengeoweb/shared 2.4.0 → 2.4.1

package/index.esm.js

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import React__default from 'react';
 import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, Alert, AlertTitle, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Tooltip, Menu, ListItemIcon, Checkbox } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
-import { Close, DragIndicator, Delete } from '@mui/icons-material';
+import Close from '@mui/icons-material/Close';
 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 { DragIndicator, Close as Close$1, Delete } from '@mui/icons-material';
 import { throttle } from 'lodash';
 import withStyles from '@mui/styles/withStyles';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -103,20 +104,6 @@ function __rest(s, e) {
     return t;
 }
 
-var useStyles$b = makeStyles(function () {
-  return {
-    dialogHeader: {
-      zIndex: 1,
-      padding: '8px 20px',
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    },
-    dialogContent: {
-      padding: '40px 20px 0px 20px !important'
-    }
-  };
-});
 var ConfirmationDialog = function ConfirmationDialog(_a) {
   var open = _a.open,
       title = _a.title,
@@ -132,8 +119,6 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       content = _a$content === void 0 ? null : _a$content,
       other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-  var classes = useStyles$b();
-
   other.catchOnCancel;
       var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
 
@@ -141,14 +126,33 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
   return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "confirmationDialog",
     open: open,
-    maxWidth: "sm",
-    fullWidth: true,
+    PaperProps: {
+      sx: {
+        width: '560px',
+        margin: 2.5
+      }
+    },
     // fix for briefly showing default options when closing dialog
     transitionDuration: 0
   }, rest), /*#__PURE__*/React.createElement(DialogTitle, {
-    className: classes.dialogHeader
+    sx: {
+      zIndex: 1,
+      padding: 2,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
-    variant: "h5",
+    sx: {
+      fontSize: {
+        xs: '16px',
+        sm: '34px'
+      },
+      fontWeight: {
+        xs: 500,
+        sm: 400
+      }
+    },
     "data-testid": "confirmationDialog-title",
     component: "span"
   }, title), /*#__PURE__*/React.createElement(IconButton, {
@@ -159,22 +163,50 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     },
     size: "small"
   }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement(DialogContent, {
-    className: classes.dialogContent
+    sx: {
+      padding: '8px 16px'
+    }
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "body1"
-  }, description), content), /*#__PURE__*/React.createElement(DialogActions, null, /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "conformationDialog-cancel",
-    color: "secondary",
-    variant: "outlined",
+  }, description), content), /*#__PURE__*/React.createElement(DialogActions, {
+    sx: {
+      padding: 2,
+      flexDirection: {
+        xs: 'column',
+        sm: 'row'
+      }
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "confirmationDialog-cancel",
+    variant: "tertiary",
+    sx: {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      }
+    },
     onClick: function onClick() {
       return onClose('CANCELLED');
     },
     autoFocus: true,
     disableRipple: true
   }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
-    "data-testid": "conformationDialog-confirm",
-    color: "secondary",
-    variant: "contained",
+    "data-testid": "confirmationDialog-confirm",
+    variant: "primary",
+    sx: {
+      width: {
+        xs: '100%',
+        sm: '150px'
+      },
+      marginLeft: {
+        xs: '0px!important',
+        sm: '8px!important'
+      },
+      marginTop: {
+        xs: 2,
+        sm: 0
+      }
+    },
     onClick: onSubmit
   }, confirmLabel)));
 };
@@ -1403,7 +1435,7 @@ var ToolHeader = function ToolHeader(_ref) {
     onClick: onClickClose,
     size: "large",
     sx: iconStyle
-  }, /*#__PURE__*/React__default.createElement(Close, null)))));
+  }, /*#__PURE__*/React__default.createElement(Close$1, null)))));
 };
 
 /* *
@@ -2733,7 +2765,7 @@ var EnableButton = function EnableButton(_ref) {
       disableFocusRipple: true,
       tabIndex: -1
     }),
-    testId: "enableLayer",
+    testId: "enableButton",
     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('@mui/styles/makeStyles'), require('@mui/icons-material'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/icons-material/MoreVert'), require('@mui/styles/createStyles')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', '@mui/icons-material', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', '@opengeoweb/theme', 'lodash', '@mui/styles/withStyles', '@mui/icons-material/MoreVert', '@mui/styles/createStyles'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.makeStyles, global.iconsMaterial, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.theme, global.lodash, global.withStyles, global.MoreVertIcon, global.createStyles));
-})(this, (function (exports, React, material, makeStyles, iconsMaterial, reactHookForm, formFields, Draggable, reResizable, theme, lodash, withStyles, MoreVertIcon, createStyles) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/icons-material/Close'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('@mui/styles/makeStyles'), require('react-draggable'), require('re-resizable'), require('@opengeoweb/theme'), require('@mui/icons-material'), require('lodash'), require('@mui/styles/withStyles'), require('@mui/icons-material/MoreVert'), require('@mui/styles/createStyles')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/icons-material/Close', 'react-hook-form', '@opengeoweb/form-fields', '@mui/styles/makeStyles', 'react-draggable', 're-resizable', '@opengeoweb/theme', '@mui/icons-material', 'lodash', '@mui/styles/withStyles', '@mui/icons-material/MoreVert', '@mui/styles/createStyles'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.Close, global.reactHookForm, global.formFields, global.makeStyles, global.Draggable, global.reResizable, global.theme, global.iconsMaterial, global.lodash, global.withStyles, global.MoreVertIcon, global.createStyles));
+})(this, (function (exports, React, material, Close, reactHookForm, formFields, makeStyles, Draggable, reResizable, theme, iconsMaterial, lodash, withStyles, MoreVertIcon, createStyles) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +26,7 @@
 
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+    var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
     var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var Draggable__default = /*#__PURE__*/_interopDefaultLegacy(Draggable);
     var withStyles__default = /*#__PURE__*/_interopDefaultLegacy(withStyles);
@@ -160,20 +161,6 @@
       }, content));
     };
 
-    var useStyles$b = makeStyles__default["default"](function () {
-      return {
-        dialogHeader: {
-          zIndex: 1,
-          padding: '8px 20px',
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center'
-        },
-        dialogContent: {
-          padding: '40px 20px 0px 20px !important'
-        }
-      };
-    });
     var ConfirmationDialog = function ConfirmationDialog(_a) {
       var open = _a.open,
           title = _a.title,
@@ -189,8 +176,6 @@
           content = _e === void 0 ? null : _e,
           other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-      var classes = useStyles$b();
-
       other.catchOnCancel;
           var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
 
@@ -198,14 +183,33 @@
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, __assign({
         "data-testid": "confirmationDialog",
         open: open,
-        maxWidth: "sm",
-        fullWidth: true,
+        PaperProps: {
+          sx: {
+            width: '560px',
+            margin: 2.5
+          }
+        },
         // fix for briefly showing default options when closing dialog
         transitionDuration: 0
       }, rest), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
-        className: classes.dialogHeader
+        sx: {
+          zIndex: 1,
+          padding: 2,
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
-        variant: "h5",
+        sx: {
+          fontSize: {
+            xs: '16px',
+            sm: '34px'
+          },
+          fontWeight: {
+            xs: 500,
+            sm: 400
+          }
+        },
         "data-testid": "confirmationDialog-title",
         component: "span"
       }, title), /*#__PURE__*/React__namespace.createElement(material.IconButton, {
@@ -215,23 +219,51 @@
           return onClose('CLOSED');
         },
         size: "small"
-      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
-        className: classes.dialogContent
+      }, /*#__PURE__*/React__namespace.createElement(Close__default["default"], null))), /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
+        sx: {
+          padding: '8px 16px'
+        }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body1"
-      }, description), content), /*#__PURE__*/React__namespace.createElement(material.DialogActions, null, /*#__PURE__*/React__namespace.createElement(material.Button, {
-        "data-testid": "conformationDialog-cancel",
-        color: "secondary",
-        variant: "outlined",
+      }, description), content), /*#__PURE__*/React__namespace.createElement(material.DialogActions, {
+        sx: {
+          padding: 2,
+          flexDirection: {
+            xs: 'column',
+            sm: 'row'
+          }
+        }
+      }, /*#__PURE__*/React__namespace.createElement(material.Button, {
+        "data-testid": "confirmationDialog-cancel",
+        variant: "tertiary",
+        sx: {
+          width: {
+            xs: '100%',
+            sm: '150px'
+          }
+        },
         onClick: function onClick() {
           return onClose('CANCELLED');
         },
         autoFocus: true,
         disableRipple: true
       }, cancelLabel), /*#__PURE__*/React__namespace.createElement(material.Button, {
-        "data-testid": "conformationDialog-confirm",
-        color: "secondary",
-        variant: "contained",
+        "data-testid": "confirmationDialog-confirm",
+        variant: "primary",
+        sx: {
+          width: {
+            xs: '100%',
+            sm: '150px'
+          },
+          marginLeft: {
+            xs: '0px!important',
+            sm: '8px!important'
+          },
+          marginTop: {
+            xs: 2,
+            sm: 0
+          }
+        },
         onClick: onSubmit
       }, confirmLabel)));
     };
@@ -2624,7 +2656,7 @@
           disableFocusRipple: true,
           tabIndex: -1
         }),
-        testId: "enableLayer",
+        testId: "enableButton",
         isEnabled: isEnabled
       });
     };

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

@@ -1,6 +1,14 @@
 import * as React from 'react';
-export declare const ConfirmationDialogExample: () => React.ReactElement;
-export declare const ConfirmationDialogSnapshot: {
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const ConfirmationDialogCustom: () => React.ReactElement;
+export declare const ConfirmationDialogLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ConfirmationDialogDark: {
     (): React.ReactElement;
     storyName: string;
 };

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

@@ -1,5 +1,4 @@
 export * from './AppHeader/AppHeader.stories';
-export * from './ConfirmationDialog/ConfirmationDialog.stories';
 export * from './ErrorBoundary/ErrorBoundary.stories';
 declare const _default: {
     title: string;

package/package.json

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