@opengeoweb/warnings 9.12.0 → 9.13.0

package/index.esm.js

@@ -3,17 +3,17 @@ import React__default, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Polygons, Share, ExitDomain, Edit, Delete, DrawPolygon, Visibility, Add, Wind, Fog, Lightning, Snow, Rain, TemperatureHigh, FunnelCloud, TemperatureLow, CoastalEvent, breakpoints, Options, VisibilityOff, Success } from '@opengeoweb/theme';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawtoolSelectors, layerSelectors, uiSelectors, drawtoolActions, mapStoreActions, layerActions, useSetupDialog } from '@opengeoweb/store';
-import { emptyGeoJSON, MapControlButton, getGeoJSONPropertyValue, getIcon, rewindGeometry, currentlySupportedDrawModes } from '@opengeoweb/webmap-react';
+import { emptyGeoJSON, MapControlButton, getIcon, rewindGeometry, getGeoJSONPropertyValue, currentlySupportedDrawModes } from '@opengeoweb/webmap-react';
 import { useConfirmationDialog, ToggleMenu, dateUtils, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, getAxiosErrorMessage, usePrevious, CustomIconButton, CustomTooltip, Avatar, getInitials, SwitchButton, LastUpdateTime, StatusTag, ErrorBoundary, isAxiosError, pollingIntervalTimeout } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector } from '@reduxjs/toolkit';
 import { snackbarActions } from '@opengeoweb/snackbar';
 import { styled, Box, Typography, ListItem, Grid, Paper, ListItemButton, Stack, LinearProgress, Button, FormHelperText, MenuItem, Tabs, Tab, FormControl, Card, CardContent, ListItemIcon, CircularProgress, List } from '@mui/material';
 import { VariableSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
-import { DATE_FORMAT_FNS, ReactHookFormProvider, defaultFormOptions, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, useDraftFormHelpers, errorMessages, ReactHookFormDateTime, isValidDate, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
+import { DATE_FORMAT_FNS, ReactHookFormHiddenInput, isValidGeoJsonCoordinates, ReactHookFormSelect, ReactHookFormTextField, ReactHookFormProvider, defaultFormOptions, useDraftFormHelpers, errorMessages, ReactHookFormDateTime, isValidDate, isXHoursBefore, isXHoursAfter, isEmpty } from '@opengeoweb/form-fields';
 import { getApi, createApiInstance, createNonAuthApiInstance, createFakeApiInstance, ApiProvider } from '@opengeoweb/api';
 import { useFormContext } from 'react-hook-form';
-import { clamp } from 'lodash';
+import { isEqual, cloneDeep, clamp } from 'lodash';
 import { useAuthenticationContext } from '@opengeoweb/authentication';
 import { takeLatest, put, call as call$b, select, delay } from 'redux-saga/effects';
 import { isAxiosError as isAxiosError$1 } from 'axios';
@@ -232,7 +232,7 @@ const useCloseDrawDialog = ({
   const dispatch = useDispatch();
   const drawLayerId = getSingularDrawtoolDrawLayerId(mapId);
   const drawDialogActiveDrawModeId = useSelector(store => drawtoolSelectors.getActiveDrawModeId(store, drawingDialogType));
-  const drawDialogGeoJSON = useSelector(store => layerSelectors.getFeatureLayerGeoJSON(store, drawLayerId));
+  const featureLayerContainsGeoJSON = useSelector(store => layerSelectors.getHasFeatureLayerGeoJSON(store, drawLayerId));
   const dialogError = useSelector(store => uiSelectors.getDialogError(store, drawingDialogType));
   const isFormDirty = useSelector(store => getWarningFormDirty(store, drawingDialogType));
   const confirmDialog = useConfirmationDialog();
@@ -277,7 +277,7 @@ const useCloseDrawDialog = ({
       }));
     }
     // clear existing geoJSON
-    if (drawDialogGeoJSON) {
+    if (featureLayerContainsGeoJSON) {
       dispatch(mapStoreActions.layerChangeGeojson({
         layerId: drawLayerId,
         geojson: emptyGeoJSON
@@ -5358,145 +5358,88 @@ const useFormDirty = ({
   }, [isLoading, error, previousIsLoading, onSuccess]);
 };
 
+/* *
+ * 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 2024 - Koninklijk Nederlands Meteorologisch Instituut (KNMI)
+ * Copyright 2024 - Finnish Meteorological Institute (FMI)
+ * */
 const opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
-const getObjectName$1 = objectName => objectName || `${dateUtils.dateToString(new Date(), DATE_FORMAT_FNS, true)} UTC`;
 const SAVE_OBJECT_BUTTON = 'Save new object';
 const UPDATE_OBJECT_BUTTON = 'Update object';
 const INPUT_OBJECT = 'Object name';
 const INPUT_OPACITY = 'Opacity';
 const DRAW_EXIT_MODE_MESSAGE = 'press ESC to exit draw mode';
 const coordinatesEmptyMessage = 'An object drawing is required';
-const DrawingToolForm = ({
-  onSubmitForm,
-  isLoading: _isLoading = false,
-  error,
-  id: _id = '',
-  drawModes: _drawModes = [],
-  onChangeDrawMode: _onChangeDrawMode = () => {},
-  activeDrawModeId: _activeDrawModeId = '',
-  onDeactivateTool: _onDeactivateTool = () => {},
-  isInEditMode: _isInEditMode = false,
-  geoJSONProperties: _geoJSONProperties = {},
-  onChangeProperties: _onChangeProperties = () => {},
-  onChangeName: _onChangeName = () => {},
-  onFormDirty: _onFormDirty = () => {},
-  geoJSON
+const DrawingToolFormContentsNoMemo = ({
+  isLoading,
+  dialogError,
+  id,
+  drawModes,
+  onChangeDrawMode,
+  activeDrawModeId,
+  onKeyDown,
+  isInEditMode,
+  isDirty,
+  errors,
+  onChangeOpacity,
+  onBlurName,
+  opacity,
+  onSubmit
 }) => {
-  const {
-    handleSubmit,
-    setValue,
-    formState: {
-      errors,
-      isDirty
-    },
-    reset,
-    getValues
-  } = useFormContext();
-  useFormDirty({
-    isDirty,
-    isLoading: _isLoading,
-    error,
-    onFormDirty: _onFormDirty,
-    onSuccess: () => {
-      // reset form dirty and update defaultvalues and formvalues after successfull saving
-      reset(getValues());
-    }
-  });
-  React.useEffect(() => {
-    if (_activeDrawModeId) {
-      setValue('geoJSON', geoJSON, {
-        shouldDirty: true
-      });
-    }
-  }, [_activeDrawModeId, geoJSON, setValue]);
-  React.useEffect(() => {
-    // Only set form value if not in edit mode
-    if (!_isInEditMode && !_isLoading && geoJSON) {
-      setValue('geoJSON', geoJSON, {
-        shouldValidate: true
-      });
-    }
-  }, [_isLoading, _isInEditMode, geoJSON, setValue]);
-  const onSubmit = () => {
-    _onDeactivateTool();
-    handleSubmit(formValues => {
-      // remove unneeded properties
-      const {
-          opacity,
-          geoJSON
-        } = formValues,
-        allFormValues = __rest(formValues, ["opacity", "geoJSON"]);
-      // rewind geometry
-      const rewindedGeometry = rewindGeometry(geoJSON);
-      onSubmitForm(Object.assign(Object.assign({}, allFormValues), {
-        id: _id,
-        geoJSON: rewindedGeometry
-      }));
-    })();
-  };
   const hasErrors = Object.keys(errors).length > 0;
-  const opacity = React.useMemo(() => getGeoJSONPropertyValue('fill-opacity', _geoJSONProperties, _drawModes.find(mode => mode.value === 'POLYGON')), [_geoJSONProperties, _drawModes]);
-  const onChangeOpacity = event => {
-    const {
-      value
-    } = event.target;
-    const newOpacity = parseInt(value, 10) / 100;
-    const additionalStrokeOpacity = 0.8;
-    _onChangeProperties({
-      'fill-opacity': newOpacity,
-      'stroke-opacity': clamp(newOpacity + additionalStrokeOpacity, 0.01, 1)
-    });
-  };
-  const onKeyDown = event => {
-    if (event.key === 'Escape') {
-      _onDeactivateTool();
-    }
-  };
-  const onBlurName = event => {
-    _onChangeName(event.target.value);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       height: 'calc( 100% - 72px )',
       overflow: 'auto'
     }
-  }, error && ( /*#__PURE__*/React.createElement(Box, {
+  }, dialogError && ( /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       width: '100%'
     }
-  }, /*#__PURE__*/React.createElement(AlertBanner, {
-    title: error,
+  }, /*#__PURE__*/React__default.createElement(AlertBanner, {
+    title: dialogError,
     shouldClose: true
-  }))), /*#__PURE__*/React.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     "data-testid": "drawingToolForm",
     container: true,
     direction: "column",
     spacing: 1,
     padding: 2
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: "body2"
-  }, "Tools")), /*#__PURE__*/React.createElement(Grid, {
+  }, "Tools")), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, _drawModes.map(mode => ( /*#__PURE__*/React.createElement(CustomIconButton, {
+  }, drawModes.map(mode => ( /*#__PURE__*/React__default.createElement(CustomIconButton, {
     key: mode.drawModeId,
     variant: "tool",
     tooltipTitle: mode.title,
-    isSelected: mode.isSelectable && _activeDrawModeId === mode.drawModeId,
-    onClick: () => _onChangeDrawMode(mode),
+    isSelected: mode.isSelectable && activeDrawModeId === mode.drawModeId,
+    onClick: () => onChangeDrawMode(mode),
     sx: {
       marginRight: 1,
       marginBottom: 1
     },
     "data-testid": mode.drawModeId,
     onKeyDown: onKeyDown,
-    disabled: _isLoading,
+    disabled: isLoading,
     size: "medium"
-  }, getIcon(mode.selectionType)))), _isInEditMode && ( /*#__PURE__*/React.createElement(Typography, {
+  }, getIcon(mode.selectionType)))), isInEditMode && ( /*#__PURE__*/React__default.createElement(Typography, {
     component: "span",
     sx: {
       display: 'inline-block',
@@ -5505,53 +5448,53 @@ const DrawingToolForm = ({
       position: 'relative',
       fontSize: 14
     }
-  }, DRAW_EXIT_MODE_MESSAGE)), !!errors.geoJSON && isDirty && ( /*#__PURE__*/React.createElement(FormHelperText, {
+  }, DRAW_EXIT_MODE_MESSAGE)), !!errors.geoJSON && isDirty && ( /*#__PURE__*/React__default.createElement(FormHelperText, {
     error: true,
     variant: "filled",
     sx: {
       marginLeft: 0
     }
-  }, errors.geoJSON.message)), /*#__PURE__*/React.createElement(ReactHookFormHiddenInput, {
+  }, errors.geoJSON.message)), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "geoJSON",
     rules: {
       validate: {
         coordinatesNotEmpty: value => isValidGeoJsonCoordinates(value) || coordinatesEmptyMessage
       }
     }
-  }))), /*#__PURE__*/React.createElement(Grid, {
+  }))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     container: true
-  }, /*#__PURE__*/React.createElement(Grid, {
+  }, /*#__PURE__*/React__default.createElement(Grid, {
     item: true,
     xs: 12,
     sm: 6
-  }, /*#__PURE__*/React.createElement(ReactHookFormSelect, {
+  }, /*#__PURE__*/React__default.createElement(ReactHookFormSelect, {
     name: "opacity",
     label: INPUT_OPACITY,
     rules: {},
-    disabled: _isLoading,
+    disabled: isLoading,
     isReadOnly: false,
     "data-testid": "drawingToolForm-opacity",
     onChange: onChangeOpacity,
     autoFocus: true,
     value: opacity * 100
-  }, opacityOptions.map(opacity => ( /*#__PURE__*/React.createElement(MenuItem, {
+  }, opacityOptions.map(opacity => ( /*#__PURE__*/React__default.createElement(MenuItem, {
     value: opacity,
     key: opacity
-  }, opacity, " %")))))), /*#__PURE__*/React.createElement(Grid, {
+  }, opacity, " %")))))), /*#__PURE__*/React__default.createElement(Grid, {
     item: true
-  }, /*#__PURE__*/React.createElement(ReactHookFormTextField, {
+  }, /*#__PURE__*/React__default.createElement(ReactHookFormTextField, {
     name: "objectName",
     label: INPUT_OBJECT,
     rules: {
       required: true
     },
-    disabled: _isLoading,
+    disabled: isLoading,
     isReadOnly: false,
     onBlur: onBlurName
-  }), /*#__PURE__*/React.createElement(ReactHookFormHiddenInput, {
+  }), /*#__PURE__*/React__default.createElement(ReactHookFormHiddenInput, {
     name: "id"
-  })))), /*#__PURE__*/React.createElement(Box, {
+  })))), /*#__PURE__*/React__default.createElement(Box, {
     sx: {
       padding: '24px 10px 14px 10px',
       position: 'absolute',
@@ -5561,7 +5504,7 @@ const DrawingToolForm = ({
       boxShadow: '0 2px 4px 0 rgba(0, 0, 0, 0.5)',
       zIndex: 1
     }
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React__default.createElement(Button, {
     variant: "primary",
     onClick: onSubmit,
     sx: {
@@ -5570,8 +5513,118 @@ const DrawingToolForm = ({
       fontSize: '12px'
     },
     "data-testid": "saveDrawingFormButton",
-    disabled: _isLoading || hasErrors
-  }, _id !== '' ? UPDATE_OBJECT_BUTTON : SAVE_OBJECT_BUTTON)));
+    disabled: isLoading || hasErrors
+  }, id !== '' ? UPDATE_OBJECT_BUTTON : SAVE_OBJECT_BUTTON)));
+};
+const DrawingToolFormContents = /*#__PURE__*/React__default.memo(DrawingToolFormContentsNoMemo, isEqual);
+
+const getObjectName$1 = objectName => objectName || `${dateUtils.dateToString(new Date(), DATE_FORMAT_FNS, true)} UTC`;
+const DrawingToolForm = ({
+  onSubmitForm,
+  isLoading: _isLoading = false,
+  dialogError,
+  id: _id = '',
+  drawModes: _drawModes = [],
+  onChangeDrawMode: _onChangeDrawMode = () => {},
+  activeDrawModeId: _activeDrawModeId = '',
+  onDeactivateTool: _onDeactivateTool = () => {},
+  isInEditMode: _isInEditMode = false,
+  geoJSONProperties: _geoJSONProperties = {},
+  onChangeProperties: _onChangeProperties = () => {},
+  onChangeName: _onChangeName = () => {},
+  onFormDirty: _onFormDirty = () => {},
+  geoJSON
+}) => {
+  const {
+    handleSubmit,
+    setValue,
+    formState: {
+      errors,
+      isDirty
+    },
+    reset,
+    getValues
+  } = useFormContext();
+  // copy errors because react-hook-form mutates the object which breaks memoization
+  const currentErrors = cloneDeep(errors);
+  useFormDirty({
+    isDirty,
+    isLoading: _isLoading,
+    error: dialogError,
+    onFormDirty: _onFormDirty,
+    onSuccess: () => {
+      // reset form dirty and update defaultvalues and formvalues after successfull saving
+      reset(getValues());
+    }
+  });
+  React.useEffect(() => {
+    if (_activeDrawModeId) {
+      setValue('geoJSON', geoJSON, {
+        shouldDirty: true
+      });
+    }
+  }, [_activeDrawModeId, geoJSON, setValue]);
+  React.useEffect(() => {
+    // Only set form value if not in edit mode
+    if (!_isInEditMode && !_isLoading && geoJSON) {
+      setValue('geoJSON', geoJSON, {
+        shouldValidate: true
+      });
+    }
+  }, [_isLoading, _isInEditMode, geoJSON, setValue]);
+  const onSubmit = React.useCallback(() => {
+    _onDeactivateTool();
+    handleSubmit(formValues => {
+      // remove unneeded properties
+      const {
+          opacity,
+          geoJSON
+        } = formValues,
+        allFormValues = __rest(formValues, ["opacity", "geoJSON"]);
+      // rewind geometry
+      const rewindedGeometry = rewindGeometry(geoJSON);
+      onSubmitForm(Object.assign(Object.assign({}, allFormValues), {
+        id: _id,
+        geoJSON: rewindedGeometry
+      }));
+    })();
+  }, [handleSubmit, _id, _onDeactivateTool, onSubmitForm]);
+  const opacity = React.useMemo(() => getGeoJSONPropertyValue('fill-opacity', _geoJSONProperties, _drawModes.find(mode => mode.value === 'POLYGON')), [_geoJSONProperties, _drawModes]);
+  const onChangeOpacity = React.useCallback(event => {
+    const {
+      value
+    } = event.target;
+    const newOpacity = parseInt(value, 10) / 100;
+    const additionalStrokeOpacity = 0.8;
+    _onChangeProperties({
+      'fill-opacity': newOpacity,
+      'stroke-opacity': clamp(newOpacity + additionalStrokeOpacity, 0.01, 1)
+    });
+  }, [_onChangeProperties]);
+  const onKeyDown = React.useCallback(event => {
+    if (event.key === 'Escape') {
+      _onDeactivateTool();
+    }
+  }, [_onDeactivateTool]);
+  const onBlurName = React.useCallback(event => {
+    _onChangeName(event.target.value);
+  }, [_onChangeName]);
+  return /*#__PURE__*/React.createElement(DrawingToolFormContents, {
+    isLoading: _isLoading,
+    dialogError: dialogError,
+    id: _id,
+    drawModes: _drawModes,
+    activeDrawModeId: _activeDrawModeId,
+    onChangeDrawMode: _onChangeDrawMode,
+    onKeyDown: onKeyDown,
+    isInEditMode: _isInEditMode,
+    isDirty: isDirty,
+    errors: currentErrors,
+    onChangeOpacity: onChangeOpacity,
+    onBlurName: onBlurName,
+    opacity: opacity,
+    onSubmit: onSubmit
+  });
 };
 const Wrapper = props => {
   const {
@@ -5617,28 +5670,28 @@ const DrawingToolFormConnect = () => {
   const featureLayerGeoJSONProperties = useSelector(store => layerSelectors.getFeatureLayerGeoJSONProperties(store, drawTool === null || drawTool === void 0 ? void 0 : drawTool.geoJSONLayerId));
   const isDialogLoading = useSelector(store => uiSelectors.getDialogIsLoading(store, drawToolId));
   const dialogError = useSelector(store => uiSelectors.getDialogError(store, drawToolId));
-  const onSubmitForm = formValues => {
+  const onSubmitForm = React.useCallback(formValues => {
     dispatch(drawActions.submitDrawValues({
       geoJSON: formValues.geoJSON,
       objectName: formValues.objectName,
       scope: 'user',
       id: drawing === null || drawing === void 0 ? void 0 : drawing.id
     }));
-  };
-  const onChangeGeoJSONProperties = properties => {
+  }, [dispatch, drawing === null || drawing === void 0 ? void 0 : drawing.id]);
+  const onChangeGeoJSONProperties = React.useCallback(properties => {
     dispatch(layerActions.updateFeatureProperties({
       layerId: drawTool === null || drawTool === void 0 ? void 0 : drawTool.geoJSONLayerId,
       properties,
       origin: 'DrawingToolFormConnect'
     }));
-  };
-  const onChangeDrawMode = tool => {
+  }, [dispatch, drawTool === null || drawTool === void 0 ? void 0 : drawTool.geoJSONLayerId]);
+  const onChangeDrawMode = React.useCallback(tool => {
     dispatch(drawtoolActions.changeDrawToolMode({
       drawToolId,
       drawModeId: tool.drawModeId
     }));
-  };
-  const onDeactivateTool = () => {
+  }, [dispatch, drawToolId]);
+  const onDeactivateTool = React.useCallback(() => {
     dispatch(layerActions.toggleFeatureMode({
       layerId: drawTool === null || drawTool === void 0 ? void 0 : drawTool.geoJSONLayerId,
       isInEditMode: false,
@@ -5650,27 +5703,27 @@ const DrawingToolFormConnect = () => {
         drawModeId: drawTool === null || drawTool === void 0 ? void 0 : drawTool.activeDrawModeId
       }));
     }
-  };
-  const onChangeName = newName => {
+  }, [dispatch, drawTool === null || drawTool === void 0 ? void 0 : drawTool.activeDrawModeId, drawTool === null || drawTool === void 0 ? void 0 : drawTool.geoJSONLayerId, drawToolId]);
+  const onChangeName = React.useCallback(newName => {
     dispatch(drawActions.setDrawValues({
       objectName: newName,
       id: (drawing === null || drawing === void 0 ? void 0 : drawing.id) || '',
       drawingInstanceId: drawingDialogType,
       isFormDirty: drawing === null || drawing === void 0 ? void 0 : drawing.isFormDirty
     }));
-  };
-  const onChangeFormDirty = isFormDirty => {
+  }, [dispatch, drawing === null || drawing === void 0 ? void 0 : drawing.id, drawing === null || drawing === void 0 ? void 0 : drawing.isFormDirty]);
+  const onChangeFormDirty = React.useCallback(isFormDirty => {
     dispatch(drawActions.setFormDirty({
       drawingInstanceId: drawingDialogType,
       isFormDirty
     }));
-  };
+  }, [dispatch]);
   return /*#__PURE__*/React.createElement(Wrapper, {
     id: drawing === null || drawing === void 0 ? void 0 : drawing.id,
     onSubmitForm: onSubmitForm,
     objectName: drawing === null || drawing === void 0 ? void 0 : drawing.objectName,
     isLoading: isDialogLoading,
-    error: dialogError,
+    dialogError: dialogError,
     // new
     drawModes: drawTool === null || drawTool === void 0 ? void 0 : drawTool.drawModes,
     onChangeDrawMode: onChangeDrawMode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/warnings",
-  "version": "9.12.0",
+  "version": "9.13.0",
   "description": "GeoWeb warinings library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

package/src/lib/components/DrawingToolForm/DrawingToolForm.d.ts

@@ -1,24 +1,14 @@
 import * as React from 'react';
 import { DrawMode } from '@opengeoweb/webmap-react';
 import { FeatureCollection, GeoJsonProperties, Geometry } from 'geojson';
+import { DrawingToolFormValues } from './DrawingToolFormContents';
 export declare const opacityOptions: number[];
 export declare const getObjectName: (objectName: string) => string;
-export declare const SAVE_OBJECT_BUTTON = "Save new object";
-export declare const UPDATE_OBJECT_BUTTON = "Update object";
-export declare const INPUT_OBJECT = "Object name";
-export declare const INPUT_OPACITY = "Opacity";
-export declare const DRAW_EXIT_MODE_MESSAGE = "press ESC to exit draw mode";
-export declare const coordinatesEmptyMessage = "An object drawing is required";
-export interface DrawingToolFormValues {
-    objectName: string;
-    geoJSON: GeoJSON.FeatureCollection;
-    id: string;
-}
 export interface DrawingToolFormComponentProps {
     onSubmitForm: (formValues: DrawingToolFormValues) => void;
     objectName?: string;
     isLoading?: boolean;
-    error?: string;
+    dialogError?: string;
     id?: string;
     drawModes: DrawMode[];
     onChangeDrawMode: (newMode: DrawMode) => void;

package/src/lib/components/DrawingToolForm/DrawingToolFormContents.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { SelectChangeEvent } from '@mui/material';
+import { DrawMode } from '@opengeoweb/webmap-react';
+import { FieldErrors, FieldValues } from 'react-hook-form';
+export declare const opacityOptions: number[];
+export declare const SAVE_OBJECT_BUTTON = "Save new object";
+export declare const UPDATE_OBJECT_BUTTON = "Update object";
+export declare const INPUT_OBJECT = "Object name";
+export declare const INPUT_OPACITY = "Opacity";
+export declare const DRAW_EXIT_MODE_MESSAGE = "press ESC to exit draw mode";
+export declare const coordinatesEmptyMessage = "An object drawing is required";
+export interface DrawingToolFormValues {
+    objectName: string;
+    geoJSON: GeoJSON.FeatureCollection;
+    id: string;
+}
+export interface DrawingToolFormContentsProps {
+    isLoading?: boolean;
+    dialogError?: string;
+    id?: string;
+    drawModes: DrawMode[];
+    activeDrawModeId: string;
+    opacity: number;
+    isInEditMode: boolean;
+    isDirty: boolean;
+    errors: FieldErrors<FieldValues>;
+    onChangeDrawMode: (newMode: DrawMode) => void;
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    onChangeOpacity: (event: SelectChangeEvent) => void;
+    onBlurName: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onSubmit: () => void;
+}
+export declare const DrawingToolFormContentsNoMemo: React.FC<DrawingToolFormContentsProps>;
+export declare const DrawingToolFormContents: React.NamedExoticComponent<DrawingToolFormContentsProps>;