@opengeoweb/shared 4.3.0 → 4.4.0

package/index.esm.js

@@ -4,9 +4,10 @@ import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, Dialog
 import { Close, Exclamation, Success, Info, ChevronRight, GeoWebLogo, Resize, useThemeContext, DragHandle, ArrowLeft, ArrowRight, KeyOption, ArrowUp, ArrowDown, KeyCommand, Options, Delete, VisibilityOff, Visibility } from '@opengeoweb/theme';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
+import { throttle } from 'lodash';
 import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
-import { throttle } from 'lodash';
+import { useStore } from 'react-redux';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -36,35 +37,37 @@ function __rest(s, e) {
 }
 
 var bgColors = {
-  green: '#fcffeb',
-  grey: '#f8f9f9',
-  purple: '#f8f9f9',
-  red: '#f9e8ea',
-  yellow: '#fff8eb'
+  green: 'geowebColors.functional.successOutline.fill',
+  grey: 'geowebColors.functional.disabledOutline.fill',
+  purple: 'geowebColors.functional.summaryOutline.fill',
+  red: 'geowebColors.functional.errorOutline.fill',
+  yellow: 'geowebColors.functional.warningOutline.fill',
+  blue: 'geowebColors.functional.notificationOutline.fill'
 };
 var borderColors = {
-  green: '#72bb23',
-  grey: '#9b9fb0',
-  purple: '#9d9df2',
-  red: '#f24a00',
-  yellow: '#ffa800'
+  green: 'geowebColors.functional.successOutline.borderColor',
+  grey: 'geowebColors.functional.disabledOutline.borderColor',
+  purple: 'geowebColors.functional.summaryOutline.borderColor',
+  red: 'geowebColors.functional.errorOutline.borderColor',
+  yellow: 'geowebColors.functional.warningOutline.borderColor',
+  blue: 'geowebColors.functional.notificationOutline.borderColor'
 };
 
 var tagStyle = function tagStyle(color) {
   // Set color to grey for summary
-  var bgcolor = bgColors[color];
+  var backgroundColor = bgColors[color];
   var borderColor = borderColors[color];
   return {
-    backgroundColor: bgcolor,
+    backgroundColor: backgroundColor,
     m: 0,
-    p: 0.5,
-    border: "2px solid ".concat(borderColor),
+    p: 0,
+    border: '1px solid',
+    borderColor: borderColor,
     borderRadius: '4px',
-    width: '85px',
-    height: '20px',
-    color: '#051039',
-    maxHeight: '1em',
-    boxSizing: 'content-box'
+    width: '120px',
+    height: '18px',
+    lineHeight: '16px',
+    color: 'geowebColors.captions.captionStatus.rgba'
   };
 };
 
@@ -611,6 +614,65 @@ var useDraftFormHelpers = function useDraftFormHelpers() {
   };
 };
 
+/* *
+ * 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 2022 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2022 - Finnish Meteorological Institute (FMI)
+ * */
+var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
+  var onResizeWindow = React__default.useCallback(function (event) {
+    if (!nodeRef.current) return;
+    var bbox = nodeRef.current.firstChild.getBoundingClientRect();
+    var windowTarget = event.currentTarget;
+    if (!windowTarget) return;
+    var innerHeight = windowTarget.innerHeight,
+        innerWidth = windowTarget.innerWidth;
+    var isHorizontallyLarger = bbox.width > innerWidth;
+    var isVerticallyLarger = bbox.height > innerHeight; // left screen
+
+    if (bbox.x < 0 || isHorizontallyLarger) {
+      setPosition(Object.assign(Object.assign({}, position), {
+        x: position.x - bbox.x
+      }));
+    } // right screen
+    else if (bbox.x + bbox.width >= innerWidth) {
+        var diffX = innerWidth - bbox.x - bbox.width;
+        setPosition(Object.assign(Object.assign({}, position), {
+          x: position.x + diffX
+        }));
+      } // top screen
+      else if (bbox.y < 0 || isVerticallyLarger) {
+          setPosition(Object.assign(Object.assign({}, position), {
+            y: position.y - bbox.y
+          }));
+        } // bottom screen
+        else if (bbox.y + bbox.height >= innerHeight) {
+            var diffY = innerHeight - bbox.y - bbox.height;
+            setPosition(Object.assign(Object.assign({}, position), {
+              y: position.y + diffY
+            }));
+          }
+  }, [nodeRef, position, setPosition]);
+  React__default.useEffect(function () {
+    var throttledResize = throttle(onResizeWindow, 100);
+    window.addEventListener('resize', throttledResize);
+    return function () {
+      window.removeEventListener('resize', throttledResize);
+    };
+  }, [onResizeWindow]);
+};
+
 var ConfirmationServiceContext = /*#__PURE__*/React.createContext(Promise.reject);
 var useConfirmationDialog = function useConfirmationDialog() {
   return React.useContext(ConfirmationServiceContext);
@@ -1668,46 +1730,7 @@ var DraggableComponent = function DraggableComponent(_a) {
       height: height
     });
   }, [onChangeSize]);
-  var onResizeWindow = React__default.useCallback(function (event) {
-    if (!nodeRef.current) return;
-    var bbox = nodeRef.current.firstChild.getBoundingClientRect();
-    var windowTarget = event.currentTarget;
-    if (!windowTarget) return;
-    var innerHeight = windowTarget.innerHeight,
-        innerWidth = windowTarget.innerWidth;
-    var isHorizontallyLarger = bbox.width > innerWidth;
-    var isVerticallyLarger = bbox.height > innerHeight; // left screen
-
-    if (bbox.x < 0 || isHorizontallyLarger) {
-      setPosition(Object.assign(Object.assign({}, position), {
-        x: position.x - bbox.x
-      }));
-    } // right screen
-    else if (bbox.x + bbox.width >= innerWidth) {
-        var diffX = innerWidth - bbox.x - bbox.width;
-        setPosition(Object.assign(Object.assign({}, position), {
-          x: position.x + diffX
-        }));
-      } // top screen
-      else if (bbox.y < 0 || isVerticallyLarger) {
-          setPosition(Object.assign(Object.assign({}, position), {
-            y: position.y - bbox.y
-          }));
-        } // bottom screen
-        else if (bbox.y + bbox.height >= innerHeight) {
-            var diffY = innerHeight - bbox.y - bbox.height;
-            setPosition(Object.assign(Object.assign({}, position), {
-              y: position.y + diffY
-            }));
-          }
-  }, [position]);
-  React__default.useEffect(function () {
-    var throttledResize = throttle(onResizeWindow, 100);
-    window.addEventListener('resize', throttledResize);
-    return function () {
-      window.removeEventListener('resize', throttledResize);
-    };
-  }, [onResizeWindow]);
+  useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
   var toolcontainerId = React__default.useRef(Date.now().toString()).current;
   var headerClassName = "header-".concat(toolcontainerId);
   return isOpen ? /*#__PURE__*/React__default.createElement(DraggableComponent$1, {
@@ -2822,6 +2845,28 @@ var TooltipSelect = function TooltipSelect(_a) {
   }, otherProps)));
 };
 
+function withEggs(eggs) {
+  return function (Component) {
+    var WithEggs = function WithEggs(props) {
+      var store = useStore();
+
+      var _React$useState = React.useState(function () {
+        return store.addEggs(eggs);
+      }),
+          _React$useState2 = _slicedToArray(_React$useState, 1),
+          remover = _React$useState2[0];
+
+      React.useEffect(function () {
+        return remover;
+      }, [remover]);
+      return /*#__PURE__*/React.createElement(Component, Object.assign({}, props));
+    };
+
+    WithEggs.displayName = "withEggs(".concat(Component.displayName || Component.name || 'Component', ")");
+    return WithEggs;
+  };
+}
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2884,4 +2929,4 @@ var getWarningMessage = function getWarningMessage(error) {
   return '';
 };
 
-export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DEFAULT_ERROR_MESSAGE, 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, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AlertIcon, AppHeader, AppLayout, Avatar, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, CustomToggleButton, DEFAULT_ERROR_MESSAGE, 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, getAxiosWarningMessage, getErrorMessage, getInitials, getPosition, getWarningMessage, isAxiosError, showPrompt, sliderHeaderStyle, tooltipContainerStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, useMakeSureContainerStaysInsideWindow, usePoller, usePreventBrowserClose, usePrevious, useUserMenu, withEggs };

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('react-draggable'), require('re-resizable'), require('lodash')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', 'react-draggable', 're-resizable', 'lodash'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.Draggable, global.reResizable, global.lodash));
-})(this, (function (exports, React, material, theme, reactHookForm, formFields, Draggable, reResizable, lodash) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@opengeoweb/theme'), require('react-hook-form'), require('@opengeoweb/form-fields'), require('lodash'), require('react-draggable'), require('re-resizable'), require('react-redux')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@opengeoweb/theme', 'react-hook-form', '@opengeoweb/form-fields', 'lodash', 'react-draggable', 're-resizable', 'react-redux'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Shared = {}, global.React, global.material, global.theme, global.reactHookForm, global.formFields, global.lodash, global.Draggable, global.reResizable, global.reactRedux));
+})(this, (function (exports, React, material, theme, reactHookForm, formFields, lodash, Draggable, reResizable, reactRedux) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -110,35 +110,37 @@
     }
 
     var bgColors = {
-      green: '#fcffeb',
-      grey: '#f8f9f9',
-      purple: '#f8f9f9',
-      red: '#f9e8ea',
-      yellow: '#fff8eb'
+      green: 'geowebColors.functional.successOutline.fill',
+      grey: 'geowebColors.functional.disabledOutline.fill',
+      purple: 'geowebColors.functional.summaryOutline.fill',
+      red: 'geowebColors.functional.errorOutline.fill',
+      yellow: 'geowebColors.functional.warningOutline.fill',
+      blue: 'geowebColors.functional.notificationOutline.fill'
     };
     var borderColors = {
-      green: '#72bb23',
-      grey: '#9b9fb0',
-      purple: '#9d9df2',
-      red: '#f24a00',
-      yellow: '#ffa800'
+      green: 'geowebColors.functional.successOutline.borderColor',
+      grey: 'geowebColors.functional.disabledOutline.borderColor',
+      purple: 'geowebColors.functional.summaryOutline.borderColor',
+      red: 'geowebColors.functional.errorOutline.borderColor',
+      yellow: 'geowebColors.functional.warningOutline.borderColor',
+      blue: 'geowebColors.functional.notificationOutline.borderColor'
     };
 
     var tagStyle = function tagStyle(color) {
       // Set color to grey for summary
-      var bgcolor = bgColors[color];
+      var backgroundColor = bgColors[color];
       var borderColor = borderColors[color];
       return {
-        backgroundColor: bgcolor,
+        backgroundColor: backgroundColor,
         m: 0,
-        p: 0.5,
-        border: "2px solid " + borderColor,
+        p: 0,
+        border: '1px solid',
+        borderColor: borderColor,
         borderRadius: '4px',
-        width: '85px',
-        height: '20px',
-        color: '#051039',
-        maxHeight: '1em',
-        boxSizing: 'content-box'
+        width: '120px',
+        height: '18px',
+        lineHeight: '16px',
+        color: 'geowebColors.captions.captionStatus.rgba'
       };
     };
 
@@ -481,6 +483,49 @@
       };
     };
 
+    var useMakeSureContainerStaysInsideWindow = function useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition) {
+      var onResizeWindow = React__default["default"].useCallback(function (event) {
+        if (!nodeRef.current) return;
+        var bbox = nodeRef.current.firstChild.getBoundingClientRect();
+        var windowTarget = event.currentTarget;
+        if (!windowTarget) return;
+        var innerHeight = windowTarget.innerHeight,
+            innerWidth = windowTarget.innerWidth;
+        var isHorizontallyLarger = bbox.width > innerWidth;
+        var isVerticallyLarger = bbox.height > innerHeight; // left screen
+
+        if (bbox.x < 0 || isHorizontallyLarger) {
+          setPosition(__assign(__assign({}, position), {
+            x: position.x - bbox.x
+          }));
+        } // right screen
+        else if (bbox.x + bbox.width >= innerWidth) {
+            var diffX = innerWidth - bbox.x - bbox.width;
+            setPosition(__assign(__assign({}, position), {
+              x: position.x + diffX
+            }));
+          } // top screen
+          else if (bbox.y < 0 || isVerticallyLarger) {
+              setPosition(__assign(__assign({}, position), {
+                y: position.y - bbox.y
+              }));
+            } // bottom screen
+            else if (bbox.y + bbox.height >= innerHeight) {
+                var diffY = innerHeight - bbox.y - bbox.height;
+                setPosition(__assign(__assign({}, position), {
+                  y: position.y + diffY
+                }));
+              }
+      }, [nodeRef, position, setPosition]);
+      React__default["default"].useEffect(function () {
+        var throttledResize = lodash.throttle(onResizeWindow, 100);
+        window.addEventListener('resize', throttledResize);
+        return function () {
+          window.removeEventListener('resize', throttledResize);
+        };
+      }, [onResizeWindow]);
+    };
+
     var ConfirmationServiceContext = /*#__PURE__*/React__namespace.createContext(Promise.reject);
     var useConfirmationDialog = function useConfirmationDialog() {
       return React__namespace.useContext(ConfirmationServiceContext);
@@ -1547,46 +1592,7 @@
           height: height
         });
       }, [onChangeSize]);
-      var onResizeWindow = React__default["default"].useCallback(function (event) {
-        if (!nodeRef.current) return;
-        var bbox = nodeRef.current.firstChild.getBoundingClientRect();
-        var windowTarget = event.currentTarget;
-        if (!windowTarget) return;
-        var innerHeight = windowTarget.innerHeight,
-            innerWidth = windowTarget.innerWidth;
-        var isHorizontallyLarger = bbox.width > innerWidth;
-        var isVerticallyLarger = bbox.height > innerHeight; // left screen
-
-        if (bbox.x < 0 || isHorizontallyLarger) {
-          setPosition(__assign(__assign({}, position), {
-            x: position.x - bbox.x
-          }));
-        } // right screen
-        else if (bbox.x + bbox.width >= innerWidth) {
-            var diffX = innerWidth - bbox.x - bbox.width;
-            setPosition(__assign(__assign({}, position), {
-              x: position.x + diffX
-            }));
-          } // top screen
-          else if (bbox.y < 0 || isVerticallyLarger) {
-              setPosition(__assign(__assign({}, position), {
-                y: position.y - bbox.y
-              }));
-            } // bottom screen
-            else if (bbox.y + bbox.height >= innerHeight) {
-                var diffY = innerHeight - bbox.y - bbox.height;
-                setPosition(__assign(__assign({}, position), {
-                  y: position.y + diffY
-                }));
-              }
-      }, [position]);
-      React__default["default"].useEffect(function () {
-        var throttledResize = lodash.throttle(onResizeWindow, 100);
-        window.addEventListener('resize', throttledResize);
-        return function () {
-          window.removeEventListener('resize', throttledResize);
-        };
-      }, [onResizeWindow]);
+      useMakeSureContainerStaysInsideWindow(nodeRef, position, setPosition);
       var toolcontainerId = React__default["default"].useRef(Date.now().toString()).current;
       var headerClassName = "header-" + toolcontainerId;
       return isOpen ? /*#__PURE__*/React__default["default"].createElement(DraggableComponent$1, {
@@ -2718,6 +2724,27 @@
       }, otherProps)));
     };
 
+    function withEggs(eggs) {
+      return function (Component) {
+        var WithEggs = function WithEggs(props) {
+          var store = reactRedux.useStore();
+
+          var _a = __read(React__namespace.useState(function () {
+            return store.addEggs(eggs);
+          }), 1),
+              remover = _a[0];
+
+          React__namespace.useEffect(function () {
+            return remover;
+          }, [remover]);
+          return /*#__PURE__*/React__namespace.createElement(Component, __assign({}, props));
+        };
+
+        WithEggs.displayName = "withEggs(" + (Component.displayName || Component.name || 'Component') + ")";
+        return WithEggs;
+      };
+    }
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -2823,10 +2850,12 @@
     exports.useDialogActions = useDialogActions;
     exports.useDraftFormHelpers = useDraftFormHelpers;
     exports.useIsMounted = useIsMounted;
+    exports.useMakeSureContainerStaysInsideWindow = useMakeSureContainerStaysInsideWindow;
     exports.usePoller = usePoller;
     exports.usePreventBrowserClose = usePreventBrowserClose;
     exports.usePrevious = usePrevious;
     exports.useUserMenu = useUserMenu;
+    exports.withEggs = withEggs;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 

package/lib/components/DraggableResizable/Draggable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type Position = {
+export declare type DraggablePosition = {
     x: number;
     y: number;
 };
@@ -7,8 +7,8 @@ interface DraggableComponentProps {
     nodeRef?: React.RefObject<HTMLElement>;
     children?: React.ReactNode;
     bounds?: 'parent' | string;
-    position?: Position;
-    onStop?: (event: React.MouseEvent<HTMLElement>, pos: Position) => void;
+    position?: DraggablePosition;
+    onStop?: (event: React.MouseEvent<HTMLElement>, pos: DraggablePosition) => void;
     onMouseDown?: (event: MouseEvent) => void;
     handle?: string;
 }

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

@@ -3,7 +3,27 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const StatusTags: {
+export declare const StatusTagsGWTheme: {
     (): React.ReactElement;
     storyName: string;
 };
+export declare const StatusTagsLight: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};
+export declare const StatusTagsDark: {
+    (): React.ReactElement;
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
+    };
+};

package/lib/components/WithEggs/WithEggs.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { Egg } from '@redux-eggs/core';
+export declare function withEggs(eggs: Egg[]): (Component: React.FC) => React.FC;

package/lib/components/WithEggs/WithEggs.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export { withEggs } from './WithEggs';

package/lib/components/index.d.ts

@@ -17,3 +17,4 @@ export * from './EnableButton';
 export * from './AlertIcon';
 export * from './TooltipSelect';
 export * from './Avatar';
+export * from './WithEggs';

package/lib/hooks/index.d.ts

@@ -3,3 +3,4 @@ export * from './usePoller/usePoller';
 export * from './usePrevious/usePrevious';
 export * from './useIsMounted/useIsMounted';
 export * from './useDraftFormHelpers/useDraftFormHelpers';
+export * from './useMakeSureContainerStaysInsideWindow/useMakeSureContainerStaysInsideWindow';

package/lib/hooks/useMakeSureContainerStaysInsideWindow/useMakeSureContainerStaysInsideWindow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DraggablePosition } from '../../components/DraggableResizable/Draggable';
+export declare const useMakeSureContainerStaysInsideWindow: (nodeRef: React.RefObject<HTMLDivElement>, position: DraggablePosition, setPosition: (position: DraggablePosition) => void) => void;

package/lib/hooks/useMakeSureContainerStaysInsideWindow/useMakeSureContainerStaysInsideWindow.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,17 @@
   "peerDependencies": {
     "react": "^17.0.2",
     "@mui/material": "^5.10.8",
-    "@opengeoweb/theme": "4.3.0",
+    "@opengeoweb/theme": "4.4.0",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
-    "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "4.3.0",
+    "@redux-eggs/core": "^2.2.0",
+    "react-redux": "^8.0.4",
+    "@opengeoweb/form-fields": "4.4.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",
     "@mui/x-date-pickers": "^5.0.4",
+    "lodash": "^4.17.20",
     "axios": "^0.25.0"
   }
 }