npm - @opengeoweb/shared - Versions diffs - 2.1.1 → 2.1.2 - Mend

@opengeoweb/shared 2.1.1 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/lib/components/DraggableDialog/DraggableDialog.d.ts +16 -0
package/lib/components/DraggableDialog/DraggableDialog.spec.d.ts +1 -0
package/lib/components/DraggableDialog/DraggableDialog.stories.d.ts +6 -0
package/lib/components/DraggableDialog/index.d.ts +1 -0
package/lib/components/index.d.ts +1 -0
package/package.json +5 -5
package/shared.esm.js +130 -35
package/shared.umd.js +115 -33

package/lib/components/DraggableDialog/DraggableDialog.d.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export declare const Z_INDEX_TOP = 600;
+export declare const Z_INDEX_BOTTOM = 550;
+interface DraggableDialogProps {
+    handleClose: () => void;
+    title: string;
+    children?: React.ReactNode;
+    dialogStyling?: {
+        dialogWidth?: string;
+        dialogMaxHeight?: string;
+        dialogTop?: string;
+    };
+    zIndex?: number;
+}
+declare const DraggableDialog: React.FC<DraggableDialogProps>;
+export default DraggableDialog;

package/lib/components/DraggableDialog/DraggableDialog.spec.d.ts ADDED Viewed

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

package/lib/components/DraggableDialog/DraggableDialog.stories.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const DraggableDialogOldTheme: () => React.ReactElement;

package/lib/components/DraggableDialog/index.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { default as DraggableDialog, Z_INDEX_TOP, Z_INDEX_BOTTOM, } from './DraggableDialog';

package/lib/components/index.d.ts CHANGED Viewed

@@ -8,3 +8,4 @@ export * from './ErrorBoundary';
 export * from './UserMenu';
 export * from './ToolContainer';
 export * from './CustomSlider';
+export * from './DraggableDialog';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/shared",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "GeoWeb shared library with shared components and utils for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,18 +14,18 @@
   "peerDependencies": {
     "react": "16.14.0",
     "@material-ui/lab": "^4.0.0-alpha.56",
-    "@opengeoweb/theme": "2.1.1",
+    "@opengeoweb/theme": "2.1.2",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.1.1",
+    "@opengeoweb/form-fields": "2.1.2",
     "react-hook-form": "^6.12.1",
-    "@material-ui/pickers": "^3.2.10",
-    "@date-io/moment": "^1.3.13",
     "moment": "^2.29.0",
+    "@material-ui/pickers": "^3.2.10",
     "moment-timezone": "^0.5.31",
+    "@date-io/moment": "^1.3.13",
     "axios": "^0.21.4"
   }
 }

package/shared.esm.js CHANGED Viewed

@@ -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, Link, 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
@@ -654,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',
@@ -724,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,
@@ -752,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',
@@ -769,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", {
@@ -779,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 {
@@ -816,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, {
@@ -900,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({
@@ -923,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"
@@ -1107,7 +1107,7 @@ ErrorBoundary.defaultProps = {
  * 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',
@@ -1155,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,
@@ -1235,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],
@@ -1248,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
   });
@@ -1315,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],
@@ -1365,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
   });
@@ -1432,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',
@@ -1470,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
@@ -1659,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,
@@ -1699,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, {
@@ -1749,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
@@ -1757,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: {
@@ -1780,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: {
@@ -1803,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: {
@@ -1827,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: {
@@ -1851,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: {
@@ -1874,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: {
@@ -2041,7 +2041,7 @@ var getShortcutList = function getShortcutList(shortcutList) {
     });
   });
 };
-var useStyles$2 = makeStyles(function () {
+var useStyles$3 = makeStyles(function () {
   return {
     row: {
       minHeight: 56
@@ -2061,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)
@@ -2098,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'
@@ -2110,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),
@@ -2144,7 +2144,7 @@ var CheatSheet = function CheatSheet() {
   })));
 };
-var useStyles = makeStyles(function () {
+var useStyles$1 = makeStyles(function () {
   return {
     backdrop: {
       zIndex: 1
@@ -2153,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),
@@ -2359,6 +2359,101 @@ var CustomSlider = function CustomSlider(_a) {
   }, 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)));
+};
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -2393,4 +2488,4 @@ var getAxiosErrorMessage = function getAxiosErrorMessage(error) {
   return 'An error has occurred';
 };
-export { AlertBanner, AppHeader, AppLayout, ConfirmationDialog, ConfirmationServiceProvider, CustomSlider, DraggableComponent$1 as Draggable, ErrorBoundary, 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 };

package/shared.umd.js CHANGED Viewed

@@ -155,7 +155,7 @@
       }, content));
     };
-    var useStyles$d = core.makeStyles(function () {
+    var useStyles$e = core.makeStyles(function () {
       return {
         dialogHeader: {
           zIndex: 1,
@@ -187,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
@@ -500,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',
@@ -570,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,
@@ -598,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',
@@ -615,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", {
@@ -641,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 {
@@ -678,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, {
@@ -762,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({
@@ -785,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"
@@ -961,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',
@@ -1009,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,
@@ -1089,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],
@@ -1102,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
       });
@@ -1169,7 +1169,7 @@
       }
     };
-    var useStyles$6 = core.makeStyles(function (theme) {
+    var useStyles$7 = core.makeStyles(function (theme) {
       return {
         header: {
           boxShadow: theme.shadows[1],
@@ -1219,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
       });
@@ -1286,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',
@@ -1326,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
@@ -1528,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,
@@ -1568,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, {
@@ -1618,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
@@ -1626,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: {
@@ -1649,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: {
@@ -1672,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: {
@@ -1696,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: {
@@ -1720,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: {
@@ -1743,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: {
@@ -1897,7 +1897,7 @@
         });
       });
     };
-    var useStyles$2 = core.makeStyles(function () {
+    var useStyles$3 = core.makeStyles(function () {
       return {
         row: {
           minHeight: 56
@@ -1917,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
@@ -1954,7 +1954,7 @@
       }, value === index && children);
     };
-    var useStyles$1 = core.makeStyles(function () {
+    var useStyles$2 = core.makeStyles(function () {
       return {
         container: {
           margin: '0px 20px'
@@ -1966,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],
@@ -1999,7 +1999,7 @@
       })));
     };
-    var useStyles = core.makeStyles(function () {
+    var useStyles$1 = core.makeStyles(function () {
       return {
         backdrop: {
           zIndex: 1
@@ -2008,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],
@@ -2245,6 +2245,85 @@
       }, 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)));
+    };
     /* *
      * Licensed under the Apache License, Version 2.0 (the "License");
      * you may not use this file except in compliance with the License.
@@ -2286,6 +2365,7 @@
     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;
@@ -2297,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;