@opengeoweb/shared 4.19.1 → 4.21.0

package/index.esm.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import React__default, { useRef } from 'react';
-import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
-import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown } from '@opengeoweb/theme';
-import { throttle } from 'lodash';
+import { Box, Typography, Tooltip, IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, useTheme, Drawer, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, Grid, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListSubheader, ListItemIcon, Select, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, HamburgerMenu, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, ChevronDown } from '@opengeoweb/theme';
+import { throttle, escapeRegExp } from 'lodash';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { useStore } from 'react-redux';
@@ -54,8 +54,8 @@ var borderColors = {
 
 var tagStyle = function tagStyle(color) {
   // Set color to grey for summary
-  var backgroundColor = bgColors[color];
-  var borderColor = borderColors[color];
+  var backgroundColor = Object.assign({}, bgColors)[color];
+  var borderColor = Object.assign({}, borderColors)[color];
   return {
     backgroundColor: backgroundColor,
     m: 0,
@@ -316,7 +316,7 @@ var CustomTooltip = function CustomTooltip(props) {
 
 var CustomIconButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$tooltipTitle = _a.tooltipTitle,
-      tooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
+      defaultTooltipTitle = _a$tooltipTitle === void 0 ? '' : _a$tooltipTitle,
       _a$variant = _a.variant,
       variant = _a$variant === void 0 ? 'flat' : _a$variant,
       _a$isSelected = _a.isSelected,
@@ -327,9 +327,18 @@ var CustomIconButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       size = _a$size === void 0 ? 'small' : _a$size,
       children = _a.children,
       className = _a.className,
-      props = __rest(_a, ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className"]);
+      defaultTooltipProps = _a.tooltipProps,
+      props = __rest(_a, ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"]);
 
   var classNames = [].concat(_toConsumableArray(className ? [className] : []), _toConsumableArray(isSelected ? ['Mui-selected'] : []), [variant]).join(' ');
+  var tooltipTitle = (defaultTooltipProps === null || defaultTooltipProps === void 0 ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
+  var tooltipProps = Object.assign(Object.assign({}, defaultTooltipProps), {
+    title: tooltipTitle,
+    placement: (defaultTooltipProps === null || defaultTooltipProps === void 0 ? void 0 : defaultTooltipProps.placement) || 'top',
+    sx: {
+      pointerEvents: 'none'
+    }
+  });
 
   var renderIconButton = function renderIconButton() {
     return /*#__PURE__*/React.createElement(IconButton, Object.assign({
@@ -349,13 +358,7 @@ var CustomIconButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     }), children);
   };
 
-  return tooltipTitle ? /*#__PURE__*/React.createElement(CustomTooltip, {
-    title: tooltipTitle,
-    placement: "top",
-    sx: {
-      pointerEvents: 'none'
-    }
-  }, renderIconButton()) : renderIconButton();
+  return tooltipTitle && !props.disabled ? /*#__PURE__*/React.createElement(CustomTooltip, Object.assign({}, tooltipProps), renderIconButton()) : renderIconButton();
 });
 
 var CustomDialog = function CustomDialog(_a) {
@@ -798,7 +801,14 @@ var useDialogActions = function useDialogActions(awaitingPromiseRef) {
 };
 var ConfirmationServiceProvider = function ConfirmationServiceProvider(_ref) {
   var children = _ref.children;
-  var awaitingPromiseRef = React.useRef();
+  var awaitingPromiseRef = React.useRef({
+    resolve: function resolve() {
+      return Promise.resolve();
+    },
+    reject: function reject() {
+      return Promise.reject();
+    }
+  });
 
   var _useDialogActions = useDialogActions(awaitingPromiseRef),
       openConfirmation = _useDialogActions.openConfirmation,
@@ -1006,9 +1016,38 @@ var AppLayout = function AppLayout(_ref) {
   }, children));
 };
 
-var styles$5 = {
-  header: function header(theme) {
-    return _defineProperty({
+var AppHeader = function AppHeader(_ref) {
+  var _sx;
+
+  var menu = _ref.menu,
+      userMenu = _ref.userMenu,
+      workspaceTopBar = _ref.workspaceTopBar,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? 'GeoWeb' : _ref$title,
+      onClick = _ref.onClick;
+  var theme = useTheme();
+
+  var _React$useState = React__default.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isDrawerOpen = _React$useState2[0],
+      toggleDrawer = _React$useState2[1];
+
+  var onToggleDrawer = function onToggleDrawer(isOpen) {
+    return toggleDrawer(isOpen);
+  };
+
+  var onKeyDown = function onKeyDown(event) {
+    if (event.key === 'Tab' || event.key === 'Shift') {
+      return;
+    }
+
+    toggleDrawer(false);
+  };
+
+  return /*#__PURE__*/React__default.createElement(Box, {
+    component: "header",
+    role: "heading",
+    sx: (_sx = {
       height: 40,
       backgroundColor: theme.palette.geowebColors.brand.brand,
       color: theme.palette.common.white,
@@ -1016,38 +1055,21 @@ var styles$5 = {
       zIndex: 1000,
       display: 'flex',
       padding: '0 16px'
-    }, theme.breakpoints.up('md'), {
+    }, _defineProperty(_sx, theme.breakpoints.up('md'), {
       padding: '0 24px'
-    });
-  },
-  title: {
-    fontSize: '20px',
-    fontWeight: 500,
-    fontStretch: 'normal',
-    fontStyle: 'normal',
-    lineHeight: 'normal',
-    letterSpacing: '0.15px',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    textOverflow: 'ellipsis',
-    color: 'geowebColors.typographyAndIcons.text',
-    marginLeft: 1
-  },
-  container: {
-    height: '100%'
-  }
-};
-
-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,
-      onClick = _ref2.onClick;
-  return /*#__PURE__*/React__default.createElement(Box, {
-    component: "header",
-    sx: styles$5.header
+    }), _defineProperty(_sx, theme.breakpoints.up('sm'), {
+      '.workspace-topbar': {
+        marginLeft: 3,
+        maxWidth: 260
+      },
+      '.hamburger-btn': {
+        marginLeft: 4
+      },
+      h1: {
+        maxWidth: 'initial',
+        display: 'block'
+      }
+    }), _sx)
   }, /*#__PURE__*/React__default.createElement(Box, {
     onClick: onClick,
     sx: {
@@ -1063,24 +1085,71 @@ var AppHeader = function AppHeader(_ref2) {
     }
   }), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "h1",
-    sx: styles$5.title
-  }, title)), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
-      flexGrow: 1,
+      display: 'none',
+      fontSize: '20px',
+      fontWeight: 500,
+      fontStretch: 'normal',
+      fontStyle: 'normal',
+      lineHeight: 'normal',
+      letterSpacing: '0.15px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      color: 'geowebColors.typographyAndIcons.text',
+      marginLeft: 1,
+      maxWidth: 130
+    }
+  }, title)), menu && /*#__PURE__*/React__default.createElement(Box, {
+    className: "hamburger-btn",
+    sx: {
       display: 'flex',
-      marginLeft: 4,
-      alignItems: 'center'
+      alignItems: 'center',
+      marginLeft: 1
     }
-  }, /*#__PURE__*/React__default.createElement(Box, {
+  }, /*#__PURE__*/React__default.createElement(CustomIconButton, {
+    "data-testid": "menuButton",
+    onClick: function onClick() {
+      return onToggleDrawer(true);
+    },
+    isSelected: isDrawerOpen
+  }, /*#__PURE__*/React__default.createElement(HamburgerMenu, null)), /*#__PURE__*/React__default.createElement(Drawer, {
+    "data-testid": "app-drawer",
+    anchor: "left",
+    open: isDrawerOpen,
+    onClose: function onClose() {
+      return onToggleDrawer(false);
+    },
+    onClick: function onClick() {
+      return onToggleDrawer(false);
+    },
+    onKeyDown: onKeyDown,
     sx: {
-      button: {
-        color: 'geowebColors.typographyAndIcons.text'
+      '& .MuiDrawer-paper': {
+        top: '40px'
       }
     }
-  }, menu), workspaceTopBar), /*#__PURE__*/React__default.createElement(Box, {
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    role: "presentation",
+    sx: {
+      width: '250px',
+      overflowY: 'auto'
+    }
+  }, menu))), /*#__PURE__*/React__default.createElement(Box, {
+    className: "workspace-topbar",
     sx: {
+      flexGrow: 1,
       display: 'flex',
-      alignItems: 'center'
+      marginLeft: 1,
+      alignItems: 'center',
+      maxWidth: 168
+    }
+  }, workspaceTopBar), /*#__PURE__*/React__default.createElement(Box, {
+    sx: {
+      display: 'flex',
+      alignItems: 'center',
+      flexGrow: 1,
+      justifyContent: 'flex-end'
     }
   }, userMenu));
 };
@@ -1564,7 +1633,13 @@ var ToolHeader = function ToolHeader(_ref) {
       _ref$leftHeaderCompon = _ref.leftHeaderComponent,
       leftHeaderComponent = _ref$leftHeaderCompon === void 0 ? null : _ref$leftHeaderCompon,
       _ref$rightHeaderCompo = _ref.rightHeaderComponent,
-      rightHeaderComponent = _ref$rightHeaderCompo === void 0 ? null : _ref$rightHeaderCompo;
+      rightHeaderComponent = _ref$rightHeaderCompo === void 0 ? null : _ref$rightHeaderCompo,
+      _ref$dragHandleIcon = _ref.dragHandleIcon,
+      dragHandleIcon = _ref$dragHandleIcon === void 0 ? /*#__PURE__*/React__default.createElement(DragHandle, null) : _ref$dragHandleIcon,
+      _ref$closeIcon = _ref.closeIcon,
+      closeIcon = _ref$closeIcon === void 0 ? /*#__PURE__*/React__default.createElement(Close, {
+    "data-testid": "CloseIcon"
+  }) : _ref$closeIcon;
   var styles = getStyle(size);
   var columnSizeIcon = leftHeaderComponent || rightHeaderComponent ? 4 : 1;
   var columnSizeTitle = leftHeaderComponent || rightHeaderComponent ? 4 : 10;
@@ -1601,7 +1676,7 @@ var ToolHeader = function ToolHeader(_ref) {
       pointerEvents: 'none',
       '&.MuiIconButton-root': iconStyle
     }
-  }, /*#__PURE__*/React__default.createElement(DragHandle, null))), leftHeaderComponent && leftHeaderComponent), /*#__PURE__*/React__default.createElement(Grid, {
+  }, dragHandleIcon)), leftHeaderComponent && leftHeaderComponent), /*#__PURE__*/React__default.createElement(Grid, {
     className: "header-title",
     item: true,
     xs: columnSizeTitle
@@ -1626,7 +1701,7 @@ var ToolHeader = function ToolHeader(_ref) {
         height: 12
       })
     }
-  }, /*#__PURE__*/React__default.createElement(DragHandle, null)))), /*#__PURE__*/React__default.createElement(Grid, {
+  }, dragHandleIcon))), /*#__PURE__*/React__default.createElement(Grid, {
     className: "header-right",
     item: true,
     xs: columnSizeIcon,
@@ -1645,9 +1720,7 @@ var ToolHeader = function ToolHeader(_ref) {
     sx: {
       '&.MuiButtonBase-root.MuiIconButton-root': iconStyle
     }
-  }, /*#__PURE__*/React__default.createElement(Close, {
-    "data-testid": "CloseIcon"
-  }))))));
+  }, closeIcon)))));
 };
 
 /* *
@@ -1703,7 +1776,9 @@ var ToolContainer = function ToolContainer(_a) {
       leftHeaderComponent = _a$leftHeaderComponen === void 0 ? null : _a$leftHeaderComponen,
       _a$rightHeaderCompone = _a.rightHeaderComponent,
       rightHeaderComponent = _a$rightHeaderCompone === void 0 ? null : _a$rightHeaderCompone,
-      props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent"]);
+      dragHandleIcon = _a.dragHandleIcon,
+      closeIcon = _a.closeIcon,
+      props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"]);
 
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     elevation: elevation,
@@ -1715,7 +1790,9 @@ var ToolContainer = function ToolContainer(_a) {
     onClose: onClose,
     className: headerClassName,
     leftHeaderComponent: leftHeaderComponent,
-    rightHeaderComponent: rightHeaderComponent
+    rightHeaderComponent: rightHeaderComponent,
+    dragHandleIcon: dragHandleIcon,
+    closeIcon: closeIcon
   })), /*#__PURE__*/React__default.createElement(Box, {
     sx: styles$2.content,
     style: {
@@ -1954,10 +2031,12 @@ var DraggableComponent = function DraggableComponent(_a) {
       leftHeaderComponent = _a$leftHeaderComponen === void 0 ? null : _a$leftHeaderComponen,
       _a$rightHeaderCompone = _a.rightHeaderComponent,
       rightHeaderComponent = _a$rightHeaderCompone === void 0 ? null : _a$rightHeaderCompone,
+      dragHandleIcon = _a.dragHandleIcon,
+      closeIcon = _a.closeIcon,
       className = _a.className,
       _a$sx = _a.sx,
       sx = _a$sx === void 0 ? {} : _a$sx,
-      props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "onFocus", "onBlur", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "className", "sx"]);
+      props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "onFocus", "onBlur", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx"]);
 
   var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
   var elevation = BASE_ELEVATION + order;
@@ -2002,7 +2081,8 @@ var DraggableComponent = function DraggableComponent(_a) {
     });
     var newPos = calculateNewPosition(position, isRightAligned, handle, delta); // eslint-disable-next-line no-param-reassign
 
-    node.parentNode.style.transform = "translate(".concat(newPos.x, "px, ").concat(newPos.y, "px)");
+    var parent = node.parentNode;
+    parent.style.transform = "translate(".concat(newPos.x, "px, ").concat(newPos.y, "px)");
   }, [onChangeSize, position, isRightAligned]);
 
   var onStopResize = function onStopResize(_event, direction, node, delta) {
@@ -2063,6 +2143,8 @@ var DraggableComponent = function DraggableComponent(_a) {
     headerClassName: headerClassName,
     leftHeaderComponent: leftHeaderComponent,
     rightHeaderComponent: rightHeaderComponent,
+    dragHandleIcon: dragHandleIcon,
+    closeIcon: closeIcon,
     className: className
   }, children)))) : null;
 };
@@ -2661,55 +2743,6 @@ var CustomToggleButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, props));
 });
 
-/* *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * 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)
- * */
-var ToolButton = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var active = _a.active,
-      _a$width = _a.width,
-      width = _a$width === void 0 ? '24px' : _a$width,
-      _a$height = _a.height,
-      height = _a$height === void 0 ? '24px' : _a$height,
-      children = _a.children,
-      _a$value = _a.value,
-      value = _a$value === void 0 ? 0 : _a$value,
-      _a$sx = _a.sx,
-      sx = _a$sx === void 0 ? {} : _a$sx,
-      _a$variant = _a.variant,
-      variant = _a$variant === void 0 ? 'tool' : _a$variant,
-      props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
-
-  return /*#__PURE__*/React.createElement(CustomToggleButton, Object.assign({
-    ref: ref,
-    variant: variant,
-    disableRipple: true,
-    selected: active,
-    value: value,
-    sx: Object.assign({
-      width: "".concat(width, "!important"),
-      height: "".concat(height, "!important"),
-      textTransform: 'none!important',
-      padding: '11px!important',
-      '& .MuiSvgIcon-root': {
-        marginRight: '0px!important'
-      }
-    }, sx)
-  }, props), children);
-});
-
 var getPosition = function getPosition(menuPosition) {
   switch (menuPosition) {
     case 'bottom':
@@ -2762,7 +2795,8 @@ var ToggleMenu = function ToggleMenu(_ref) {
       tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
       _ref$menuTitle = _ref.menuTitle,
       menuTitle = _ref$menuTitle === void 0 ? '' : _ref$menuTitle,
-      variant = _ref.variant,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'tool' : _ref$variant,
       _ref$isDefaultOpen = _ref.isDefaultOpen,
       isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
       _ref$buttonIcon = _ref.buttonIcon,
@@ -2794,17 +2828,18 @@ var ToggleMenu = function ToggleMenu(_ref) {
       setAnchorEl(document.getElementById(buttonTestId));
     }
   }, [isDefaultOpen, buttonTestId]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomTooltip, {
-    placement: "top",
-    title: tooltipTitle
-  }, /*#__PURE__*/React.createElement(ToolButton, {
-    active: isOpen,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CustomIconButton, {
+    tooltipProps: {
+      placement: 'top',
+      title: tooltipTitle
+    },
+    isSelected: isOpen,
     sx: buttonSx,
     onClick: handleClick,
     "data-testid": buttonTestId,
     variant: variant,
     id: buttonTestId
-  }, buttonIcon)), /*#__PURE__*/React.createElement(Menu, {
+  }, buttonIcon), /*#__PURE__*/React.createElement(Menu, {
     anchorEl: anchorEl,
     open: isOpen,
     onClose: function onClose(event, reason) {
@@ -2950,6 +2985,7 @@ var TooltipSelect = function TooltipSelect(_a) {
       tooltipOpen = _useControlledTooltip2[0],
       setTooltipOpen = _useControlledTooltip2[1];
 
+  var theme = useTheme();
   var onWheel = React.useCallback(function (event) {
     if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
       if (selectOpen) {
@@ -2987,6 +3023,7 @@ var TooltipSelect = function TooltipSelect(_a) {
   var onBlur = React.useCallback(function () {
     setTooltipOpen(false);
   }, [setTooltipOpen]);
+  var selectStyles = noStyling ? {} : tooltipContainerStyles(!!isEnabled, hasBackgroundColor);
   return /*#__PURE__*/React.createElement(CustomTooltip, {
     title: tooltip,
     placement: "top",
@@ -3009,7 +3046,7 @@ var TooltipSelect = function TooltipSelect(_a) {
           }
         }
       },
-      sx: {
+      sx: Object.assign({
         '& ul': {
           backgroundColor: 'geowebColors.background.surface'
         },
@@ -3045,9 +3082,9 @@ var TooltipSelect = function TooltipSelect(_a) {
             }
           }
         }
-      }
+      }, theme.palette.geowebColors.tooltips.tooltipSelect.menu)
     },
-    sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
+    sx: Object.assign(Object.assign({}, selectStyles), theme.palette.geowebColors.tooltips.tooltipSelect.select)
   }, props)));
 };
 
@@ -3111,6 +3148,44 @@ var CustomAccordion = function CustomAccordion(_a) {
   }, children));
 };
 
+var highlightStyle = {
+  background: '#ffeecc'
+};
+
+var SearchHighlight = function SearchHighlight(_ref) {
+  var _ref$text = _ref.text,
+      text = _ref$text === void 0 ? '' : _ref$text,
+      search = _ref.search;
+
+  if (search === '') {
+    return /*#__PURE__*/React__default.createElement("span", null, text);
+  }
+
+  var searchWords = search.split(' ').reduce(function (words, word) {
+    return word ? [].concat(_toConsumableArray(words), [word.toLocaleLowerCase()]) : words;
+  }, []);
+  var searchRegex = searchWords.map(function (word) {
+    return escapeRegExp(word);
+  }).join('|');
+  var textParts = text.split(new RegExp("(".concat(searchRegex, ")"), 'gi'));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, textParts.map(function (part, index) {
+    var key = "".concat(part, "-").concat(index);
+
+    if (searchWords.some(function (search) {
+      return part.toLocaleLowerCase().includes(search);
+    })) {
+      return /*#__PURE__*/React__default.createElement("mark", {
+        key: key,
+        style: highlightStyle
+      }, part);
+    }
+
+    return /*#__PURE__*/React__default.createElement("span", {
+      key: key
+    }, part);
+  }));
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -3460,4 +3535,4 @@ var index = /*#__PURE__*/Object.freeze({
     differenceInHours: differenceInHours
 });
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomAccordion, CustomDialog, CustomIconButton, CustomSlider, CustomToggleButton, CustomTooltip, DEFAULT_ERROR_MESSAGE, DraggableComponent$1 as Draggable, ErrorBoundary, ResizeComponent as Resizable, SearchHighlight, StatusTag, ToggleMenu, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, adjustPosition, calculateDialogSizeAndPosition, index as dateUtils, defaultDelay, getAxiosErrorMessage, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useControlledTooltip, useDialogActions, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };

package/index.umd.js

@@ -128,8 +128,10 @@
 
     var tagStyle = function tagStyle(color) {
       // Set color to grey for summary
-      var backgroundColor = bgColors[color];
-      var borderColor = borderColors[color];
+      var backgroundColor = __assign({}, bgColors)[color];
+
+      var borderColor = __assign({}, borderColors)[color];
+
       return {
         backgroundColor: backgroundColor,
         m: 0,
@@ -228,7 +230,7 @@
      * */
     var CustomIconButton = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
       var _b = _a.tooltipTitle,
-          tooltipTitle = _b === void 0 ? '' : _b,
+          defaultTooltipTitle = _b === void 0 ? '' : _b,
           _c = _a.variant,
           variant = _c === void 0 ? 'flat' : _c,
           _d = _a.isSelected,
@@ -239,10 +241,21 @@
           size = _f === void 0 ? 'small' : _f,
           children = _a.children,
           className = _a.className,
-          props = __rest(_a, ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className"]);
+          defaultTooltipProps = _a.tooltipProps,
+          props = __rest(_a, ["tooltipTitle", "variant", "isSelected", "shouldShowAsDisabled", "size", "children", "className", "tooltipProps"]);
 
       var classNames = __spreadArray(__spreadArray(__spreadArray([], __read(className ? [className] : [])), __read(isSelected ? ['Mui-selected'] : [])), [variant]).join(' ');
 
+      var tooltipTitle = (defaultTooltipProps === null || defaultTooltipProps === void 0 ? void 0 : defaultTooltipProps.title) || defaultTooltipTitle;
+
+      var tooltipProps = __assign(__assign({}, defaultTooltipProps), {
+        title: tooltipTitle,
+        placement: (defaultTooltipProps === null || defaultTooltipProps === void 0 ? void 0 : defaultTooltipProps.placement) || 'top',
+        sx: {
+          pointerEvents: 'none'
+        }
+      });
+
       var renderIconButton = function renderIconButton() {
         return /*#__PURE__*/React__namespace.createElement(material.IconButton, __assign({
           "aria-label": tooltipTitle
@@ -261,13 +274,7 @@
         }), children);
       };
 
-      return tooltipTitle ? /*#__PURE__*/React__namespace.createElement(CustomTooltip, {
-        title: tooltipTitle,
-        placement: "top",
-        sx: {
-          pointerEvents: 'none'
-        }
-      }, renderIconButton()) : renderIconButton();
+      return tooltipTitle && !props.disabled ? /*#__PURE__*/React__namespace.createElement(CustomTooltip, __assign({}, tooltipProps), renderIconButton()) : renderIconButton();
     });
 
     var CustomDialog = function CustomDialog(_a) {
@@ -691,7 +698,14 @@
     };
     var ConfirmationServiceProvider = function ConfirmationServiceProvider(_a) {
       var children = _a.children;
-      var awaitingPromiseRef = React__namespace.useRef();
+      var awaitingPromiseRef = React__namespace.useRef({
+        resolve: function resolve() {
+          return Promise.resolve();
+        },
+        reject: function reject() {
+          return Promise.reject();
+        }
+      });
 
       var _b = useDialogActions(awaitingPromiseRef),
           openConfirmation = _b.openConfirmation,
@@ -911,53 +925,63 @@
      * See the License for the specific language governing permissions and
      * limitations under the License.
      *
-     * Copyright 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
-     * Copyright 2022 - Finnish Meteorological Institute (FMI)
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
      * */
-    var styles$5 = {
-      header: function header(theme) {
-        var _a;
-
-        return _a = {
-          height: 40,
-          backgroundColor: theme.palette.geowebColors.brand.brand,
-          color: theme.palette.common.white,
-          boxShadow: theme.shadows[1],
-          zIndex: 1000,
-          display: 'flex',
-          padding: '0 16px'
-        }, _a[theme.breakpoints.up('md')] = {
-          padding: '0 24px'
-        }, _a;
-      },
-      title: {
-        fontSize: '20px',
-        fontWeight: 500,
-        fontStretch: 'normal',
-        fontStyle: 'normal',
-        lineHeight: 'normal',
-        letterSpacing: '0.15px',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        color: 'geowebColors.typographyAndIcons.text',
-        marginLeft: 1
-      },
-      container: {
-        height: '100%'
-      }
-    };
 
     var AppHeader = function AppHeader(_a) {
+      var _b;
+
       var menu = _a.menu,
           userMenu = _a.userMenu,
           workspaceTopBar = _a.workspaceTopBar,
-          _b = _a.title,
-          title = _b === void 0 ? 'GeoWeb' : _b,
+          _c = _a.title,
+          title = _c === void 0 ? 'GeoWeb' : _c,
           onClick = _a.onClick;
+      var theme$1 = material.useTheme();
+
+      var _d = __read(React__default["default"].useState(false), 2),
+          isDrawerOpen = _d[0],
+          toggleDrawer = _d[1];
+
+      var onToggleDrawer = function onToggleDrawer(isOpen) {
+        return toggleDrawer(isOpen);
+      };
+
+      var onKeyDown = function onKeyDown(event) {
+        if (event.key === 'Tab' || event.key === 'Shift') {
+          return;
+        }
+
+        toggleDrawer(false);
+      };
+
       return /*#__PURE__*/React__default["default"].createElement(material.Box, {
         component: "header",
-        sx: styles$5.header
+        role: "heading",
+        sx: (_b = {
+          height: 40,
+          backgroundColor: theme$1.palette.geowebColors.brand.brand,
+          color: theme$1.palette.common.white,
+          boxShadow: theme$1.shadows[1],
+          zIndex: 1000,
+          display: 'flex',
+          padding: '0 16px'
+        }, _b[theme$1.breakpoints.up('md')] = {
+          padding: '0 24px'
+        }, _b[theme$1.breakpoints.up('sm')] = {
+          '.workspace-topbar': {
+            marginLeft: 3,
+            maxWidth: 260
+          },
+          '.hamburger-btn': {
+            marginLeft: 4
+          },
+          h1: {
+            maxWidth: 'initial',
+            display: 'block'
+          }
+        }, _b)
       }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
         onClick: onClick,
         sx: {
@@ -973,24 +997,71 @@
         }
       }), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "h1",
-        sx: styles$5.title
-      }, title)), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: {
-          flexGrow: 1,
+          display: 'none',
+          fontSize: '20px',
+          fontWeight: 500,
+          fontStretch: 'normal',
+          fontStyle: 'normal',
+          lineHeight: 'normal',
+          letterSpacing: '0.15px',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          textOverflow: 'ellipsis',
+          color: 'geowebColors.typographyAndIcons.text',
+          marginLeft: 1,
+          maxWidth: 130
+        }
+      }, title)), menu && /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        className: "hamburger-btn",
+        sx: {
           display: 'flex',
-          marginLeft: 4,
-          alignItems: 'center'
+          alignItems: 'center',
+          marginLeft: 1
         }
-      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      }, /*#__PURE__*/React__default["default"].createElement(CustomIconButton, {
+        "data-testid": "menuButton",
+        onClick: function onClick() {
+          return onToggleDrawer(true);
+        },
+        isSelected: isDrawerOpen
+      }, /*#__PURE__*/React__default["default"].createElement(theme.HamburgerMenu, null)), /*#__PURE__*/React__default["default"].createElement(material.Drawer, {
+        "data-testid": "app-drawer",
+        anchor: "left",
+        open: isDrawerOpen,
+        onClose: function onClose() {
+          return onToggleDrawer(false);
+        },
+        onClick: function onClick() {
+          return onToggleDrawer(false);
+        },
+        onKeyDown: onKeyDown,
         sx: {
-          button: {
-            color: 'geowebColors.typographyAndIcons.text'
+          '& .MuiDrawer-paper': {
+            top: '40px'
           }
         }
-      }, menu), workspaceTopBar), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        role: "presentation",
         sx: {
+          width: '250px',
+          overflowY: 'auto'
+        }
+      }, menu))), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        className: "workspace-topbar",
+        sx: {
+          flexGrow: 1,
           display: 'flex',
-          alignItems: 'center'
+          marginLeft: 1,
+          alignItems: 'center',
+          maxWidth: 168
+        }
+      }, workspaceTopBar), /*#__PURE__*/React__default["default"].createElement(material.Box, {
+        sx: {
+          display: 'flex',
+          alignItems: 'center',
+          flexGrow: 1,
+          justifyContent: 'flex-end'
         }
       }, userMenu));
     };
@@ -1450,7 +1521,13 @@
           _e = _a.leftHeaderComponent,
           leftHeaderComponent = _e === void 0 ? null : _e,
           _f = _a.rightHeaderComponent,
-          rightHeaderComponent = _f === void 0 ? null : _f;
+          rightHeaderComponent = _f === void 0 ? null : _f,
+          _g = _a.dragHandleIcon,
+          dragHandleIcon = _g === void 0 ? /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null) : _g,
+          _h = _a.closeIcon,
+          closeIcon = _h === void 0 ? /*#__PURE__*/React__default["default"].createElement(theme.Close, {
+        "data-testid": "CloseIcon"
+      }) : _h;
       var styles = getStyle(size);
       var columnSizeIcon = leftHeaderComponent || rightHeaderComponent ? 4 : 1;
       var columnSizeTitle = leftHeaderComponent || rightHeaderComponent ? 4 : 10;
@@ -1487,7 +1564,7 @@
           pointerEvents: 'none',
           '&.MuiIconButton-root': iconStyle
         }
-      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null))), leftHeaderComponent && leftHeaderComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, dragHandleIcon)), leftHeaderComponent && leftHeaderComponent), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         className: "header-title",
         item: true,
         xs: columnSizeTitle
@@ -1512,7 +1589,7 @@
             height: 12
           })
         }
-      }, /*#__PURE__*/React__default["default"].createElement(theme.DragHandle, null)))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
+      }, dragHandleIcon))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         className: "header-right",
         item: true,
         xs: columnSizeIcon,
@@ -1531,9 +1608,7 @@
         sx: {
           '&.MuiButtonBase-root.MuiIconButton-root': iconStyle
         }
-      }, /*#__PURE__*/React__default["default"].createElement(theme.Close, {
-        "data-testid": "CloseIcon"
-      }))))));
+      }, closeIcon)))));
     };
 
     /* *
@@ -1591,7 +1666,9 @@
           leftHeaderComponent = _j === void 0 ? null : _j,
           _k = _a.rightHeaderComponent,
           rightHeaderComponent = _k === void 0 ? null : _k,
-          props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent"]);
+          dragHandleIcon = _a.dragHandleIcon,
+          closeIcon = _a.closeIcon,
+          props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon"]);
 
       return /*#__PURE__*/React__default["default"].createElement(material.Paper, __assign({
         elevation: elevation,
@@ -1603,7 +1680,9 @@
         onClose: onClose,
         className: headerClassName,
         leftHeaderComponent: leftHeaderComponent,
-        rightHeaderComponent: rightHeaderComponent
+        rightHeaderComponent: rightHeaderComponent,
+        dragHandleIcon: dragHandleIcon,
+        closeIcon: closeIcon
       })), /*#__PURE__*/React__default["default"].createElement(material.Box, {
         sx: styles$2.content,
         style: {
@@ -1844,10 +1923,12 @@
           leftHeaderComponent = _t === void 0 ? null : _t,
           _u = _a.rightHeaderComponent,
           rightHeaderComponent = _u === void 0 ? null : _u,
+          dragHandleIcon = _a.dragHandleIcon,
+          closeIcon = _a.closeIcon,
           className = _a.className,
           _v = _a.sx,
           sx = _v === void 0 ? {} : _v,
-          props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "onFocus", "onBlur", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "className", "sx"]);
+          props = __rest(_a, ["title", "bounds", "cancel", "headerSize", "startSize", "startPosition", "children", "isOpen", "onClose", "initialMaxHeight", "onChangeSize", "onMouseDown", "onResizeStop", "onDragEnd", "onFocus", "onBlur", "order", "source", "leftHeaderComponent", "rightHeaderComponent", "dragHandleIcon", "closeIcon", "className", "sx"]);
 
       var zIndex = (source === 'app' ? BASE_Z_INDEX : 1000) + order;
       var elevation = BASE_ELEVATION + order;
@@ -1889,7 +1970,8 @@
         });
         var newPos = calculateNewPosition(position, isRightAligned, handle, delta); // eslint-disable-next-line no-param-reassign
 
-        node.parentNode.style.transform = "translate(" + newPos.x + "px, " + newPos.y + "px)";
+        var parent = node.parentNode;
+        parent.style.transform = "translate(" + newPos.x + "px, " + newPos.y + "px)";
       }, [onChangeSize, position, isRightAligned]);
 
       var onStopResize = function onStopResize(_event, direction, node, delta) {
@@ -1950,6 +2032,8 @@
         headerClassName: headerClassName,
         leftHeaderComponent: leftHeaderComponent,
         rightHeaderComponent: rightHeaderComponent,
+        dragHandleIcon: dragHandleIcon,
+        closeIcon: closeIcon,
         className: className
       }, children)))) : null;
     };
@@ -2549,55 +2633,6 @@
       }, props));
     });
 
-    /* *
-     * Licensed under the Apache License, Version 2.0 (the "License");
-     * you may not use this file except in compliance with the License.
-     * You may obtain a copy of the License at
-     *
-     *     http://www.apache.org/licenses/LICENSE-2.0
-     *
-     * Unless required by applicable law or agreed to in writing, software
-     * distributed under the License is distributed on an "AS IS" BASIS,
-     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     * 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)
-     * */
-    var ToolButton = /*#__PURE__*/React__namespace.forwardRef(function (_a, ref) {
-      var active = _a.active,
-          _b = _a.width,
-          width = _b === void 0 ? '24px' : _b,
-          _c = _a.height,
-          height = _c === void 0 ? '24px' : _c,
-          children = _a.children,
-          _d = _a.value,
-          value = _d === void 0 ? 0 : _d,
-          _e = _a.sx,
-          sx = _e === void 0 ? {} : _e,
-          _f = _a.variant,
-          variant = _f === void 0 ? 'tool' : _f,
-          props = __rest(_a, ["active", "width", "height", "children", "value", "sx", "variant"]);
-
-      return /*#__PURE__*/React__namespace.createElement(CustomToggleButton, __assign({
-        ref: ref,
-        variant: variant,
-        disableRipple: true,
-        selected: active,
-        value: value,
-        sx: __assign({
-          width: width + "!important",
-          height: height + "!important",
-          textTransform: 'none!important',
-          padding: '11px!important',
-          '& .MuiSvgIcon-root': {
-            marginRight: '0px!important'
-          }
-        }, sx)
-      }, props), children);
-    });
-
     var getPosition = function getPosition(menuPosition) {
       switch (menuPosition) {
         case 'bottom':
@@ -2650,21 +2685,22 @@
           tooltipTitle = _d === void 0 ? '' : _d,
           _e = _a.menuTitle,
           menuTitle = _e === void 0 ? '' : _e,
-          variant = _a.variant,
-          _f = _a.isDefaultOpen,
-          isDefaultOpen = _f === void 0 ? false : _f,
-          _g = _a.buttonIcon,
-          buttonIcon = _g === void 0 ? /*#__PURE__*/React__namespace.createElement(theme.Options, null) : _g;
+          _f = _a.variant,
+          variant = _f === void 0 ? 'tool' : _f,
+          _g = _a.isDefaultOpen,
+          isDefaultOpen = _g === void 0 ? false : _g,
+          _h = _a.buttonIcon,
+          buttonIcon = _h === void 0 ? /*#__PURE__*/React__namespace.createElement(theme.Options, null) : _h;
 
-      var _h = __read(React__namespace.useState(null), 2),
-          anchorEl = _h[0],
-          setAnchorEl = _h[1];
+      var _j = __read(React__namespace.useState(null), 2),
+          anchorEl = _j[0],
+          setAnchorEl = _j[1];
 
       var isOpen = Boolean(anchorEl);
 
-      var _j = getPosition(menuPosition),
-          anchorOrigin = _j.anchorOrigin,
-          transformOrigin = _j.transformOrigin;
+      var _k = getPosition(menuPosition),
+          anchorOrigin = _k.anchorOrigin,
+          transformOrigin = _k.transformOrigin;
 
       var handleClick = function handleClick(event) {
         event.stopPropagation();
@@ -2681,17 +2717,18 @@
           setAnchorEl(document.getElementById(buttonTestId));
         }
       }, [isDefaultOpen, buttonTestId]);
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(CustomTooltip, {
-        placement: "top",
-        title: tooltipTitle
-      }, /*#__PURE__*/React__namespace.createElement(ToolButton, {
-        active: isOpen,
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(CustomIconButton, {
+        tooltipProps: {
+          placement: 'top',
+          title: tooltipTitle
+        },
+        isSelected: isOpen,
         sx: buttonSx,
         onClick: handleClick,
         "data-testid": buttonTestId,
         variant: variant,
         id: buttonTestId
-      }, buttonIcon)), /*#__PURE__*/React__namespace.createElement(material.Menu, {
+      }, buttonIcon), /*#__PURE__*/React__namespace.createElement(material.Menu, {
         anchorEl: anchorEl,
         open: isOpen,
         onClose: function onClose(event, reason) {
@@ -2854,6 +2891,7 @@
           tooltipOpen = _g[0],
           setTooltipOpen = _g[1];
 
+      var theme = material.useTheme();
       var onWheel = React__namespace.useCallback(function (event) {
         if (requiresCtrlToChange && (event.ctrlKey || event.metaKey) || !requiresCtrlToChange) {
           if (selectOpen) {
@@ -2891,6 +2929,7 @@
       var onBlur = React__namespace.useCallback(function () {
         setTooltipOpen(false);
       }, [setTooltipOpen]);
+      var selectStyles = noStyling ? {} : tooltipContainerStyles(!!isEnabled, hasBackgroundColor);
       return /*#__PURE__*/React__namespace.createElement(CustomTooltip, {
         title: tooltip,
         placement: "top",
@@ -2913,7 +2952,7 @@
               }
             }
           },
-          sx: {
+          sx: __assign({
             '& ul': {
               backgroundColor: 'geowebColors.background.surface'
             },
@@ -2949,9 +2988,9 @@
                 }
               }
             }
-          }
+          }, theme.palette.geowebColors.tooltips.tooltipSelect.menu)
         },
-        sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
+        sx: __assign(__assign({}, selectStyles), theme.palette.geowebColors.tooltips.tooltipSelect.select)
       }, props)));
     };
 
@@ -3013,6 +3052,60 @@
       }, children));
     };
 
+    /* *
+     * Licensed under the Apache License, Version 2.0 (the "License");
+     * you may not use this file except in compliance with the License.
+     * You may obtain a copy of the License at
+     *
+     *     http://www.apache.org/licenses/LICENSE-2.0
+     *
+     * Unless required by applicable law or agreed to in writing, software
+     * distributed under the License is distributed on an "AS IS" BASIS,
+     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+     * See the License for the specific language governing permissions and
+     * limitations under the License.
+     *
+     * Copyright 2023 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+     * Copyright 2023 - Finnish Meteorological Institute (FMI)
+     * */
+    var highlightStyle = {
+      background: '#ffeecc'
+    };
+
+    var SearchHighlight = function SearchHighlight(_a) {
+      var _b = _a.text,
+          text = _b === void 0 ? '' : _b,
+          search = _a.search;
+
+      if (search === '') {
+        return /*#__PURE__*/React__default["default"].createElement("span", null, text);
+      }
+
+      var searchWords = search.split(' ').reduce(function (words, word) {
+        return word ? __spreadArray(__spreadArray([], __read(words)), [word.toLocaleLowerCase()]) : words;
+      }, []);
+      var searchRegex = searchWords.map(function (word) {
+        return lodash.escapeRegExp(word);
+      }).join('|');
+      var textParts = text.split(new RegExp("(" + searchRegex + ")", 'gi'));
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, textParts.map(function (part, index) {
+        var key = part + "-" + index;
+
+        if (searchWords.some(function (search) {
+          return part.toLocaleLowerCase().includes(search);
+        })) {
+          return /*#__PURE__*/React__default["default"].createElement("mark", {
+            key: key,
+            style: highlightStyle
+          }, part);
+        }
+
+        return /*#__PURE__*/React__default["default"].createElement("span", {
+          key: key
+        }, part);
+      }));
+    };
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -3403,9 +3496,9 @@
     exports.Draggable = DraggableComponent$1;
     exports.ErrorBoundary = ErrorBoundary;
     exports.Resizable = ResizeComponent;
+    exports.SearchHighlight = SearchHighlight;
     exports.StatusTag = StatusTag;
     exports.ToggleMenu = ToggleMenu;
-    exports.ToolButton = ToolButton;
     exports.ToolContainer = ToolContainer;
     exports.ToolContainerDraggable = DraggableComponent;
     exports.ToolFooter = ToolFooter;

package/lib/components/CustomIconButton/CustomIconButton.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { IconButtonProps } from '@mui/material';
+import { IconButtonProps, TooltipProps as MuiTooltipProps } from '@mui/material';
 export declare type Variant = 'flat' | 'tool' | 'boxed';
+declare type TooltipProps = Omit<MuiTooltipProps, 'children'>;
 export interface CustomIconProps extends IconButtonProps {
     tooltipTitle?: string;
     variant?: Variant;
     isSelected?: boolean;
     shouldShowAsDisabled?: boolean;
+    tooltipProps?: TooltipProps;
 }
 export declare const CustomIconButton: React.FC<CustomIconProps>;
+export {};

package/lib/components/SearchHighlight/SearchHighlight.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface HighlightProps {
+    text: string;
+    search: string;
+}
+declare const SearchHighlight: React.FC<HighlightProps>;
+export default SearchHighlight;

package/lib/components/{ToolButton/ToolButton.stories.d.ts → SearchHighlight/SearchHighlight.stories.d.ts}

@@ -3,11 +3,11 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ToolButtonLight: {
+export declare const SearchHighlightLightTheme: {
     (): React.ReactElement;
     storyName: string;
 };
-export declare const ToolButtonDark: {
+export declare const SearchHighlightDarkTheme: {
     (): React.ReactElement;
     storyName: string;
 };

package/lib/components/SearchHighlight/index.d.ts

@@ -0,0 +1 @@
+export { default as SearchHighlight } from './SearchHighlight';

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PopoverOrigin, SxProps, Theme } from '@mui/material';
-import { ButtonVariant } from '@opengeoweb/theme';
+import { Variant } from '../CustomIconButton';
 declare type MenuPosition = 'left' | 'right' | 'bottom';
 export declare const getPosition: (menuPosition: MenuPosition) => {
     anchorOrigin: PopoverOrigin;
@@ -19,7 +19,7 @@ interface ToggleMenuProps {
     children?: React.ReactNode;
     buttonSx?: SxProps<Theme>;
     tooltipTitle?: string;
-    variant?: ButtonVariant;
+    variant?: Variant;
     isDefaultOpen?: boolean;
     buttonIcon?: React.ReactNode;
 }

package/lib/components/ToolContainer/ToolContainerDraggable.d.ts

@@ -28,6 +28,8 @@ interface DraggableComponentProps extends Omit<ResizableComponentProps, 'bounds'
     source?: 'app' | 'module';
     leftHeaderComponent?: React.ReactNode;
     rightHeaderComponent?: React.ReactNode;
+    dragHandleIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
     sx?: SxProps;
 }
 export declare const calculateNewPosition: (position: DraggablePosition, isRightAligned: boolean, handle: string, delta: NumberSize) => DraggablePosition;

package/lib/components/ToolContainer/types.d.ts

@@ -9,6 +9,8 @@ export interface ToolHeaderProps {
     isDraggable?: boolean;
     leftHeaderComponent?: React.ReactNode;
     rightHeaderComponent?: React.ReactNode;
+    dragHandleIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
 }
 export interface ToolContainerProps extends PaperProps, ToolHeaderProps {
     isResizable?: boolean;

package/lib/components/index.d.ts

@@ -9,7 +9,6 @@ export * from './UserMenu';
 export * from './ToolContainer';
 export * from './CustomSlider';
 export * from './CustomToggleButton';
-export * from './ToolButton';
 export * from './ToggleMenu';
 export * from './AlertIcon';
 export * from './TooltipSelect';
@@ -19,3 +18,4 @@ export * from './CustomTooltip';
 export * from './CustomAccordion';
 export * from './CustomDialog';
 export * from './CustomIconButton';
+export * from './SearchHighlight';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.19.1",
+  "version": "4.21.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,13 +14,14 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "@mui/material": "^5.12.0",
-    "@opengeoweb/theme": "4.19.1",
+    "@opengeoweb/theme": "4.21.0",
+    "@mui/system": "^5.12.0",
     "@mui/x-date-pickers": "^6.2.1",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
+    "lodash": "^4.17.20",
     "@redux-eggs/core": "^2.2.0",
     "react-redux": "^8.0.4",
-    "lodash": "^4.17.20",
     "axios": "^0.25.0",
     "date-fns": "^2.29.3"
   }

package/lib/components/ToolButton/ToolButton.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { Theme, SxProps } from '@mui/material';
-import { CustomToggleButtonProps } from '../CustomToggleButton';
-export interface ToolButtonProps extends CustomToggleButtonProps {
-    active?: boolean;
-    width?: string;
-    height?: string;
-    value?: unknown;
-    sx?: SxProps<Theme>;
-    children?: React.ReactNode;
-}
-export declare const ToolButton: React.FC<ToolButtonProps>;

package/lib/components/ToolButton/index.d.ts

@@ -1 +0,0 @@
-export * from './ToolButton';