@opengeoweb/shared 2.0.1 → 2.1.3

package/shared.esm.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default from 'react';
-import { Box, Typography, makeStyles, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Grid, useTheme, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, withStyles, Slider } from '@material-ui/core';
+import { Box, Typography, makeStyles, Dialog, DialogTitle, IconButton, DialogContent, DialogActions, Button, SvgIcon, Grid, useTheme, Link, Avatar, Paper, ClickAwayListener, MenuList, MenuItem, RadioGroup, FormControlLabel, Radio, List, ListItem, Tabs, Tab, Backdrop, withStyles, Slider, createStyles } from '@material-ui/core';
 import { Close, DragIndicator } from '@material-ui/icons';
 import { useFormContext } from 'react-hook-form';
 import { isEmpty, errorMessages } from '@opengeoweb/form-fields';
@@ -103,7 +103,7 @@ function __rest(s, e) {
     return t;
 }
 
-var useStyles$d = makeStyles(function () {
+var useStyles$e = makeStyles(function () {
   return {
     dialogHeader: {
       zIndex: 1,
@@ -135,7 +135,7 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
       content = _a$content === void 0 ? null : _a$content,
       other = __rest(_a, ["open", "title", "description", "confirmLabel", "cancelLabel", "onSubmit", "onClose", "content"]);
 
-  var classes = useStyles$d();
+  var classes = useStyles$e();
 
   other.catchOnCancel;
       var rest = __rest(other, ["catchOnCancel"]); // remove unwanted props
@@ -172,7 +172,8 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
     onClick: function onClick() {
       return onClose('CANCELLED');
     },
-    autoFocus: true
+    autoFocus: true,
+    disableRipple: true
   }, cancelLabel), /*#__PURE__*/React.createElement(Button, {
     "data-testid": "conformationDialog-confirm",
     color: "secondary",
@@ -181,6 +182,28 @@ var ConfirmationDialog = function ConfirmationDialog(_a) {
   }, confirmLabel)));
 };
 
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  return Constructor;
+}
+
 function _defineProperty(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
@@ -196,6 +219,85 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+function _inherits(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  if (superClass) _setPrototypeOf(subClass, superClass);
+}
+
+function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf(o);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function _assertThisInitialized(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  }
+
+  return _assertThisInitialized(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn(this, result);
+  };
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -552,7 +654,7 @@ var ConfirmationServiceProvider = function ConfirmationServiceProvider(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$c = makeStyles(function () {
+var useStyles$d = makeStyles(function () {
   return {
     title: {
       fontSize: '14px',
@@ -622,7 +724,7 @@ var AlertBanner = function AlertBanner(_ref) {
       info = _ref$info === void 0 ? '' : _ref$info,
       _ref$dataTestId = _ref.dataTestId,
       dataTestId = _ref$dataTestId === void 0 ? 'alert-banner' : _ref$dataTestId;
-  var classes = useStyles$c();
+  var classes = useStyles$d();
   return /*#__PURE__*/React.createElement(Alert, {
     "data-testid": dataTestId,
     severity: severity,
@@ -650,7 +752,7 @@ var AlertBanner = function AlertBanner(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$b = makeStyles(function () {
+var useStyles$c = makeStyles(function () {
   return {
     wrapper: {
       height: '100vh',
@@ -667,7 +769,7 @@ var useStyles$b = makeStyles(function () {
 var AppLayout = function AppLayout(_ref) {
   var header = _ref.header,
       children = _ref.children;
-  var classes = useStyles$b();
+  var classes = useStyles$c();
   return /*#__PURE__*/React__default.createElement("div", {
     className: classes.wrapper
   }, header, /*#__PURE__*/React__default.createElement("main", {
@@ -677,7 +779,7 @@ var AppLayout = function AppLayout(_ref) {
 
 var img = "data:image/svg+xml,%3c!--Licensed under the Apache License%2c Version 2.0 (the 'License')%3byou 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.0Unless required by applicable law or agreed to in writing%2c softwaredistributed under the License is distributed on an 'AS IS' BASIS%2cWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND%2c either express or implied.See the License for the specific language governing permissions andlimitations under the License.Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)Copyright 2021 - Finnish Meteorological Institute (FMI)--%3e%3csvg id='svg4550' xmlnsRdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns='http://www.w3.org/2000/svg' height='55.156mm' viewBox='0 0 289.84072 195.43326' width='81.799mm' version='1.1' xmlnsCc='http://creativecommons.org/ns%23' xmlnsXlink='http://www.w3.org/1999/xlink' xmlnsDc='http://purl.org/dc/elements/1.1/'%3e %3cdefs id='defs14'%3e %3clinearGradient id='linearGradient4263' y2='113.1' gradientUnits='userSpaceOnUse' y1='76.066' gradientTransform='translate(0 -.0012816)' x2='199.26' x1='160.9'%3e %3cstop id='stop4259' stop-color='white' stop-opacity='.33333' offset='0'/%3e %3cstop id='stop4261' stop-color='white' stop-opacity='0' offset='1'/%3e %3c/linearGradient%3e %3clinearGradient id='linearGradient4240' y2='79.833' gradientUnits='userSpaceOnUse' x2='120.82' y1='120.77' x1='128.56'%3e %3cstop id='stop4236' stop-color='white' stop-opacity='0' offset='0'/%3e %3cstop id='stop4238' stop-color='white' stop-opacity='.33333' offset='1'/%3e %3c/linearGradient%3e %3c/defs%3e %3cg id='layer1' transform='translate(353.49 -626.07)'%3e %3cg id='g4'%3e %3cpath id='path4220' d='m-207 679.86c-7.6546-3.9726-16.149-6.0541-24.773-6.0703-24.585 0.0315-46.045 16.665-52.207 40.465-2.23-0.35755-4.4838-0.54689-6.7422-0.56642-24.881-0.00043-45.051 20.17-45.051 45.051-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 8.9834 0 22.962 0.009 36.879 0.0165 9.7409 0.38215 35.645-0.43398 53.537-23.548 17.892-23.115 7.1203-72.79-0.31513-94.017s-30.566-42.361-53.247-42.361c-26.664 0-50.367 14.562-62.311 36.07z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%230b9ee5'/%3e %3cpath id='path4220-7' opacity='.98' d='m-335.78 758.74c-0.00043 24.881 20.17 45.051 45.051 45.051 36.152-0.20272 72.845-0.0898 109.18-0.0898 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 4.439-5.7347 7.1108-13.107 8.5098-21.271-35.448-0.0105-239.67-0.15823-253.16-0.15823z' fill='%2360bce9'/%3e %3c/g%3e %3cpath id='path4220-2' d='m-144.69 643.79c-19.529 0-37.464 7.8167-50.359 20.447-4.6476 4.6419-8.6513 9.9041-11.953 15.623 0 40.944 0.0195 77.914 0.0195 123.83 8.4824 0.007 16.983 0.0137 25.438 0.0137 10.101 0 27.126 0.009 42.523 0.0156 11.975-0.4199 32.775-4.017 47.893-23.547 17.892-23.115 7.1209-72.791-0.31446-94.018s-30.565-42.361-53.246-42.361z' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='white' fill-opacity='.31373'/%3e %3c/g%3e %3cg id='g4244' transform='translate(2.926 -1.3827)'%3e %3cpath id='path4329' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='%23003232' d='m211.54 98.88c11.484 8.7901 14.857 8.43 22.486 19.238 3.6519 5.1733 5.5602 11.69 5.5645 18.164-0.00018 17.949-14.551 32.499-32.5 32.498-17.948-0.00018-32.498-14.55-32.498-32.498 0.006-0.50098 0.0236-1.0018 0.0527-1.502-3.4629-1.1175-6.9173-1.9297-9.6543-1.9297-2.7565 0-6.2409 0.82134-9.7285 1.9512 0.036 0.49286 0.0607 0.98649 0.0742 1.4805-0.00018 17.948-14.55 32.498-32.498 32.498-17.948-0.00019-32.498-14.55-32.498-32.498 0.006-3.5239 0.71774-6.9687 1.8781-10.26 5.474-20.521 8.7944-44.229 27.665-46.855 8.2552-1.1488 15.952 8.848 25.107 8.848 9.1558-0.00028 9.318-14.58 23.088-14.836 16.828-0.3123 31.185 16.304 43.462 25.701zm-4.7539 13.92c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-84.125 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z'/%3e %3cpath id='path4329-2' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' fill='url(%23linearGradient4263)' d='m157.24 77.869c-2.1199 2.1753-3.6401 4.4832-5.4018 6.5241-0.53185 0.61614-1.2448 1.3191-1.8477 1.7949-1.2058 0.9517-2.5477 1.6107-4.168 1.7793-0.27005 0.0281-0.54787 0.04296-0.83398 0.04297 5.0928 13.298 11.821 26.014 20 44.834 2.737 0 6.1914 0.8122 9.6543 1.9297-0.0291 0.5002-0.0467 1.001-0.0527 1.502 0 8.4131 3.196 16.08 8.4414 21.852 0.34969 0.38474 0.70861 0.75939 1.0762 1.127 5.881 5.8809 14.007 9.5194 22.98 9.5195 0.5609 0.00004 1.118-0.0149 1.6719-0.043 3.3236-0.16829 6.5154-0.83435 9.502-1.9277 0.99554-0.36446 1.9688-0.77802 2.916-1.2344 1.4208-0.68453 2.7833-1.4677 4.0801-2.3438 8.645-5.84 14.33-15.731 14.33-26.949-0.004-6.474-2.0849-12.873-5.5645-18.164-7.0668-10.745-14.684-12.763-22.486-19.238-11.815-9.8048-26.968-25.716-42.627-25.716-6.2104 0-9.3385 2.3185-11.67 4.7112zm49.543 34.924c4.9706 0 9.5876 1.5119 13.418 4.0996 0.6384 0.43129 1.255 0.89176 1.8476 1.3809 0.59266 0.4891 1.1622 1.0059 1.7051 1.5488 4.3431 4.3431 7.0293 10.343 7.0293 16.971 0 12.841-10.085 23.326-22.766 23.969-0.40906 0.0207-0.82015 0.0312-1.2344 0.0312-4.97 0-9.5878-1.5105-13.418-4.0976-0.00044-0.0003-0.002 0.00029-0.002 0-6.384-4.3129-10.58-11.618-10.58-19.902 0-6.6275 2.6862-12.628 7.0293-16.971 0.54288-0.54289 1.1124-1.0597 1.7051-1.5488 0.59266-0.4891 1.2073-0.94957 1.8457-1.3809 3.8304-2.5878 8.4493-4.0996 13.42-4.0996z'/%3e %3cpath id='path4329-7' style='color-rendering:auto%3bcolor:black%3bisolation:auto%3bmix-blend-mode:normal%3bshape-rendering:auto%3bsolid-color:black%3bimage-rendering:auto' d='m121.43 79.077c-0.51208-0.01011-1.027 0.01805-1.543 0.08985-18.871 2.626-22.19 26.335-27.664 46.856-1.1604 3.2913-1.8729 6.7359-1.8789 10.26 0 17.948 14.55 32.498 32.498 32.498s32.498-14.55 32.498-32.498c-0.0135-0.49402-0.0382-0.98762-0.0742-1.4805 3.5012-1.0071 5.7853-1.8693 9.6893-1.9248-4.8944-11.377-14.29-31.914-19.961-44.863-8.5828 0.000001-15.883-8.7859-23.565-8.9376zm1.2344 33.723c13.255 0 24 10.745 24 24s-10.745 24-24 24-24-10.745-24-24 10.745-24 24-24z' fill='url(%23linearGradient4240)'/%3e %3c/g%3e%3c/svg%3e";
 
-var useStyles$a = makeStyles(function (theme) {
+var useStyles$b = makeStyles(function (theme) {
   var _header;
 
   return {
@@ -714,7 +816,7 @@ var AppHeader = function AppHeader(_ref) {
       userMenu = _ref.userMenu,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? 'GeoWeb' : _ref$title;
-  var classes = useStyles$a();
+  var classes = useStyles$b();
   return /*#__PURE__*/React__default.createElement("header", {
     className: classes.header
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -798,7 +900,7 @@ var DraggableComponent$1 = function DraggableComponent(_a) {
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
 
-var useStyles$9 = function useStyles(isRightAligned) {
+var useStyles$a = function useStyles(isRightAligned) {
   return makeStyles(function () {
     return {
       icon: Object.assign(Object.assign({
@@ -812,7 +914,7 @@ var useStyles$9 = function useStyles(isRightAligned) {
         left: 10,
         transform: 'rotate(90deg)'
       }), {
-        zIndex: 100
+        zIndex: 1
       })
     };
   });
@@ -821,7 +923,7 @@ var useStyles$9 = function useStyles(isRightAligned) {
 var ResizeHandle = function ResizeHandle(_ref2) {
   var isRightAligned = _ref2.isRightAligned;
   var theme = useTheme();
-  var styles = useStyles$9(isRightAligned)();
+  var styles = useStyles$a(isRightAligned)();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
     className: styles.icon,
     "data-testid": "resizeHandle"
@@ -906,6 +1008,89 @@ var ResizeComponent = function ResizeComponent(_a) {
   }, props), children);
 };
 
+/**
+ * ErrorBoundary
+ * Wrap this component around parts of your application. It will catch any uncaught errors and display an alert, and allows you to continue using the rest of your application.
+ *
+ * @example
+ * ``` <ErrorBoundary><ExampleComponent /></ErrorBoundary> ```
+ */
+
+var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(ErrorBoundary, _React$Component);
+
+  var _super = _createSuper(ErrorBoundary);
+
+  function ErrorBoundary(props) {
+    var _this;
+
+    _classCallCheck(this, ErrorBoundary);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      error: null,
+      errorInfo: null
+    };
+    return _this;
+  }
+
+  _createClass(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      var onError = this.props.onError;
+      this.setState({
+        error: error,
+        errorInfo: errorInfo
+      });
+      onError(error, errorInfo);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          error = _this$state.error,
+          errorInfo = _this$state.errorInfo;
+      var children = this.props.children;
+
+      if (error) {
+        return /*#__PURE__*/React.createElement("div", {
+          style: {
+            whiteSpace: 'pre-wrap'
+          }
+        }, /*#__PURE__*/React.createElement(AlertBanner, {
+          severity: "error",
+          title: "Woops, an error has occurred. Please report the error shown below and reload the page if needed.",
+          info: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("br", null), error.toString(), /*#__PURE__*/React.createElement("br", null), errorInfo && errorInfo.componentStack, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Link, {
+            underline: "always",
+            style: {
+              cursor: 'pointer'
+            },
+            onClick: function onClick() {
+              return window.location.reload();
+            }
+          }, "Reload page"))
+        }));
+      }
+
+      return children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        error: error
+      };
+    }
+  }]);
+
+  return ErrorBoundary;
+}(React.Component);
+ErrorBoundary.defaultProps = {
+  onError: function onError() {
+    return null;
+  }
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -922,7 +1107,7 @@ var ResizeComponent = function ResizeComponent(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$8 = makeStyles(function (theme) {
+var useStyles$9 = makeStyles(function (theme) {
   return {
     container: {
       position: 'absolute',
@@ -970,7 +1155,7 @@ var UserMenu = function UserMenu(_ref) {
   } : _ref$onClose,
       children = _ref.children,
       initials = _ref.initials;
-  var classes = useStyles$8();
+  var classes = useStyles$9();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     "data-testid": "userButton",
     onClick: onToggle,
@@ -1050,7 +1235,7 @@ var MenuItemTheme = function MenuItemTheme() {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles(function (theme) {
+var useStyles$8 = makeStyles(function (theme) {
   return {
     footer: {
       boxShadow: theme.shadows[1],
@@ -1063,7 +1248,7 @@ var useStyles$7 = makeStyles(function (theme) {
 }); // drag handles will be handled by DraggableResizable/Resizable
 
 var ToolFooter = function ToolFooter() {
-  var classes = useStyles$7();
+  var classes = useStyles$8();
   return /*#__PURE__*/React__default.createElement("footer", {
     className: classes.footer
   });
@@ -1130,7 +1315,7 @@ var getStyle = function getStyle(size) {
   }
 };
 
-var useStyles$6 = makeStyles(function (theme) {
+var useStyles$7 = makeStyles(function (theme) {
   return {
     header: {
       boxShadow: theme.shadows[1],
@@ -1180,7 +1365,7 @@ var ToolHeader = function ToolHeader(_ref) {
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? '' : _ref$className;
   var styles = getStyle(size);
-  var classes = useStyles$6({
+  var classes = useStyles$7({
     styles: styles,
     isDraggable: isDraggable
   });
@@ -1215,7 +1400,7 @@ var ToolHeader = function ToolHeader(_ref) {
     variant: "h2",
     className: classes.title
   }, title), size === 'xxs' && /*#__PURE__*/React__default.createElement(IconButton, {
-    "data-testid": "dragBtn",
+    "data-testid": "dragBtn-xxs",
     className: classes.iconDragHorizontal,
     disableRipple: true,
     size: "small"
@@ -1247,7 +1432,7 @@ var ToolHeader = function ToolHeader(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$5 = makeStyles(function () {
+var useStyles$6 = makeStyles(function () {
   return {
     container: {
       overflow: 'hidden',
@@ -1285,7 +1470,7 @@ var ToolContainer = function ToolContainer(_a) {
       headerClassName = _a$headerClassName === void 0 ? '' : _a$headerClassName,
       props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName"]);
 
-  var classes = useStyles$5();
+  var classes = useStyles$6();
   return /*#__PURE__*/React__default.createElement(Paper, Object.assign({
     elevation: elevation,
     className: classes.container
@@ -1474,7 +1659,7 @@ var DraggableComponent = function DraggableComponent(_a) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$4 = makeStyles(function (theme) {
+var useStyles$5 = makeStyles(function (theme) {
   return {
     icon: {
       backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1514,7 +1699,7 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
   var _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
       children = _ref.children;
-  var classes = useStyles$4();
+  var classes = useStyles$5();
 
   if (type === 'divider') {
     return /*#__PURE__*/React__default.createElement(Typography, {
@@ -1564,7 +1749,7 @@ var ShortCutSegment = function ShortCutSegment(_ref) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$3 = makeStyles(function (theme) {
+var useStyles$4 = makeStyles(function (theme) {
   return {
     icon: {
       fill: theme.palette.geowebColors.typographyAndIcons.text
@@ -1572,7 +1757,7 @@ var useStyles$3 = makeStyles(function (theme) {
   };
 });
 var OptionIcon = function OptionIcon() {
-  var classes = useStyles$3();
+  var classes = useStyles$4();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
     viewBox: "0 0 12 11",
     style: {
@@ -1595,7 +1780,7 @@ var OptionIcon = function OptionIcon() {
   }))));
 };
 var CommandIcon = function CommandIcon() {
-  var classes = useStyles$3();
+  var classes = useStyles$4();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
     viewBox: "0 0 12 12",
     style: {
@@ -1618,7 +1803,7 @@ var CommandIcon = function CommandIcon() {
   }))));
 };
 var ArrowLeftIcon = function ArrowLeftIcon() {
-  var classes = useStyles$3();
+  var classes = useStyles$4();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
     viewBox: "0 0 12 6",
     style: {
@@ -1642,7 +1827,7 @@ var ArrowLeftIcon = function ArrowLeftIcon() {
   }))));
 };
 var ArrowRightIcon = function ArrowRightIcon() {
-  var classes = useStyles$3();
+  var classes = useStyles$4();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
     viewBox: "0 0 12 6",
     style: {
@@ -1666,7 +1851,7 @@ var ArrowRightIcon = function ArrowRightIcon() {
   }))));
 };
 var ArrowDownIcon = function ArrowDownIcon() {
-  var classes = useStyles$3();
+  var classes = useStyles$4();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
     viewBox: "0 0 6 12",
     style: {
@@ -1689,7 +1874,7 @@ var ArrowDownIcon = function ArrowDownIcon() {
   }))));
 };
 var ArrowUpIcon = function ArrowUpIcon() {
-  var classes = useStyles$3();
+  var classes = useStyles$4();
   return /*#__PURE__*/React__default.createElement(SvgIcon, {
     viewBox: "0 0 6 11",
     style: {
@@ -1856,7 +2041,7 @@ var getShortcutList = function getShortcutList(shortcutList) {
     });
   });
 };
-var useStyles$2 = makeStyles(function () {
+var useStyles$3 = makeStyles(function () {
   return {
     row: {
       minHeight: 56
@@ -1876,7 +2061,7 @@ var useStyles$2 = makeStyles(function () {
 var ShortcutList = function ShortcutList(_ref2) {
   var _ref2$platform = _ref2.platform,
       platform = _ref2$platform === void 0 ? 'windows' : _ref2$platform;
-  var classes = useStyles$2();
+  var classes = useStyles$3();
   var rows = getShortcutList(shortcuts, platform);
   return /*#__PURE__*/React__default.createElement(List, {
     "data-testid": "list-".concat(platform)
@@ -1913,7 +2098,7 @@ var TabPanel = function TabPanel(_ref) {
   }, value === index && children);
 };
 
-var useStyles$1 = makeStyles(function () {
+var useStyles$2 = makeStyles(function () {
   return {
     container: {
       margin: '0px 20px'
@@ -1925,7 +2110,7 @@ var useStyles$1 = makeStyles(function () {
 });
 
 var CheatSheet = function CheatSheet() {
-  var classes = useStyles$1();
+  var classes = useStyles$2();
 
   var _React$useState = React__default.useState(0),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -1959,7 +2144,7 @@ var CheatSheet = function CheatSheet() {
   })));
 };
 
-var useStyles = makeStyles(function () {
+var useStyles$1 = makeStyles(function () {
   return {
     backdrop: {
       zIndex: 1
@@ -1968,7 +2153,7 @@ var useStyles = makeStyles(function () {
 });
 
 var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
-  var classes = useStyles();
+  var classes = useStyles$1();
 
   var _React$useState = React__default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -2133,25 +2318,17 @@ var CustomSliderComponent = withStyles(function (theme) {
     }
   };
 })(Slider);
-var CustomSlider = function CustomSlider(_ref) {
-  var value = _ref.value,
-      onChange = _ref.onChange,
-      onKeyDown = _ref.onKeyDown,
-      _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? 'customSlider' : _ref$dataTestId,
-      _ref$orientation = _ref.orientation,
-      orientation = _ref$orientation === void 0 ? 'vertical' : _ref$orientation,
-      max = _ref.max,
-      min = _ref.min,
-      step = _ref.step,
-      _ref$marks = _ref.marks,
-      marks = _ref$marks === void 0 ? [] : _ref$marks,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      ThumbComponent = _ref.ThumbComponent;
-  // Add custom class (for bold text) to label adjacent to thumb component.
+var CustomSlider = function CustomSlider(_a) {
+  var value = _a.value,
+      _a$orientation = _a.orientation,
+      orientation = _a$orientation === void 0 ? 'vertical' : _a$orientation,
+      _a$shouldAutoFocus = _a.shouldAutoFocus,
+      shouldAutoFocus = _a$shouldAutoFocus === void 0 ? false : _a$shouldAutoFocus,
+      props = __rest(_a, ["value", "orientation", "shouldAutoFocus"]); // Add custom class (for bold text) to label adjacent to thumb component.
   // Material UI doesn't support highlighing only adjacent label
   // when track is highlighted everywhere below selected value.
+
+
   var element = React.useRef(null);
   var themeContext = useThemeContext();
   React.useEffect(function () {
@@ -2166,21 +2343,115 @@ var CustomSlider = function CustomSlider(_ref) {
     rest.forEach(function (element) {
       return element.classList.remove('selectedLabel');
     });
-  }, [value, themeContext.isDark]);
-  return /*#__PURE__*/React.createElement(CustomSliderComponent, {
+  }, [value, themeContext.isDark]); // autofocus
+
+  React.useEffect(function () {
+    if (shouldAutoFocus && element.current) {
+      var thumb = element.current.querySelector('.MuiSlider-thumb');
+      thumb.focus();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, []);
+  return /*#__PURE__*/React.createElement(CustomSliderComponent, Object.assign({
     ref: element,
-    "data-testid": dataTestId,
-    orientation: orientation,
     value: value,
-    step: step,
-    max: max,
-    min: min,
-    marks: marks,
-    onChange: onChange,
-    onKeyDown: onKeyDown,
-    disabled: disabled,
-    ThumbComponent: ThumbComponent
+    orientation: orientation
+  }, 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 Z_INDEX_TOP = 600;
+var Z_INDEX_BOTTOM = 550;
+var useStyles = makeStyles(function (theme) {
+  return createStyles({
+    draggableDialog: function draggableDialog(props) {
+      return {
+        width: props.dialogWidth ? props.dialogWidth : '90%',
+        position: 'absolute',
+        top: props.dialogTop ? props.dialogTop : '2%',
+        left: '5%',
+        maxWidth: '90%',
+        maxHeight: props.dialogMaxHeight ? props.dialogMaxHeight : '95%',
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        zIndex: props.zIndex
+      };
+    },
+    dialogContent: {
+      marginTop: '40px',
+      overflowY: 'scroll'
+    },
+    dialogHeader: function dialogHeader(props) {
+      return {
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.14)',
+        width: '100%',
+        backgroundColor: '#ffffff',
+        zIndex: props.zIndex + 10
+      };
+    },
+    iconClose: {
+      padding: theme.spacing(1)
+    },
+    iconDrag: {
+      padding: theme.spacing(1)
+    }
   });
+});
+
+var DraggableDialog = function DraggableDialog(_ref) {
+  var handleClose = _ref.handleClose,
+      title = _ref.title,
+      children = _ref.children,
+      _ref$dialogStyling = _ref.dialogStyling,
+      dialogStyling = _ref$dialogStyling === void 0 ? {} : _ref$dialogStyling,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? Z_INDEX_TOP : _ref$zIndex;
+  var classes = useStyles(Object.assign(Object.assign({}, dialogStyling), {
+    zIndex: zIndex
+  }));
+  return /*#__PURE__*/React.createElement(Draggable, {
+    handle: "strong",
+    bounds: "body"
+  }, /*#__PURE__*/React.createElement(Paper, {
+    "data-testid": title,
+    className: classes.draggableDialog,
+    elevation: 24
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classes.dialogHeader
+  }, /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "dragDialog",
+    size: "small",
+    className: classes.iconDrag
+  }, /*#__PURE__*/React.createElement(DragIndicator, null))), /*#__PURE__*/React.createElement(Typography, {
+    variant: "subtitle1"
+  }, title), /*#__PURE__*/React.createElement(IconButton, {
+    "data-testid": "closeDialog",
+    size: "small",
+    onClick: handleClose,
+    className: classes.iconClose
+  }, /*#__PURE__*/React.createElement(Close, null))), /*#__PURE__*/React.createElement("div", {
+    className: classes.dialogContent
+  }, children)));
 };
 
 /* *
@@ -2217,4 +2488,4 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   return 'An error has occurred';
 };
 
-export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, DraggableComponent$1 as Draggable, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };
+export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, DraggableComponent$1 as Draggable, DraggableDialog, ErrorBoundary, HIDDEN_INPUT_HELPER_IS_DRAFT, ResizeComponent as Resizable, StatusTag, ToolContainer, DraggableComponent as ToolContainerDraggable, ToolFooter, ToolHeader, UserMenu, UserMenuItemCheatSheet, MenuItemTheme as UserMenuItemTheme, Z_INDEX_BOTTOM, Z_INDEX_TOP, getAxiosErrorMessage, getInitials, isAxiosError, showPrompt, sliderStyles, useConfirmationDialog, useDialogActions, useDraftFormHelpers, useIsMounted, usePoller, usePreventBrowserClose, usePrevious, useUserMenu };