@opengeoweb/shared 2.6.0 → 2.9.0

package/index.esm.js

@@ -166,7 +166,7 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     sx: {
       padding: '8px 16px'
     }
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, description && /*#__PURE__*/React.createElement(Typography, {
     variant: "body1"
   }, description), content), /*#__PURE__*/React.createElement(DialogActions, {
     sx: {
@@ -758,6 +758,12 @@ var AlertIcon = function AlertIcon(_ref) {
   }
 };
 
+var IconChevronRight = /*#__PURE__*/React.createElement(SvgIcon, null, /*#__PURE__*/React.createElement("path", {
+  d: "M5.427 15.03c-.57.618-.57 1.57 0 2.188.57.603 1.494.603 2.062 0l5.514-5.843 5.512 5.843c.57.603 1.494.603 2.063 0 .285-.303.426-.7.426-1.094a1.59 1.59 0 0 0-.426-1.094L13.003 7l-7.576 8.03z",
+  id: "chrevron-right",
+  transform: "rotate(90 13.002 12.335)"
+}));
+
 var AlertBanner = function AlertBanner(_ref) {
   var title = _ref.title,
       _ref$severity = _ref.severity,
@@ -769,7 +775,9 @@ var AlertBanner = function AlertBanner(_ref) {
       _ref$isCompact = _ref.isCompact,
       isCompact = _ref$isCompact === void 0 ? false : _ref$isCompact,
       _ref$shouldClose = _ref.shouldClose,
-      shouldClose = _ref$shouldClose === void 0 ? false : _ref$shouldClose;
+      shouldClose = _ref$shouldClose === void 0 ? false : _ref$shouldClose,
+      _ref$actionButtonProp = _ref.actionButtonProps,
+      actionButtonProps = _ref$actionButtonProp === void 0 ? undefined : _ref$actionButtonProp;
 
   var _React$useState = React.useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -832,7 +840,17 @@ var AlertBanner = function AlertBanner(_ref) {
       fontSize: '16px',
       marginTop: 1
     }
-  }, info));
+  }, info), actionButtonProps && /*#__PURE__*/React.createElement(Button, {
+    variant: "flat",
+    onClick: function onClick(event) {
+      setIsOpen(false);
+      actionButtonProps.onClick(event);
+    },
+    sx: {
+      backgroundColor: 'transparent!important'
+    },
+    startIcon: IconChevronRight
+  }, actionButtonProps.title.toUpperCase()));
 };
 
 /* *
@@ -2548,9 +2566,20 @@ var getPosition = function getPosition(menuPosition) {
           horizontal: 'right'
         }
       };
+
+    case 'right':
+      return {
+        anchorOrigin: {
+          vertical: 'center',
+          horizontal: 'right'
+        },
+        transformOrigin: {
+          vertical: 'center',
+          horizontal: 'left'
+        }
+      };
   }
 };
-
 var ToggleMenu = function ToggleMenu(_ref) {
   var _ref$buttonTestId = _ref.buttonTestId,
       buttonTestId = _ref$buttonTestId === void 0 ? 'toggleMenuButton' : _ref$buttonTestId,
@@ -2560,7 +2589,10 @@ var ToggleMenu = function ToggleMenu(_ref) {
       children = _ref.children,
       buttonSx = _ref.buttonSx,
       _ref$tooltipTitle = _ref.tooltipTitle,
-      tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle;
+      tooltipTitle = _ref$tooltipTitle === void 0 ? '' : _ref$tooltipTitle,
+      variant = _ref.variant,
+      _ref$isDefaultOpen = _ref.isDefaultOpen,
+      isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen;
 
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -2574,18 +2606,27 @@ var ToggleMenu = function ToggleMenu(_ref) {
       transformOrigin = _getPosition.transformOrigin;
 
   var handleClick = function handleClick(event) {
+    event.stopPropagation();
     setAnchorEl(event.currentTarget);
   };
 
-  var handleClose = function handleClose() {
+  var handleClose = function handleClose(event) {
+    event.stopPropagation();
     setAnchorEl(null);
   };
 
+  React.useEffect(function () {
+    if (isDefaultOpen) {
+      setAnchorEl(document.getElementById(buttonTestId));
+    }
+  }, [isDefaultOpen, buttonTestId]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolButton, {
     active: isOpen,
     sx: buttonSx,
     onClick: handleClick,
-    "data-testid": buttonTestId
+    "data-testid": buttonTestId,
+    variant: variant,
+    id: buttonTestId
   }, /*#__PURE__*/React.createElement(Tooltip, {
     placement: "top",
     title: tooltipTitle
@@ -2612,9 +2653,9 @@ var ToggleMenu = function ToggleMenu(_ref) {
         action = menuItem.action;
     return /*#__PURE__*/React.createElement(MenuItem, {
       key: text,
-      onClick: function onClick() {
-        action();
-        handleClose();
+      onClick: function onClick(event) {
+        action(event);
+        handleClose(event);
       }
     }, icon && /*#__PURE__*/React.createElement(ListItemIcon, null, icon), /*#__PURE__*/React.createElement(Typography, null, text));
   }), children));
@@ -2851,7 +2892,8 @@ var EnableButton = function EnableButton(_ref) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
-  return {
+  var hasBackgroundColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  return Object.assign({
     width: '100%',
     height: 32,
     fontWeight: 500,
@@ -2866,22 +2908,19 @@ var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
       borderColor: 'transparent!important'
     },
     '&:hover .MuiSelect-select': {
-      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+      outline: function outline(theme) {
+        return theme.palette.geowebColors.buttons.focusDefault.outline;
+      }
     },
     '&.Mui-focused .MuiSelect-select': {
       outline: function outline(theme) {
         return theme.palette.geowebColors.buttons.focusDefault.outline;
-      },
-      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-    },
-    '&:hover&.MuiButton-root': {
-      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+      }
     },
     '&:focus&.MuiButton-root': {
       outline: function outline(theme) {
         return theme.palette.geowebColors.buttons.focusDefault.outline;
-      },
-      backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+      }
     },
     '& .MuiSvgIcon-root': {
       transition: 'none',
@@ -2892,7 +2931,27 @@ var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
     '&>div': {
       paddingLeft: 1
     }
-  };
+  }, hasBackgroundColor && backgroundColor);
+};
+var backgroundColor = {
+  '&:hover .MuiSelect-select': {
+    outline: function outline(theme) {
+      return theme.palette.geowebColors.buttons.focusDefault.outline;
+    },
+    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+  },
+  '&.Mui-focused .MuiSelect-select': {
+    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+  },
+  '&:hover&.MuiButton-root': {
+    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+  },
+  '&:focus&.MuiButton-root': {
+    outline: function outline(theme) {
+      return theme.palette.geowebColors.buttons.focusDefault.outline;
+    },
+    backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+  }
 };
 
 var TooltipSelect = function TooltipSelect(_a) {
@@ -2907,7 +2966,8 @@ var TooltipSelect = function TooltipSelect(_a) {
       requiresCtrlToChange = _a$requiresCtrlToChan === void 0 ? false : _a$requiresCtrlToChan,
       isEnabled = _a.isEnabled,
       noStyling = _a.noStyling,
-      props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling"]);
+      hasBackgroundColor = _a.hasBackgroundColor,
+      props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor"]);
 
   props.disableUnderline;
       var otherProps = __rest(props, ["disableUnderline"]);
@@ -2953,7 +3013,7 @@ var TooltipSelect = function TooltipSelect(_a) {
     title: tooltip,
     placement: "top",
     open: tooltipOpen,
-    sx: noStyling ? undefined : tooltipContainerStyles(isEnabled)
+    sx: noStyling ? undefined : tooltipContainerStyles(isEnabled, hasBackgroundColor)
   }, /*#__PURE__*/React.createElement(Select, Object.assign({
     onOpen: onOpen,
     onClose: onClose,
@@ -3042,4 +3102,4 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   return 'An error has occurred';
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DraggableComponent$1 as Draggable, EnableButton, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ManagerButton, ManagerDeleteButton, ResizeComponent as Resizable, StatusTag, ToggleMenu, ToolButton, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, TooltipSelect, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, calculateDialogSizeAndPosition, getAxiosErrorMessage, getInitials, getPosition, isAxiosError, showPrompt, sliderStyles, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };

package/index.umd.js

@@ -223,7 +223,7 @@
         sx: {
           padding: '8px 16px'
         }
-      }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
+      }, description && /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "body1"
       }, description), content), /*#__PURE__*/React__namespace.createElement(material.DialogActions, {
         sx: {
@@ -611,6 +611,12 @@
       }
     };
 
+    var IconChevronRight = /*#__PURE__*/React__namespace.createElement(material.SvgIcon, null, /*#__PURE__*/React__namespace.createElement("path", {
+      d: "M5.427 15.03c-.57.618-.57 1.57 0 2.188.57.603 1.494.603 2.062 0l5.514-5.843 5.512 5.843c.57.603 1.494.603 2.063 0 .285-.303.426-.7.426-1.094a1.59 1.59 0 0 0-.426-1.094L13.003 7l-7.576 8.03z",
+      id: "chrevron-right",
+      transform: "rotate(90 13.002 12.335)"
+    }));
+
     var AlertBanner = function AlertBanner(_a) {
       var title = _a.title,
           _b = _a.severity,
@@ -622,11 +628,13 @@
           _e = _a.isCompact,
           isCompact = _e === void 0 ? false : _e,
           _f = _a.shouldClose,
-          shouldClose = _f === void 0 ? false : _f;
+          shouldClose = _f === void 0 ? false : _f,
+          _g = _a.actionButtonProps,
+          actionButtonProps = _g === void 0 ? undefined : _g;
 
-      var _g = __read(React__namespace.useState(true), 2),
-          isOpen = _g[0],
-          setIsOpen = _g[1];
+      var _h = __read(React__namespace.useState(true), 2),
+          isOpen = _h[0],
+          setIsOpen = _h[1];
 
       return isOpen && /*#__PURE__*/React__namespace.createElement(material.Alert, {
         "data-testid": dataTestId,
@@ -684,7 +692,17 @@
           fontSize: '16px',
           marginTop: 1
         }
-      }, info));
+      }, info), actionButtonProps && /*#__PURE__*/React__namespace.createElement(material.Button, {
+        variant: "flat",
+        onClick: function onClick(event) {
+          setIsOpen(false);
+          actionButtonProps.onClick(event);
+        },
+        sx: {
+          backgroundColor: 'transparent!important'
+        },
+        startIcon: IconChevronRight
+      }, actionButtonProps.title.toUpperCase()));
     };
 
     /* *
@@ -2441,9 +2459,20 @@
               horizontal: 'right'
             }
           };
+
+        case 'right':
+          return {
+            anchorOrigin: {
+              vertical: 'center',
+              horizontal: 'right'
+            },
+            transformOrigin: {
+              vertical: 'center',
+              horizontal: 'left'
+            }
+          };
       }
     };
-
     var ToggleMenu = function ToggleMenu(_a) {
       var _b = _a.buttonTestId,
           buttonTestId = _b === void 0 ? 'toggleMenuButton' : _b,
@@ -2453,31 +2482,43 @@
           children = _a.children,
           buttonSx = _a.buttonSx,
           _d = _a.tooltipTitle,
-          tooltipTitle = _d === void 0 ? '' : _d;
+          tooltipTitle = _d === void 0 ? '' : _d,
+          variant = _a.variant,
+          _e = _a.isDefaultOpen,
+          isDefaultOpen = _e === void 0 ? false : _e;
 
-      var _e = __read(React__namespace.useState(null), 2),
-          anchorEl = _e[0],
-          setAnchorEl = _e[1];
+      var _f = __read(React__namespace.useState(null), 2),
+          anchorEl = _f[0],
+          setAnchorEl = _f[1];
 
       var isOpen = Boolean(anchorEl);
 
-      var _f = getPosition(menuPosition),
-          anchorOrigin = _f.anchorOrigin,
-          transformOrigin = _f.transformOrigin;
+      var _g = getPosition(menuPosition),
+          anchorOrigin = _g.anchorOrigin,
+          transformOrigin = _g.transformOrigin;
 
       var handleClick = function handleClick(event) {
+        event.stopPropagation();
         setAnchorEl(event.currentTarget);
       };
 
-      var handleClose = function handleClose() {
+      var handleClose = function handleClose(event) {
+        event.stopPropagation();
         setAnchorEl(null);
       };
 
+      React__namespace.useEffect(function () {
+        if (isDefaultOpen) {
+          setAnchorEl(document.getElementById(buttonTestId));
+        }
+      }, [isDefaultOpen, buttonTestId]);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(ToolButton, {
         active: isOpen,
         sx: buttonSx,
         onClick: handleClick,
-        "data-testid": buttonTestId
+        "data-testid": buttonTestId,
+        variant: variant,
+        id: buttonTestId
       }, /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         placement: "top",
         title: tooltipTitle
@@ -2504,9 +2545,9 @@
             action = menuItem.action;
         return /*#__PURE__*/React__namespace.createElement(material.MenuItem, {
           key: text,
-          onClick: function onClick() {
-            action();
-            handleClose();
+          onClick: function onClick(event) {
+            action(event);
+            handleClose(event);
           }
         }, icon && /*#__PURE__*/React__namespace.createElement(material.ListItemIcon, null, icon), /*#__PURE__*/React__namespace.createElement(material.Typography, null, text));
       }), children));
@@ -2742,8 +2783,12 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var tooltipContainerStyles = function tooltipContainerStyles(isEnabled) {
-      return {
+    var tooltipContainerStyles = function tooltipContainerStyles(isEnabled, hasBackgroundColor) {
+      if (hasBackgroundColor === void 0) {
+        hasBackgroundColor = true;
+      }
+
+      return __assign({
         width: '100%',
         height: 32,
         fontWeight: 500,
@@ -2758,22 +2803,19 @@
           borderColor: 'transparent!important'
         },
         '&:hover .MuiSelect-select': {
-          backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+          outline: function outline(theme) {
+            return theme.palette.geowebColors.buttons.focusDefault.outline;
+          }
         },
         '&.Mui-focused .MuiSelect-select': {
           outline: function outline(theme) {
             return theme.palette.geowebColors.buttons.focusDefault.outline;
-          },
-          backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
-        },
-        '&:hover&.MuiButton-root': {
-          backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+          }
         },
         '&:focus&.MuiButton-root': {
           outline: function outline(theme) {
             return theme.palette.geowebColors.buttons.focusDefault.outline;
-          },
-          backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+          }
         },
         '& .MuiSvgIcon-root': {
           transition: 'none',
@@ -2784,7 +2826,27 @@
         '&>div': {
           paddingLeft: 1
         }
-      };
+      }, hasBackgroundColor && backgroundColor);
+    };
+    var backgroundColor = {
+      '&:hover .MuiSelect-select': {
+        outline: function outline(theme) {
+          return theme.palette.geowebColors.buttons.focusDefault.outline;
+        },
+        backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+      },
+      '&.Mui-focused .MuiSelect-select': {
+        backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+      },
+      '&:hover&.MuiButton-root': {
+        backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+      },
+      '&:focus&.MuiButton-root': {
+        outline: function outline(theme) {
+          return theme.palette.geowebColors.buttons.focusDefault.outline;
+        },
+        backgroundColor: 'geowebColors.buttons.tool.mouseOver.fill'
+      }
     };
 
     /* *
@@ -2815,7 +2877,8 @@
           requiresCtrlToChange = _e === void 0 ? false : _e,
           isEnabled = _a.isEnabled,
           noStyling = _a.noStyling,
-          props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling"]);
+          hasBackgroundColor = _a.hasBackgroundColor,
+          props = __rest(_a, ["tooltip", "list", "currentIndex", "onChangeMouseWheel", "requiresCtrlToChange", "isEnabled", "noStyling", "hasBackgroundColor"]);
 
       props.disableUnderline;
           var otherProps = __rest(props, ["disableUnderline"]);
@@ -2859,7 +2922,7 @@
         title: tooltip,
         placement: "top",
         open: tooltipOpen,
-        sx: noStyling ? undefined : tooltipContainerStyles(isEnabled)
+        sx: noStyling ? undefined : tooltipContainerStyles(isEnabled, hasBackgroundColor)
       }, /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
         onOpen: onOpen,
         onClose: onClose,
@@ -2977,6 +3040,7 @@
     exports.calculateDialogSizeAndPosition = calculateDialogSizeAndPosition;
     exports.getAxiosErrorMessage = getAxiosErrorMessage;
     exports.getInitials = getInitials;
+    exports.getPosition = getPosition;
     exports.isAxiosError = isAxiosError;
     exports.showPrompt = showPrompt;
     exports.sliderStyles = sliderStyles;

package/lib/components/AlertBanner/AlertBanner.d.ts

@@ -7,6 +7,10 @@ interface AlertBannerProps {
     dataTestId?: string;
     isCompact?: boolean;
     shouldClose?: boolean;
+    actionButtonProps?: {
+        onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+        title: string;
+    };
 }
 declare const AlertBanner: React.FC<AlertBannerProps>;
 export default AlertBanner;

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

@@ -1,17 +1,25 @@
 import * as React from 'react';
-import { SxProps, Theme } from '@mui/material';
+import { PopoverOrigin, SxProps, Theme } from '@mui/material';
+import { ButtonVariant } from '@opengeoweb/theme';
+declare type MenuPosition = 'left' | 'right' | 'bottom';
+export declare const getPosition: (menuPosition: MenuPosition) => {
+    anchorOrigin: PopoverOrigin;
+    transformOrigin: PopoverOrigin;
+};
 declare type MenuItemType = {
     text: string;
-    action: () => void;
+    action: (event: React.MouseEvent) => void;
     icon?: React.ReactNode;
 };
 interface ToggleMenuProps {
     buttonTestId?: string;
-    menuPosition?: 'left' | 'bottom';
+    menuPosition?: MenuPosition;
     menuItems?: MenuItemType[];
     children?: React.ReactNode;
     buttonSx?: SxProps<Theme>;
     tooltipTitle?: string;
+    variant?: ButtonVariant;
+    isDefaultOpen?: boolean;
 }
 export declare const ToggleMenu: React.FC<ToggleMenuProps>;
 export {};

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

@@ -3,5 +3,11 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const ToggleMenuLight: () => React.ReactElement;
-export declare const ToggleMenuDark: () => React.ReactElement;
+export declare const ToggleMenuLight: {
+    (): React.ReactElement;
+    storyName: string;
+};
+export declare const ToggleMenuDark: {
+    (): React.ReactElement;
+    storyName: string;
+};

package/lib/components/TooltipSelect/TooltipSelect.d.ts

@@ -11,6 +11,7 @@ interface TooltipSelectProps extends SelectProps {
     requiresCtrlToChange?: boolean;
     isEnabled?: boolean;
     noStyling?: boolean;
+    hasBackgroundColor?: boolean;
 }
 export declare const TooltipSelect: React.FC<TooltipSelectProps>;
 export {};

package/lib/components/TooltipSelect/tooltipContainerStyles.d.ts

@@ -1,2 +1,2 @@
 import { SxProps, Theme } from '@mui/material';
-export declare const tooltipContainerStyles: (isEnabled: boolean) => SxProps<Theme>;
+export declare const tooltipContainerStyles: (isEnabled: boolean, hasBackgroundColor?: boolean) => SxProps<Theme>;

package/package.json

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