@opengeoweb/shared 4.15.0 → 4.16.0

package/index.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { useRef } from 'react';
-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, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Checkbox, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility, ChevronDown } from '@opengeoweb/theme';
 import { throttle } from 'lodash';
 import Draggable from 'react-draggable';
@@ -935,6 +935,7 @@ var styles$5 = {
       color: theme.palette.common.white,
       boxShadow: theme.shadows[1],
       zIndex: 1000,
+      display: 'flex',
       padding: '0 16px'
     }, theme.breakpoints.up('md'), {
       padding: '0 24px'
@@ -961,32 +962,16 @@ var styles$5 = {
 var AppHeader = function AppHeader(_ref2) {
   var menu = _ref2.menu,
       userMenu = _ref2.userMenu,
+      workspaceTopBar = _ref2.workspaceTopBar,
       _ref2$title = _ref2.title,
       title = _ref2$title === void 0 ? 'GeoWeb' : _ref2$title;
   return /*#__PURE__*/React__default.createElement(Box, {
     component: "header",
     sx: styles$5.header
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    sx: styles$5.container,
-    container: true,
-    alignItems: "center"
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 6,
-    sm: 6
-  }, /*#__PURE__*/React__default.createElement(Grid, {
-    container: true,
-    alignItems: "center",
-    wrap: "nowrap",
-    sx: {
-      button: {
-        marginLeft: 4,
-        color: 'geowebColors.typographyAndIcons.text'
-      }
-    }
   }, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      display: 'flex'
+      display: 'inherit',
+      alignItems: 'center'
     }
   }, /*#__PURE__*/React__default.createElement(GeoWebLogo, {
     style: {
@@ -994,16 +979,28 @@ var AppHeader = function AppHeader(_ref2) {
       top: '-1px',
       right: '-1px'
     }
-  })), /*#__PURE__*/React__default.createElement(Typography, {
+  }), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
     sx: styles$5.title
-  }, title), menu)), /*#__PURE__*/React__default.createElement(Grid, {
-    item: true,
-    xs: 6,
-    sm: 6,
-    container: true,
-    justifyContent: "flex-end"
-  }, userMenu)));
+  }, title)), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      flexGrow: 1,
+      display: 'flex',
+      marginLeft: 4,
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      button: {
+        color: 'geowebColors.typographyAndIcons.text'
+      }
+    }
+  }, menu), workspaceTopBar), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  }, userMenu));
 };
 
 /* *
@@ -2702,6 +2699,8 @@ var ToggleMenu = function ToggleMenu(_ref) {
       buttonSx = _ref.buttonSx,
       _ref$tooltipTitle = _ref.tooltipTitle,
       tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
+      _ref$menuTitle = _ref.menuTitle,
+      menuTitle = _ref$menuTitle === void 0 ? '' : _ref$menuTitle,
       variant = _ref.variant,
       _ref$isDefaultOpen = _ref.isDefaultOpen,
       isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen;
@@ -2762,7 +2761,13 @@ var ToggleMenu = function ToggleMenu(_ref) {
         padding: '0px'
       }
     })
-  }, menuItems && menuItems.map(function (menuItem) {
+  }, menuTitle && /*#__PURE__*/React.createElement(ListSubheader, {
+    "data-testid": "toggleMenuTitle"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    sx: {
+      fontSize: '12px'
+    }
+  }, menuTitle)), menuItems && menuItems.map(function (menuItem) {
     var text = menuItem.text,
         icon = menuItem.icon,
         action = menuItem.action;
@@ -2891,7 +2896,8 @@ var ManagerDeleteButton = function ManagerDeleteButton(_ref) {
   var tooltipTitle = _ref.tooltipTitle,
       onClickDelete = _ref.onClickDelete,
       _ref$isEnabled = _ref.isEnabled,
-      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled;
+      isEnabled = _ref$isEnabled === void 0 ? true : _ref$isEnabled,
+      sx = _ref.sx;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
@@ -2903,15 +2909,16 @@ var ManagerDeleteButton = function ManagerDeleteButton(_ref) {
     variant: "tertiary",
     onClick: onClickDelete,
     startIcon: /*#__PURE__*/React.createElement(Delete, null),
-    sx: {
+    sx: Object.assign({
       display: 'none'
-    }
+    }, sx)
   }, "Delete")), /*#__PURE__*/React.createElement(ManagerButton, {
     tooltipTitle: tooltipTitle,
     onClick: onClickDelete,
     icon: /*#__PURE__*/React.createElement(Delete, null),
     testId: "deleteButton",
-    isEnabled: isEnabled
+    isEnabled: isEnabled,
+    sx: sx
   }));
 };
 

package/index.umd.js

@@ -815,6 +815,7 @@
           color: theme.palette.common.white,
           boxShadow: theme.shadows[1],
           zIndex: 1000,
+          display: 'flex',
           padding: '0 16px'
         }, _a[theme.breakpoints.up('md')] = {
           padding: '0 24px'
@@ -841,32 +842,16 @@
     var AppHeader = function AppHeader(_a) {
       var menu = _a.menu,
           userMenu = _a.userMenu,
+          workspaceTopBar = _a.workspaceTopBar,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         component: "header",
         sx: styles$5.header
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        sx: styles$5.container,
-        container: true,
-        alignItems: "center"
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 6,
-        sm: 6
-      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        container: true,
-        alignItems: "center",
-        wrap: "nowrap",
-        sx: {
-          button: {
-            marginLeft: 4,
-            color: 'geowebColors.typographyAndIcons.text'
-          }
-        }
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
-          display: 'flex'
+          display: 'inherit',
+          alignItems: 'center'
         }
       }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, {
         style: {
@@ -874,16 +859,28 @@
           top: '-1px',
           right: '-1px'
         }
-      })), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
+      }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
         sx: styles$5.title
-      }, title), menu)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
-        item: true,
-        xs: 6,
-        sm: 6,
-        container: true,
-        justifyContent: "flex-end"
-      }, userMenu)));
+      }, title)), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          flexGrow: 1,
+          display: 'flex',
+          marginLeft: 4,
+          alignItems: 'center'
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          button: {
+            color: 'geowebColors.typographyAndIcons.text'
+          }
+        }
+      }, menu), workspaceTopBar), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center'
+        }
+      }, userMenu));
     };
 
     /* *
@@ -2574,19 +2571,21 @@
           buttonSx = _a.buttonSx,
           _d = _a.tooltipTitle,
           tooltipTitle = _d === void 0 ? '' : _d,
+          _e = _a.menuTitle,
+          menuTitle = _e === void 0 ? '' : _e,
           variant = _a.variant,
-          _e = _a.isDefaultOpen,
-          isDefaultOpen = _e === void 0 ? false : _e;
+          _f = _a.isDefaultOpen,
+          isDefaultOpen = _f === void 0 ? false : _f;
 
-      var _f = __read(React__namespace.useState(null), 2),
-          anchorEl = _f[0],
-          setAnchorEl = _f[1];
+      var _g = __read(React__namespace.useState(null), 2),
+          anchorEl = _g[0],
+          setAnchorEl = _g[1];
 
       var isOpen = Boolean(anchorEl);
 
-      var _g = getPosition(menuPosition),
-          anchorOrigin = _g.anchorOrigin,
-          transformOrigin = _g.transformOrigin;
+      var _h = getPosition(menuPosition),
+          anchorOrigin = _h.anchorOrigin,
+          transformOrigin = _h.transformOrigin;
 
       var handleClick = function handleClick(event) {
         event.stopPropagation();
@@ -2633,7 +2632,13 @@
             padding: '0px'
           }
         })
-      }, menuItems && menuItems.map(function (menuItem) {
+      }, menuTitle && /*#__PURE__*/React__namespace.createElement(material.ListSubheader, {
+        "data-testid": "toggleMenuTitle"
+      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+        sx: {
+          fontSize: '12px'
+        }
+      }, menuTitle)), menuItems && menuItems.map(function (menuItem) {
         var text = menuItem.text,
             icon = menuItem.icon,
             action = menuItem.action;
@@ -2762,7 +2767,8 @@
       var tooltipTitle = _a.tooltipTitle,
           onClickDelete = _a.onClickDelete,
           _b = _a.isEnabled,
-          isEnabled = _b === void 0 ? true : _b;
+          isEnabled = _b === void 0 ? true : _b,
+          sx = _a.sx;
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClickDelete,
@@ -2774,15 +2780,16 @@
         variant: "tertiary",
         onClick: onClickDelete,
         startIcon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
-        sx: {
+        sx: __assign({
           display: 'none'
-        }
+        }, sx)
       }, "Delete")), /*#__PURE__*/React__namespace.createElement(ManagerButton, {
         tooltipTitle: tooltipTitle,
         onClick: onClickDelete,
         icon: /*#__PURE__*/React__namespace.createElement(theme.Delete, null),
         testId: "deleteButton",
-        isEnabled: isEnabled
+        isEnabled: isEnabled,
+        sx: sx
       }));
     };
 

package/lib/components/AppHeader/AppHeader.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 interface AppHeaderProps {
     menu?: React.ReactNode;
     userMenu?: React.ReactNode;
+    workspaceTopBar?: React.ReactNode;
     title?: string;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;

package/lib/components/ManagerDeleteButton/ManagerDeleteButton.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface DeleteButtonProps {
+import { IconButtonProps } from '@mui/material';
+interface DeleteButtonProps extends IconButtonProps {
     tooltipTitle: string;
     onClickDelete: () => void;
     isEnabled?: boolean;

package/lib/components/ToggleMenu/ToggleMenu.d.ts

@@ -15,6 +15,7 @@ interface ToggleMenuProps {
     buttonTestId?: string;
     menuPosition?: MenuPosition;
     menuItems?: MenuItemType[];
+    menuTitle?: string;
     children?: React.ReactNode;
     buttonSx?: SxProps<Theme>;
     tooltipTitle?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/theme": "4.15.0",
+    "@opengeoweb/theme": "4.16.0",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",