@opengeoweb/taf 2.1.3 → 2.2.1

package/assets/icons.d.ts

@@ -1,2 +1,2 @@
-import { SvgIconProps } from '@material-ui/core';
+import { SvgIconProps } from '@mui/material';
 export declare const ThumbsUp: (props: SvgIconProps) => JSX.Element;

package/{taf.esm.js → index.esm.js}

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import React__default from 'react';
-import { makeStyles, Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Backdrop, CircularProgress } from '@material-ui/core';
-import { Skeleton } from '@material-ui/lab';
+import { Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Typography, Button, Dialog, DialogTitle, DialogContent, Card, Accordion, AccordionSummary, AccordionDetails, Skeleton, Backdrop, CircularProgress } from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 import moment from 'moment';
 import { useIsMounted, useDraftFormHelpers, ToolContainerDraggable, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
-import { Add, Delete, DragIndicator, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
+import { Add, Delete, DragIndicator, Close, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@mui/icons-material';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
@@ -2534,34 +2534,28 @@ var getConfirmationDialogButtonLabel = function getConfirmationDialogButtonLabel
   }
 };
 
-/* *
- * 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 useStyles$9 = makeStyles(function (theme) {
   return {
     textFieldGridItem: {
       marginRight: 4
     },
+    textFieldRoot: {
+      '&.Mui-disabled::before': {
+        borderBottom: 'none'
+      },
+      '&:after': {
+        borderBottomColor: '#3f51b5'
+      }
+    },
     textFieldInput: {
       fontSize: '14px',
       paddingLeft: 1,
       paddingRight: 1,
       color: '#051039',
-      WebkitTextFillColor: '#051039' // safari text color fix
-
+      WebkitTextFillColor: '#051039',
+      '&.Mui-disabled': {
+        backgroundColor: 'white'
+      }
     },
     textFieldLabel: {
       fontSize: '14px'
@@ -2644,7 +2638,8 @@ var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
     variant: "filled",
     InputProps: {
       classes: {
-        input: classes.textFieldInput
+        input: classes.textFieldInput,
+        root: classes.textFieldRoot
       }
     },
     InputLabelProps: {
@@ -3247,13 +3242,15 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   }, !disabled && /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": "add",
     "data-testid": "add-changeGroup",
-    onClick: addChangeGroup
+    onClick: addChangeGroup,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default.createElement(Grid, {
     item: true
   }, /*#__PURE__*/React__default.createElement(IconButton, {
     "aria-label": "add",
     "data-testid": "add-changeGroup",
-    onClick: addChangeGroup
+    onClick: addChangeGroup,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(Add, null)), /*#__PURE__*/React__default.createElement(IconButton, Object.assign({
     "aria-label": "delete",
     "data-testid": "remove-changeGroup",
@@ -3262,7 +3259,9 @@ var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
     }
   }, lastRow ? {
     tabIndex: -1
-  } : {}), /*#__PURE__*/React__default.createElement(Delete, null))));
+  } : {}, {
+    size: "large"
+  }), /*#__PURE__*/React__default.createElement(Delete, null))));
 });
 
 /* *
@@ -3581,7 +3580,7 @@ var TafFormButtons = function TafFormButtons(_ref) {
 
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justify: "space-between",
+    justifyContent: "space-between",
     alignItems: "center",
     className: classes.lifecycleButtons
   }, /*#__PURE__*/React__default.createElement(Grid, {
@@ -3709,7 +3708,8 @@ var DragHandle = function DragHandle(_ref) {
     className: "".concat(classes.dragHandle, " handle"),
     "data-testid": "dragHandle-".concat(index),
     disableRipple: true,
-    disabled: isDisabled
+    disabled: isDisabled,
+    size: "large"
   }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
 };
 
@@ -4106,14 +4106,12 @@ var ContentDialog = function ContentDialog(_a) {
       return onFormAction('CLOSE');
     },
     maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-    disableBackdropClick: true,
     PaperProps: {
       style: {
         position: 'inherit'
       }
     }
   }, other), /*#__PURE__*/React.createElement(DialogTitle, {
-    disableTypography: true,
     className: classes.dialogHeader
   }, /*#__PURE__*/React.createElement(Grid, {
     container: true
@@ -4299,13 +4297,13 @@ var TafListRow = function TafListRow(_ref) {
     md: 3
   }, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
-    justify: "flex-start",
+    justifyContent: "flex-start",
     spacing: 2
   }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 8,
     container: true,
-    justify: "flex-end"
+    justifyContent: "flex-end"
   }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default.createElement(Button, {
     color: "secondary",
     size: "small",
@@ -4428,7 +4426,7 @@ var TafListButtons = function TafListButtons(_ref) {
   return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     alignItems: "center",
-    justify: "flex-end",
+    justifyContent: "flex-end",
     "data-testid": "taflist-canbebuttons",
     spacing: 1,
     className: classes.actionButtons
@@ -4468,6 +4466,9 @@ var useStyles$3 = makeStyles({
   },
   formPadding: {
     padding: '8px'
+  },
+  expandIcon: {
+    color: '#0075a9'
   }
 });
 
@@ -4529,11 +4530,13 @@ var TafListAccordion = function TafListAccordion(_ref) {
   }), /*#__PURE__*/React__default.createElement(AccordionSummary, {
     "data-testid": "tafListSectionAccordionSummary",
     expandIcon: popOut ? /*#__PURE__*/React__default.createElement(Tooltip, {
-      title: "Popout to edit"
+      title: "Popout to edit",
+      className: classes.expandIcon
     }, /*#__PURE__*/React__default.createElement(OpenInNew, {
       "data-testid": "popOutIcon",
       fontSize: "small"
     })) : /*#__PURE__*/React__default.createElement(ExpandMore, {
+      className: classes.expandIcon,
       "data-testid": "expandIcon"
     })
   }, /*#__PURE__*/React__default.createElement(TafListRow, {
@@ -4707,7 +4710,7 @@ var TafList = function TafList(_ref) {
     onClickTafActionButton: onClickTafActionButton
   })), isLoading && /*#__PURE__*/React__default.createElement(Skeleton, {
     "data-testid": "tafList-skeleton",
-    variant: "rect",
+    variant: "rectangular",
     height: "660px"
   })));
 };

package/{taf.umd.js → index.umd.js}

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@material-ui/core'), require('@material-ui/lab'), require('moment'), require('@opengeoweb/shared'), require('@material-ui/icons'), require('@opengeoweb/api'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-sortablejs')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react', '@material-ui/core', '@material-ui/lab', 'moment', '@opengeoweb/shared', '@material-ui/icons', '@opengeoweb/api', '@opengeoweb/form-fields', 'react-hook-form', 'react-sortablejs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.core, global.lab, global.moment, global.shared, global.icons, global.api, global.formFields, global.reactHookForm, global.reactSortablejs));
-})(this, (function (exports, React, core, lab, moment, shared, icons, api, formFields, reactHookForm, reactSortablejs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@mui/material'), require('@mui/styles/makeStyles'), require('moment'), require('@opengeoweb/shared'), require('@mui/icons-material'), require('@opengeoweb/api'), require('@opengeoweb/form-fields'), require('react-hook-form'), require('react-sortablejs')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react', '@mui/material', '@mui/styles/makeStyles', 'moment', '@opengeoweb/shared', '@mui/icons-material', '@opengeoweb/api', '@opengeoweb/form-fields', 'react-hook-form', 'react-sortablejs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Taf = {}, global.React, global.material, global.makeStyles, global.moment, global.shared, global.iconsMaterial, global.api, global.formFields, global.reactHookForm, global.reactSortablejs));
+})(this, (function (exports, React, material, makeStyles, moment, shared, iconsMaterial, api, formFields, reactHookForm, reactSortablejs) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,6 +26,7 @@
 
     var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
     var React__namespace = /*#__PURE__*/_interopNamespace(React);
+    var makeStyles__default = /*#__PURE__*/_interopDefaultLegacy(makeStyles);
     var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
     /*! *****************************************************************************
@@ -133,10 +134,14 @@
         return ar;
     }
 
-    function __spreadArray(to, from) {
-        for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-            to[j] = from[i];
-        return to;
+    function __spreadArray(to, from, pack) {
+        if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+            if (ar || !(i in from)) {
+                if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+                ar[i] = from[i];
+            }
+        }
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
 
     /* *
@@ -2489,34 +2494,28 @@
       }
     };
 
-    /* *
-     * 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 useStyles$9 = core.makeStyles(function (theme) {
+    var useStyles$9 = makeStyles__default["default"](function (theme) {
       return {
         textFieldGridItem: {
           marginRight: 4
         },
+        textFieldRoot: {
+          '&.Mui-disabled::before': {
+            borderBottom: 'none'
+          },
+          '&:after': {
+            borderBottomColor: '#3f51b5'
+          }
+        },
         textFieldInput: {
           fontSize: '14px',
           paddingLeft: 1,
           paddingRight: 1,
           color: '#051039',
-          WebkitTextFillColor: '#051039' // safari text color fix
-
+          WebkitTextFillColor: '#051039',
+          '&.Mui-disabled': {
+            backgroundColor: 'white'
+          }
         },
         textFieldLabel: {
           fontSize: '14px'
@@ -2594,12 +2593,13 @@
     };
     var BaseTextField = /*#__PURE__*/React__default["default"].memo(function (props) {
       var classes = useStyles$9();
-      return /*#__PURE__*/React__default["default"].createElement(core.TextField, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(material.TextField, __assign({
         type: "text",
         variant: "filled",
         InputProps: {
           classes: {
-            input: classes.textFieldInput
+            input: classes.textFieldInput,
+            root: classes.textFieldRoot
           }
         },
         InputLabelProps: {
@@ -2688,7 +2688,7 @@
         inputRef.current.disabled = false;
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
       }, []);
-      return /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: true,
         className: classes.textFieldGridItem
@@ -2928,7 +2928,7 @@
       var addChangeGroup = React__default["default"].useCallback(function () {
         onAddChangeGroup(index);
       }, [onAddChangeGroup, index]);
-      return /*#__PURE__*/React__default["default"].createElement(core.Grid, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, __assign({
         "data-testid": "row-" + namePrefix,
         container: true,
         ref: ref
@@ -2945,7 +2945,7 @@
         label: "Issue time",
         name: "issueDate",
         disabled: true
-      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      })), isChangeGroup && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: true,
         style: {
@@ -3189,21 +3189,23 @@
             }
           }
         }
-      }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }), (!isChangeGroup || disabled) && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         className: classes.emptyButtonContainer,
         item: true,
         xs: true
-      }, !disabled && /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+      }, !disabled && /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "aria-label": "add",
         "data-testid": "add-changeGroup",
-        onClick: addChangeGroup
-      }, /*#__PURE__*/React__default["default"].createElement(icons.Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+        onClick: addChangeGroup,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Add, null))), isChangeGroup && !disabled && /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         "aria-label": "add",
         "data-testid": "add-changeGroup",
-        onClick: addChangeGroup
-      }, /*#__PURE__*/React__default["default"].createElement(icons.Add, null)), /*#__PURE__*/React__default["default"].createElement(core.IconButton, __assign({
+        onClick: addChangeGroup,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Add, null)), /*#__PURE__*/React__default["default"].createElement(material.IconButton, __assign({
         "aria-label": "delete",
         "data-testid": "remove-changeGroup",
         onClick: function onClick() {
@@ -3211,7 +3213,9 @@
         }
       }, lastRow ? {
         tabIndex: -1
-      } : {}), /*#__PURE__*/React__default["default"].createElement(icons.Delete, null))));
+      } : {}, {
+        size: "large"
+      }), /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Delete, null))));
     });
 
     var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
@@ -3251,9 +3255,9 @@
       var togglePane = _a.togglePane,
           sumOfErrors = _a.sumOfErrors;
       var color = sumOfErrors > 0 ? 'red' : 'green';
-      return /*#__PURE__*/React__namespace.createElement(core.Tooltip, {
+      return /*#__PURE__*/React__namespace.createElement(material.Tooltip, {
         title: "View details"
-      }, /*#__PURE__*/React__namespace.createElement(core.Chip, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Chip, {
         "data-testid": "issuesButton",
         size: "small",
         label: getIssuesLabel(sumOfErrors),
@@ -3263,7 +3267,7 @@
     };
 
     var ThumbsUp = function ThumbsUp(props) {
-      return /*#__PURE__*/React__default["default"].createElement(core.SvgIcon, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(material.SvgIcon, __assign({
         fontSize: "inherit",
         viewBox: "0 0 58 69"
       }, props), /*#__PURE__*/React__default["default"].createElement("title", null, "Thumbs up"), /*#__PURE__*/React__default["default"].createElement("g", {
@@ -3299,7 +3303,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$8 = core.makeStyles({
+    var useStyles$8 = makeStyles__default["default"]({
       paneContent: {
         marginTop: '16px',
         marginLeft: '24px'
@@ -3402,7 +3406,7 @@
         className: classes.image,
         "data-testid": "zeroIssuesImage"
       }, /*#__PURE__*/React__namespace.createElement(ThumbsUp, null)), errorList.length > 0 && errorList.map(function (error, index) {
-        return /*#__PURE__*/React__namespace.createElement(core.Typography // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/React__namespace.createElement(material.Typography // eslint-disable-next-line react/no-array-index-key
         , {
           // eslint-disable-next-line react/no-array-index-key
           key: "message-" + index,
@@ -3488,19 +3492,19 @@
         return setIsIssuesPaneOpen(!isIssuesPaneOpen);
       };
 
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justify: "space-between",
+        justifyContent: "space-between",
         alignItems: "center",
         className: classes.lifecycleButtons
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(IssuesButton, {
         sumOfErrors: errorList.length,
         togglePane: toggleIssuesPane
-      })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "discardtaf",
         variant: "outlined",
         color: "secondary",
@@ -3510,7 +3514,7 @@
           // Simply discard the changes and close the dialog.
           onTafFormButtonPress('DISCARD');
         }
-      }, "Discard"), /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, "Discard"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "savedrafttaf",
         variant: "outlined",
         color: "secondary",
@@ -3540,7 +3544,7 @@
               break;
           }
         }
-      }, "Save"), /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, "Save"), /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "publishtaf",
         variant: "outlined",
         color: "secondary",
@@ -3593,7 +3597,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = core.makeStyles(function () {
+    var useStyles$7 = makeStyles__default["default"](function () {
       return {
         dragHandle: {
           backgroundColor: 'transparent',
@@ -3614,12 +3618,13 @@
           isDisabled = _c === void 0 ? false : _c,
           index = _a.index;
       var classes = useStyles$7(isSorting);
-      return /*#__PURE__*/React__default["default"].createElement(core.IconButton, {
+      return /*#__PURE__*/React__default["default"].createElement(material.IconButton, {
         className: classes.dragHandle + " handle",
         "data-testid": "dragHandle-" + index,
         disableRipple: true,
-        disabled: isDisabled
-      }, /*#__PURE__*/React__default["default"].createElement(icons.DragIndicator, null));
+        disabled: isDisabled,
+        size: "large"
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.DragIndicator, null));
     };
 
     var noop = function noop() {};
@@ -3819,9 +3824,9 @@
       return /*#__PURE__*/React__default["default"].createElement("form", {
         onSubmit: handleSubmit(onSubmit),
         onBlur: onFormBlur
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         className: classes.tacTitle
-      }, "TAC"), /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, "TAC"), /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         "data-testid": "form-tac-message",
         className: classes.tacText
       }, TAC.split('\n').map(function (line) {
@@ -3957,7 +3962,7 @@
       }));
     };
 
-    var useStyles$6 = core.makeStyles({
+    var useStyles$6 = makeStyles__default["default"]({
       dialogHeader: {
         borderRadius: '3px',
         border: 'solid 1px #f6f5f5',
@@ -3993,39 +3998,37 @@
           other = __rest(_a, ["open", "toggleDialogStatus", "titleComponent", "children", "onClose", "alertBanner", "onFormAction"]);
 
       var classes = useStyles$6();
-      return /*#__PURE__*/React__namespace.createElement(core.Dialog, __assign({
+      return /*#__PURE__*/React__namespace.createElement(material.Dialog, __assign({
         "data-testid": "contentDialog",
         open: open,
         onClose: function onClose() {
           return onFormAction('CLOSE');
         },
         maxWidth: other.maxWidth ? other.maxWidth : 'lg',
-        disableBackdropClick: true,
         PaperProps: {
           style: {
             position: 'inherit'
           }
         }
-      }, other), /*#__PURE__*/React__namespace.createElement(core.DialogTitle, {
-        disableTypography: true,
+      }, other), /*#__PURE__*/React__namespace.createElement(material.DialogTitle, {
         className: classes.dialogHeader
-      }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         container: true
-      }, /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      }, /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: 11,
         className: classes.dialogTitle
-      }, titleComponent), /*#__PURE__*/React__namespace.createElement(core.Grid, {
+      }, titleComponent), /*#__PURE__*/React__namespace.createElement(material.Grid, {
         item: true,
         xs: true,
         className: classes.dialogCloseButton
-      }, /*#__PURE__*/React__namespace.createElement(core.IconButton, {
+      }, /*#__PURE__*/React__namespace.createElement(material.IconButton, {
         "data-testid": "closeDialog",
         size: "small",
         onClick: function onClick() {
           return onFormAction('CLOSE');
         }
-      }, /*#__PURE__*/React__namespace.createElement(icons.Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(core.DialogContent, {
+      }, /*#__PURE__*/React__namespace.createElement(iconsMaterial.Close, null))))), alertBanner !== null && alertBanner, /*#__PURE__*/React__namespace.createElement(material.DialogContent, {
         className: classes.dialogChildren
       }, children));
     };
@@ -4048,11 +4051,11 @@
      * */
 
     var getActiveStatus = function getActiveStatus(listType, className) {
-      return listType === 'ACTIVE' ? /*#__PURE__*/React__default["default"].createElement(icons.CheckCircle, {
+      return listType === 'ACTIVE' ? /*#__PURE__*/React__default["default"].createElement(iconsMaterial.CheckCircle, {
         "data-testid": "status-active",
         className: className,
         fontSize: "small"
-      }) : /*#__PURE__*/React__default["default"].createElement(icons.Schedule, {
+      }) : /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Schedule, {
         "data-testid": "status-upcoming",
         className: className,
         fontSize: "small"
@@ -4087,7 +4090,7 @@
 
       return 'Draft';
     };
-    var useStyles$5 = core.makeStyles({
+    var useStyles$5 = makeStyles__default["default"]({
       cardWrapper: {
         width: '100%'
       },
@@ -4116,35 +4119,35 @@
       var classes = useStyles$5();
       var validTimeDate = moment__default["default"].utc(taf.validDateStart).format('DD MMM');
       var baseTime = moment__default["default"].utc(taf.baseTime).format('HH:mm');
-      return /*#__PURE__*/React__default["default"].createElement(core.Card, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Card, {
         elevation: 0,
         className: classes.cardWrapper
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
         spacing: 1
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 2,
         md: 1
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         noWrap: true,
         className: classes.font
-      }, taf.location)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, taf.location)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 1,
         container: true
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 3,
         className: classes.alignIcon
-      }, showTac && /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
+      }, showTac && /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
         "data-testid": "taflistrow-tactooltip",
         title: /*#__PURE__*/React__default["default"].createElement("div", {
           style: {
@@ -4152,63 +4155,63 @@
           }
         }, TAC),
         placement: "bottom-start"
-      }, /*#__PURE__*/React__default["default"].createElement(icons.InfoOutlined, {
+      }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.InfoOutlined, {
         "data-testid": "taflistrow-tacicon",
         color: "secondary",
         fontSize: "small"
-      }))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 9,
         sm: 9,
         md: 9
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "baseTime"
-      }, baseTime))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, baseTime))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 2,
         md: 1
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "validTimeDate"
-      }, validTimeDate)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, validTimeDate)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 3,
         sm: 3,
         md: 6
-      }, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         className: classes.font,
         "data-testid": "validTimeSlot"
       }, formatValidToString({
         start: taf.validDateStart,
         end: taf.validDateEnd
-      }))), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }))), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 12,
         sm: 4,
         md: 3
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
-        justify: "flex-start",
+        justifyContent: "flex-start",
         spacing: 2
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         xs: 8,
         container: true,
-        justify: "flex-end"
-      }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default["default"].createElement(core.Button, {
+        justifyContent: "flex-end"
+      }, taf.status === 'DRAFT' || taf.status === 'DRAFT_CORRECTED' || taf.status === 'DRAFT_AMENDED' ? /*#__PURE__*/React__default["default"].createElement(material.Button, {
         color: "secondary",
         size: "small",
         "data-testid": "tafRow-draft",
-        startIcon: /*#__PURE__*/React__default["default"].createElement(icons.Create, {
+        startIcon: /*#__PURE__*/React__default["default"].createElement(iconsMaterial.Create, {
           fontSize: "small",
           color: "secondary"
         })
-      }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, getDraftTitle(taf.status)) : getStatusTagList(taf)), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: classes.alignIcon
       }, taf.status !== 'NEW' && taf.status !== 'DRAFT' && taf.status !== 'DRAFT_CORRECTED' && taf.status !== 'DRAFT_AMENDED' && taf.status !== 'CANCELLED' && listType !== 'EXPIRED' && getActiveStatus(listType, classes.activeStatus))))));
@@ -4303,7 +4306,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$4 = core.makeStyles({
+    var useStyles$4 = makeStyles__default["default"]({
       actionButtons: {
         paddingRight: '98px',
         paddingTop: '40px',
@@ -4316,34 +4319,34 @@
           canBe = _a.canBe,
           onClickTafActionButton = _a.onClickTafActionButton;
       var classes = useStyles$4();
-      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return !canBe.includes('CANCELLED') && !canBe.includes('CORRECTED') && !canBe.includes('AMENDED') ? null : /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         alignItems: "center",
-        justify: "flex-end",
+        justifyContent: "flex-end",
         "data-testid": "taflist-canbebuttons",
         spacing: 1,
         className: classes.actionButtons
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, canBe.includes('CANCELLED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "canceltaf",
         variant: "outlined",
         color: "secondary",
         onClick: function onClick() {
           return onClickTafActionButton(uuid, 'CANCEL');
         }
-      }, "Cancel")), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, "Cancel")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, canBe.includes('CORRECTED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "correctaf",
         variant: "outlined",
         color: "secondary",
         onClick: function onClick() {
           return onClickTafActionButton(uuid, 'CORRECT');
         }
-      }, "Correct")), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, "Correct")), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
-      }, canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(core.Button, {
+      }, canBe.includes('AMENDED') && /*#__PURE__*/React__default["default"].createElement(material.Button, {
         "data-testid": "amendtaf",
         variant: "outlined",
         color: "secondary",
@@ -4353,12 +4356,15 @@
       }, "Amend")));
     };
 
-    var useStyles$3 = core.makeStyles({
+    var useStyles$3 = makeStyles__default["default"]({
       accordion: {
         marginBottom: '5px'
       },
       formPadding: {
         padding: '8px'
+      },
+      expandIcon: {
+        color: '#0075a9'
       }
     });
 
@@ -4400,7 +4406,7 @@
 
       }, [tafListItem.taf]);
       var popOut = status === 'NEW' || status === 'DRAFT' || status === 'DRAFT_AMENDED' || status === 'DRAFT_CORRECTED';
-      return /*#__PURE__*/React__default["default"].createElement(core.Accordion, __assign({
+      return /*#__PURE__*/React__default["default"].createElement(material.Accordion, __assign({
         "data-testid": "tafListItem",
         className: classes.accordion
       }, popOut ? {
@@ -4414,14 +4420,16 @@
         TransitionProps: {
           unmountOnExit: true
         }
-      }), /*#__PURE__*/React__default["default"].createElement(core.AccordionSummary, {
+      }), /*#__PURE__*/React__default["default"].createElement(material.AccordionSummary, {
         "data-testid": "tafListSectionAccordionSummary",
-        expandIcon: popOut ? /*#__PURE__*/React__default["default"].createElement(core.Tooltip, {
-          title: "Popout to edit"
-        }, /*#__PURE__*/React__default["default"].createElement(icons.OpenInNew, {
+        expandIcon: popOut ? /*#__PURE__*/React__default["default"].createElement(material.Tooltip, {
+          title: "Popout to edit",
+          className: classes.expandIcon
+        }, /*#__PURE__*/React__default["default"].createElement(iconsMaterial.OpenInNew, {
           "data-testid": "popOutIcon",
           fontSize: "small"
-        })) : /*#__PURE__*/React__default["default"].createElement(icons.ExpandMore, {
+        })) : /*#__PURE__*/React__default["default"].createElement(iconsMaterial.ExpandMore, {
+          className: classes.expandIcon,
           "data-testid": "expandIcon"
         })
       }, /*#__PURE__*/React__default["default"].createElement(TafListRow, {
@@ -4429,7 +4437,7 @@
         listType: listType,
         TAC: TAC,
         showTac: true
-      })), /*#__PURE__*/React__default["default"].createElement(core.AccordionDetails, null, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.AccordionDetails, null, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         direction: "column"
       }, errorCancelTaf.length > 0 && errorCancelTaf.find(function (uuid) {
@@ -4440,13 +4448,13 @@
         dataTestId: "tafList-cancelAlert"
       }), /*#__PURE__*/React__default["default"].createElement("div", {
         className: classes.formPadding
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(TafFormWrapper, {
         tafFromBackend: tafListItem,
         mode: "view",
         TAC: TAC
-      })), /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      })), /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true
       }, /*#__PURE__*/React__default["default"].createElement(TafListButtons, {
         canBe: tafListItem.canbe,
@@ -4471,7 +4479,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$2 = core.makeStyles({
+    var useStyles$2 = makeStyles__default["default"]({
       listHeaders: {
         color: '#9d9d9d'
       },
@@ -4491,7 +4499,7 @@
           errorCancelTaf = _b === void 0 ? [] : _b,
           onClickTafActionButton = _a.onClickTafActionButton;
       var classes = useStyles$2();
-      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(core.Typography, {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(material.Typography, {
         variant: "subtitle2",
         className: classes.listHeaders
       }, title), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -4507,7 +4515,7 @@
       })));
     };
 
-    var useStyles$1 = core.makeStyles({
+    var useStyles$1 = makeStyles__default["default"]({
       accordion: {
         marginBottom: '5px'
       },
@@ -4565,11 +4573,11 @@
         }
       }
 
-      return /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         container: true,
         direction: "column",
         alignItems: "stretch"
-      }, /*#__PURE__*/React__default["default"].createElement(core.Grid, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.Grid, {
         item: true,
         className: classes.listBody
       }, error && /*#__PURE__*/React__default["default"].createElement(shared.AlertBanner, {
@@ -4595,9 +4603,9 @@
         tafList: expiredTafs,
         errorCancelTaf: errorCancelTaf,
         onClickTafActionButton: onClickTafActionButton
-      })), isLoading && /*#__PURE__*/React__default["default"].createElement(lab.Skeleton, {
+      })), isLoading && /*#__PURE__*/React__default["default"].createElement(material.Skeleton, {
         "data-testid": "tafList-skeleton",
-        variant: "rect",
+        variant: "rectangular",
         height: "660px"
       })));
     };
@@ -4618,7 +4626,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles = core.makeStyles({
+    var useStyles = makeStyles__default["default"]({
       backdrop: {
         zIndex: 1500,
         color: '#fff'
@@ -4627,10 +4635,10 @@
 
     var Spinner = function Spinner() {
       var classes = useStyles();
-      return /*#__PURE__*/React__default["default"].createElement(core.Backdrop, {
+      return /*#__PURE__*/React__default["default"].createElement(material.Backdrop, {
         open: true,
         className: classes.backdrop
-      }, /*#__PURE__*/React__default["default"].createElement(core.CircularProgress, {
+      }, /*#__PURE__*/React__default["default"].createElement(material.CircularProgress, {
         "data-testid": "spinner",
         color: "inherit"
       }));

package/lib/components/ContentDialog/ContentDialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DialogProps } from '@material-ui/core';
+import { DialogProps } from '@mui/material';
 import { Taf, TafActions } from '../../types';
 interface ContentDialogProps extends DialogProps {
     open: boolean;

package/lib/components/IssuesPane/IssuesPane.styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"paneContent" | "image">;
+export declare const useStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"paneContent" | "image">;

package/lib/components/TafForm/TafForm.styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"textFieldGridItem" | "textFieldInput" | "textFieldLabel" | "textFieldLabelShrink" | "formRow" | "tacTitle" | "tacText" | "tacLine" | "addButton" | "lifecycleButtons" | "actionButton" | "lastButton" | "backdrop" | "emptyButtonContainer">;
+export declare const useStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"textFieldGridItem" | "textFieldRoot" | "textFieldInput" | "textFieldLabel" | "textFieldLabelShrink" | "formRow" | "tacTitle" | "tacText" | "tacLine" | "addButton" | "lifecycleButtons" | "actionButton" | "lastButton" | "backdrop" | "emptyButtonContainer">;

package/lib/components/TafForm/TafFormRow/DragHandle.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"dragHandle">;
+export declare const useStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"dragHandle">;
 interface DragHandleProps {
     isSorting?: boolean;
     isDisabled?: boolean;

package/lib/components/TafForm/TafFormRow/TafFormTextField.d.ts

@@ -1,4 +1,4 @@
-import { TextFieldProps } from '@material-ui/core';
+import { TextFieldProps } from '@mui/material';
 import React from 'react';
 import { RegisterOptions } from 'react-hook-form';
 export declare const getDisplayValue: (value: string, disabled: boolean) => string;

package/lib/components/TafForm/TafFormRow/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { GridProps } from '@material-ui/core';
+import { GridProps } from '@mui/material';
 import { ArrayField } from 'react-hook-form';
 export interface TafFormRowProps extends GridProps {
     isChangeGroup?: boolean;

package/package.json

@@ -1,35 +1,34 @@
 {
   "name": "@opengeoweb/taf",
-  "version": "2.1.3",
+  "version": "2.2.1",
   "description": "GeoWeb TAF library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
-  "main": "./taf.umd.js",
-  "module": "./taf.esm.js",
+  "main": "./index.umd.js",
+  "module": "./index.esm.js",
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "react": "16.14.0",
-    "@material-ui/core": "^4.11.0",
-    "@opengeoweb/theme": "2.1.3",
-    "@material-ui/lab": "^4.0.0-alpha.56",
-    "@material-ui/icons": "^4.9.1",
+    "react": "^17.0.2",
+    "@mui/material": "^5.2.8",
+    "@opengeoweb/theme": "2.2.1",
+    "@mui/styles": "^5.2.3",
+    "@mui/icons-material": "^5.2.5",
     "react-hook-form": "^6.12.1",
-    "@opengeoweb/shared": "2.1.3",
+    "@opengeoweb/shared": "2.2.1",
     "react-draggable": "^4.4.3",
     "re-resizable": "^6.9.0",
     "lodash": "^4.17.20",
-    "@opengeoweb/form-fields": "2.1.3",
+    "@opengeoweb/form-fields": "2.2.1",
     "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",
+    "@mui/lab": "^5.0.0-alpha.64",
+    "axios": "^0.25.0",
     "react-sortablejs": "^6.0.0",
-    "@opengeoweb/api": "2.1.3",
+    "@opengeoweb/api": "2.2.1",
     "sortablejs": "^1.14.0"
   }
 }