@opengeoweb/taf 4.7.1 → 4.8.0

package/index.esm.js

@@ -2046,10 +2046,17 @@ function formatFormValues(row) {
 
       case 'cavOK':
         {
-          // Assume if cavOK field set to true - no visibility field, otherwise return the original list containing the visibility
-          return list[key] ? Object.assign(Object.assign({}, list), {
-            visibility: formatVisibilityToString(list[key])
-          }) : list;
+          // Assume if cavOK field set to true - no visibility field, otherwise return the original list containing the visibility and remove cavOK
+          list.cavOK;
+              var formData = __rest(list, ["cavOK"]);
+
+          if (list[key]) {
+            return Object.assign(Object.assign({}, formData), {
+              visibility: formatVisibilityToString(list[key])
+            });
+          }
+
+          return formData;
         }
 
       case 'cloud':
@@ -2645,6 +2652,9 @@ var textFieldStyle = function textFieldStyle(theme) {
     },
     // root
     '&': {
+      '.Mui-error.MuiFilledInput-root': {
+        backgroundColor: 'geowebColors.captions.captionErrorBackground.rgba'
+      },
       '.Mui-disabled:before': {
         borderColor: 'transparent'
       }
@@ -2704,11 +2714,9 @@ var TafFormTextField = function TafFormTextField(_ref) {
 
   var _useFormContext = useFormContext(),
       control = _useFormContext.control,
-      getValues = _useFormContext.getValues,
       setValue = _useFormContext.setValue,
-      errors = _useFormContext.errors;
+      errors = _useFormContext.formState.errors;
 
-  var inputRef = React__default.useRef(null);
   var fieldErrors = getTafErrors(name, errors);
 
   var _React$useState = React__default.useState(null),
@@ -2717,8 +2725,11 @@ var TafFormTextField = function TafFormTextField(_ref) {
       setMaxLength = _React$useState2[1];
 
   var onKeyDown = React__default.useCallback(function (event) {
-    var currentValue = getValues(name).toString();
-    var textSelection = currentValue.substring(inputRef.current.selectionStart, inputRef.current.selectionEnd);
+    var target = event.target;
+    var currentValue = target.value,
+        selectionStart = target.selectionStart,
+        selectionEnd = target.selectionEnd;
+    var textSelection = currentValue.substring(selectionStart, selectionEnd);
 
     if (autoComplete && !currentValue.length || textSelection.length && currentValue.length && textSelection === currentValue) {
       var pressedKey = event.key.toString().toUpperCase();
@@ -2732,7 +2743,7 @@ var TafFormTextField = function TafFormTextField(_ref) {
         event.preventDefault();
       }
     }
-  }, [name, autoComplete, setValue, getValues]);
+  }, [name, autoComplete, setValue]);
   var onChangeField = React__default.useCallback(function (event, callback) {
     var valueUppercase = event.currentTarget.value.toUpperCase();
 
@@ -2751,28 +2762,24 @@ var TafFormTextField = function TafFormTextField(_ref) {
     callback();
     onBlur();
   }, [onBlur]);
-  var onFocusField = React__default.useCallback(function () {
-    var _a;
-
-    inputRef.current.disabled = false;
-    (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-  }, []);
+  var hasError = !!fieldErrors;
   return /*#__PURE__*/React__default.createElement(Controller, {
-    render: function render(_props) {
-      var displayValue = formatter ? formatter(_props.value) : getDisplayValue(_props.value, disabled);
+    render: function render(_ref2) {
+      var field = _ref2.field;
+      var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
       return /*#__PURE__*/React__default.createElement(BaseTextField, {
         label: label,
         disabled: disabled,
         name: name,
         value: displayValue,
-        inputRef: inputRef,
+        inputRef: field.ref,
         onChange: function onChange(e) {
-          return onChangeField(e, _props.onChange);
+          return onChangeField(e, field.onChange);
         },
         onKeyDown: onKeyDown,
-        error: !!fieldErrors,
+        error: hasError,
         onBlur: function onBlur() {
-          return onBlurField(_props.onBlur);
+          return onBlurField(field.onBlur);
         },
         inputProps: {
           maxLength: maxLength
@@ -2783,8 +2790,7 @@ var TafFormTextField = function TafFormTextField(_ref) {
     name: name,
     control: control,
     defaultValue: defaultValue,
-    rules: rules,
-    onFocus: onFocusField
+    rules: rules
   });
 };
 
@@ -3986,10 +3992,28 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
       formState = _useFormContext.formState,
       getValues = _useFormContext.getValues,
       setValue = _useFormContext.setValue,
-      reset = _useFormContext.reset;
+      reset = _useFormContext.reset; // added this ignore as the build is failing otherwise on: Type instantiation is excessively deep and possibly infinite.
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+
+
+  var _useFieldArray = useFieldArray({
+    control: control,
+    name: 'changeGroups'
+  }),
+      fields = _useFieldArray.fields,
+      insert = _useFieldArray.insert,
+      remove = _useFieldArray.remove,
+      move = _useFieldArray.move;
+
+  var _useDragOrder = useDragOrder(trigger, move),
+      onChangeOrder = _useDragOrder.onChangeOrder,
+      onStartDrag = _useDragOrder.onStartDrag,
+      activeDraggingIndex = _useDragOrder.activeDraggingIndex;
 
-  var isFormDirty = formState.isDirty,
+  var dirtyFields = formState.dirtyFields,
       errors = formState.errors;
+  var isFormDirty = Object.keys(dirtyFields).length > 0;
   usePreventBrowserClose(isFormDirty && !isDisabled); // Needed to be able to show a confirmation dialog on closing parent view
 
   React__default.useEffect(function () {
@@ -4013,7 +4037,10 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
   };
 
   var resetFormValues = function resetFormValues(formData) {
-    return reset(formData);
+    reset(formData, {
+      keepDirty: false,
+      keepDirtyValues: false
+    });
   };
 
   var resetFormState = function resetFormState() {
@@ -4238,20 +4265,6 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     }
   };
 
-  var _useFieldArray = useFieldArray({
-    control: control,
-    name: 'changeGroups'
-  }),
-      fields = _useFieldArray.fields,
-      insert = _useFieldArray.insert,
-      remove = _useFieldArray.remove,
-      move = _useFieldArray.move;
-
-  var _useDragOrder = useDragOrder(trigger, move),
-      onChangeOrder = _useDragOrder.onChangeOrder,
-      onStartDrag = _useDragOrder.onStartDrag,
-      activeDraggingIndex = _useDragOrder.activeDraggingIndex;
-
   var onRemoverow = function onRemoverow(index) {
     confirmDialog({
       title: 'Delete row',
@@ -4285,7 +4298,9 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     var rowIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
     var above = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var newRowIndex = above ? rowIndex : rowIndex + 1;
-    insert(newRowIndex, emptyChangegroup, false);
+    insert(newRowIndex, emptyChangegroup, {
+      shouldFocus: false
+    });
     setFocusAndValidate(newRowIndex);
   };
 
@@ -4299,7 +4314,9 @@ var TafForm = /*#__PURE__*/React__default.memo(function (_ref) {
     }).then(function () {
       if (isChangeGroup) {
         remove(rowIndex);
-        insert(rowIndex, emptyChangegroup, false);
+        insert(rowIndex, emptyChangegroup, {
+          shouldFocus: false
+        });
       } else {
         var baseForecastFields = getFieldNames(false, -1);
         setValue(baseForecastFields.wind, '');
@@ -5210,7 +5227,9 @@ var TopTabs = function TopTabs(_ref) {
   } : _ref$tafFromBackend;
 
   var _useFormContext = useFormContext(),
-      isDirty = _useFormContext.formState.isDirty;
+      dirtyFields = _useFormContext.formState.dirtyFields;
+
+  var isDirty = Object.keys(dirtyFields).length > 0;
 
   if (!tafFromBackend) {
     return null;
@@ -5278,8 +5297,9 @@ var LocationTabs = function LocationTabs(_ref) {
       timeSlot = _ref.timeSlot;
 
   var _useFormContext = useFormContext(),
-      isDirty = _useFormContext.formState.isDirty;
+      dirtyFields = _useFormContext.formState.dirtyFields;
 
+  var isDirty = Object.keys(dirtyFields).length > 0;
   return /*#__PURE__*/React.createElement(MenuList, {
     "data-testid": "location-tabs",
     sx: {

package/index.umd.js

@@ -2047,10 +2047,17 @@
 
           case 'cavOK':
             {
-              // Assume if cavOK field set to true - no visibility field, otherwise return the original list containing the visibility
-              return list[key] ? __assign(__assign({}, list), {
-                visibility: formatVisibilityToString(list[key])
-              }) : list;
+              // Assume if cavOK field set to true - no visibility field, otherwise return the original list containing the visibility and remove cavOK
+              list.cavOK;
+                  var formData = __rest(list, ["cavOK"]);
+
+              if (list[key]) {
+                return __assign(__assign({}, formData), {
+                  visibility: formatVisibilityToString(list[key])
+                });
+              }
+
+              return formData;
             }
 
           case 'cloud':
@@ -2653,6 +2660,9 @@
         },
         // root
         '&': {
+          '.Mui-error.MuiFilledInput-root': {
+            backgroundColor: 'geowebColors.captions.captionErrorBackground.rgba'
+          },
           '.Mui-disabled:before': {
             borderColor: 'transparent'
           }
@@ -2712,11 +2722,9 @@
 
       var _k = reactHookForm.useFormContext(),
           control = _k.control,
-          getValues = _k.getValues,
           setValue = _k.setValue,
-          errors = _k.errors;
+          errors = _k.formState.errors;
 
-      var inputRef = React__default["default"].useRef(null);
       var fieldErrors = getTafErrors(name, errors);
 
       var _l = __read(React__default["default"].useState(null), 2),
@@ -2724,8 +2732,11 @@
           setMaxLength = _l[1];
 
       var onKeyDown = React__default["default"].useCallback(function (event) {
-        var currentValue = getValues(name).toString();
-        var textSelection = currentValue.substring(inputRef.current.selectionStart, inputRef.current.selectionEnd);
+        var target = event.target;
+        var currentValue = target.value,
+            selectionStart = target.selectionStart,
+            selectionEnd = target.selectionEnd;
+        var textSelection = currentValue.substring(selectionStart, selectionEnd);
 
         if (autoComplete && !currentValue.length || textSelection.length && currentValue.length && textSelection === currentValue) {
           var pressedKey_1 = event.key.toString().toUpperCase();
@@ -2739,7 +2750,7 @@
             event.preventDefault();
           }
         }
-      }, [name, autoComplete, setValue, getValues]);
+      }, [name, autoComplete, setValue]);
       var onChangeField = React__default["default"].useCallback(function (event, callback) {
         var valueUppercase = event.currentTarget.value.toUpperCase();
 
@@ -2758,28 +2769,24 @@
         callback();
         onBlur();
       }, [onBlur]);
-      var onFocusField = React__default["default"].useCallback(function () {
-        var _a;
-
-        inputRef.current.disabled = false;
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      }, []);
+      var hasError = !!fieldErrors;
       return /*#__PURE__*/React__default["default"].createElement(reactHookForm.Controller, {
-        render: function render(_props) {
-          var displayValue = formatter ? formatter(_props.value) : getDisplayValue(_props.value, disabled);
+        render: function render(_a) {
+          var field = _a.field;
+          var displayValue = formatter ? formatter(field.value) : getDisplayValue(field.value, disabled);
           return /*#__PURE__*/React__default["default"].createElement(BaseTextField, {
             label: label,
             disabled: disabled,
             name: name,
             value: displayValue,
-            inputRef: inputRef,
+            inputRef: field.ref,
             onChange: function onChange(e) {
-              return onChangeField(e, _props.onChange);
+              return onChangeField(e, field.onChange);
             },
             onKeyDown: onKeyDown,
-            error: !!fieldErrors,
+            error: hasError,
             onBlur: function onBlur() {
-              return onBlurField(_props.onBlur);
+              return onBlurField(field.onBlur);
             },
             inputProps: {
               maxLength: maxLength
@@ -2790,8 +2797,7 @@
         name: name,
         control: control,
         defaultValue: defaultValue,
-        rules: rules,
-        onFocus: onFocusField
+        rules: rules
       });
     };
 
@@ -3988,10 +3994,28 @@
           formState = _l.formState,
           getValues = _l.getValues,
           setValue = _l.setValue,
-          reset = _l.reset;
+          reset = _l.reset; // added this ignore as the build is failing otherwise on: Type instantiation is excessively deep and possibly infinite.
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
 
-      var isFormDirty = formState.isDirty,
+
+      var _m = reactHookForm.useFieldArray({
+        control: control,
+        name: 'changeGroups'
+      }),
+          fields = _m.fields,
+          insert = _m.insert,
+          remove = _m.remove,
+          move = _m.move;
+
+      var _o = useDragOrder(trigger, move),
+          onChangeOrder = _o.onChangeOrder,
+          onStartDrag = _o.onStartDrag,
+          activeDraggingIndex = _o.activeDraggingIndex;
+
+      var dirtyFields = formState.dirtyFields,
           errors = formState.errors;
+      var isFormDirty = Object.keys(dirtyFields).length > 0;
       shared.usePreventBrowserClose(isFormDirty && !isDisabled); // Needed to be able to show a confirmation dialog on closing parent view
 
       React__default["default"].useEffect(function () {
@@ -4015,7 +4039,10 @@
       };
 
       var resetFormValues = function resetFormValues(formData) {
-        return reset(formData);
+        reset(formData, {
+          keepDirty: false,
+          keepDirtyValues: false
+        });
       };
 
       var resetFormState = function resetFormState(action, resetDisabled, tafToReset) {
@@ -4246,20 +4273,6 @@
         }
       };
 
-      var _m = reactHookForm.useFieldArray({
-        control: control,
-        name: 'changeGroups'
-      }),
-          fields = _m.fields,
-          insert = _m.insert,
-          remove = _m.remove,
-          move = _m.move;
-
-      var _o = useDragOrder(trigger, move),
-          onChangeOrder = _o.onChangeOrder,
-          onStartDrag = _o.onStartDrag,
-          activeDraggingIndex = _o.activeDraggingIndex;
-
       var onRemoverow = function onRemoverow(index) {
         confirmDialog({
           title: 'Delete row',
@@ -4299,7 +4312,9 @@
         }
 
         var newRowIndex = above ? rowIndex : rowIndex + 1;
-        insert(newRowIndex, emptyChangegroup, false);
+        insert(newRowIndex, emptyChangegroup, {
+          shouldFocus: false
+        });
         setFocusAndValidate(newRowIndex);
       };
 
@@ -4319,7 +4334,9 @@
         }).then(function () {
           if (isChangeGroup) {
             remove(rowIndex);
-            insert(rowIndex, emptyChangegroup, false);
+            insert(rowIndex, emptyChangegroup, {
+              shouldFocus: false
+            });
           } else {
             var baseForecastFields = getFieldNames(false, -1);
             setValue(baseForecastFields.wind, '');
@@ -5216,7 +5233,8 @@
           location: 'EHAM'
         }
       } : _c;
-      var isDirty = reactHookForm.useFormContext().formState.isDirty;
+      var dirtyFields = reactHookForm.useFormContext().formState.dirtyFields;
+      var isDirty = Object.keys(dirtyFields).length > 0;
 
       if (!tafFromBackend) {
         return null;
@@ -5282,7 +5300,8 @@
           _c = _a.onChangeTab,
           onChangeTab = _c === void 0 ? function () {} : _c,
           timeSlot = _a.timeSlot;
-      var isDirty = reactHookForm.useFormContext().formState.isDirty;
+      var dirtyFields = reactHookForm.useFormContext().formState.dirtyFields;
+      var isDirty = Object.keys(dirtyFields).length > 0;
       return /*#__PURE__*/React__namespace.createElement(material.MenuList, {
         "data-testid": "location-tabs",
         sx: {

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { FieldError } from 'react-hook-form';
+import { FieldErrors } from 'react-hook-form';
 import { IssuesPanePosition } from './types';
 interface IssuesButtonProps {
-    errors?: Record<string, FieldError>;
+    errors?: FieldErrors;
     isIssuesPaneOpen?: boolean;
     setIsIssuesPaneOpen?: (isOpen: boolean, position?: IssuesPanePosition) => void;
 }

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

@@ -1,7 +1,7 @@
-import { FieldError } from 'react-hook-form';
+import { FieldError, FieldErrors } from 'react-hook-form';
 import { CustomErrorField } from './types';
 export declare const getCustomError: (error: FieldError, isChangeGroup: boolean, rowIndex: number) => CustomErrorField;
 export declare const getIssuesLabel: (sumOfErrors: number) => string;
 export declare const getErrorValues: (fieldErrors: FieldError, isChangeGroup?: boolean, rowIndex?: number) => FieldError[];
 export declare const filterDuplicateErrors: (errors: CustomErrorField[]) => CustomErrorField[];
-export declare const getErrors: (errors: Record<string, FieldError>) => CustomErrorField[];
+export declare const getErrors: (errors: FieldErrors) => CustomErrorField[];

package/lib/components/Providers/Providers.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { UseFormOptions } from 'react-hook-form';
 import { Theme } from '@mui/material';
 import { Store } from '@reduxjs/toolkit';
+import { UseFormProps } from 'react-hook-form';
 import { TafApi } from '../../utils/api';
 export interface TafThemeApiProviderProps {
     createApiFunc?: () => TafApi;
@@ -12,7 +12,7 @@ export interface TafThemeApiProviderProps {
 export declare const TafThemeApiProvider: React.FC<TafThemeApiProviderProps>;
 interface TafThemeFormProviderProps {
     children: React.ReactNode;
-    options?: UseFormOptions;
+    options?: UseFormProps;
     theme?: Theme;
 }
 export declare const TafThemeFormProvider: React.FC<TafThemeFormProviderProps>;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { GridProps } from '@mui/material';
-import { ArrayField } from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
 export interface TafFormRowProps extends GridProps {
     isNotRequiredForAction: (value: string) => boolean | string;
     isChangeGroup?: boolean;
@@ -10,7 +10,7 @@ export interface TafFormRowProps extends GridProps {
     onAddChangeGroupBelow?: (index: number) => void;
     onAddChangeGroupAbove?: (index: number) => void;
     onClearRow?: (index: number) => void;
-    field?: Partial<ArrayField>;
+    field?: FieldValues;
     dragHandle?: React.ReactElement;
 }
 export interface FieldNames {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/taf",
-  "version": "4.7.1",
+  "version": "4.8.0",
   "description": "GeoWeb TAF library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -12,27 +12,27 @@
   "typings": "./index.d.ts",
   "dependencies": {},
   "peerDependencies": {
-    "@opengeoweb/core": "4.7.1",
+    "@opengeoweb/core": "4.8.0",
     "react": "^17.0.2",
-    "@opengeoweb/theme": "4.7.1",
+    "@opengeoweb/shared": "4.8.0",
     "@mui/material": "^5.10.8",
-    "moment": "^2.29.0",
-    "react-redux": "^8.0.4",
-    "@opengeoweb/webmap": "4.7.1",
-    "throttle-debounce": "^3.0.1",
-    "proj4": "^2.6.2",
-    "axios": "^0.25.0",
-    "@opengeoweb/api": "4.7.1",
-    "@opengeoweb/shared": "4.7.1",
+    "@opengeoweb/theme": "4.8.0",
     "react-draggable": "^4.4.5",
     "re-resizable": "^6.9.0",
     "@redux-eggs/core": "^2.2.0",
-    "@opengeoweb/form-fields": "4.7.1",
-    "react-hook-form": "^6.12.1",
+    "react-redux": "^8.0.4",
+    "@opengeoweb/form-fields": "4.8.0",
+    "react-hook-form": "^7.41.5",
+    "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",
     "@mui/x-date-pickers": "^5.0.4",
     "lodash": "^4.17.20",
+    "axios": "^0.25.0",
     "date-fns": "^2.29.3",
+    "@opengeoweb/webmap": "4.8.0",
+    "throttle-debounce": "^3.0.1",
+    "proj4": "^2.6.2",
+    "@opengeoweb/api": "4.8.0",
     "react-intl": "^5.17.5",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.0",
@@ -46,7 +46,7 @@
     "@redux-eggs/redux-toolkit": "^2.2.0",
     "@redux-eggs/saga-extension": "^2.2.0",
     "react-dom": "^17.0.2",
-    "@opengeoweb/authentication": "4.7.1",
+    "@opengeoweb/authentication": "4.8.0",
     "react-router-dom": "^6.4.2",
     "query-string": "^6.13.7"
   }