@opengeoweb/shared 3.0.0 → 4.1.0

package/index.esm.js

@@ -4,11 +4,9 @@ import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, Dialog
 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 { throttle } from 'lodash';
-import createStyles from '@mui/styles/createStyles';
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -811,7 +809,7 @@ var AlertBanner = function AlertBanner(_ref) {
         }
       },
       '& .MuiAlert-icon': {
-        margin: '-3px 10px 0px 0px',
+        marginTop: '-3px',
         padding: '0px'
       }
     } : {
@@ -832,13 +830,15 @@ var AlertBanner = function AlertBanner(_ref) {
       fontWeight: 'normal',
       marginTop: '0px!important',
       paddingTop: '0px!important',
-      marginBottom: '0px!important'
+      marginBottom: '0px!important',
+      lineHeight: isCompact ? '18px' : '24px'
     }
   }, title), info && /*#__PURE__*/React.createElement(Box, {
     sx: {
       fontSize: '16px',
       marginTop: 1,
-      wordBreak: 'break-word'
+      wordBreak: 'break-word',
+      lineHeight: '22px'
     }
   }, info), actionButtonProps && /*#__PURE__*/React.createElement(Button, {
     variant: "flat",
@@ -869,55 +869,51 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles(function () {
-  return {
-    wrapper: {
+
+var AppLayout = function AppLayout(_ref) {
+  var header = _ref.header,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
       height: '100vh',
       display: 'flex',
       flexDirection: 'column'
     },
-    main: {
+    "data-testid": "appLayout"
+  }, header, /*#__PURE__*/React__default.createElement(Box, {
+    component: "main",
+    sx: {
       flex: 1,
       position: 'relative'
     }
-  };
-});
-
-var AppLayout = function AppLayout(_ref) {
-  var header = _ref.header,
-      children = _ref.children;
-  var classes = useStyles$5();
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classes.wrapper
-  }, header, /*#__PURE__*/React__default.createElement("main", {
-    className: classes.main
   }, children));
 };
 
-var styles$4 = {
+var styles$5 = {
   header: function header(theme) {
-    var _ref;
-
-    return _ref = {
+    return _defineProperty({
       height: 40,
       backgroundColor: theme.palette.geowebColors.brand.brand,
       color: theme.palette.common.white,
       boxShadow: theme.shadows[1],
-      zIndex: 1000
-    }, _defineProperty(_ref, theme.breakpoints.down('sm'), {
-      padding: '0 8px'
-    }), _defineProperty(_ref, theme.breakpoints.up('sm'), {
+      zIndex: 1000,
+      padding: '0 16px'
+    }, theme.breakpoints.up('md'), {
       padding: '0 24px'
-    }), _ref;
+    });
   },
   title: {
-    marginLeft: 1,
-    fontSize: '1.25rem',
-    fontWeight: 400,
+    fontSize: '20px',
+    fontWeight: 500,
+    fontStretch: 'normal',
+    fontStyle: 'normal',
+    lineHeight: 'normal',
+    letterSpacing: '0.15px',
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis',
-    letterSpacing: '0.15px'
+    color: 'geowebColors.typographyAndIcons.text',
+    marginLeft: 1
   },
   container: {
     height: '100%'
@@ -931,34 +927,42 @@ var AppHeader = function AppHeader(_ref2) {
       title = _ref2$title === void 0 ? 'GeoWeb' : _ref2$title;
   return /*#__PURE__*/React__default.createElement(Box, {
     component: "header",
-    sx: styles$4.header
+    sx: styles$5.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
-    sx: styles$4.container,
+    sx: styles$5.container,
     container: true,
     alignItems: "center"
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1,
-    sm: 3
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    justifyContent: "flex-start"
-  }, menu)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 10,
+    xs: 6,
     sm: 6
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justifyContent: "center",
     alignItems: "center",
-    wrap: "nowrap"
-  }, /*#__PURE__*/React__default.createElement(GeoWebLogo, null), /*#__PURE__*/React__default.createElement(Typography, {
+    wrap: "nowrap",
+    sx: {
+      button: {
+        marginLeft: 4,
+        color: 'geowebColors.typographyAndIcons.text'
+      }
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React__default.createElement(GeoWebLogo, {
+    style: {
+      position: 'relative',
+      top: '-1px',
+      right: '-1px'
+    }
+  })), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
-    sx: styles$4.title
-  }, title))), /*#__PURE__*/React__default.createElement(Grid, {
+    sx: styles$5.title
+  }, title), menu)), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
-    xs: 1,
-    sm: 3,
+    xs: 6,
+    sm: 6,
     container: true,
     justifyContent: "flex-end"
   }, userMenu)));
@@ -1191,17 +1195,13 @@ ErrorBoundary.defaultProps = {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var styles$3 = {
+var styles$4 = {
   small: {
     height: 16,
     width: 16,
     fontSize: '0.5rem'
   },
-  large: {
-    height: 32,
-    width: 32,
-    fontSize: '0.938rem'
-  }
+  large: {}
 };
 
 var Avatar = function Avatar(_ref) {
@@ -1210,13 +1210,7 @@ var Avatar = function Avatar(_ref) {
       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'
-    })
+    sx: Object.assign({}, styles$4[size])
   }, children);
 };
 
@@ -1236,7 +1230,7 @@ var Avatar = function Avatar(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var styles$2 = {
+var styles$3 = {
   container: {
     position: 'absolute',
     top: 38,
@@ -1256,8 +1250,13 @@ var styles$2 = {
     }
   },
   button: {
-    color: 'common.white',
-    padding: 0
+    padding: 0,
+    border: 'none',
+    background: 'transparent',
+    '&:hover': {
+      border: 'none',
+      background: 'transparent'
+    }
   }
 };
 
@@ -1277,16 +1276,16 @@ var UserMenu = function UserMenu(_ref) {
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
-    sx: styles$2.button,
+    sx: styles$3.button,
     size: "large"
   }, /*#__PURE__*/React__default.createElement(Avatar, null, initials)), isOpen && /*#__PURE__*/React__default.createElement(Paper, {
-    sx: styles$2.container,
+    sx: styles$3.container,
     "data-testid": "userMenu"
   }, /*#__PURE__*/React__default.createElement(ClickAwayListener, {
     onClickAway: onClose,
     mouseEvent: "onMouseDown"
   }, /*#__PURE__*/React__default.createElement(MenuList, {
-    sx: styles$2.userMenu,
+    sx: styles$3.userMenu,
     variant: "menu"
   }, children))));
 };
@@ -1354,22 +1353,17 @@ var MenuItemTheme = function MenuItemTheme() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$4 = makeStyles(function (theme) {
-  return {
-    footer: {
-      boxShadow: theme.shadows[1],
-      background: theme.palette.geowebColors.background.surface,
+
+var ToolFooter = function ToolFooter() {
+  return /*#__PURE__*/React__default.createElement(Box, {
+    component: "footer",
+    sx: {
+      boxShadow: 1,
+      backgroundColor: 'geowebColors.background.surface',
       textAlign: 'right',
       height: 18,
       zIndex: 1
     }
-  };
-}); // drag handles will be handled by DraggableResizable/Resizable
-
-var ToolFooter = function ToolFooter() {
-  var classes = useStyles$4();
-  return /*#__PURE__*/React__default.createElement("footer", {
-    className: classes.footer
   });
 };
 
@@ -1386,8 +1380,8 @@ var ToolFooter = function ToolFooter() {
  * See the License for the specific language governing permissions and
  * limitations under the License.
  *
- * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
- * Copyright 2021 - Finnish Meteorological Institute (FMI)
+ * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
 
 var getStyle = function getStyle(size) {
@@ -1546,7 +1540,7 @@ var ToolHeader = function ToolHeader(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var styles$1 = {
+var styles$2 = {
   container: {
     overflow: 'hidden',
     borderRadius: 0,
@@ -1585,7 +1579,7 @@ var ToolContainer = function ToolContainer(_a) {
 
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     elevation: elevation,
-    sx: styles$1.container
+    sx: styles$2.container
   }, props), /*#__PURE__*/React__default.createElement(ErrorBoundary, null, /*#__PURE__*/React__default.createElement(ToolHeader, {
     title: title,
     size: size,
@@ -1594,7 +1588,7 @@ var ToolContainer = function ToolContainer(_a) {
     className: headerClassName,
     leftComponent: leftComponent
   })), /*#__PURE__*/React__default.createElement(Box, {
-    sx: styles$1.content,
+    sx: styles$2.content,
     style: {
       maxHeight: maxHeight
     }
@@ -1788,75 +1782,63 @@ var DraggableComponent = function DraggableComponent(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$3 = makeStyles(function (theme) {
-  return {
-    icon: {
-      backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
-      width: 40,
-      height: 40,
-      display: 'inline-flex',
-      verticalAlign: 'middle',
-      alignItems: 'center',
-      borderRadius: theme.shape.borderRadius,
-      '&>span': {
-        textAlign: 'center',
-        fontSize: 14,
-        fontWeight: 500,
-        display: 'flex',
-        margin: 'auto',
-        letterSpacing: 0.25
-      }
-    },
-    segment: {
-      margin: '0 2px',
-      verticalAlign: 'middle',
-      fontSize: 14,
-      fontWeight: 500,
-      letterSpacing: 0.25
-    },
-    connect: {
-      fontSize: 18
-    },
-    divider: {
-      margin: '0 6px',
-      fontSize: 18
-    }
-  };
-});
+var segmentStyle = {
+  margin: '0 2px',
+  verticalAlign: 'middle',
+  fontSize: 14,
+  fontWeight: 500,
+  letterSpacing: 0.25,
+  justifyContent: 'center'
+};
+var styles$1 = {
+  icon: Object.assign(Object.assign({}, segmentStyle), {
+    backgroundColor: 'geowebColors.textInputField.default.rgba',
+    width: 40,
+    height: 40,
+    display: 'inline-flex',
+    alignItems: 'center',
+    borderRadius: 1
+  }),
+  connect: Object.assign(Object.assign({}, segmentStyle), {
+    fontSize: 18
+  }),
+  divider: Object.assign(Object.assign({}, segmentStyle), {
+    margin: '0 6px',
+    fontSize: 18
+  })
+};
 
 var ShortCutSegment = function ShortCutSegment(_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
       children = _ref.children;
-  var classes = useStyles$3();
 
   if (type === 'divider') {
     return /*#__PURE__*/React__default.createElement(Typography, {
+      sx: styles$1.divider,
       "data-testid": "segment-divider",
-      className: "".concat(classes.segment, " ").concat(classes.divider),
       component: "span"
     }, children);
   }
 
   if (type === 'icon') {
-    return /*#__PURE__*/React__default.createElement("span", {
+    return /*#__PURE__*/React__default.createElement(Typography, {
+      sx: styles$1.icon,
       "data-testid": "segment-icon",
-      className: "".concat(classes.segment, " ").concat(classes.icon)
-    }, /*#__PURE__*/React__default.createElement(Typography, {
       component: "span"
-    }, children));
+    }, children);
   }
 
   if (type === 'connect') {
     return /*#__PURE__*/React__default.createElement(Typography, {
-      className: "".concat(classes.segment, " ").concat(classes.connect),
+      sx: styles$1.connect,
       "data-testid": "segment-connect",
       component: "span"
     }, children);
   }
 
   return /*#__PURE__*/React__default.createElement(Typography, {
-    className: classes.segment,
+    sx: segmentStyle,
     "data-testid": "segment-text",
     component: "span"
   }, children);
@@ -2013,33 +1995,18 @@ var getShortcutList = function getShortcutList(shortcutList) {
     });
   });
 };
-var useStyles$2 = makeStyles(function () {
-  return {
-    row: {
-      minHeight: 56
-    },
-    title: {
-      fontSize: 12,
-      fontWeight: 300,
-      letterSpacing: 0.4,
-      opacity: 0.67
-    },
-    description: {
-      alignItems: 'center'
-    }
-  };
-});
 
 var ShortcutList = function ShortcutList(_ref2) {
   var _ref2$platform = _ref2.platform,
       platform = _ref2$platform === void 0 ? 'windows' : _ref2$platform;
-  var classes = useStyles$2();
   var rows = getShortcutList(shortcuts, platform);
   return /*#__PURE__*/React__default.createElement(List, {
     "data-testid": "list-".concat(platform)
   }, rows.map(function (row, index) {
     return /*#__PURE__*/React__default.createElement(ListItem, {
-      className: classes.row,
+      sx: {
+        minHeight: 56
+      },
       divider: index !== rows.length - 1,
       key: row.title
     }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -2049,11 +2016,18 @@ var ShortcutList = function ShortcutList(_ref2) {
       alignItems: "center"
     }, /*#__PURE__*/React__default.createElement(Grid, {
       item: true,
-      className: classes.title
+      sx: {
+        fontSize: 12,
+        fontWeight: 300,
+        letterSpacing: 0.4,
+        opacity: 0.67
+      }
     }, row.title), /*#__PURE__*/React__default.createElement(Grid, {
       item: true
-    }, /*#__PURE__*/React__default.createElement("div", {
-      className: classes.description
+    }, /*#__PURE__*/React__default.createElement(Box, {
+      sx: {
+        alignItems: 'center'
+      }
     }, row.description))));
   }));
 };
@@ -2112,17 +2086,7 @@ var CheatSheet = function CheatSheet() {
   })));
 };
 
-var useStyles$1 = makeStyles(function () {
-  return {
-    backdrop: {
-      zIndex: 1
-    }
-  };
-});
-
 var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
-  var classes = useStyles$1();
-
   var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       open = _React$useState2[0],
@@ -2147,7 +2111,9 @@ var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
   }, "Cheat sheet"))), /*#__PURE__*/React__default.createElement(Backdrop, {
     "data-testid": "cheatsheet-content",
     open: open,
-    className: classes.backdrop
+    sx: {
+      zIndex: 1
+    }
   }, /*#__PURE__*/React__default.createElement(DraggableComponent, {
     startSize: {
       width: 700
@@ -2471,14 +2437,14 @@ var ToggleMenu = function ToggleMenu(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
     placement: "top",
     title: tooltipTitle
-  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ToolButton, {
+  }, /*#__PURE__*/React.createElement(ToolButton, {
     active: isOpen,
     sx: buttonSx,
     onClick: handleClick,
     "data-testid": buttonTestId,
     variant: variant,
     id: buttonTestId
-  }, /*#__PURE__*/React.createElement(Options, null)))), /*#__PURE__*/React.createElement(Menu, {
+  }, /*#__PURE__*/React.createElement(Options, null))), /*#__PURE__*/React.createElement(Menu, {
     anchorEl: anchorEl,
     open: isOpen,
     onClose: handleClose,
@@ -2525,56 +2491,46 @@ var ToggleMenu = function ToggleMenu(_ref) {
  * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2022 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles = makeStyles(function (theme) {
-  return createStyles({
-    button: {
-      height: 24,
-      width: 24,
-      borderRadius: 5,
-      marginTop: 4,
-      color: function color(_ref) {
-        var isActive = _ref.isActive,
-            isAccessible = _ref.isAccessible,
-            isEnabled = _ref.isEnabled;
-
-        if (!isEnabled) {
-          return theme.palette.geowebColors.buttons.flat.disabled.color;
-        }
 
-        if (isAccessible) {
-          return theme.palette.geowebColors.greys.accessible;
-        }
+var makeButtonStyles = function makeButtonStyles(isActive, isEnabled, isAccessible) {
+  return {
+    height: '24px',
+    width: '24px',
+    borderRadius: '5px',
+    marginTop: '4px',
+    color: function color() {
+      if (!isEnabled) {
+        return 'geowebColors.buttons.flat.disabled.color';
+      }
 
-        if (isActive) {
-          return theme.palette.common.white;
-        }
+      if (isAccessible) {
+        return 'geowebColors.greys.accessible';
+      }
 
-        return theme.palette.geowebColors.buttons.flat["default"].color;
-      },
-      backgroundColor: function backgroundColor(_ref2) {
-        var isActive = _ref2.isActive;
-        return isActive ? theme.palette.geowebColors.buttons.primary.active.fill : 'inherit';
-      },
-      '&:focus': {
-        backgroundColor: function backgroundColor(_ref3) {
-          var isActive = _ref3.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-        },
-        outline: theme.palette.geowebColors.buttons.focusDefault.outline,
-        borderRadius: 0
-      },
-      '&:hover': {
-        backgroundColor: function backgroundColor(_ref4) {
-          var isActive = _ref4.isActive;
-          return isActive ? theme.palette.geowebColors.buttons.primary.mouseOver.fill : theme.palette.geowebColors.buttons.flat.mouseOver.fill;
-        }
+      if (isActive) {
+        return 'common.white';
       }
+
+      return 'geowebColors.buttons.flat.default.color';
     },
-    popper: {
-      pointerEvents: 'none'
+    backgroundColor: function backgroundColor() {
+      return isActive ? 'geowebColors.buttons.primary.active.fill' : 'inherit';
+    },
+    '&:focus': {
+      backgroundColor: function backgroundColor() {
+        return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
+      },
+      outline: 'geowebColors.buttons.focusDefault.outline',
+      borderRadius: 0
+    },
+    '&:hover': {
+      backgroundColor: function backgroundColor() {
+        return isActive ? 'geowebColors.buttons.primary.mouseOver.fill' : 'geowebColors.buttons.flat.mouseOver.fill';
+      }
     }
-  });
-});
+  };
+};
+
 var ManagerButton = function ManagerButton(_a) {
   var _a$tooltipTitle = _a.tooltipTitle,
       tooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
@@ -2588,14 +2544,10 @@ var ManagerButton = function ManagerButton(_a) {
       testId = _a.testId,
       _a$isAccessible = _a.isAccessible,
       isAccessible = _a$isAccessible === void 0 ? false : _a$isAccessible,
-      className = _a.className,
-      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "className"]);
+      sx = _a.sx,
+      props = __rest(_a, ["tooltipTitle", "onClick", "isActive", "isEnabled", "icon", "testId", "isAccessible", "sx"]);
 
-  var classes = useStyles({
-    isActive: isActive,
-    isEnabled: isEnabled,
-    isAccessible: isAccessible
-  });
+  var buttonStyles = makeButtonStyles(isActive, isEnabled, isAccessible);
 
   var handleClick = function handleClick(event) {
     onClick(event);
@@ -2604,14 +2556,14 @@ var ManagerButton = function ManagerButton(_a) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     title: tooltipTitle,
     placement: "top",
-    classes: {
-      popper: classes.popper
+    sx: {
+      pointerEvents: 'none'
     }
   }, /*#__PURE__*/React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleClick,
     "data-testid": testId,
-    className: "".concat(classes.button, " ").concat(className),
+    sx: Object.assign(Object.assign({}, buttonStyles), sx),
     disableFocusRipple: true
   }, props), icon));
 };