@opengeoweb/shared 2.0.1 → 2.1.3

package/shared.umd.js

@@ -42,6 +42,22 @@
     OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
     PERFORMANCE OF THIS SOFTWARE.
     ***************************************************************************** */
+    /* global Reflect, Promise */
+
+    var extendStatics = function(d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+
+    function __extends(d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    }
 
     var __assign = function() {
         __assign = Object.assign || function __assign(t) {
@@ -139,7 +155,7 @@
       }, content));
     };
 
-    var useStyles$d = core.makeStyles(function () {
+    var useStyles$e = core.makeStyles(function () {
       return {
         dialogHeader: {
           zIndex: 1,
@@ -171,7 +187,7 @@
           content = _e === void 0 ? null : _e,
           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
@@ -208,7 +224,8 @@
         onClick: function onClick() {
           return onClose('CANCELLED');
         },
-        autoFocus: true
+        autoFocus: true,
+        disableRipple: true
       }, cancelLabel), /*#__PURE__*/React__namespace.createElement(core.Button, {
         "data-testid": "conformationDialog-confirm",
         color: "secondary",
@@ -483,7 +500,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$c = core.makeStyles(function () {
+    var useStyles$d = core.makeStyles(function () {
       return {
         title: {
           fontSize: '14px',
@@ -553,7 +570,7 @@
           info = _c === void 0 ? '' : _c,
           _d = _a.dataTestId,
           dataTestId = _d === void 0 ? 'alert-banner' : _d;
-      var classes = useStyles$c();
+      var classes = useStyles$d();
       return /*#__PURE__*/React__namespace.createElement(lab.Alert, {
         "data-testid": dataTestId,
         severity: severity,
@@ -581,7 +598,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$b = core.makeStyles(function () {
+    var useStyles$c = core.makeStyles(function () {
       return {
         wrapper: {
           height: '100vh',
@@ -598,7 +615,7 @@
     var AppLayout = function AppLayout(_a) {
       var header = _a.header,
           children = _a.children;
-      var classes = useStyles$b();
+      var classes = useStyles$c();
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.wrapper
       }, header, /*#__PURE__*/React__default["default"].createElement("main", {
@@ -624,7 +641,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$a = core.makeStyles(function (theme) {
+    var useStyles$b = core.makeStyles(function (theme) {
       var _a;
 
       return {
@@ -661,7 +678,7 @@
           userMenu = _a.userMenu,
           _b = _a.title,
           title = _b === void 0 ? 'GeoWeb' : _b;
-      var classes = useStyles$a();
+      var classes = useStyles$b();
       return /*#__PURE__*/React__default["default"].createElement("header", {
         className: classes.header
       }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
@@ -745,7 +762,7 @@
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
 
-    var useStyles$9 = function useStyles(isRightAligned) {
+    var useStyles$a = function useStyles(isRightAligned) {
       return core.makeStyles(function () {
         return {
           icon: __assign(__assign({
@@ -759,7 +776,7 @@
             left: 10,
             transform: 'rotate(90deg)'
           }), {
-            zIndex: 100
+            zIndex: 1
           })
         };
       });
@@ -768,7 +785,7 @@
     var ResizeHandle = function ResizeHandle(_a) {
       var isRightAligned = _a.isRightAligned;
       var theme = core.useTheme();
-      var styles = useStyles$9(isRightAligned)();
+      var styles = useStyles$a(isRightAligned)();
       return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
         className: styles.icon,
         "data-testid": "resizeHandle"
@@ -853,6 +870,81 @@
       }, 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 =
+    /** @class */
+    function (_super) {
+      __extends(ErrorBoundary, _super);
+
+      function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+
+        _this.state = {
+          error: null,
+          errorInfo: null
+        };
+        return _this;
+      }
+
+      ErrorBoundary.getDerivedStateFromError = function (error) {
+        return {
+          error: error
+        };
+      };
+
+      ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
+        var onError = this.props.onError;
+        this.setState({
+          error: error,
+          errorInfo: errorInfo
+        });
+        onError(error, errorInfo);
+      };
+
+      ErrorBoundary.prototype.render = function () {
+        var _a = this.state,
+            error = _a.error,
+            errorInfo = _a.errorInfo;
+        var children = this.props.children;
+
+        if (error) {
+          return /*#__PURE__*/React__namespace.createElement("div", {
+            style: {
+              whiteSpace: 'pre-wrap'
+            }
+          }, /*#__PURE__*/React__namespace.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__namespace.createElement("div", null, /*#__PURE__*/React__namespace.createElement("br", null), error.toString(), /*#__PURE__*/React__namespace.createElement("br", null), errorInfo && errorInfo.componentStack, /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement("br", null), /*#__PURE__*/React__namespace.createElement(core.Link, {
+              underline: "always",
+              style: {
+                cursor: 'pointer'
+              },
+              onClick: function onClick() {
+                return window.location.reload();
+              }
+            }, "Reload page"))
+          }));
+        }
+
+        return children;
+      };
+
+      ErrorBoundary.defaultProps = {
+        onError: function onError() {
+          return null;
+        }
+      };
+      return ErrorBoundary;
+    }(React__namespace.Component);
+
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -869,7 +961,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = core.makeStyles(function (theme) {
+    var useStyles$9 = core.makeStyles(function (theme) {
       return {
         container: {
           position: 'absolute',
@@ -917,7 +1009,7 @@
       } : _d,
           children = _a.children,
           initials = _a.initials;
-      var classes = useStyles$8();
+      var classes = useStyles$9();
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
         "data-testid": "userButton",
         onClick: onToggle,
@@ -997,7 +1089,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = core.makeStyles(function (theme) {
+    var useStyles$8 = core.makeStyles(function (theme) {
       return {
         footer: {
           boxShadow: theme.shadows[1],
@@ -1010,7 +1102,7 @@
     }); // drag handles will be handled by DraggableResizable/Resizable
 
     var ToolFooter = function ToolFooter() {
-      var classes = useStyles$7();
+      var classes = useStyles$8();
       return /*#__PURE__*/React__default["default"].createElement("footer", {
         className: classes.footer
       });
@@ -1077,7 +1169,7 @@
       }
     };
 
-    var useStyles$6 = core.makeStyles(function (theme) {
+    var useStyles$7 = core.makeStyles(function (theme) {
       return {
         header: {
           boxShadow: theme.shadows[1],
@@ -1127,7 +1219,7 @@
           _d = _a.className,
           className = _d === void 0 ? '' : _d;
       var styles = getStyle(size);
-      var classes = useStyles$6({
+      var classes = useStyles$7({
         styles: styles,
         isDraggable: isDraggable
       });
@@ -1162,7 +1254,7 @@
         variant: "h2",
         className: classes.title
       }, title), size === 'xxs' && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
-        "data-testid": "dragBtn",
+        "data-testid": "dragBtn-xxs",
         className: classes.iconDragHorizontal,
         disableRipple: true,
         size: "small"
@@ -1194,7 +1286,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$5 = core.makeStyles(function () {
+    var useStyles$6 = core.makeStyles(function () {
       return {
         container: {
           overflow: 'hidden',
@@ -1234,7 +1326,7 @@
       headerClassName = _h === void 0 ? '' : _h,
           props = __rest(_a, ["title", "size", "children", "onClose", "isResizable", "isDraggable", "maxHeight", "elevation", "headerClassName"]);
 
-      var classes = useStyles$5();
+      var classes = useStyles$6();
       return /*#__PURE__*/React__default["default"].createElement(core.Paper, __assign({
         elevation: elevation,
         className: classes.container
@@ -1436,7 +1528,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = core.makeStyles(function (theme) {
+    var useStyles$5 = core.makeStyles(function (theme) {
       return {
         icon: {
           backgroundColor: theme.palette.geowebColors.textInputField["default"].rgba,
@@ -1476,7 +1568,7 @@
       var _b = _a.type,
           type = _b === void 0 ? 'text' : _b,
           children = _a.children;
-      var classes = useStyles$4();
+      var classes = useStyles$5();
 
       if (type === 'divider') {
         return /*#__PURE__*/React__default["default"].createElement(core.Typography, {
@@ -1526,7 +1618,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$3 = core.makeStyles(function (theme) {
+    var useStyles$4 = core.makeStyles(function (theme) {
       return {
         icon: {
           fill: theme.palette.geowebColors.typographyAndIcons.text
@@ -1534,7 +1626,7 @@
       };
     });
     var OptionIcon = function OptionIcon() {
-      var classes = useStyles$3();
+      var classes = useStyles$4();
       return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
         viewBox: "0 0 12 11",
         style: {
@@ -1557,7 +1649,7 @@
       }))));
     };
     var CommandIcon = function CommandIcon() {
-      var classes = useStyles$3();
+      var classes = useStyles$4();
       return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
         viewBox: "0 0 12 12",
         style: {
@@ -1580,7 +1672,7 @@
       }))));
     };
     var ArrowLeftIcon = function ArrowLeftIcon() {
-      var classes = useStyles$3();
+      var classes = useStyles$4();
       return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
         viewBox: "0 0 12 6",
         style: {
@@ -1604,7 +1696,7 @@
       }))));
     };
     var ArrowRightIcon = function ArrowRightIcon() {
-      var classes = useStyles$3();
+      var classes = useStyles$4();
       return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
         viewBox: "0 0 12 6",
         style: {
@@ -1628,7 +1720,7 @@
       }))));
     };
     var ArrowDownIcon = function ArrowDownIcon() {
-      var classes = useStyles$3();
+      var classes = useStyles$4();
       return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
         viewBox: "0 0 6 12",
         style: {
@@ -1651,7 +1743,7 @@
       }))));
     };
     var ArrowUpIcon = function ArrowUpIcon() {
-      var classes = useStyles$3();
+      var classes = useStyles$4();
       return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, {
         viewBox: "0 0 6 11",
         style: {
@@ -1805,7 +1897,7 @@
         });
       });
     };
-    var useStyles$2 = core.makeStyles(function () {
+    var useStyles$3 = core.makeStyles(function () {
       return {
         row: {
           minHeight: 56
@@ -1825,7 +1917,7 @@
     var ShortcutList = function ShortcutList(_a) {
       var _b = _a.platform,
           platform = _b === void 0 ? 'windows' : _b;
-      var classes = useStyles$2();
+      var classes = useStyles$3();
       var rows = getShortcutList(shortcuts, platform);
       return /*#__PURE__*/React__default["default"].createElement(core.List, {
         "data-testid": "list-" + platform
@@ -1862,7 +1954,7 @@
       }, value === index && children);
     };
 
-    var useStyles$1 = core.makeStyles(function () {
+    var useStyles$2 = core.makeStyles(function () {
       return {
         container: {
           margin: '0px 20px'
@@ -1874,7 +1966,7 @@
     });
 
     var CheatSheet = function CheatSheet() {
-      var classes = useStyles$1();
+      var classes = useStyles$2();
 
       var _a = __read(React__default["default"].useState(0), 2),
           activeTab = _a[0],
@@ -1907,7 +1999,7 @@
       })));
     };
 
-    var useStyles = core.makeStyles(function () {
+    var useStyles$1 = core.makeStyles(function () {
       return {
         backdrop: {
           zIndex: 1
@@ -1916,7 +2008,7 @@
     });
 
     var UserMenuItemCheatSheet = function UserMenuItemCheatSheet() {
-      var classes = useStyles();
+      var classes = useStyles$1();
 
       var _a = __read(React__default["default"].useState(false), 2),
           open = _a[0],
@@ -2115,23 +2207,15 @@
     })(core.Slider);
     var CustomSlider = function CustomSlider(_a) {
       var value = _a.value,
-          onChange = _a.onChange,
-          onKeyDown = _a.onKeyDown,
-          _b = _a.dataTestId,
-          dataTestId = _b === void 0 ? 'customSlider' : _b,
-          _c = _a.orientation,
-          orientation = _c === void 0 ? 'vertical' : _c,
-          max = _a.max,
-          min = _a.min,
-          step = _a.step,
-          _d = _a.marks,
-          marks = _d === void 0 ? [] : _d,
-          _e = _a.disabled,
-          disabled = _e === void 0 ? false : _e,
-          ThumbComponent = _a.ThumbComponent; // Add custom class (for bold text) to label adjacent to thumb component.
+          _b = _a.orientation,
+          orientation = _b === void 0 ? 'vertical' : _b,
+          _c = _a.shouldAutoFocus,
+          shouldAutoFocus = _c === void 0 ? false : _c,
+          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__namespace.useRef(null);
       var themeContext = theme.useThemeContext();
       React__namespace.useEffect(function () {
@@ -2145,21 +2229,99 @@
         rest.forEach(function (element) {
           return element.classList.remove('selectedLabel');
         });
-      }, [value, themeContext.isDark]);
-      return /*#__PURE__*/React__namespace.createElement(CustomSliderComponent, {
+      }, [value, themeContext.isDark]); // autofocus
+
+      React__namespace.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__namespace.createElement(CustomSliderComponent, __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));
+    };
+
+    var Z_INDEX_TOP = 600;
+    var Z_INDEX_BOTTOM = 550;
+    var useStyles = core.makeStyles(function (theme) {
+      return core.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(_a) {
+      var handleClose = _a.handleClose,
+          title = _a.title,
+          children = _a.children,
+          _b = _a.dialogStyling,
+          dialogStyling = _b === void 0 ? {} : _b,
+          _c = _a.zIndex,
+          zIndex = _c === void 0 ? Z_INDEX_TOP : _c;
+      var classes = useStyles(__assign(__assign({}, dialogStyling), {
+        zIndex: zIndex
+      }));
+      return /*#__PURE__*/React__namespace.createElement(Draggable__default["default"], {
+        handle: "strong",
+        bounds: "body"
+      }, /*#__PURE__*/React__namespace.createElement(core.Paper, {
+        "data-testid": title,
+        className: classes.draggableDialog,
+        elevation: 24
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: classes.dialogHeader
+      }, /*#__PURE__*/React__namespace.createElement("strong", null, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+        "data-testid": "dragDialog",
+        size: "small",
+        className: classes.iconDrag
+      }, /*#__PURE__*/React__namespace.createElement(icons.DragIndicator, null))), /*#__PURE__*/React__namespace.createElement(core.Typography, {
+        variant: "subtitle1"
+      }, title), /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+        "data-testid": "closeDialog",
+        size: "small",
+        onClick: handleClose,
+        className: classes.iconClose
+      }, /*#__PURE__*/React__namespace.createElement(icons.Close, null))), /*#__PURE__*/React__namespace.createElement("div", {
+        className: classes.dialogContent
+      }, children)));
     };
 
     /* *
@@ -2203,6 +2365,8 @@
     exports.ConfirmationServiceProvider = ConfirmationServiceProvider;
     exports.CustomSlider = CustomSlider;
     exports.Draggable = DraggableComponent$1;
+    exports.DraggableDialog = DraggableDialog;
+    exports.ErrorBoundary = ErrorBoundary;
     exports.HIDDEN_INPUT_HELPER_IS_DRAFT = HIDDEN_INPUT_HELPER_IS_DRAFT;
     exports.Resizable = ResizeComponent;
     exports.StatusTag = StatusTag;
@@ -2213,6 +2377,8 @@
     exports.UserMenu = UserMenu;
     exports.UserMenuItemCheatSheet = UserMenuItemCheatSheet;
     exports.UserMenuItemTheme = MenuItemTheme;
+    exports.Z_INDEX_BOTTOM = Z_INDEX_BOTTOM;
+    exports.Z_INDEX_TOP = Z_INDEX_TOP;
     exports.getAxiosErrorMessage = getAxiosErrorMessage;
     exports.getInitials = getInitials;
     exports.isAxiosError = isAxiosError;