@opengeoweb/taf 1.2.0 → 1.2.2

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

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

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

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

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

@@ -1,15 +1,14 @@
 /// <reference types="react" />
+import { GridProps } from '@material-ui/core';
 import { ArrayField } from 'react-hook-form';
-export interface TafFormRowProps {
+export interface TafFormRowProps extends GridProps {
     isChangeGroup?: boolean;
     disabled?: boolean;
     index?: number;
     lastRow?: boolean;
     onRemoveChangeGroup?: (index: number) => void;
     field?: Partial<ArrayField>;
-    onRef?: (node: HTMLElement) => void;
     dragHandle?: React.ReactElement;
-    style?: React.CSSProperties;
 }
 export interface FieldNames {
     messageType?: string;

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

@@ -1,3 +1,5 @@
+import Sortable from 'sortablejs';
+import { ArrayField } from 'react-hook-form';
 import { BaseForecast, ChangeGroup, Taf, TafActions } from '../../types';
 import { FieldNames } from './TafFormRow/types';
 export declare const formatIssueTime: (issueDate: string) => string;
@@ -9,8 +11,15 @@ export declare const getFieldNames: (isChangeGroup: boolean, index: number) => F
 export declare const useTACGenerator: (taf: Taf, requestTAC: (postTaf: unknown) => Promise<{
     data: string;
 }>, standardTAC?: string) => [string, (tafToPost: any) => void];
-export declare const useDragOrder: (trigger: (name?: string | string[]) => Promise<boolean>) => {
-    updatelastDragOrder: (order: number[]) => void;
+export declare const getRange: (min: number, max: number) => number[];
+export declare type SortableField = {
+    id: string;
+    chosen: boolean;
+};
+export declare const useDragOrder: (trigger: (name?: string | string[]) => Promise<boolean>, move: (oldIndex: number, newIndex: number) => void, fields: Partial<ArrayField<Record<string, unknown>, 'id'>>[]) => {
+    onChangeOrder: (event: Sortable.SortableEvent) => void;
+    sortedFields: SortableField[];
+    setSortedFields: (fields: SortableField[]) => void;
 };
 export declare const getConfirmationDialogTitle: (action: TafActions) => string;
 export declare const getConfirmationDialogContent: (action: TafActions) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/taf",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "GeoWeb TAF library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,22 @@
   "peerDependencies": {
     "react": "16.14.0",
     "@material-ui/core": "^4.11.0",
-    "@opengeoweb/theme": "1.2.0",
+    "@opengeoweb/theme": "1.2.2",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/icons": "^4.9.1",
     "react-hook-form": "^6.12.1",
-    "@opengeoweb/form-fields": "1.2.0",
+    "react-sortablejs": "^6.0.0",
+    "@opengeoweb/form-fields": "1.2.2",
     "@material-ui/pickers": "^3.2.10",
     "@date-io/moment": "^1.3.13",
     "moment": "^2.29.0",
     "moment-timezone": "^0.5.31",
     "lodash": "^4.17.20",
-    "@opengeoweb/api": "1.2.0",
+    "@opengeoweb/api": "1.2.2",
     "axios": "^0.21.0",
-    "@opengeoweb/shared": "1.2.0",
+    "@opengeoweb/shared": "1.2.2",
     "react-draggable": "^4.4.3",
-    "re-resizable": "^6.9.0"
+    "re-resizable": "^6.9.0",
+    "sortablejs": "^1.14.0"
   }
 }

package/taf.esm.js

@@ -4,10 +4,11 @@ import { makeStyles, Grid, TextField, IconButton, Tooltip, Chip, SvgIcon, Paper,
 import { Skeleton } from '@material-ui/lab';
 import moment from 'moment';
 import { useDraftFormHelpers, useConfirmationDialog, usePreventBrowserClose, StatusTag, AlertBanner, ConfirmationServiceProvider, usePoller, isAxiosError, getAxiosErrorMessage } from '@opengeoweb/shared';
-import { Delete, Close, Add, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
+import { Delete, Close, DragIndicator, Add, InfoOutlined, Create, CheckCircle, Schedule, OpenInNew, ExpandMore } from '@material-ui/icons';
 import { useApiContext, useApi, createApiInstance } from '@opengeoweb/api';
 import { getDeepProperty, ReactHookFormHiddenInput, ReactHookFormProvider } from '@opengeoweb/form-fields';
 import { useFormContext, Controller, useFieldArray } from 'react-hook-form';
+import { ReactSortable, Sortable } from 'react-sortablejs';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -176,80 +177,6 @@ var tafConfig = {
 	locations: locations
 };
 
-/* *
- * 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$8 = makeStyles(function (theme) {
-  return {
-    textFieldGridItem: {
-      marginRight: 4
-    },
-    textFieldInput: {
-      fontSize: '14px',
-      paddingLeft: 1,
-      paddingRight: 1,
-      color: '#051039',
-      WebkitTextFillColor: '#051039' // safari text color fix
-
-    },
-    textFieldLabel: {
-      fontSize: '14px'
-    },
-    textFieldLabelShrink: {
-      transform: 'translate(2px, 10px) scale(0.75) !important'
-    },
-    formRow: {
-      marginTop: 8,
-      backgroundColor: theme.palette.common.white,
-      position: 'relative'
-    },
-    tacTitle: {
-      fontSize: '20px',
-      fontWeight: 500
-    },
-    tacText: {
-      fontSize: '14px',
-      color: '#000000'
-    },
-    tacLine: {
-      margin: '0',
-      padding: '.1em .1em .1em 0.8em',
-      textIndent: '-0.7em',
-      borderRadius: '3px'
-    },
-    addButton: {
-      marginRight: '38px'
-    },
-    lifecycleButtons: {
-      marginTop: '40px',
-      marginBottom: '16px'
-    },
-    actionButton: {
-      marginRight: '16px'
-    },
-    lastButton: {
-      marginRight: '90px'
-    },
-    backdrop: {
-      zIndex: 1500,
-      color: '#fff'
-    }
-  };
-});
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -2210,6 +2137,71 @@ var useTACGenerator = function useTACGenerator(taf, requestTAC, standardTAC) {
   }, [standardTAC]);
   return [TAC, retrieveTAC];
 };
+var getRange = function getRange(min, max) {
+  return Array.from({
+    length: max - min + 1
+  }, function (_, i) {
+    return min + i;
+  });
+};
+var useDragOrder = function useDragOrder(trigger, move, fields) {
+  // create simple ordered list with hover (chosen) state
+  var _a = __read(React__default.useState([]), 2),
+      sortedFields = _a[0],
+      setSortedFields = _a[1];
+
+  var _b = __read(React__default.useState([null, null]), 2),
+      lastDragOrder = _b[0],
+      onUpdatelastDragOrder = _b[1];
+
+  var onChangeOrder = function onChangeOrder(_a) {
+    var oldIndex = _a.oldIndex,
+        newIndex = _a.newIndex;
+    if (oldIndex === undefined || newIndex === undefined) return;
+    move(oldIndex, newIndex);
+    onUpdatelastDragOrder([oldIndex, newIndex]);
+  };
+
+  React__default.useEffect(function () {
+    setSortedFields(fields.map(function (_a) {
+      var id = _a.id;
+      return {
+        id: id,
+        chosen: false
+      };
+    }));
+  }, [fields]); // triggers validation AFTER render of new sorted elements
+
+  React__default.useEffect(function () {
+    var _a = __read(lastDragOrder, 2),
+        oldIndex = _a[0],
+        newIndex = _a[1];
+
+    if (oldIndex !== null && newIndex !== null) {
+      // trigger validation of moved rows
+      var _b = __read([oldIndex, newIndex].sort(function (a, b) {
+        return a - b;
+      }), 2),
+          start = _b[0],
+          end = _b[1];
+
+      var changedRows = getRange(start, end);
+      var fieldsToValidate = changedRows.reduce(function (list, rowIndex) {
+        var fieldsDict = getFieldNames(true, rowIndex);
+        var fields = Object.keys(fieldsDict).map(function (key) {
+          return fieldsDict[key];
+        });
+        return list.concat(fields);
+      }, []);
+      trigger(fieldsToValidate);
+    }
+  }, [lastDragOrder, trigger]);
+  return {
+    onChangeOrder: onChangeOrder,
+    sortedFields: sortedFields,
+    setSortedFields: setSortedFields
+  };
+}; // dialog utils
 
 var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
   if (action === 'DISCARD') return 'Discard TAF';
@@ -2239,6 +2231,86 @@ 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
+    },
+    textFieldInput: {
+      fontSize: '14px',
+      paddingLeft: 1,
+      paddingRight: 1,
+      color: '#051039',
+      WebkitTextFillColor: '#051039' // safari text color fix
+
+    },
+    textFieldLabel: {
+      fontSize: '14px'
+    },
+    textFieldLabelShrink: {
+      transform: 'translate(2px, 10px) scale(0.75) !important'
+    },
+    formRow: {
+      marginTop: 8,
+      backgroundColor: theme.palette.common.white,
+      position: 'relative',
+      '&.sortable-chosen': {
+        boxShadow: theme.shadows[1]
+      },
+      '&.sortable-ghost': {
+        opacity: 0.5
+      }
+    },
+    tacTitle: {
+      fontSize: '20px',
+      fontWeight: 500
+    },
+    tacText: {
+      fontSize: '14px',
+      color: '#000000'
+    },
+    tacLine: {
+      margin: '0',
+      padding: '.1em .1em .1em 0.8em',
+      textIndent: '-0.7em',
+      borderRadius: '3px'
+    },
+    addButton: {
+      marginRight: '38px'
+    },
+    lifecycleButtons: {
+      marginTop: '40px',
+      marginBottom: '16px'
+    },
+    actionButton: {
+      marginRight: '16px'
+    },
+    lastButton: {
+      marginRight: '90px'
+    },
+    backdrop: {
+      zIndex: 1500,
+      color: '#fff'
+    }
+  };
+});
+
 var getTafErrors = function getTafErrors(name, errors) {
   var nameAsArray = name.split('.');
 
@@ -2260,7 +2332,7 @@ var getDisplayValue = function getDisplayValue(value, disabled) {
   return disabled && !value ? '-' : value;
 };
 var BaseTextField = /*#__PURE__*/React__default.memo(function (props) {
-  var classes = useStyles$8();
+  var classes = useStyles$9();
   return /*#__PURE__*/React__default.createElement(TextField, __assign({
     type: "text",
     variant: "filled",
@@ -2299,7 +2371,7 @@ var TafFormTextField = function TafFormTextField(_a) {
       autoComplete = _h === void 0 ? [] : _h,
       _j = _a.autoFocus,
       autoFocus = _j === void 0 ? false : _j;
-  var classes = useStyles$8();
+  var classes = useStyles$9();
 
   var _k = useFormContext(),
       control = _k.control,
@@ -2463,7 +2535,7 @@ var getRequiredCrossFields = function getRequiredCrossFields(fieldNames) {
   return [[fieldNames.valid, fieldNames.change], [fieldNames.probability], [fieldNames.wind, fieldNames.visibility, fieldNames.weather1, fieldNames.cloud1]];
 };
 
-var TafFormRow = function TafFormRow(_a) {
+var TafFormRow = /*#__PURE__*/React__default.forwardRef(function (_a, ref) {
   var _b = _a.isChangeGroup,
       isChangeGroup = _b === void 0 ? false : _b,
       _c = _a.disabled,
@@ -2475,28 +2547,23 @@ var TafFormRow = function TafFormRow(_a) {
       onRemoveChangeGroup = _a.onRemoveChangeGroup,
       _f = _a.field,
       field = _f === void 0 ? null : _f,
-      _g = _a.onRef,
-      onRef = _g === void 0 ? function () {
-    return null;
-  } : _g,
-      _h = _a.dragHandle,
-      dragHandle = _h === void 0 ? null : _h,
-      props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "onRef", "dragHandle"]);
+      _g = _a.dragHandle,
+      dragHandle = _g === void 0 ? null : _g,
+      props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle"]);
 
-  var classes = useStyles$8();
   var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
   var fieldNames = getFieldNames(isChangeGroup, index);
 
-  var _j = useFormContext(),
-      getValues = _j.getValues,
-      trigger = _j.trigger;
+  var _h = useFormContext(),
+      getValues = _h.getValues,
+      trigger = _h.trigger;
 
   var isNotRequiredForAction = useDraftFormHelpers().isRequired; // cross-field required validation
 
-  var _k = __read(getRequiredCrossFields(fieldNames), 3),
-      mainFields = _k[0],
-      mainOptionalFields = _k[1],
-      subFields = _k[2];
+  var _j = __read(getRequiredCrossFields(fieldNames), 3),
+      mainFields = _j[0],
+      mainOptionalFields = _j[1],
+      subFields = _j[2];
 
   var hasFieldsValue = function hasFieldsValue(fields) {
     return fields.map(getValues).find(function (field) {
@@ -2543,8 +2610,7 @@ var TafFormRow = function TafFormRow(_a) {
   return /*#__PURE__*/React__default.createElement(Grid, __assign({
     "data-testid": "row-" + namePrefix,
     container: true,
-    className: classes.formRow,
-    ref: onRef
+    ref: ref
   }, props), !isChangeGroup && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TafFormTextField, {
     label: "Type",
     name: fieldNames.messageType,
@@ -2805,7 +2871,7 @@ var TafFormRow = function TafFormRow(_a) {
   }, lastRow ? {
     tabIndex: '-1'
   } : {}), /*#__PURE__*/React__default.createElement(Delete, null))));
-};
+});
 
 var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
   switch (sumOfErrors) {
@@ -2891,7 +2957,7 @@ var ThumbsUp = function ThumbsUp(props) {
  * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
  * Copyright 2021 - Finnish Meteorological Institute (FMI)
  * */
-var useStyles$7 = makeStyles({
+var useStyles$8 = makeStyles({
   issuesPane: {
     display: 'flex',
     flexDirection: 'column',
@@ -2993,7 +3059,7 @@ var IssuesPane = function IssuesPane(_a) {
   var handleClose = _a.handleClose,
       _b = _a.errorList,
       errorList = _b === void 0 ? [] : _b;
-  var classes = useStyles$7();
+  var classes = useStyles$8();
   return /*#__PURE__*/React.createElement(Paper, {
     elevation: 3,
     className: classes.issuesPane
@@ -3079,7 +3145,7 @@ var filterDuplicateErrors = function filterDuplicateErrors(errors) {
 var TafFormButtons = function TafFormButtons(_a) {
   var tafAction = _a.tafAction,
       onTafFormButtonPress = _a.onTafFormButtonPress;
-  var classes = useStyles$8();
+  var classes = useStyles$9();
   var errors = useFormContext().errors;
   var errorList = filterDuplicateErrors(getErrors(errors));
 
@@ -3179,6 +3245,50 @@ var TafFormButtons = function TafFormButtons(_a) {
   }));
 };
 
+/* *
+ * 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$7 = makeStyles(function () {
+  return {
+    dragHandle: {
+      backgroundColor: 'transparent',
+      '&:hover': {
+        backgroundColor: 'transparent'
+      },
+      cursor: function cursor(isSorting) {
+        return isSorting ? 'grabbing' : 'grab';
+      }
+    }
+  };
+});
+
+var DragHandle = function DragHandle(_a) {
+  var _b = _a.isSorting,
+      isSorting = _b === void 0 ? false : _b,
+      _c = _a.isDisabled,
+      isDisabled = _c === void 0 ? false : _c;
+  var classes = useStyles$7(isSorting);
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    className: classes.dragHandle + " handle",
+    "data-testid": "dragHandle",
+    disableRipple: true,
+    disabled: isDisabled
+  }, /*#__PURE__*/React__default.createElement(DragIndicator, null));
+};
+
 var emptyRow = {
   valid: '',
   wind: '',
@@ -3208,7 +3318,7 @@ var TafForm = function TafForm(_a) {
       onFormAction = _c === void 0 ? function () {
     return null;
   } : _c;
-  var classes = useStyles$8();
+  var classes = useStyles$9();
   var confirmDialog = useConfirmationDialog();
 
   var _d = useDraftFormHelpers(),
@@ -3223,7 +3333,8 @@ var TafForm = function TafForm(_a) {
       handleSubmit = _e.handleSubmit,
       watch = _e.watch,
       getValues = _e.getValues,
-      errors = _e.errors;
+      errors = _e.errors,
+      trigger = _e.trigger;
 
   var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
@@ -3262,7 +3373,8 @@ var TafForm = function TafForm(_a) {
   }),
       fields = _j.fields,
       append = _j.append,
-      remove = _j.remove;
+      remove = _j.remove,
+      move = _j.move;
 
   var onSubmit = function onSubmit(data) {
     // eslint-disable-next-line no-console
@@ -3320,10 +3432,6 @@ var TafForm = function TafForm(_a) {
     append(emptyRow);
   };
 
-  var onRemoverow = function onRemoverow(index) {
-    remove(index);
-  };
-
   React__default.useEffect(function () {
     // set changegroups on mount (if no changegroups - add empty one by default)
     if (changeGroups.length > 0) {
@@ -3335,6 +3443,20 @@ var TafForm = function TafForm(_a) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, []);
+
+  var _k = useDragOrder(trigger, move, fields),
+      onChangeOrder = _k.onChangeOrder,
+      sortedFields = _k.sortedFields,
+      setSortedFields = _k.setSortedFields;
+
+  var onRemoverow = function onRemoverow(index) {
+    remove(index);
+    var newList = fields.length > 1 ? fields.filter(function (_, fieldIndex) {
+      return fieldIndex === index;
+    }) : [];
+    setSortedFields(newList);
+  };
+
   return /*#__PURE__*/React__default.createElement("form", {
     onSubmit: handleSubmit(onSubmit),
     onChange: onFormChange,
@@ -3352,17 +3474,37 @@ var TafForm = function TafForm(_a) {
     }, line);
   })), /*#__PURE__*/React__default.createElement(TafFormRow, {
     disabled: isDisabled
-  }), fields.map(function (item, index) {
+  }), /*#__PURE__*/React__default.createElement(ReactSortable, {
+    tag: "div",
+    list: sortedFields,
+    setList: setSortedFields,
+    animation: 200,
+    onSort: onChangeOrder,
+    handle: ".handle",
+    direction: "vertical",
+    // hover props
+    forceFallback: true,
+    onStart: function onStart() {
+      Sortable.ghost.style.opacity = '1';
+    }
+  }, sortedFields.map(function (_a, index) {
+    var chosen = _a.chosen;
+    var item = fields[index];
     return /*#__PURE__*/React__default.createElement(TafFormRow, {
       field: item,
+      className: classes.formRow,
       key: item.id,
       index: index,
       lastRow: fields.length === index + 1,
       disabled: isDisabled,
       onRemoveChangeGroup: onRemoverow,
-      isChangeGroup: true
+      isChangeGroup: true,
+      dragHandle: /*#__PURE__*/React__default.createElement(DragHandle, {
+        isDisabled: sortedFields.length === 1 || isDisabled,
+        isSorting: chosen
+      })
     });
-  }), !isDisabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
+  })), !isDisabled && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Grid, {
     container: true,
     item: true,
     xs: 12,

package/taf.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')) :
-    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'], 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));
-}(this, (function (exports, React, core, lab, moment, shared, icons, api, formFields, reactHookForm) { 'use strict';
+    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';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -197,80 +197,6 @@
     	locations: locations
     };
 
-    /* *
-     * 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$8 = core.makeStyles(function (theme) {
-      return {
-        textFieldGridItem: {
-          marginRight: 4
-        },
-        textFieldInput: {
-          fontSize: '14px',
-          paddingLeft: 1,
-          paddingRight: 1,
-          color: '#051039',
-          WebkitTextFillColor: '#051039' // safari text color fix
-
-        },
-        textFieldLabel: {
-          fontSize: '14px'
-        },
-        textFieldLabelShrink: {
-          transform: 'translate(2px, 10px) scale(0.75) !important'
-        },
-        formRow: {
-          marginTop: 8,
-          backgroundColor: theme.palette.common.white,
-          position: 'relative'
-        },
-        tacTitle: {
-          fontSize: '20px',
-          fontWeight: 500
-        },
-        tacText: {
-          fontSize: '14px',
-          color: '#000000'
-        },
-        tacLine: {
-          margin: '0',
-          padding: '.1em .1em .1em 0.8em',
-          textIndent: '-0.7em',
-          borderRadius: '3px'
-        },
-        addButton: {
-          marginRight: '38px'
-        },
-        lifecycleButtons: {
-          marginTop: '40px',
-          marginBottom: '16px'
-        },
-        actionButton: {
-          marginRight: '16px'
-        },
-        lastButton: {
-          marginRight: '90px'
-        },
-        backdrop: {
-          zIndex: 1500,
-          color: '#fff'
-        }
-      };
-    });
-
     function _typeof(obj) {
       "@babel/helpers - typeof";
 
@@ -2231,6 +2157,71 @@
       }, [standardTAC]);
       return [TAC, retrieveTAC];
     };
+    var getRange = function getRange(min, max) {
+      return Array.from({
+        length: max - min + 1
+      }, function (_, i) {
+        return min + i;
+      });
+    };
+    var useDragOrder = function useDragOrder(trigger, move, fields) {
+      // create simple ordered list with hover (chosen) state
+      var _a = __read(React__default['default'].useState([]), 2),
+          sortedFields = _a[0],
+          setSortedFields = _a[1];
+
+      var _b = __read(React__default['default'].useState([null, null]), 2),
+          lastDragOrder = _b[0],
+          onUpdatelastDragOrder = _b[1];
+
+      var onChangeOrder = function onChangeOrder(_a) {
+        var oldIndex = _a.oldIndex,
+            newIndex = _a.newIndex;
+        if (oldIndex === undefined || newIndex === undefined) return;
+        move(oldIndex, newIndex);
+        onUpdatelastDragOrder([oldIndex, newIndex]);
+      };
+
+      React__default['default'].useEffect(function () {
+        setSortedFields(fields.map(function (_a) {
+          var id = _a.id;
+          return {
+            id: id,
+            chosen: false
+          };
+        }));
+      }, [fields]); // triggers validation AFTER render of new sorted elements
+
+      React__default['default'].useEffect(function () {
+        var _a = __read(lastDragOrder, 2),
+            oldIndex = _a[0],
+            newIndex = _a[1];
+
+        if (oldIndex !== null && newIndex !== null) {
+          // trigger validation of moved rows
+          var _b = __read([oldIndex, newIndex].sort(function (a, b) {
+            return a - b;
+          }), 2),
+              start = _b[0],
+              end = _b[1];
+
+          var changedRows = getRange(start, end);
+          var fieldsToValidate = changedRows.reduce(function (list, rowIndex) {
+            var fieldsDict = getFieldNames(true, rowIndex);
+            var fields = Object.keys(fieldsDict).map(function (key) {
+              return fieldsDict[key];
+            });
+            return list.concat(fields);
+          }, []);
+          trigger(fieldsToValidate);
+        }
+      }, [lastDragOrder, trigger]);
+      return {
+        onChangeOrder: onChangeOrder,
+        sortedFields: sortedFields,
+        setSortedFields: setSortedFields
+      };
+    }; // dialog utils
 
     var getConfirmationDialogTitle = function getConfirmationDialogTitle(action) {
       if (action === 'DISCARD') return 'Discard TAF';
@@ -2260,6 +2251,86 @@
       }
     };
 
+    /* *
+     * 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) {
+      return {
+        textFieldGridItem: {
+          marginRight: 4
+        },
+        textFieldInput: {
+          fontSize: '14px',
+          paddingLeft: 1,
+          paddingRight: 1,
+          color: '#051039',
+          WebkitTextFillColor: '#051039' // safari text color fix
+
+        },
+        textFieldLabel: {
+          fontSize: '14px'
+        },
+        textFieldLabelShrink: {
+          transform: 'translate(2px, 10px) scale(0.75) !important'
+        },
+        formRow: {
+          marginTop: 8,
+          backgroundColor: theme.palette.common.white,
+          position: 'relative',
+          '&.sortable-chosen': {
+            boxShadow: theme.shadows[1]
+          },
+          '&.sortable-ghost': {
+            opacity: 0.5
+          }
+        },
+        tacTitle: {
+          fontSize: '20px',
+          fontWeight: 500
+        },
+        tacText: {
+          fontSize: '14px',
+          color: '#000000'
+        },
+        tacLine: {
+          margin: '0',
+          padding: '.1em .1em .1em 0.8em',
+          textIndent: '-0.7em',
+          borderRadius: '3px'
+        },
+        addButton: {
+          marginRight: '38px'
+        },
+        lifecycleButtons: {
+          marginTop: '40px',
+          marginBottom: '16px'
+        },
+        actionButton: {
+          marginRight: '16px'
+        },
+        lastButton: {
+          marginRight: '90px'
+        },
+        backdrop: {
+          zIndex: 1500,
+          color: '#fff'
+        }
+      };
+    });
+
     var getTafErrors = function getTafErrors(name, errors) {
       var nameAsArray = name.split('.');
 
@@ -2281,7 +2352,7 @@
       return disabled && !value ? '-' : value;
     };
     var BaseTextField = /*#__PURE__*/React__default['default'].memo(function (props) {
-      var classes = useStyles$8();
+      var classes = useStyles$9();
       return /*#__PURE__*/React__default['default'].createElement(core.TextField, __assign({
         type: "text",
         variant: "filled",
@@ -2320,7 +2391,7 @@
           autoComplete = _h === void 0 ? [] : _h,
           _j = _a.autoFocus,
           autoFocus = _j === void 0 ? false : _j;
-      var classes = useStyles$8();
+      var classes = useStyles$9();
 
       var _k = reactHookForm.useFormContext(),
           control = _k.control,
@@ -2484,7 +2555,7 @@
       return [[fieldNames.valid, fieldNames.change], [fieldNames.probability], [fieldNames.wind, fieldNames.visibility, fieldNames.weather1, fieldNames.cloud1]];
     };
 
-    var TafFormRow = function TafFormRow(_a) {
+    var TafFormRow = /*#__PURE__*/React__default['default'].forwardRef(function (_a, ref) {
       var _b = _a.isChangeGroup,
           isChangeGroup = _b === void 0 ? false : _b,
           _c = _a.disabled,
@@ -2496,28 +2567,23 @@
           onRemoveChangeGroup = _a.onRemoveChangeGroup,
           _f = _a.field,
           field = _f === void 0 ? null : _f,
-          _g = _a.onRef,
-          onRef = _g === void 0 ? function () {
-        return null;
-      } : _g,
-          _h = _a.dragHandle,
-          dragHandle = _h === void 0 ? null : _h,
-          props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "onRef", "dragHandle"]);
+          _g = _a.dragHandle,
+          dragHandle = _g === void 0 ? null : _g,
+          props = __rest(_a, ["isChangeGroup", "disabled", "index", "lastRow", "onRemoveChangeGroup", "field", "dragHandle"]);
 
-      var classes = useStyles$8();
       var namePrefix = !isChangeGroup ? 'baseForecast' : "changeGroups[" + index + "]";
       var fieldNames = getFieldNames(isChangeGroup, index);
 
-      var _j = reactHookForm.useFormContext(),
-          getValues = _j.getValues,
-          trigger = _j.trigger;
+      var _h = reactHookForm.useFormContext(),
+          getValues = _h.getValues,
+          trigger = _h.trigger;
 
       var isNotRequiredForAction = shared.useDraftFormHelpers().isRequired; // cross-field required validation
 
-      var _k = __read(getRequiredCrossFields(fieldNames), 3),
-          mainFields = _k[0],
-          mainOptionalFields = _k[1],
-          subFields = _k[2];
+      var _j = __read(getRequiredCrossFields(fieldNames), 3),
+          mainFields = _j[0],
+          mainOptionalFields = _j[1],
+          subFields = _j[2];
 
       var hasFieldsValue = function hasFieldsValue(fields) {
         return fields.map(getValues).find(function (field) {
@@ -2564,8 +2630,7 @@
       return /*#__PURE__*/React__default['default'].createElement(core.Grid, __assign({
         "data-testid": "row-" + namePrefix,
         container: true,
-        className: classes.formRow,
-        ref: onRef
+        ref: ref
       }, props), !isChangeGroup && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(TafFormTextField, {
         label: "Type",
         name: fieldNames.messageType,
@@ -2826,7 +2891,7 @@
       }, lastRow ? {
         tabIndex: '-1'
       } : {}), /*#__PURE__*/React__default['default'].createElement(icons.Delete, null))));
-    };
+    });
 
     var getIssuesLabel = function getIssuesLabel(sumOfErrors) {
       switch (sumOfErrors) {
@@ -2912,7 +2977,7 @@
      * Copyright 2021 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
      * Copyright 2021 - Finnish Meteorological Institute (FMI)
      * */
-    var useStyles$7 = core.makeStyles({
+    var useStyles$8 = core.makeStyles({
       issuesPane: {
         display: 'flex',
         flexDirection: 'column',
@@ -3014,7 +3079,7 @@
       var handleClose = _a.handleClose,
           _b = _a.errorList,
           errorList = _b === void 0 ? [] : _b;
-      var classes = useStyles$7();
+      var classes = useStyles$8();
       return /*#__PURE__*/React__namespace.createElement(core.Paper, {
         elevation: 3,
         className: classes.issuesPane
@@ -3100,7 +3165,7 @@
     var TafFormButtons = function TafFormButtons(_a) {
       var tafAction = _a.tafAction,
           onTafFormButtonPress = _a.onTafFormButtonPress;
-      var classes = useStyles$8();
+      var classes = useStyles$9();
       var errors = reactHookForm.useFormContext().errors;
       var errorList = filterDuplicateErrors(getErrors(errors));
 
@@ -3200,6 +3265,50 @@
       }));
     };
 
+    /* *
+     * 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$7 = core.makeStyles(function () {
+      return {
+        dragHandle: {
+          backgroundColor: 'transparent',
+          '&:hover': {
+            backgroundColor: 'transparent'
+          },
+          cursor: function cursor(isSorting) {
+            return isSorting ? 'grabbing' : 'grab';
+          }
+        }
+      };
+    });
+
+    var DragHandle = function DragHandle(_a) {
+      var _b = _a.isSorting,
+          isSorting = _b === void 0 ? false : _b,
+          _c = _a.isDisabled,
+          isDisabled = _c === void 0 ? false : _c;
+      var classes = useStyles$7(isSorting);
+      return /*#__PURE__*/React__default['default'].createElement(core.IconButton, {
+        className: classes.dragHandle + " handle",
+        "data-testid": "dragHandle",
+        disableRipple: true,
+        disabled: isDisabled
+      }, /*#__PURE__*/React__default['default'].createElement(icons.DragIndicator, null));
+    };
+
     var emptyRow = {
       valid: '',
       wind: '',
@@ -3229,7 +3338,7 @@
           onFormAction = _c === void 0 ? function () {
         return null;
       } : _c;
-      var classes = useStyles$8();
+      var classes = useStyles$9();
       var confirmDialog = shared.useConfirmationDialog();
 
       var _d = shared.useDraftFormHelpers(),
@@ -3244,7 +3353,8 @@
           handleSubmit = _e.handleSubmit,
           watch = _e.watch,
           getValues = _e.getValues,
-          errors = _e.errors;
+          errors = _e.errors,
+          trigger = _e.trigger;
 
       var hiddenInputFields = ['baseTime', 'issueDate', 'type', 'uuid', 'validDateStart', 'validDateEnd', 'status', 'previousId', 'previousValidDateStart', 'previousValidDateEnd'];
 
@@ -3283,7 +3393,8 @@
       }),
           fields = _j.fields,
           append = _j.append,
-          remove = _j.remove;
+          remove = _j.remove,
+          move = _j.move;
 
       var onSubmit = function onSubmit(data) {
         // eslint-disable-next-line no-console
@@ -3341,10 +3452,6 @@
         append(emptyRow);
       };
 
-      var onRemoverow = function onRemoverow(index) {
-        remove(index);
-      };
-
       React__default['default'].useEffect(function () {
         // set changegroups on mount (if no changegroups - add empty one by default)
         if (changeGroups.length > 0) {
@@ -3356,6 +3463,20 @@
         } // eslint-disable-next-line react-hooks/exhaustive-deps
 
       }, []);
+
+      var _k = useDragOrder(trigger, move, fields),
+          onChangeOrder = _k.onChangeOrder,
+          sortedFields = _k.sortedFields,
+          setSortedFields = _k.setSortedFields;
+
+      var onRemoverow = function onRemoverow(index) {
+        remove(index);
+        var newList = fields.length > 1 ? fields.filter(function (_, fieldIndex) {
+          return fieldIndex === index;
+        }) : [];
+        setSortedFields(newList);
+      };
+
       return /*#__PURE__*/React__default['default'].createElement("form", {
         onSubmit: handleSubmit(onSubmit),
         onChange: onFormChange,
@@ -3373,17 +3494,37 @@
         }, line);
       })), /*#__PURE__*/React__default['default'].createElement(TafFormRow, {
         disabled: isDisabled
-      }), fields.map(function (item, index) {
+      }), /*#__PURE__*/React__default['default'].createElement(reactSortablejs.ReactSortable, {
+        tag: "div",
+        list: sortedFields,
+        setList: setSortedFields,
+        animation: 200,
+        onSort: onChangeOrder,
+        handle: ".handle",
+        direction: "vertical",
+        // hover props
+        forceFallback: true,
+        onStart: function onStart() {
+          reactSortablejs.Sortable.ghost.style.opacity = '1';
+        }
+      }, sortedFields.map(function (_a, index) {
+        var chosen = _a.chosen;
+        var item = fields[index];
         return /*#__PURE__*/React__default['default'].createElement(TafFormRow, {
           field: item,
+          className: classes.formRow,
           key: item.id,
           index: index,
           lastRow: fields.length === index + 1,
           disabled: isDisabled,
           onRemoveChangeGroup: onRemoverow,
-          isChangeGroup: true
+          isChangeGroup: true,
+          dragHandle: /*#__PURE__*/React__default['default'].createElement(DragHandle, {
+            isDisabled: sortedFields.length === 1 || isDisabled,
+            isSorting: chosen
+          })
         });
-      }), !isDisabled && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
+      })), !isDisabled && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(core.Grid, {
         container: true,
         item: true,
         xs: 12,