@opengeoweb/form-fields 14.0.1 → 14.2.1

package/index.esm.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { FormControl, FormHelperText, InputLabel, Select, RadioGroup, TextField, InputAdornment } from '@mui/material';
-import { useFormContext, useController, useForm, FormProvider } from 'react-hook-form';
+import { useFormContext, useController, useForm, FormProvider, Controller } from 'react-hook-form';
 import { isEqual } from 'lodash';
 import { dateUtils } from '@opengeoweb/shared';
 import 'i18next';
 import { useTranslation } from 'react-i18next';
-import React from 'react';
+import React, { useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers';
 import { CalendarToday } from '@opengeoweb/theme';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
@@ -482,8 +482,7 @@ var ReactHookFormSelect = function ReactHookFormSelect(_ref) {
         // default props
         _onChange(changeEvent, child);
       },
-      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      value: value || '',
+      value: value != null ? value : '',
       variant: "filled"
     }, otherProps, {
       children: children
@@ -678,12 +677,10 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_ref) {
     var before = inputElement.value.slice(0, inputElement.selectionStart);
     var after = inputElement.value.slice(inputElement.selectionEnd);
     var newValue = before + clipboardText + after;
-    // eslint-disable-next-line no-useless-escape
-    if (inputMode === 'numeric' && !/^\-?[0-9]+$/.exec(newValue)) {
+    if (inputMode === 'numeric' && !/^-?[0-9]+$/.exec(newValue)) {
       event.preventDefault();
     }
-    // eslint-disable-next-line no-useless-escape
-    if (inputMode === 'decimal' && !/^\-?[0-9]*(\.[0-9]+)?$/.exec(newValue)) {
+    if (inputMode === 'decimal' && !/^-?[0-9]*(.[0-9]+)?$/.exec(newValue)) {
       event.preventDefault();
     }
   };
@@ -702,9 +699,50 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_ref) {
       event.preventDefault();
     }
   };
-  var _React$useState = React.useState(value === null || isNaN(value) ? '' : value),
-    displayValue = _React$useState[0],
-    setDisplayValue = _React$useState[1];
+  // Transform number value to string for display, following React Hook Form transform pattern
+  var formatValueForDisplay = React.useCallback(function (numValue) {
+    if (numValue === null || numValue === undefined || isNaN(numValue)) {
+      return '';
+    }
+    return String(numValue);
+  }, []);
+  // Local state to preserve string precision during editing (e.g., trailing zeros), only sync from form value when not actively editing
+  var _React$useState = React.useState(null),
+    localValue = _React$useState[0],
+    setLocalValue = _React$useState[1];
+  var isFocusedRef = React.useRef(false);
+  var previousValueRef = React.useRef(value);
+  var lastSetValueRef = React.useRef(null);
+  // Sync local value from form value when value changes externally, but only when not actively editing and the change wasn't from our own update
+  React.useEffect(function () {
+    if (!isFocusedRef.current && value !== previousValueRef.current) {
+      var wasOurUpdate = lastSetValueRef.current !== null && lastSetValueRef.current === value;
+      if (!wasOurUpdate) {
+        setLocalValue(null); // Clear local value to use form value
+      } else if (localValue !== null) {
+        // It was our update, but check if localValue still represents this number accurately
+        var numFromLocal = convertNumericInputValue(localValue, inputMode);
+        if (numFromLocal !== value) {
+          // Local value no longer matches form value, clear it
+          setLocalValue(null);
+        }
+      }
+      previousValueRef.current = value;
+    }
+  }, [value, localValue, inputMode]);
+  // Compute display value: prefer local value if it has more precision than number representation
+  var displayValue = React.useMemo(function () {
+    // Always use local value if it exists and represents the same number as form value
+    if (localValue !== null) {
+      var numFromLocal = convertNumericInputValue(localValue, inputMode);
+      var valuesMatch = numFromLocal === value || numFromLocal === null && value === null || numFromLocal !== null && typeof numFromLocal === 'number' && typeof value === 'number' && isNaN(numFromLocal) && isNaN(value);
+      if (valuesMatch) {
+        return localValue;
+      }
+    }
+    // When no local value or it doesn't match, use formatted form value
+    return formatValueForDisplay(value);
+  }, [value, localValue, inputMode, formatValueForDisplay]);
   return jsx(ReactHookFormFormControl, {
     className: className,
     disabled: disabled,
@@ -719,12 +757,30 @@ var ReactHookFormNumberField = function ReactHookFormNumberField(_ref) {
       inputRef: ref,
       label: label,
       name: name,
+      onBlur: function onBlur(evt) {
+        isFocusedRef.current = false;
+        // Keep local value on blur to preserve precision (e.g., trailing zeros), it will be cleared only if form value changes externally
+        previousValueRef.current = value;
+        otherProps.onBlur == null || otherProps.onBlur(evt);
+      },
       onChange: function onChange(evt) {
-        var value = evt.target.value;
-        setDisplayValue(value);
-        onChangeField(convertNumericInputValue(value, inputMode));
+        var inputValue = evt.target.value;
+        // Update local value to preserve string precision during editing
+        setLocalValue(inputValue);
+        // Convert to number for form value
+        var numericValue = convertNumericInputValue(inputValue, inputMode);
+        lastSetValueRef.current = numericValue;
+        onChangeField(numericValue);
         _onChange(null);
       },
+      onFocus: function onFocus(evt) {
+        isFocusedRef.current = true;
+        // Initialize local value with current display value when focusing
+        if (localValue === null) {
+          setLocalValue(formatValueForDisplay(value));
+        }
+        otherProps.onFocus == null || otherProps.onFocus(evt);
+      },
       onKeyDown: onKeyDown,
       size: size,
       type: "text",
@@ -940,6 +996,131 @@ var ReactHookFormHiddenInput = function ReactHookFormHiddenInput(_ref) {
   }, props)) : null;
 };
 
+function decimalToDegreesMinutes(value) {
+  var sign = value < 0 ? '-' : '';
+  var abs = Math.abs(value);
+  var degrees = Math.floor(abs);
+  var minutes = Math.round((abs - degrees) * 60);
+  // normalize rounding overflow (e.g. 59.9 min → +1 degree)
+  if (minutes === 60) {
+    abs += 1;
+    return decimalToDegreesMinutes(sign === '-' ? -abs : abs);
+  }
+  return "" + sign + degrees + "\xB0" + minutes.toString().padStart(2, '0') + "\u2032";
+}
+function degreesMinutesToDecimal(input) {
+  var raw = input.toString().trim();
+  var negative = raw.startsWith('-');
+  var digits = raw.replace(/[^0-9]/g, '');
+  var sign = negative ? -1 : 1;
+  if (digits.length <= 2) {
+    var _deg = parseInt(digits || '0', 10);
+    return sign * _deg;
+  }
+  // split into degrees + minutes
+  var deg = parseInt(digits.slice(0, digits.length - 2), 10);
+  var min = parseInt(digits.slice(-2), 10);
+  // normalize minutes overflow (e.g. 65 → 1°05′)
+  var extraDeg = Math.floor(min / 60);
+  min %= 60;
+  return sign * (deg + extraDeg + min / 60);
+}
+var DegreesMinutesField = function DegreesMinutesField(_ref) {
+  var name = _ref.name,
+    label = _ref.label,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$isReadOnly = _ref.isReadOnly,
+    isReadOnly = _ref$isReadOnly === void 0 ? false : _ref$isReadOnly,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    _ref$isLongitude = _ref.isLongitude,
+    isLongitude = _ref$isLongitude === void 0 ? false : _ref$isLongitude,
+    t = _ref.t;
+  var _useFormContext = useFormContext(),
+    control = _useFormContext.control;
+  var _useState = useState(null),
+    localInput = _useState[0],
+    setLocalInput = _useState[1];
+  var _useState2 = useState(false),
+    isEditing = _useState2[0],
+    setIsEditing = _useState2[1];
+  return jsx(Controller, {
+    control: control,
+    name: name,
+    render: function render(_ref2) {
+      var _fieldState$error;
+      var field = _ref2.field,
+        fieldState = _ref2.fieldState;
+      var value = field.value,
+        onChange = field.onChange;
+      var handleChange = function handleChange(e) {
+        setLocalInput(e.target.value);
+        setIsEditing(true);
+      };
+      var handleBlur = function handleBlur() {
+        if (localInput != null && localInput !== '-' && localInput !== '') {
+          var input = localInput.replace(/[^\d-]/g, '');
+          var negative = input.startsWith('-');
+          var digits = input.replace(/[^0-9]/g, '');
+          // Latitude: 4 digits (DDMM), Longitude: 5 (DDDMM)
+          var maxLen = isLongitude ? 5 : 4;
+          if (digits.length > maxLen) {
+            digits = digits.slice(0, maxLen);
+          }
+          var normalized = negative ? "-" + digits : digits;
+          try {
+            var decimal = degreesMinutesToDecimal(normalized);
+            onChange(decimal);
+          } catch (_unused) {
+            // Invalid, do not update form value
+          }
+        }
+        setIsEditing(false);
+        setLocalInput(null);
+      };
+      var displayValue;
+      if (isEditing) {
+        displayValue = localInput != null ? localInput : '';
+      } else if (value != null) {
+        displayValue = decimalToDegreesMinutes(value);
+      } else {
+        displayValue = '';
+      }
+      return jsx(TextField, {
+        disabled: disabled,
+        error: !!fieldState.error,
+        helperText: (_fieldState$error = fieldState.error) == null ? void 0 : _fieldState$error.message,
+        label: label,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        placeholder: isLongitude ? 'DDD°MM′' : 'DD°MM′',
+        size: size,
+        slotProps: {
+          input: {
+            readOnly: isReadOnly
+          }
+        },
+        value: displayValue
+      });
+    },
+    rules: {
+      validate: function validate(value) {
+        if (value == null || isNaN(value)) {
+          return true;
+        } // let empty pass
+        if (!isLongitude && (value < -90 || value > 90)) {
+          return t('form-fields-error-latitude-minutes');
+        }
+        if (isLongitude && (value < -180 || value > 180)) {
+          return t('form-fields-error-longitude-minutes');
+        }
+        return true;
+      }
+    }
+  });
+};
+
 // hidden input helpers, should not be part of send formdata
 var HIDDEN_INPUT_HELPER_IS_DRAFT = 'IS_DRAFT';
 var useDraftFormHelpers = function useDraftFormHelpers(isDefaultDraft) {
@@ -954,8 +1135,7 @@ var useDraftFormHelpers = function useDraftFormHelpers(isDefaultDraft) {
     setValue(HIDDEN_INPUT_HELPER_IS_DRAFT, isDefaultDraft, {
       shouldDirty: false
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isDefaultDraft, setValue]);
   var isDraft = function isDraft() {
     return getValues(HIDDEN_INPUT_HELPER_IS_DRAFT) === true;
   };
@@ -983,4 +1163,4 @@ var useDraftFormHelpers = function useDraftFormHelpers(isDefaultDraft) {
   };
 };
 
-export { FORM_FIELDS_NAMESPACE, HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, countIntersectionPoints, defaultFormOptions, errorMessages, formFieldsTranslations, getDateValue, getDeepProperty, getFormattedValueForDatePicker, hasIntersectionWithFIR, hasMulitpleIntersections, hasValidGeometry, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore, useDraftFormHelpers };
+export { DegreesMinutesField, FORM_FIELDS_NAMESPACE, HIDDEN_INPUT_HELPER_IS_DRAFT, ReactHookKeyboardDateTimePicker as ReactHookFormDateTime, ReactHookFormFormControl, ReactHookFormHiddenInput, ReactHookFormNumberField, ReactHookFormProviderWrapper as ReactHookFormProvider, ReactHookFormRadioGroup, ReactHookFormSelect, ReactHookFormTextField, countIntersectionPoints, defaultFormOptions, errorMessages, formFieldsTranslations, getDateValue, getDeepProperty, getFormattedValueForDatePicker, hasIntersectionWithFIR, hasMulitpleIntersections, hasValidGeometry, isEmpty, isGeometryDirty, isInteger, isLatitude, isLongitude, isMaximumOneDrawing, isNonOrBothCoordinates, isValidGeoJsonCoordinates, isValidMax, isValidMin, isXHoursAfter, isXHoursBefore, useDraftFormHelpers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/form-fields",
-  "version": "14.0.1",
+  "version": "14.2.1",
   "description": "GeoWeb form-fields library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,11 +8,11 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/theme": "14.0.1",
+    "@opengeoweb/theme": "14.2.1",
     "react-hook-form": "^7.50.1",
     "@mui/x-date-pickers": "^8.11.2",
     "lodash": "^4.17.21",
-    "@opengeoweb/shared": "14.0.1",
+    "@opengeoweb/shared": "14.2.1",
     "react-i18next": "^15.1.1",
     "@mui/material": "^7.0.1",
     "i18next": "^25.0.1",

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

@@ -0,0 +1,15 @@
+import type { TFunction } from 'i18next';
+import React from 'react';
+export declare function decimalToDegreesMinutes(value: number): string;
+export declare function degreesMinutesToDecimal(input: string | number): number;
+interface Props {
+    name: string;
+    label: string;
+    disabled?: boolean;
+    isReadOnly?: boolean;
+    size?: 'small' | 'medium';
+    isLongitude?: boolean;
+    t: TFunction;
+}
+export declare const DegreesMinutesField: React.FC<Props>;
+export {};

package/src/lib/components/DegreesMinutesField.spec.d.ts

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

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

@@ -7,6 +7,7 @@ export { default as ReactHookFormDateTime } from './ReactHookFormDateTime';
 export * from './ReactHookFormDateTime';
 export { default as ReactHookFormProvider } from './ReactHookFormProvider';
 export { default as ReactHookFormHiddenInput } from './ReactHookFormHiddenInput';
+export { DegreesMinutesField } from './DegreesMinutesField';
 export { defaultFormOptions } from './ReactHookFormProvider';
 export { errorMessages, isMaximumOneDrawing, hasValidGeometry, isGeometryDirty, isValidGeoJsonCoordinates, hasIntersectionWithFIR, countIntersectionPoints, isValidMax, isValidMin, isInteger, hasMulitpleIntersections, isLatitude, isLongitude, isNonOrBothCoordinates, isEmpty, isXHoursAfter, isXHoursBefore, } from './utils';
 export { getDeepProperty } from './formUtils';