@opengeoweb/shared 4.15.1 → 4.17.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, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, 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';
@@ -95,15 +95,16 @@ var CustomDialog = function CustomDialog(_a) {
       _a$actions = _a.actions,
       actions = _a$actions === void 0 ? null : _a$actions,
       children = _a.children,
-      other = __rest(_a, ["title", "onClose", "description", "actions", "children"]);
+      sx = _a.sx,
+      other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
 
   return /*#__PURE__*/React.createElement(Dialog, Object.assign({
     "data-testid": "customDialog",
     PaperProps: {
-      sx: {
+      sx: Object.assign({
         width: '560px',
         margin: 2.5
-      }
+      }, sx)
     },
     // fix for briefly showing default options when closing dialog
     transitionDuration: 0,
@@ -122,14 +123,8 @@ var CustomDialog = function CustomDialog(_a) {
     }
   }, /*#__PURE__*/React.createElement(Typography, {
     sx: {
-      fontSize: {
-        xs: '16px',
-        sm: '34px'
-      },
-      fontWeight: {
-        xs: 500,
-        sm: 400
-      }
+      fontSize: '16px',
+      fontWeight: 500
     },
     "data-testid": "customDialog-title",
     component: "span"
@@ -602,45 +597,45 @@ var adjustPosition = function adjustPosition(bbox, containingView, position, set
       x: position.x + diffX,
       y: position.y + diffY
     });
-  } // bottom right
-  else if (bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
-      var _diffX = containingView.right - bbox.right;
+  } else if ( // bottom right
+  bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
+    var _diffX = containingView.right - bbox.right;
 
-      var _diffY = containingView.bottom - bbox.bottom;
+    var _diffY = containingView.bottom - bbox.bottom;
 
-      setPosition({
-        x: position.x + _diffX,
-        y: position.y + _diffY
-      });
-    } // left screen
-    else if (bbox.x < containingView.x || isHorizontallyLarger) {
-        var _diffX2 = containingView.x - bbox.x;
-
-        setPosition(Object.assign(Object.assign({}, position), {
-          x: position.x + _diffX2
-        }));
-      } // right screen
-      else if (bbox.right >= containingView.right) {
-          var _diffX3 = containingView.right - bbox.right;
-
-          setPosition(Object.assign(Object.assign({}, position), {
-            x: position.x + _diffX3
-          }));
-        } // top screen
-        else if (bbox.y < containingView.y || isVerticallyLarger) {
-            var _diffY2 = containingView.y - bbox.y;
-
-            setPosition(Object.assign(Object.assign({}, position), {
-              y: position.y + _diffY2
-            }));
-          } // bottom screen
-          else if (bbox.bottom >= containingView.bottom) {
-              var _diffY3 = containingView.bottom - bbox.bottom;
-
-              setPosition(Object.assign(Object.assign({}, position), {
-                y: position.y + _diffY3
-              }));
-            }
+    setPosition({
+      x: position.x + _diffX,
+      y: position.y + _diffY
+    });
+  } else if (bbox.x < containingView.x || isHorizontallyLarger) {
+    // left screen
+    var _diffX2 = containingView.x - bbox.x;
+
+    setPosition(Object.assign(Object.assign({}, position), {
+      x: position.x + _diffX2
+    }));
+  } else if (bbox.right >= containingView.right) {
+    // right screen
+    var _diffX3 = containingView.right - bbox.right;
+
+    setPosition(Object.assign(Object.assign({}, position), {
+      x: position.x + _diffX3
+    }));
+  } else if (bbox.y < containingView.y || isVerticallyLarger) {
+    // top screen
+    var _diffY2 = containingView.y - bbox.y;
+
+    setPosition(Object.assign(Object.assign({}, position), {
+      y: position.y + _diffY2
+    }));
+  } else if (bbox.bottom >= containingView.bottom) {
+    // bottom screen
+    var _diffY3 = containingView.bottom - bbox.bottom;
+
+    setPosition(Object.assign(Object.assign({}, position), {
+      y: position.y + _diffY3
+    }));
+  }
 };
 var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
   var onResizeWindow = React__default.useCallback(function () {
@@ -964,14 +959,17 @@ var AppHeader = function AppHeader(_ref2) {
       userMenu = _ref2.userMenu,
       workspaceTopBar = _ref2.workspaceTopBar,
       _ref2$title = _ref2.title,
-      title = _ref2$title === void 0 ? 'GeoWeb' : _ref2$title;
+      title = _ref2$title === void 0 ? 'GeoWeb' : _ref2$title,
+      onClick = _ref2.onClick;
   return /*#__PURE__*/React__default.createElement(Box, {
     component: "header",
     sx: styles$5.header
   }, /*#__PURE__*/React__default.createElement(Box, {
+    onClick: onClick,
     sx: {
       display: 'inherit',
-      alignItems: 'center'
+      alignItems: 'center',
+      cursor: onClick ? 'pointer' : 'auto'
     }
   }, /*#__PURE__*/React__default.createElement(GeoWebLogo, {
     style: {
@@ -2699,6 +2697,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;
@@ -2759,7 +2759,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;
@@ -2888,7 +2894,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,
@@ -2900,15 +2907,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

@@ -169,15 +169,16 @@
           _c = _a.actions,
           actions = _c === void 0 ? null : _c,
           children = _a.children,
-          other = __rest(_a, ["title", "onClose", "description", "actions", "children"]);
+          sx = _a.sx,
+          other = __rest(_a, ["title", "onClose", "description", "actions", "children", "sx"]);
 
       return /*#__PURE__*/React__namespace.createElement(material.Dialog, __assign({
         "data-testid": "customDialog",
         PaperProps: {
-          sx: {
+          sx: __assign({
             width: '560px',
             margin: 2.5
-          }
+          }, sx)
         },
         // fix for briefly showing default options when closing dialog
         transitionDuration: 0,
@@ -196,14 +197,8 @@
         }
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         sx: {
-          fontSize: {
-            xs: '16px',
-            sm: '34px'
-          },
-          fontWeight: {
-            xs: 500,
-            sm: 400
-          }
+          fontSize: '16px',
+          fontWeight: 500
         },
         "data-testid": "customDialog-title",
         component: "span"
@@ -471,39 +466,39 @@
           x: position.x + diffX,
           y: position.y + diffY
         });
-      } // bottom right
-      else if (bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
-          var diffX = containingView.right - bbox.right;
-          var diffY = containingView.bottom - bbox.bottom;
-          setPosition({
-            x: position.x + diffX,
-            y: position.y + diffY
-          });
-        } // left screen
-        else if (bbox.x < containingView.x || isHorizontallyLarger) {
-            var diffX = containingView.x - bbox.x;
-            setPosition(__assign(__assign({}, position), {
-              x: position.x + diffX
-            }));
-          } // right screen
-          else if (bbox.right >= containingView.right) {
-              var diffX = containingView.right - bbox.right;
-              setPosition(__assign(__assign({}, position), {
-                x: position.x + diffX
-              }));
-            } // top screen
-            else if (bbox.y < containingView.y || isVerticallyLarger) {
-                var diffY = containingView.y - bbox.y;
-                setPosition(__assign(__assign({}, position), {
-                  y: position.y + diffY
-                }));
-              } // bottom screen
-              else if (bbox.bottom >= containingView.bottom) {
-                  var diffY = containingView.bottom - bbox.bottom;
-                  setPosition(__assign(__assign({}, position), {
-                    y: position.y + diffY
-                  }));
-                }
+      } else if ( // bottom right
+      bbox.right >= containingView.right && bbox.bottom >= containingView.bottom) {
+        var diffX = containingView.right - bbox.right;
+        var diffY = containingView.bottom - bbox.bottom;
+        setPosition({
+          x: position.x + diffX,
+          y: position.y + diffY
+        });
+      } else if (bbox.x < containingView.x || isHorizontallyLarger) {
+        // left screen
+        var diffX = containingView.x - bbox.x;
+        setPosition(__assign(__assign({}, position), {
+          x: position.x + diffX
+        }));
+      } else if (bbox.right >= containingView.right) {
+        // right screen
+        var diffX = containingView.right - bbox.right;
+        setPosition(__assign(__assign({}, position), {
+          x: position.x + diffX
+        }));
+      } else if (bbox.y < containingView.y || isVerticallyLarger) {
+        // top screen
+        var diffY = containingView.y - bbox.y;
+        setPosition(__assign(__assign({}, position), {
+          y: position.y + diffY
+        }));
+      } else if (bbox.bottom >= containingView.bottom) {
+        // bottom screen
+        var diffY = containingView.bottom - bbox.bottom;
+        setPosition(__assign(__assign({}, position), {
+          y: position.y + diffY
+        }));
+      }
     };
     var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
       var onResizeWindow = React__default["default"].useCallback(function () {
@@ -844,14 +839,17 @@
           userMenu = _a.userMenu,
           workspaceTopBar = _a.workspaceTopBar,
           _b = _a.title,
-          title = _b === void 0 ? 'GeoWeb' : _b;
+          title = _b === void 0 ? 'GeoWeb' : _b,
+          onClick = _a.onClick;
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         component: "header",
         sx: styles$5.header
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        onClick: onClick,
         sx: {
           display: 'inherit',
-          alignItems: 'center'
+          alignItems: 'center',
+          cursor: onClick ? 'pointer' : 'auto'
         }
       }, /*#__PURE__*/React__default["default"].createElement(theme.GeoWebLogo, {
         style: {
@@ -2571,19 +2569,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();
@@ -2630,7 +2630,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;
@@ -2759,7 +2765,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,
@@ -2771,15 +2778,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

@@ -4,6 +4,7 @@ interface AppHeaderProps {
     userMenu?: React.ReactNode;
     workspaceTopBar?: React.ReactNode;
     title?: string;
+    onClick?: () => void;
 }
 declare const AppHeader: React.FC<AppHeaderProps>;
 export default AppHeader;

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-interface DeleteButtonProps {
+import { IconButtonProps } from '@mui/material';
+interface DeleteButtonProps extends IconButtonProps {
     tooltipTitle: string;
-    onClickDelete: () => void;
+    onClickDelete: (event: React.MouseEvent) => void;
     isEnabled?: boolean;
 }
 export declare const ManagerDeleteButton: React.FC<DeleteButtonProps>;

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.1",
+  "version": "4.17.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.1",
+    "@opengeoweb/theme": "4.17.0",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",