@opengeoweb/shared 4.1.0 → 4.3.0

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useRef } from 'react';
 import { Box, Typography, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, CircularProgress, Alert, AlertTitle, Grid, useTheme, Link, Avatar as Avatar$1, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, Tooltip, List, ListItem, Tabs, Tab, Backdrop, Slider, ToggleButton, Menu, ListItemIcon, Checkbox, Select } from '@mui/material';
 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';
@@ -8,22 +8,33 @@ import Draggable from 'react-draggable';
 import { Resizable } from 're-resizable';
 import { throttle } from 'lodash';
 
-/* *
- * 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)
- * */
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
 var bgColors = {
   green: '#fcffeb',
   grey: '#f8f9f9',
@@ -57,47 +68,23 @@ var tagStyle = function tagStyle(color) {
   };
 };
 
-var StatusTag = function StatusTag(_ref) {
-  var content = _ref.content,
-      color = _ref.color;
+var StatusTag = function StatusTag(_a) {
+  var content = _a.content,
+      color = _a.color,
+      props = __rest(_a, ["content", "color"]);
+
   return /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    sx: Object.assign({}, tagStyle(color)),
-    "data-testid": "statusTag"
+    "data-testid": "statusTag",
+    className: "statusTag",
+    sx: Object.assign(Object.assign({}, tagStyle(color)), props.sx)
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "caption"
   }, content));
 };
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var confirmStyle = {
   width: {
     xs: '100%',
@@ -488,7 +475,7 @@ function usePreventBrowserClose(shouldPreventClose) {
  * */
 var usePoller = function usePoller(deps, callback) {
   var pollingInterval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300000;
-  var interval = React.useRef(null);
+  var interval = useRef(null);
   React.useEffect(function () {
     if (deps.filter(function (dep) {
       return dep !== null;
@@ -781,7 +768,11 @@ var AlertBanner = function AlertBanner(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return isOpen && /*#__PURE__*/React.createElement(Alert, {
+  if (!isOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Alert, {
     "data-testid": dataTestId,
     severity: severity,
     icon: /*#__PURE__*/React.createElement(AlertIcon, {
@@ -1016,15 +1007,13 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
 var ResizeComponent = function ResizeComponent(_a) {
   var _a$startPosition = _a.startPosition,
       startPosition = _a$startPosition === void 0 ? {
-    left: null,
-    right: null,
-    top: null
+    left: undefined,
+    right: undefined,
+    top: undefined
   } : _a$startPosition,
       children = _a.children,
       _a$onResizeStart = _a.onResizeStart,
-      onResizeStart = _a$onResizeStart === void 0 ? function () {
-    return null;
-  } : _a$onResizeStart,
+      onResizeStart = _a$onResizeStart === void 0 ? function () {} : _a$onResizeStart,
       size = _a.size,
       setSize = _a.setSize,
       _a$minHeight = _a.minHeight,
@@ -1113,8 +1102,8 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
     _this.state = {
-      error: null,
-      errorInfo: null
+      error: undefined,
+      errorInfo: undefined
     };
     return _this;
   }
@@ -1174,9 +1163,7 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
   return ErrorBoundary;
 }(React.Component);
 ErrorBoundary.defaultProps = {
-  onError: function onError() {
-    return null;
-  }
+  onError: function onError() {}
 };
 
 /* *
@@ -1264,13 +1251,9 @@ var UserMenu = function UserMenu(_ref) {
   var _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
       _ref$onToggle = _ref.onToggle,
-      onToggle = _ref$onToggle === void 0 ? function () {
-    return null;
-  } : _ref$onToggle,
+      onToggle = _ref$onToggle === void 0 ? function () {} : _ref$onToggle,
       _ref$onClose = _ref.onClose,
-      onClose = _ref$onClose === void 0 ? function () {
-    return null;
-  } : _ref$onClose,
+      onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -1622,27 +1605,21 @@ var DraggableComponent = function DraggableComponent(_a) {
   } : _a$startSize,
       _a$startPosition = _a.startPosition,
       startPosition = _a$startPosition === void 0 ? {
-    left: null,
-    right: null,
-    top: null
+    left: undefined,
+    right: undefined,
+    top: undefined
   } : _a$startPosition,
       children = _a.children,
       _a$isOpen = _a.isOpen,
       isOpen = _a$isOpen === void 0 ? true : _a$isOpen,
       _a$onClose = _a.onClose,
-      onClose = _a$onClose === void 0 ? function () {
-    return null;
-  } : _a$onClose,
+      onClose = _a$onClose === void 0 ? function () {} : _a$onClose,
       _a$initialMaxHeight = _a.initialMaxHeight,
       defaultInitialMaxHeight = _a$initialMaxHeight === void 0 ? 'initial' : _a$initialMaxHeight,
       _a$onChangeSize = _a.onChangeSize,
-      onChangeSize = _a$onChangeSize === void 0 ? function () {
-    return null;
-  } : _a$onChangeSize,
+      onChangeSize = _a$onChangeSize === void 0 ? function () {} : _a$onChangeSize,
       _a$onMouseDown = _a.onMouseDown,
-      onMouseDown = _a$onMouseDown === void 0 ? function () {
-    return null;
-  } : _a$onMouseDown,
+      onMouseDown = _a$onMouseDown === void 0 ? function () {} : _a$onMouseDown,
       _a$order = _a.order,
       order = _a$order === void 0 ? 1 : _a$order,
       _a$source = _a.source,
@@ -2456,11 +2433,11 @@ var ToggleMenu = function ToggleMenu(_ref) {
         transition: 'none'
       }
     },
-    MenuListProps: children && {
+    MenuListProps: Object.assign({}, children && {
       style: {
         padding: '0px'
       }
-    }
+    })
   }, menuItems && menuItems.map(function (menuItem) {
     var text = menuItem.text,
         icon = menuItem.icon,
@@ -2790,7 +2767,7 @@ var TooltipSelect = function TooltipSelect(_a) {
     title: tooltip,
     placement: "top",
     open: tooltipOpen,
-    sx: noStyling ? undefined : tooltipContainerStyles(isEnabled, hasBackgroundColor)
+    sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
   }, /*#__PURE__*/React.createElement(Select, Object.assign({
     onOpen: onOpen,
     onClose: onClose,

package/index.umd.js

@@ -144,13 +144,16 @@
 
     var StatusTag = function StatusTag(_a) {
       var content = _a.content,
-          color = _a.color;
+          color = _a.color,
+          props = __rest(_a, ["content", "color"]);
+
       return /*#__PURE__*/React__namespace.createElement(material.Box, {
         display: "flex",
         alignItems: "center",
         justifyContent: "center",
-        sx: __assign({}, tagStyle(color)),
-        "data-testid": "statusTag"
+        "data-testid": "statusTag",
+        className: "statusTag",
+        sx: __assign(__assign({}, tagStyle(color)), props.sx)
       }, /*#__PURE__*/React__namespace.createElement(material.Typography, {
         variant: "caption"
       }, content));
@@ -357,7 +360,7 @@
         pollingInterval = 300000;
       }
 
-      var interval = React__namespace.useRef(null);
+      var interval = React.useRef(null);
       React__namespace.useEffect(function () {
         if (deps.filter(function (dep) {
           return dep !== null;
@@ -634,7 +637,11 @@
           isOpen = _h[0],
           setIsOpen = _h[1];
 
-      return isOpen && /*#__PURE__*/React__namespace.createElement(material.Alert, {
+      if (!isOpen) {
+        return null;
+      }
+
+      return /*#__PURE__*/React__namespace.createElement(material.Alert, {
         "data-testid": dataTestId,
         severity: severity,
         icon: /*#__PURE__*/React__namespace.createElement(AlertIcon, {
@@ -887,15 +894,13 @@
     var ResizeComponent = function ResizeComponent(_a) {
       var _b = _a.startPosition,
           startPosition = _b === void 0 ? {
-        left: null,
-        right: null,
-        top: null
+        left: undefined,
+        right: undefined,
+        top: undefined
       } : _b,
           children = _a.children,
           _c = _a.onResizeStart,
-          onResizeStart = _c === void 0 ? function () {
-        return null;
-      } : _c,
+          onResizeStart = _c === void 0 ? function () {} : _c,
           size = _a.size,
           setSize = _a.setSize,
           _d = _a.minHeight,
@@ -981,8 +986,8 @@
         var _this = _super.call(this, props) || this;
 
         _this.state = {
-          error: null,
-          errorInfo: null
+          error: undefined,
+          errorInfo: undefined
         };
         return _this;
       }
@@ -1035,9 +1040,7 @@
       };
 
       ErrorBoundary.defaultProps = {
-        onError: function onError() {
-          return null;
-        }
+        onError: function onError() {}
       };
       return ErrorBoundary;
     }(React__namespace.Component);
@@ -1111,13 +1114,9 @@
       var _b = _a.isOpen,
           isOpen = _b === void 0 ? false : _b,
           _c = _a.onToggle,
-          onToggle = _c === void 0 ? function () {
-        return null;
-      } : _c,
+          onToggle = _c === void 0 ? function () {} : _c,
           _d = _a.onClose,
-          onClose = _d === void 0 ? function () {
-        return null;
-      } : _d,
+          onClose = _d === void 0 ? function () {} : _d,
           children = _a.children,
           initials = _a.initials;
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
@@ -1488,27 +1487,21 @@
       } : _d,
           _e = _a.startPosition,
           startPosition = _e === void 0 ? {
-        left: null,
-        right: null,
-        top: null
+        left: undefined,
+        right: undefined,
+        top: undefined
       } : _e,
           children = _a.children,
           _f = _a.isOpen,
           isOpen = _f === void 0 ? true : _f,
           _g = _a.onClose,
-          onClose = _g === void 0 ? function () {
-        return null;
-      } : _g,
+          onClose = _g === void 0 ? function () {} : _g,
           _h = _a.initialMaxHeight,
           defaultInitialMaxHeight = _h === void 0 ? 'initial' : _h,
           _j = _a.onChangeSize,
-          onChangeSize = _j === void 0 ? function () {
-        return null;
-      } : _j,
+          onChangeSize = _j === void 0 ? function () {} : _j,
           _k = _a.onMouseDown,
-          onMouseDown = _k === void 0 ? function () {
-        return null;
-      } : _k,
+          onMouseDown = _k === void 0 ? function () {} : _k,
           _l = _a.order,
           order = _l === void 0 ? 1 : _l,
           _m = _a.source,
@@ -2319,11 +2312,11 @@
             transition: 'none'
           }
         },
-        MenuListProps: children && {
+        MenuListProps: __assign({}, children && {
           style: {
             padding: '0px'
           }
-        }
+        })
       }, menuItems && menuItems.map(function (menuItem) {
         var text = menuItem.text,
             icon = menuItem.icon,
@@ -2670,7 +2663,7 @@
         title: tooltip,
         placement: "top",
         open: tooltipOpen,
-        sx: noStyling ? undefined : tooltipContainerStyles(isEnabled, hasBackgroundColor)
+        sx: noStyling ? undefined : tooltipContainerStyles(!!isEnabled, hasBackgroundColor)
       }, /*#__PURE__*/React__namespace.createElement(material.Select, __assign({
         onOpen: onOpen,
         onClose: onClose,

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

@@ -5,25 +5,21 @@ declare const _default: {
 export default _default;
 export declare const AvatarLight: {
     (): React.ReactElement;
-    story: {
-        name: string;
-        parameters: {
-            zeplinLink: {
-                name: string;
-                link: string;
-            }[];
-        };
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
     };
 };
 export declare const AvatarDark: {
     (): React.ReactElement;
-    story: {
-        name: string;
-        parameters: {
-            zeplinLink: {
-                name: string;
-                link: string;
-            }[];
-        };
+    storyName: string;
+    parameters: {
+        zeplinLink: {
+            name: string;
+            link: string;
+        }[];
     };
 };

package/lib/components/CustomToggleButton/CustomToggleButton.d.ts

@@ -3,6 +3,6 @@ import { ToggleButtonProps } from '@mui/material';
 import { ButtonVariant } from '@opengeoweb/theme';
 export interface CustomToggleButtonProps extends Omit<ToggleButtonProps, 'value'> {
     variant?: ButtonVariant;
-    value?: unknown;
+    value?: any;
 }
 export declare const CustomToggleButton: React.FC<CustomToggleButtonProps>;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-interface StatusTagProps {
+import { BoxProps } from '@mui/material';
+interface StatusTagProps extends BoxProps {
     content: string;
     color: string;
 }

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

@@ -7,5 +7,6 @@ export interface ToolButtonProps extends CustomToggleButtonProps {
     height?: string;
     value?: unknown;
     sx?: SxProps<Theme>;
+    children?: React.ReactNode;
 }
 export declare const ToolButton: React.FC<ToolButtonProps>;

package/lib/hooks/usePoller/usePoller.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const usePoller: (deps: unknown[], callback: () => void, pollingInterval?: number) => React.MutableRefObject<number>;
+export declare const usePoller: (deps: unknown[], callback: () => void, pollingInterval?: number) => React.RefObject<ReturnType<typeof setTimeout>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -13,16 +13,16 @@
   "dependencies": {},
   "peerDependencies": {
     "react": "^17.0.2",
-    "@mui/material": "^5.2.8",
-    "@opengeoweb/theme": "4.1.0",
-    "react-draggable": "^4.4.3",
+    "@mui/material": "^5.10.8",
+    "@opengeoweb/theme": "4.3.0",
+    "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "4.1.0",
+    "@opengeoweb/form-fields": "4.3.0",
     "react-hook-form": "^6.12.1",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",
-    "@mui/lab": "^5.0.0-alpha.64",
+    "@mui/x-date-pickers": "^5.0.4",
     "axios": "^0.25.0"
   }
 }