@open-pioneer/feature-editing 1.3.0-dev.20260512095810 → 1.3.0

package/CHANGELOG.md

@@ -1,7 +1,11 @@
 # @open-pioneer/feature-editing
 
-## 1.3.0-dev.20260512095810
+## 1.3.0
 
 ### Minor Changes
 
 - d3e137d: Initial release
+
+### Patch Changes
+
+- 0704cd6: Use `classnames` from `@open-pioneer/react-utils` instead of `classnames` package.

package/api/editor/context.d.ts

@@ -4,18 +4,17 @@ import type { Feature } from "ol";
 import type { ModificationStep } from "../model/EditingStep";
 import type { FeatureTemplate } from "../model/FeatureTemplate";
 /**
- * React hook for accessing the property form context.
+ * React hook for accessing the property form context within a custom form.
  *
- * Provides access to the {@link PropertyFormContext} instance, which contains the current feature
+ * Provides access to the {@link CustomFormContext} instance, which contains the current feature
  * being edited and methods to read and update its properties. This hook must be called from within
- * a component that is rendered inside a property form (typically in a custom form rendered by
- * {@link DynamicFormTemplate}).
+ * a component that is rendered inside a custom property form (see {@link DynamicFormTemplate}).
  *
  * The context also allows controlling the form's validity by setting the `isValid` property,
  * which determines whether the save button is enabled.
  *
- * @returns The current {@link PropertyFormContext} instance.
- * @throws Error if called outside of a property form context (e.g., when no feature is being
+ * @returns The current {@link CustomFormContext} instance.
+ * @throws Error if called outside of a custom property form context (e.g., when no feature is being
  * edited).
  *
  * @example
@@ -23,37 +22,36 @@ import type { FeatureTemplate } from "../model/FeatureTemplate";
  * import { useReactiveSnapshot, DISPATCH_SYNC } from "@open-pioneer/reactivity";
  *
  * function CustomForm() {
- *     const context = usePropertyFormContext();
- *     const name = useReactiveSnapshot(() => context.properties.get("name") ?? "", [context], DISPATCH_SYNC);
+ *     const context = useCustomFormContext();
+ *     const name = useReactiveSnapshot(
+ *         () => (context.properties.get("name") as string) ?? "",
+ *         [context],
+ *         DISPATCH_SYNC
+ *     );
  *
  *     useEffect(() => {
  *         context.isValid = name.length >= 1;
  *     }, [context, name]);
  *
- *     return (
- *         <input
- *             value={name}
- *             onChange={(e) => context.properties.set("name", e.target.value)}
- *         />
- *     );
+ *     return <Input value={name} onChange={(e) => context.properties.set("name", e.target.value)} />;
  * }
  * ```
  *
  * @group Editor
  */
-export declare const usePropertyFormContext: () => PropertyFormContext;
+export declare const useCustomFormContext: () => CustomFormContext;
 /**
  * Context object providing access to feature properties and editing state during form editing.
  *
- * This class manages the state of a feature being edited, including its properties, validation
+ * The context manages the state of a feature being edited, including its properties, validation
  * status, and associated metadata. It provides reactive property management through a
  * {@link ReactiveMap}, allowing components to automatically re-render when properties change.
  *
- * Access this context in custom forms using the {@link usePropertyFormContext} hook.
+ * Access this context in custom forms using the {@link useCustomFormContext} hook.
  *
  * @group Editor
  */
-export interface PropertyFormContext {
+export interface CustomFormContext {
     /**
      * The OpenLayers feature being edited.
      *

package/api/editor/context.js

@@ -1,6 +1,6 @@
-import { usePropertyFormContext as usePropertyFormContext$1 } from '../../implementation/context/usePropertyFormContext.js';
+import { useCustomFormContext as useCustomFormContext$1 } from '../../implementation/context/usePropertyFormContext.js';
 
-const usePropertyFormContext = usePropertyFormContext$1;
+const useCustomFormContext = useCustomFormContext$1;
 
-export { usePropertyFormContext };
+export { useCustomFormContext };
 //# sourceMappingURL=context.js.map

package/api/editor/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["context.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport type { ReactiveMap } from \"@conterra/reactivity-core\";\nimport type { Layer } from \"@open-pioneer/map\";\nimport type { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport type { Feature } from \"ol\";\nimport { usePropertyFormContext as usePropertyFormContextImpl } from \"../../implementation/context/usePropertyFormContext\";\nimport type { CreationStep, ModificationStep, UpdateStep } from \"../model/EditingStep\";\nimport type { DynamicFormTemplate, FeatureTemplate } from \"../model/FeatureTemplate\";\n\n/**\n * React hook for accessing the property form context.\n *\n * Provides access to the {@link PropertyFormContext} instance, which contains the current feature\n * being edited and methods to read and update its properties. This hook must be called from within\n * a component that is rendered inside a property form (typically in a custom form rendered by\n * {@link DynamicFormTemplate}).\n *\n * The context also allows controlling the form's validity by setting the `isValid` property,\n * which determines whether the save button is enabled.\n *\n * @returns The current {@link PropertyFormContext} instance.\n * @throws Error if called outside of a property form context (e.g., when no feature is being\n * edited).\n *\n * @example\n * ```tsx\n * import { useReactiveSnapshot, DISPATCH_SYNC } from \"@open-pioneer/reactivity\";\n *\n * function CustomForm() {\n *     const context = usePropertyFormContext();\n *     const name = useReactiveSnapshot(() => context.properties.get(\"name\") ?? \"\", [context], DISPATCH_SYNC);\n *\n *     useEffect(() => {\n *         context.isValid = name.length >= 1;\n *     }, [context, name]);\n *\n *     return (\n *         <input\n *             value={name}\n *             onChange={(e) => context.properties.set(\"name\", e.target.value)}\n *         />\n *     );\n * }\n * ```\n *\n * @group Editor\n */\nexport const usePropertyFormContext: () => PropertyFormContext = usePropertyFormContextImpl;\n\n/**\n * Context object providing access to feature properties and editing state during form editing.\n *\n * This class manages the state of a feature being edited, including its properties, validation\n * status, and associated metadata. It provides reactive property management through a\n * {@link ReactiveMap}, allowing components to automatically re-render when properties change.\n *\n * Access this context in custom forms using the {@link usePropertyFormContext} hook.\n *\n * @group Editor\n */\nexport interface PropertyFormContext {\n    /**\n     * The OpenLayers feature being edited.\n     *\n     * Provides direct access to the feature object, which includes its geometry and properties.\n     */\n    readonly feature: Feature;\n\n    /**\n     * Reactive map of feature properties.\n     *\n     * Provides reactive access to all feature properties (excluding geometry). Use `get()` to read\n     * property values and `set()` to update them. Components can use {@link useReactiveSnapshot}\n     * to automatically re-render when values change.\n     *\n     * @example\n     * ```ts\n     * const name = context.properties.get(\"name\");\n     * context.properties.set(\"name\", \"New Name\");\n     * ```\n     */\n    readonly properties: ReactiveMap<string, unknown>;\n\n    /**\n     * Returns all feature properties as a plain JavaScript object.\n     *\n     * Converts the reactive properties map to a standard object with string keys and unknown\n     * values. Useful when you need to pass properties to functions that expect plain objects.\n     *\n     * Note that a new object is created on every change.\n     * Prefer to use fine grained accesses to {@link properties} if performance matters.\n     *\n     * @returns A plain object containing all feature properties (excluding geometry).\n     */\n    readonly getPropertiesAsObject: () => Record<string, unknown>;\n\n    /**\n     * The current editing step containing the feature and associated metadata.\n     *\n     * Provides access to the complete editing step, which can be either a {@link CreationStep}\n     * or {@link UpdateStep}.\n     */\n    readonly editingStep: ModificationStep;\n\n    /**\n     * The current editing mode.\n     *\n     * Returns `\"create\"` when creating a new feature, or `\"update\"` when editing an existing\n     * feature. Use this to conditionally render different UI or apply different logic based on the\n     * editing mode.\n     */\n    readonly mode: Mode;\n\n    /**\n     * The feature template used to create the feature, if in creation mode.\n     *\n     * Returns the {@link FeatureTemplate} when creating a new feature (`mode === \"create\"`), or\n     * `undefined` when editing an existing feature (`mode === \"update\"`).\n     */\n    readonly template: FeatureTemplate | undefined;\n\n    /**\n     * The layer containing the feature being edited, if in update mode.\n     *\n     * Returns the {@link Layer} when editing an existing feature (`mode === \"update\"`), or\n     * `undefined` when creating a new feature (`mode === \"create\"`) or if the layer is not\n     * available.\n     */\n    readonly layer: Layer | undefined;\n\n    /**\n     * Whether the form is currently valid.\n     *\n     * Controls the enabled state of the save button in the property editor. Set this to `true`\n     * when the form passes validation, or `false` when there are validation errors. For\n     * declarative forms, this is managed automatically based on field validation rules.\n     */\n    isValid: boolean;\n}\n\n/**\n * The editing mode for a feature.\n *\n * - `\"create\"`: Creating a new feature\n * - `\"update\"`: Editing an existing feature\n *\n * @group Editor\n */\nexport type Mode = \"create\" | \"update\";\n"],"names":["usePropertyFormContextImpl"],"mappings":";;AAgDO,MAAM,sBAAA,GAAoDA;;;;"}
+{"version":3,"file":"context.js","sources":["context.ts"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport type { ReactiveMap } from \"@conterra/reactivity-core\";\nimport type { Layer } from \"@open-pioneer/map\";\nimport type { useReactiveSnapshot } from \"@open-pioneer/reactivity\";\nimport type { Feature } from \"ol\";\nimport { useCustomFormContext as useCustomFormContextImpl } from \"../../implementation/context/usePropertyFormContext\";\nimport type { CreationStep, ModificationStep, UpdateStep } from \"../model/EditingStep\";\nimport type { DynamicFormTemplate, FeatureTemplate } from \"../model/FeatureTemplate\";\n\n/**\n * React hook for accessing the property form context within a custom form.\n *\n * Provides access to the {@link CustomFormContext} instance, which contains the current feature\n * being edited and methods to read and update its properties. This hook must be called from within\n * a component that is rendered inside a custom property form (see {@link DynamicFormTemplate}).\n *\n * The context also allows controlling the form's validity by setting the `isValid` property,\n * which determines whether the save button is enabled.\n *\n * @returns The current {@link CustomFormContext} instance.\n * @throws Error if called outside of a custom property form context (e.g., when no feature is being\n * edited).\n *\n * @example\n * ```tsx\n * import { useReactiveSnapshot, DISPATCH_SYNC } from \"@open-pioneer/reactivity\";\n *\n * function CustomForm() {\n *     const context = useCustomFormContext();\n *     const name = useReactiveSnapshot(\n *         () => (context.properties.get(\"name\") as string) ?? \"\",\n *         [context],\n *         DISPATCH_SYNC\n *     );\n *\n *     useEffect(() => {\n *         context.isValid = name.length >= 1;\n *     }, [context, name]);\n *\n *     return <Input value={name} onChange={(e) => context.properties.set(\"name\", e.target.value)} />;\n * }\n * ```\n *\n * @group Editor\n */\nexport const useCustomFormContext: () => CustomFormContext = useCustomFormContextImpl;\n\n/**\n * Context object providing access to feature properties and editing state during form editing.\n *\n * The context manages the state of a feature being edited, including its properties, validation\n * status, and associated metadata. It provides reactive property management through a\n * {@link ReactiveMap}, allowing components to automatically re-render when properties change.\n *\n * Access this context in custom forms using the {@link useCustomFormContext} hook.\n *\n * @group Editor\n */\nexport interface CustomFormContext {\n    /**\n     * The OpenLayers feature being edited.\n     *\n     * Provides direct access to the feature object, which includes its geometry and properties.\n     */\n    readonly feature: Feature;\n\n    /**\n     * Reactive map of feature properties.\n     *\n     * Provides reactive access to all feature properties (excluding geometry). Use `get()` to read\n     * property values and `set()` to update them. Components can use {@link useReactiveSnapshot}\n     * to automatically re-render when values change.\n     *\n     * @example\n     * ```ts\n     * const name = context.properties.get(\"name\");\n     * context.properties.set(\"name\", \"New Name\");\n     * ```\n     */\n    readonly properties: ReactiveMap<string, unknown>;\n\n    /**\n     * Returns all feature properties as a plain JavaScript object.\n     *\n     * Converts the reactive properties map to a standard object with string keys and unknown\n     * values. Useful when you need to pass properties to functions that expect plain objects.\n     *\n     * Note that a new object is created on every change.\n     * Prefer to use fine grained accesses to {@link properties} if performance matters.\n     *\n     * @returns A plain object containing all feature properties (excluding geometry).\n     */\n    readonly getPropertiesAsObject: () => Record<string, unknown>;\n\n    /**\n     * The current editing step containing the feature and associated metadata.\n     *\n     * Provides access to the complete editing step, which can be either a {@link CreationStep}\n     * or {@link UpdateStep}.\n     */\n    readonly editingStep: ModificationStep;\n\n    /**\n     * The current editing mode.\n     *\n     * Returns `\"create\"` when creating a new feature, or `\"update\"` when editing an existing\n     * feature. Use this to conditionally render different UI or apply different logic based on the\n     * editing mode.\n     */\n    readonly mode: Mode;\n\n    /**\n     * The feature template used to create the feature, if in creation mode.\n     *\n     * Returns the {@link FeatureTemplate} when creating a new feature (`mode === \"create\"`), or\n     * `undefined` when editing an existing feature (`mode === \"update\"`).\n     */\n    readonly template: FeatureTemplate | undefined;\n\n    /**\n     * The layer containing the feature being edited, if in update mode.\n     *\n     * Returns the {@link Layer} when editing an existing feature (`mode === \"update\"`), or\n     * `undefined` when creating a new feature (`mode === \"create\"`) or if the layer is not\n     * available.\n     */\n    readonly layer: Layer | undefined;\n\n    /**\n     * Whether the form is currently valid.\n     *\n     * Controls the enabled state of the save button in the property editor. Set this to `true`\n     * when the form passes validation, or `false` when there are validation errors. For\n     * declarative forms, this is managed automatically based on field validation rules.\n     */\n    isValid: boolean;\n}\n\n/**\n * The editing mode for a feature.\n *\n * - `\"create\"`: Creating a new feature\n * - `\"update\"`: Editing an existing feature\n *\n * @group Editor\n */\nexport type Mode = \"create\" | \"update\";\n"],"names":["useCustomFormContextImpl"],"mappings":";;AA8CO,MAAM,oBAAA,GAAgDA;;;;"}

package/api/fields/standardFieldConfigs.d.ts

@@ -1,3 +1,4 @@
+import { type FormatNumberOptions } from "@formatjs/intl";
 import type { BaseFieldConfig } from "./BaseFieldConfig";
 /**
  * Configuration for a checkbox field.
@@ -87,7 +88,7 @@ export interface NumberFieldConfig extends BaseFieldConfig {
      * `maximumFractionDigits`, `style`, `currency`, etc. Use this to control how the number
      * is displayed to the user (e.g., as currency, percentage, or with specific decimal places).
      */
-    readonly formatOptions?: Intl.NumberFormatOptions;
+    readonly formatOptions?: FormatNumberOptions;
     /**
      * Increment/decrement step size when using stepper buttons.
      *

package/api/model/FeatureTemplate.d.ts

@@ -95,7 +95,7 @@ export interface DeclarativeFormTemplate {
  * component. Use this when you need advanced form layouts, custom validation logic, or
  * specialized UI components that cannot be expressed through declarative field configurations.
  *
- * The render function should use {@link PropertyFormContext} to read and update feature properties.
+ * The render function should use {@link CustomFormContext} to read and update feature properties.
  *
  * @group Model
  */
@@ -113,7 +113,7 @@ export interface DynamicFormTemplate {
      * Function that renders the custom form content.
      *
      * Should return a React element representing the form UI. The function can use React hooks
-     * and {@link PropertyFormContext} to interact with feature properties.
+     * and {@link CustomFormContext} to interact with feature properties.
      */
     readonly renderForm: () => ReactNode;
 }

package/i18n/de.yaml

@@ -3,6 +3,7 @@ messages:
     editFeatureHeading: Geoobjekt bearbeiten
     createFeatureHeading: Geoobjekt erstellen
     selectButtonTitle: Auswählen
+    selectButtonActiveTitle: Auswählen beenden
     finishButtonTooltip: Zeichnen beenden
     resetButtonTooltip: Zeichnung zurücksetzen
     undoButtonTooltip: Rückgängig machen
@@ -10,14 +11,26 @@ messages:
   propertyEditor:
     defaultEditHeading: Geoobjekt bearbeiten
     defaultCreateHeading: Geoobjekt erstellen
+    requiredFieldHint: "Pflichtfeld"
     saveButtonTitle: Speichern
     cancelButtonTitle: Abbrechen
     deleteButtonTooltip: Geoobjekt löschen
+
+    errors:
+      minAndMax: Der Wert muss zwischen {min} und {max} liegen.
+      minOnly: Der Wert muss mindestens {min} sein.
+      maxOnly: Der Wert darf höchstens {max} sein.
+
   deleteConfirmationDialog:
     title: Geoobjekt löschen
     message: Sind Sie sicher, dass Sie dieses Geoobjekt löschen möchten?
     deleteButtonTitle: Geoobjekt löschen
     cancelButtonTitle: Abbrechen
+  cancelConfirmationDialog:
+    title: Änderungen verwerfen
+    message: Sind Sie sicher, dass Sie Ihre Änderungen verwerfen möchten?
+    confirmCancelButtonTitle: Änderungen verwerfen
+    abortCancelButtonTitle: Weiter bearbeiten
   notifier:
     creationSuccess: Geoobjekt erstellt
     creationFailure: Das Geoobjekt konnte nicht erstellt werden.

package/i18n/en.yaml

@@ -3,6 +3,7 @@ messages:
     editFeatureHeading: Edit Feature
     createFeatureHeading: Create Feature
     selectButtonTitle: Select
+    selectButtonActiveTitle: Cancel selection
     finishButtonTooltip: Finish drawing
     resetButtonTooltip: Reset drawing
     undoButtonTooltip: Undo
@@ -10,14 +11,26 @@ messages:
   propertyEditor:
     defaultEditHeading: Edit Feature
     defaultCreateHeading: Create Feature
+    requiredFieldHint: "Required field"
     saveButtonTitle: Save
     cancelButtonTitle: Cancel
-    deleteButtonTooltip: Delete Feature
+    deleteButtonTooltip: Delete feature
+
+    errors:
+      minAndMax: The value must be between {min} and {max}.
+      minOnly: The value must be {min} or higher.
+      maxOnly: The value must be {max} or lower.
+
   deleteConfirmationDialog:
     title: Delete Feature
     message: Are you sure you want to delete this feature?
-    deleteButtonTitle: Delete Feature
+    deleteButtonTitle: Delete feature
     cancelButtonTitle: Cancel
+  cancelConfirmationDialog:
+    title: Discard changes
+    message: Are you sure you want to discard your changes?
+    confirmCancelButtonTitle: Discard changes
+    abortCancelButtonTitle: Continue editing
   notifier:
     creationSuccess: Feature created
     creationFailure: The feature failed to be created.

package/implementation/FeatureEditor.js

@@ -2,12 +2,10 @@ import { jsx } from 'react/jsx-runtime';
 import { Box } from '@chakra-ui/react';
 import { useMapModelValue } from '@open-pioneer/map';
 import { useCommonComponentProps } from '@open-pioneer/react-utils';
-import { useMemo } from 'react';
 import { useIntl } from '../_virtual/hooks.js';
+import { useMemo } from 'react';
 import { ActionSelector } from './components/action-selector/ActionSelector.js';
-import { PropertyForm } from './components/property-editor/PropertyForm.js';
 import { PropertyEditor } from './components/property-editor/PropertyEditor.js';
-import { PropertyFormContextProvider } from './context/PropertyFormContextProvider.js';
 import { useEditingStep, useSnappingSources, useOnActionChange } from './editor/editorHooks.js';
 import { useEditingCallbacks } from './editor/useEditingCallbacks.js';
 import { useGeometryEditing } from './geometry-editing/useGeometryEditing.js';
@@ -89,13 +87,15 @@ function FeatureEditor(props) {
       break;
     case "creation":
     case "update":
-      content = /* @__PURE__ */ jsx(PropertyFormContextProvider, { editingStep, callbacks: editingCallbacks, children: /* @__PURE__ */ jsx(PropertyEditor, { children: /* @__PURE__ */ jsx(
-        PropertyForm,
+      content = /* @__PURE__ */ jsx(
+        PropertyEditor,
         {
+          editingStep,
+          callbacks: editingCallbacks,
           templates,
           resolveFormTemplate
         }
-      ) }) });
+      );
       break;
   }
   return /* @__PURE__ */ jsx(Box, { ...containerProps, h: "full", children: content });

package/implementation/FeatureEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeatureEditor.js","sources":["FeatureEditor.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box } from \"@chakra-ui/react\";\nimport { useMapModelValue } from \"@open-pioneer/map\";\nimport { useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport { type ReactElement, type ReactNode, useMemo } from \"react\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport type { FeatureEditorProps } from \"../api/editor/editor\";\nimport { ActionSelector } from \"./components/action-selector/ActionSelector\";\nimport { PropertyForm } from \"./components/property-editor/PropertyForm\";\nimport { PropertyEditor } from \"./components/property-editor/PropertyEditor\";\nimport { PropertyFormContextProvider } from \"./context/PropertyFormContextProvider\";\nimport { useEditingStep, useOnActionChange, useSnappingSources } from \"./editor/editorHooks\";\nimport { useEditingCallbacks } from \"./editor/useEditingCallbacks\";\nimport { useGeometryEditing } from \"./geometry-editing/useGeometryEditing\";\nimport type { Type as GeometryType } from \"ol/geom/Geometry\";\nimport { TooltipMessages } from \"./geometry-editing/controller/EditingController\";\n\nexport function FeatureEditor(props: FeatureEditorProps): ReactElement {\n    const {\n        map,\n        templates,\n        writer,\n        resolveFormTemplate,\n        selectableLayers,\n        snappableLayers = selectableLayers,\n        showActionBar = true,\n        successNotifierDisplayDuration,\n        failureNotifierDisplayDuration,\n        onEditingStepChange,\n        ...interactionOptions\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"editor\", props);\n    const mapModel = useMapModelValue(props);\n    const intl = useIntl();\n\n    const [editingStep, setEditingStep] = useEditingStep(onEditingStepChange);\n    const snappingSources = useSnappingSources(mapModel, snappableLayers, templates);\n    const onActionChange = useOnActionChange(mapModel, selectableLayers, templates, setEditingStep);\n\n    const tooltipMessages = useMemo((): TooltipMessages => {\n        return {\n            getDrawingMessages() {\n                return new Map<GeometryType, ReactNode>([\n                    [\"Point\", intl.formatRichMessage({ id: \"tooltips.drawingMessagePoint\" })],\n                    [\n                        \"LineString\",\n                        intl.formatRichMessage({ id: \"tooltips.drawingMessageLineString\" })\n                    ],\n                    [\"Polygon\", intl.formatRichMessage({ id: \"tooltips.drawingMessagePolygon\" })],\n                    [\"Circle\", intl.formatRichMessage({ id: \"tooltips.drawingMessageCircle\" })]\n                ]);\n            },\n            getSelectionMessage() {\n                return intl.formatRichMessage({ id: \"tooltips.selectionMessage\" });\n            },\n            getModificationMessages() {\n                return new Map<string, ReactNode>([\n                    [\"Point\", intl.formatRichMessage({ id: \"tooltips.modificationMessagePoint\" })],\n                    [\"default\", intl.formatRichMessage({ id: \"tooltips.modificationMessage\" })]\n                ]);\n            }\n        };\n    }, [intl]);\n\n    const drawingState = useGeometryEditing({\n        map,\n        editingStep,\n        setEditingStep,\n        snappingSources,\n        tooltipMessages,\n        ...interactionOptions\n    });\n\n    const editingCallbacks = useEditingCallbacks(\n        mapModel,\n        editingStep,\n        writer,\n        setEditingStep,\n        successNotifierDisplayDuration,\n        failureNotifierDisplayDuration\n    );\n\n    let content: ReactNode;\n    switch (editingStep.id) {\n        case \"initial\":\n        case \"drawing\":\n        case \"selection\":\n            content = (\n                <ActionSelector\n                    templates={templates}\n                    showActionBar={showActionBar}\n                    onActionChange={onActionChange}\n                    drawingState={drawingState}\n                />\n            );\n            break;\n        case \"creation\":\n        case \"update\":\n            content = (\n                <PropertyFormContextProvider editingStep={editingStep} callbacks={editingCallbacks}>\n                    <PropertyEditor>\n                        <PropertyForm\n                            templates={templates}\n                            resolveFormTemplate={resolveFormTemplate}\n                        />\n                    </PropertyEditor>\n                </PropertyFormContextProvider>\n            );\n            break;\n    }\n\n    return (\n        <Box {...containerProps} h=\"full\">\n            {content}\n        </Box>\n    );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FeatureEditor.js","sources":["FeatureEditor.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Box } from \"@chakra-ui/react\";\nimport { useMapModelValue } from \"@open-pioneer/map\";\nimport { useCommonComponentProps } from \"@open-pioneer/react-utils\";\nimport type { Type as GeometryType } from \"ol/geom/Geometry\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { type ReactElement, type ReactNode, useMemo } from \"react\";\nimport type { FeatureEditorProps } from \"../api/editor/editor\";\nimport { ActionSelector } from \"./components/action-selector/ActionSelector\";\nimport { PropertyEditor } from \"./components/property-editor/PropertyEditor\";\nimport { useEditingStep, useOnActionChange, useSnappingSources } from \"./editor/editorHooks\";\nimport { useEditingCallbacks } from \"./editor/useEditingCallbacks\";\nimport { TooltipMessages } from \"./geometry-editing/controller/EditingController\";\nimport { useGeometryEditing } from \"./geometry-editing/useGeometryEditing\";\n\nexport function FeatureEditor(props: FeatureEditorProps): ReactElement {\n    const {\n        map,\n        templates,\n        writer,\n        resolveFormTemplate,\n        selectableLayers,\n        snappableLayers = selectableLayers,\n        showActionBar = true,\n        successNotifierDisplayDuration,\n        failureNotifierDisplayDuration,\n        onEditingStepChange,\n        ...interactionOptions\n    } = props;\n    const { containerProps } = useCommonComponentProps(\"editor\", props);\n    const mapModel = useMapModelValue(props);\n    const intl = useIntl();\n\n    const [editingStep, setEditingStep] = useEditingStep(onEditingStepChange);\n    const snappingSources = useSnappingSources(mapModel, snappableLayers, templates);\n    const onActionChange = useOnActionChange(mapModel, selectableLayers, templates, setEditingStep);\n\n    const tooltipMessages = useMemo((): TooltipMessages => {\n        return {\n            getDrawingMessages() {\n                return new Map<GeometryType, ReactNode>([\n                    [\"Point\", intl.formatRichMessage({ id: \"tooltips.drawingMessagePoint\" })],\n                    [\n                        \"LineString\",\n                        intl.formatRichMessage({ id: \"tooltips.drawingMessageLineString\" })\n                    ],\n                    [\"Polygon\", intl.formatRichMessage({ id: \"tooltips.drawingMessagePolygon\" })],\n                    [\"Circle\", intl.formatRichMessage({ id: \"tooltips.drawingMessageCircle\" })]\n                ]);\n            },\n            getSelectionMessage() {\n                return intl.formatRichMessage({ id: \"tooltips.selectionMessage\" });\n            },\n            getModificationMessages() {\n                return new Map<string, ReactNode>([\n                    [\"Point\", intl.formatRichMessage({ id: \"tooltips.modificationMessagePoint\" })],\n                    [\"default\", intl.formatRichMessage({ id: \"tooltips.modificationMessage\" })]\n                ]);\n            }\n        };\n    }, [intl]);\n\n    const drawingState = useGeometryEditing({\n        map,\n        editingStep,\n        setEditingStep,\n        snappingSources,\n        tooltipMessages,\n        ...interactionOptions\n    });\n\n    const editingCallbacks = useEditingCallbacks(\n        mapModel,\n        editingStep,\n        writer,\n        setEditingStep,\n        successNotifierDisplayDuration,\n        failureNotifierDisplayDuration\n    );\n\n    let content: ReactNode;\n    switch (editingStep.id) {\n        case \"initial\":\n        case \"drawing\":\n        case \"selection\":\n            content = (\n                <ActionSelector\n                    templates={templates}\n                    showActionBar={showActionBar}\n                    onActionChange={onActionChange}\n                    drawingState={drawingState}\n                />\n            );\n            break;\n        case \"creation\":\n        case \"update\":\n            content = (\n                <PropertyEditor\n                    editingStep={editingStep}\n                    callbacks={editingCallbacks}\n                    templates={templates}\n                    resolveFormTemplate={resolveFormTemplate}\n                />\n            );\n            break;\n    }\n\n    return (\n        <Box {...containerProps} h=\"full\">\n            {content}\n        </Box>\n    );\n}\n\n"],"names":[],"mappings":"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"}

package/implementation/components/action-selector/SelectButton.js

@@ -16,7 +16,7 @@ function SelectButton({ isActive, onClick }) {
       onClick,
       children: [
         /* @__PURE__ */ jsx(LuMousePointerClick, { "aria-hidden": "true" }),
-        formatMessage({ id: "actionSelector.selectButtonTitle" })
+        isActive ? formatMessage({ id: "actionSelector.selectButtonActiveTitle" }) : formatMessage({ id: "actionSelector.selectButtonTitle" })
       ]
     }
   ) });

package/implementation/components/action-selector/SelectButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectButton.js","sources":["SelectButton.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Button, Toggle } from \"@chakra-ui/react\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { LuMousePointerClick } from \"react-icons/lu\";\nimport type { ReactElement } from \"react\";\n\ninterface SelectButtonProps {\n    readonly isActive: boolean;\n    readonly onClick: () => void;\n}\n\nexport function SelectButton({ isActive, onClick }: SelectButtonProps): ReactElement {\n    const { formatMessage } = useIntl();\n\n    return (\n        <Toggle.Root pressed={isActive} asChild>\n            <Button\n                className=\"editor__action-selector-select-button\"\n                variant=\"outline\"\n                _hover={{ bg: isActive ? \"colorPalette.700\" : \"colorPalette.subtle\" }}\n                _pressed={{ bg: \"colorPalette.800\", color: \"colorPalette.contrast\" }}\n                // Margin for focus outline\n                marginX=\"4px\"\n                onClick={onClick}\n            >\n                <LuMousePointerClick aria-hidden=\"true\" />\n                {formatMessage({ id: \"actionSelector.selectButtonTitle\" })}\n            </Button>\n        </Toggle.Root>\n    );\n}\n"],"names":[],"mappings":";;;;;AAYO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAU,OAAA,EAAQ,EAAoC;AACjF,EAAA,MAAM,EAAE,aAAA,EAAc,GAAI,OAAA,EAAQ;AAElC,EAAA,2BACK,MAAA,CAAO,IAAA,EAAP,EAAY,OAAA,EAAS,QAAA,EAAU,SAAO,IAAA,EACnC,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAU,uCAAA;AAAA,MACV,OAAA,EAAQ,SAAA;AAAA,MACR,MAAA,EAAQ,EAAE,EAAA,EAAI,QAAA,GAAW,qBAAqB,qBAAA,EAAsB;AAAA,MACpE,QAAA,EAAU,EAAE,EAAA,EAAI,kBAAA,EAAoB,OAAO,uBAAA,EAAwB;AAAA,MAEnE,OAAA,EAAQ,KAAA;AAAA,MACR,OAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,eAAY,MAAA,EAAO,CAAA;AAAA,QACvC,aAAA,CAAc,EAAE,EAAA,EAAI,kCAAA,EAAoC;AAAA;AAAA;AAAA,GAC7D,EACJ,CAAA;AAER;;;;"}
+{"version":3,"file":"SelectButton.js","sources":["SelectButton.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Button, Toggle } from \"@chakra-ui/react\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { LuMousePointerClick } from \"react-icons/lu\";\nimport type { ReactElement } from \"react\";\n\ninterface SelectButtonProps {\n    readonly isActive: boolean;\n    readonly onClick: () => void;\n}\n\nexport function SelectButton({ isActive, onClick }: SelectButtonProps): ReactElement {\n    const { formatMessage } = useIntl();\n\n    return (\n        <Toggle.Root pressed={isActive} asChild>\n            <Button\n                className=\"editor__action-selector-select-button\"\n                variant=\"outline\"\n                _hover={{ bg: isActive ? \"colorPalette.700\" : \"colorPalette.subtle\" }}\n                _pressed={{ bg: \"colorPalette.800\", color: \"colorPalette.contrast\" }}\n                // Margin for focus outline\n                marginX=\"4px\"\n                onClick={onClick}\n            >\n                <LuMousePointerClick aria-hidden=\"true\" />\n                {isActive\n                    ? formatMessage({ id: \"actionSelector.selectButtonActiveTitle\" })\n                    : formatMessage({ id: \"actionSelector.selectButtonTitle\" })}\n            </Button>\n        </Toggle.Root>\n    );\n}\n"],"names":[],"mappings":";;;;;AAYO,SAAS,YAAA,CAAa,EAAE,QAAA,EAAU,OAAA,EAAQ,EAAoC;AACjF,EAAA,MAAM,EAAE,aAAA,EAAc,GAAI,OAAA,EAAQ;AAElC,EAAA,2BACK,MAAA,CAAO,IAAA,EAAP,EAAY,OAAA,EAAS,QAAA,EAAU,SAAO,IAAA,EACnC,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACG,SAAA,EAAU,uCAAA;AAAA,MACV,OAAA,EAAQ,SAAA;AAAA,MACR,MAAA,EAAQ,EAAE,EAAA,EAAI,QAAA,GAAW,qBAAqB,qBAAA,EAAsB;AAAA,MACpE,QAAA,EAAU,EAAE,EAAA,EAAI,kBAAA,EAAoB,OAAO,uBAAA,EAAwB;AAAA,MAEnE,OAAA,EAAQ,KAAA;AAAA,MACR,OAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,mBAAA,EAAA,EAAoB,eAAY,MAAA,EAAO,CAAA;AAAA,QACvC,QAAA,GACK,aAAA,CAAc,EAAE,EAAA,EAAI,wCAAA,EAA0C,CAAA,GAC9D,aAAA,CAAc,EAAE,EAAA,EAAI,kCAAA,EAAoC;AAAA;AAAA;AAAA,GAClE,EACJ,CAAA;AAER;;;;"}

package/implementation/components/controls/NumberFieldControl.js

@@ -32,6 +32,7 @@ function NumberFieldControl({
       step: field.step,
       formatOptions: field.formatOptions,
       onValueChange,
+      clampValueOnBlur: false,
       children: [
         /* @__PURE__ */ jsx(NumberInput.Input, { ref: element, placeholder: field.placeholder ?? field.label }),
         field.showSteppers && /* @__PURE__ */ jsx(NumberInput.Control, {})

package/implementation/components/controls/NumberFieldControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFieldControl.js","sources":["NumberFieldControl.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { NumberInput, type NumberInputValueChangeDetails } from \"@chakra-ui/react\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { useCallback, useEffect, useRef, useState, type ReactElement } from \"react\";\nimport type { NumberFieldConfig } from \"../../../api/fields/standardFieldConfigs\";\n\ninterface NumberFieldControlProps {\n    readonly value: number | undefined;\n    readonly field: NumberFieldConfig;\n    readonly onChange: (newNumber: number | undefined) => void;\n}\n\n// This component allows its value to be specified as a number. The value is still stored as a\n// string internally to allow non-numeric characters (such as '-', '.', or 'e') to be entered.\nexport function NumberFieldControl({\n    value,\n    field,\n    onChange\n}: NumberFieldControlProps): ReactElement {\n    const formatNumber = useFormatNumber(field.formatOptions);\n    const [stringValue, setStringValue] = useState(() => formatNumber(value));\n    const setNumericValue = useNumericState(value, field.formatOptions, setStringValue);\n\n    const onValueChange = useEvent(({ value, valueAsNumber }: NumberInputValueChangeDetails) => {\n        setStringValue(value);\n        if (!isNaN(valueAsNumber)) {\n            setNumericValue(valueAsNumber);\n            onChange?.(valueAsNumber);\n        } else if (value === \"\") {\n            setNumericValue(undefined);\n            onChange?.(undefined);\n        }\n    });\n\n    const element = useRef<HTMLInputElement>(null);\n\n    return (\n        <NumberInput.Root\n            value={stringValue ?? \"\"}\n            min={field.min}\n            max={field.max}\n            step={field.step}\n            formatOptions={field.formatOptions}\n            onValueChange={onValueChange}\n        >\n            <NumberInput.Input ref={element} placeholder={field.placeholder ?? field.label} />\n            {field.showSteppers && <NumberInput.Control />}\n        </NumberInput.Root>\n    );\n}\n\n// Additionally store the state as a number to be able to react to outside changes of 'value'.\nfunction useNumericState(\n    value: number | undefined,\n    formatOptions: Intl.NumberFormatOptions | undefined,\n    setStringValue: (newValue: string | undefined) => void\n) {\n    const [numericValue, setNumericValue] = useState(value);\n    const formatNumber = useFormatNumber(formatOptions);\n\n    useEffect(() => {\n        if (value !== numericValue) {\n            const stringValue = formatNumber(value);\n            setStringValue(stringValue);\n            setNumericValue(value);\n        }\n    }, [formatNumber, numericValue, setStringValue, value]);\n\n    return setNumericValue;\n}\n\nfunction useFormatNumber(formatOptions: Intl.NumberFormatOptions | undefined) {\n    const { formatNumber } = useIntl();\n\n    return useCallback(\n        (number: number | undefined) => {\n            if (number != null) {\n                return formatNumber(number, { maximumFractionDigits: 20, ...formatOptions });\n            } else {\n                return undefined;\n            }\n        },\n        [formatNumber, formatOptions]\n    );\n}\n"],"names":["value"],"mappings":";;;;;;AAgBO,SAAS,kBAAA,CAAmB;AAAA,EAC/B,KAAA;AAAA,EACA,KAAA;AAAA,EACA;AACJ,CAAA,EAA0C;AACtC,EAAA,MAAM,YAAA,GAAe,eAAA,CAAgB,KAAA,CAAM,aAAa,CAAA;AACxD,EAAA,MAAM,CAAC,aAAa,cAAc,CAAA,GAAI,SAAS,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AACxE,EAAA,MAAM,eAAA,GAAkB,eAAA,CAAgB,KAAA,EAAO,KAAA,CAAM,eAAe,cAAc,CAAA;AAElF,EAAA,MAAM,gBAAgB,QAAA,CAAS,CAAC,EAAE,KAAA,EAAAA,MAAAA,EAAO,eAAc,KAAqC;AACxF,IAAA,cAAA,CAAeA,MAAK,CAAA;AACpB,IAAA,IAAI,CAAC,KAAA,CAAM,aAAa,CAAA,EAAG;AACvB,MAAA,eAAA,CAAgB,aAAa,CAAA;AAC7B,MAAA,QAAA,GAAW,aAAa,CAAA;AAAA,IAC5B,CAAA,MAAA,IAAWA,WAAU,EAAA,EAAI;AACrB,MAAA,eAAA,CAAgB,MAAS,CAAA;AACzB,MAAA,QAAA,GAAW,MAAS,CAAA;AAAA,IACxB;AAAA,EACJ,CAAC,CAAA;AAED,EAAA,MAAM,OAAA,GAAU,OAAyB,IAAI,CAAA;AAE7C,EAAA,uBACI,IAAA;AAAA,IAAC,WAAA,CAAY,IAAA;AAAA,IAAZ;AAAA,MACG,OAAO,WAAA,IAAe,EAAA;AAAA,MACtB,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,eAAe,KAAA,CAAM,aAAA;AAAA,MACrB,aAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,CAAY,OAAZ,EAAkB,GAAA,EAAK,SAAS,WAAA,EAAa,KAAA,CAAM,WAAA,IAAe,KAAA,CAAM,KAAA,EAAO,CAAA;AAAA,QAC/E,KAAA,CAAM,YAAA,oBAAgB,GAAA,CAAC,WAAA,CAAY,SAAZ,EAAoB;AAAA;AAAA;AAAA,GAChD;AAER;AAGA,SAAS,eAAA,CACL,KAAA,EACA,aAAA,EACA,cAAA,EACF;AACE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,YAAA,GAAe,gBAAgB,aAAa,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,IAAI,UAAU,YAAA,EAAc;AACxB,MAAA,MAAM,WAAA,GAAc,aAAa,KAAK,CAAA;AACtC,MAAA,cAAA,CAAe,WAAW,CAAA;AAC1B,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACzB;AAAA,EACJ,GAAG,CAAC,YAAA,EAAc,YAAA,EAAc,cAAA,EAAgB,KAAK,CAAC,CAAA;AAEtD,EAAA,OAAO,eAAA;AACX;AAEA,SAAS,gBAAgB,aAAA,EAAqD;AAC1E,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,EAAA,OAAO,WAAA;AAAA,IACH,CAAC,MAAA,KAA+B;AAC5B,MAAA,IAAI,UAAU,IAAA,EAAM;AAChB,QAAA,OAAO,aAAa,MAAA,EAAQ,EAAE,uBAAuB,EAAA,EAAI,GAAG,eAAe,CAAA;AAAA,MAC/E,CAAA,MAAO;AACH,QAAA,OAAO,MAAA;AAAA,MACX;AAAA,IACJ,CAAA;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,GAChC;AACJ;;;;"}
+{"version":3,"file":"NumberFieldControl.js","sources":["NumberFieldControl.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { NumberInput, type NumberInputValueChangeDetails } from \"@chakra-ui/react\";\nimport { type FormatNumberOptions } from \"@formatjs/intl\";\nimport { useEvent } from \"@open-pioneer/react-utils\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { useCallback, useEffect, useRef, useState, type ReactElement } from \"react\";\nimport type { NumberFieldConfig } from \"../../../api/fields/standardFieldConfigs\";\n\ninterface NumberFieldControlProps {\n    readonly value: number | undefined;\n    readonly field: NumberFieldConfig;\n    readonly onChange: (newNumber: number | undefined) => void;\n}\n\n// This component allows its value to be specified as a number. The value is still stored as a\n// string internally to allow non-numeric characters (such as '-', '.', or 'e') to be entered.\nexport function NumberFieldControl({\n    value,\n    field,\n    onChange\n}: NumberFieldControlProps): ReactElement {\n    const formatNumber = useFormatNumber(field.formatOptions);\n    const [stringValue, setStringValue] = useState(() => formatNumber(value));\n    const setNumericValue = useNumericState(value, field.formatOptions, setStringValue);\n\n    const onValueChange = useEvent(({ value, valueAsNumber }: NumberInputValueChangeDetails) => {\n        setStringValue(value);\n        if (!isNaN(valueAsNumber)) {\n            setNumericValue(valueAsNumber);\n            onChange?.(valueAsNumber);\n        } else if (value === \"\") {\n            setNumericValue(undefined);\n            onChange?.(undefined);\n        }\n    });\n\n    const element = useRef<HTMLInputElement>(null);\n\n    return (\n        <NumberInput.Root\n            value={stringValue ?? \"\"}\n            min={field.min}\n            max={field.max}\n            step={field.step}\n            formatOptions={field.formatOptions}\n            onValueChange={onValueChange}\n            clampValueOnBlur={false}\n        >\n            <NumberInput.Input ref={element} placeholder={field.placeholder ?? field.label} />\n            {field.showSteppers && <NumberInput.Control />}\n        </NumberInput.Root>\n    );\n}\n\n// Additionally store the state as a number to be able to react to outside changes of 'value'.\nfunction useNumericState(\n    value: number | undefined,\n    formatOptions: FormatNumberOptions | undefined,\n    setStringValue: (newValue: string | undefined) => void\n) {\n    const [numericValue, setNumericValue] = useState(value);\n    const formatNumber = useFormatNumber(formatOptions);\n\n    useEffect(() => {\n        if (value !== numericValue) {\n            const stringValue = formatNumber(value);\n            setStringValue(stringValue);\n            setNumericValue(value);\n        }\n    }, [formatNumber, numericValue, setStringValue, value]);\n\n    return setNumericValue;\n}\n\nfunction useFormatNumber(formatOptions: FormatNumberOptions | undefined) {\n    const { formatNumber } = useIntl();\n\n    return useCallback(\n        (number: number | undefined) => {\n            if (number != null) {\n                return formatNumber(number, { maximumFractionDigits: 20, ...formatOptions });\n            } else {\n                return undefined;\n            }\n        },\n        [formatNumber, formatOptions]\n    );\n}\n"],"names":["value"],"mappings":";;;;;;AAiBO,SAAS,kBAAA,CAAmB;AAAA,EAC/B,KAAA;AAAA,EACA,KAAA;AAAA,EACA;AACJ,CAAA,EAA0C;AACtC,EAAA,MAAM,YAAA,GAAe,eAAA,CAAgB,KAAA,CAAM,aAAa,CAAA;AACxD,EAAA,MAAM,CAAC,aAAa,cAAc,CAAA,GAAI,SAAS,MAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AACxE,EAAA,MAAM,eAAA,GAAkB,eAAA,CAAgB,KAAA,EAAO,KAAA,CAAM,eAAe,cAAc,CAAA;AAElF,EAAA,MAAM,gBAAgB,QAAA,CAAS,CAAC,EAAE,KAAA,EAAAA,MAAAA,EAAO,eAAc,KAAqC;AACxF,IAAA,cAAA,CAAeA,MAAK,CAAA;AACpB,IAAA,IAAI,CAAC,KAAA,CAAM,aAAa,CAAA,EAAG;AACvB,MAAA,eAAA,CAAgB,aAAa,CAAA;AAC7B,MAAA,QAAA,GAAW,aAAa,CAAA;AAAA,IAC5B,CAAA,MAAA,IAAWA,WAAU,EAAA,EAAI;AACrB,MAAA,eAAA,CAAgB,MAAS,CAAA;AACzB,MAAA,QAAA,GAAW,MAAS,CAAA;AAAA,IACxB;AAAA,EACJ,CAAC,CAAA;AAED,EAAA,MAAM,OAAA,GAAU,OAAyB,IAAI,CAAA;AAE7C,EAAA,uBACI,IAAA;AAAA,IAAC,WAAA,CAAY,IAAA;AAAA,IAAZ;AAAA,MACG,OAAO,WAAA,IAAe,EAAA;AAAA,MACtB,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,KAAK,KAAA,CAAM,GAAA;AAAA,MACX,MAAM,KAAA,CAAM,IAAA;AAAA,MACZ,eAAe,KAAA,CAAM,aAAA;AAAA,MACrB,aAAA;AAAA,MACA,gBAAA,EAAkB,KAAA;AAAA,MAElB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,WAAA,CAAY,OAAZ,EAAkB,GAAA,EAAK,SAAS,WAAA,EAAa,KAAA,CAAM,WAAA,IAAe,KAAA,CAAM,KAAA,EAAO,CAAA;AAAA,QAC/E,KAAA,CAAM,YAAA,oBAAgB,GAAA,CAAC,WAAA,CAAY,SAAZ,EAAoB;AAAA;AAAA;AAAA,GAChD;AAER;AAGA,SAAS,eAAA,CACL,KAAA,EACA,aAAA,EACA,cAAA,EACF;AACE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,YAAA,GAAe,gBAAgB,aAAa,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACZ,IAAA,IAAI,UAAU,YAAA,EAAc;AACxB,MAAA,MAAM,WAAA,GAAc,aAAa,KAAK,CAAA;AACtC,MAAA,cAAA,CAAe,WAAW,CAAA;AAC1B,MAAA,eAAA,CAAgB,KAAK,CAAA;AAAA,IACzB;AAAA,EACJ,GAAG,CAAC,YAAA,EAAc,YAAA,EAAc,cAAA,EAAgB,KAAK,CAAC,CAAA;AAEtD,EAAA,OAAO,eAAA;AACX;AAEA,SAAS,gBAAgB,aAAA,EAAgD;AACrE,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,OAAA,EAAQ;AAEjC,EAAA,OAAO,WAAA;AAAA,IACH,CAAC,MAAA,KAA+B;AAC5B,MAAA,IAAI,UAAU,IAAA,EAAM;AAChB,QAAA,OAAO,aAAa,MAAA,EAAQ,EAAE,uBAAuB,EAAA,EAAI,GAAG,eAAe,CAAA;AAAA,MAC/E,CAAA,MAAO;AACH,QAAA,OAAO,MAAA;AAAA,MACX;AAAA,IACJ,CAAA;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,GAChC;AACJ;;;;"}

package/implementation/components/property-editor/CancelConfirmationDialog.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from "react";
+interface CancelConfirmationDialogProps {
+    readonly isOpen: boolean;
+    readonly onConfirmCancel: () => void;
+    readonly onAbortCancel: () => void;
+}
+export declare function CancelConfirmationDialog({ isOpen, onConfirmCancel, onAbortCancel }: CancelConfirmationDialogProps): ReactElement;
+export {};

package/implementation/components/property-editor/CancelConfirmationDialog.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Dialog, Button } from '@chakra-ui/react';
+import { useIntl } from '../../../_virtual/hooks.js';
+import { useRef, useCallback, useMemo } from 'react';
+
+function CancelConfirmationDialog({
+  isOpen,
+  onConfirmCancel,
+  onAbortCancel
+}) {
+  const cancelButtonRef = useRef(null);
+  const initialFocusEl = useCallback(() => cancelButtonRef.current, []);
+  const { formatMessage } = useIntl();
+  const { title, message, confirmCancelButtonTitle, abortCancelButtonTitle } = useMemo(
+    () => ({
+      title: formatMessage({ id: "cancelConfirmationDialog.title" }),
+      message: formatMessage({ id: "cancelConfirmationDialog.message" }),
+      confirmCancelButtonTitle: formatMessage({
+        id: "cancelConfirmationDialog.confirmCancelButtonTitle"
+      }),
+      abortCancelButtonTitle: formatMessage({
+        id: "cancelConfirmationDialog.abortCancelButtonTitle"
+      })
+    }),
+    [formatMessage]
+  );
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open: isOpen, initialFocusEl, role: "alertdialog", children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, {}),
+    /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsxs(Dialog.Content, { children: [
+      /* @__PURE__ */ jsx(Dialog.Header, { fontSize: "large", fontWeight: "bold", children: title }),
+      /* @__PURE__ */ jsx(Dialog.Body, { children: message }),
+      /* @__PURE__ */ jsxs(Dialog.Footer, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            bg: "red.solid",
+            color: "red.contrast",
+            _hover: { bg: "red.solid/90" },
+            loadingText: confirmCancelButtonTitle,
+            onClick: onConfirmCancel,
+            children: confirmCancelButtonTitle
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", ref: cancelButtonRef, onClick: onAbortCancel, children: abortCancelButtonTitle })
+      ] })
+    ] }) })
+  ] });
+}
+
+export { CancelConfirmationDialog };
+//# sourceMappingURL=CancelConfirmationDialog.js.map

package/implementation/components/property-editor/CancelConfirmationDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CancelConfirmationDialog.js","sources":["CancelConfirmationDialog.tsx"],"sourcesContent":["// SPDX-FileCopyrightText: 2023-2025 Open Pioneer project (https://github.com/open-pioneer)\n// SPDX-License-Identifier: Apache-2.0\nimport { Button, Dialog } from \"@chakra-ui/react\";\nimport { useIntl } from \"open-pioneer:react-hooks\";\nimport { useCallback, useMemo, useRef, type ReactElement } from \"react\";\n\ninterface CancelConfirmationDialogProps {\n    readonly isOpen: boolean;\n    readonly onConfirmCancel: () => void;\n    readonly onAbortCancel: () => void;\n}\n\nexport function CancelConfirmationDialog({\n    isOpen,\n    onConfirmCancel,\n    onAbortCancel\n}: CancelConfirmationDialogProps): ReactElement {\n    const cancelButtonRef = useRef<HTMLButtonElement>(null);\n    const initialFocusEl = useCallback(() => cancelButtonRef.current, []);\n    const { formatMessage } = useIntl();\n\n    const { title, message, confirmCancelButtonTitle, abortCancelButtonTitle } = useMemo(\n        () => ({\n            title: formatMessage({ id: \"cancelConfirmationDialog.title\" }),\n            message: formatMessage({ id: \"cancelConfirmationDialog.message\" }),\n            confirmCancelButtonTitle: formatMessage({\n                id: \"cancelConfirmationDialog.confirmCancelButtonTitle\"\n            }),\n            abortCancelButtonTitle: formatMessage({\n                id: \"cancelConfirmationDialog.abortCancelButtonTitle\"\n            })\n        }),\n        [formatMessage]\n    );\n\n    return (\n        <Dialog.Root open={isOpen} initialFocusEl={initialFocusEl} role=\"alertdialog\">\n            <Dialog.Backdrop />\n            <Dialog.Positioner>\n                <Dialog.Content>\n                    <Dialog.Header fontSize=\"large\" fontWeight=\"bold\">\n                        {title}\n                    </Dialog.Header>\n                    <Dialog.Body>{message}</Dialog.Body>\n                    <Dialog.Footer>\n                        <Button\n                            bg=\"red.solid\"\n                            color=\"red.contrast\"\n                            _hover={{ bg: \"red.solid/90\" }}\n                            loadingText={confirmCancelButtonTitle}\n                            onClick={onConfirmCancel}\n                        >\n                            {confirmCancelButtonTitle}\n                        </Button>\n                        <Button variant=\"outline\" ref={cancelButtonRef} onClick={onAbortCancel}>\n                            {abortCancelButtonTitle}\n                        </Button>\n                    </Dialog.Footer>\n                </Dialog.Content>\n            </Dialog.Positioner>\n        </Dialog.Root>\n    );\n}\n"],"names":[],"mappings":";;;;;AAYO,SAAS,wBAAA,CAAyB;AAAA,EACrC,MAAA;AAAA,EACA,eAAA;AAAA,EACA;AACJ,CAAA,EAAgD;AAC5C,EAAA,MAAM,eAAA,GAAkB,OAA0B,IAAI,CAAA;AACtD,EAAA,MAAM,iBAAiB,WAAA,CAAY,MAAM,eAAA,CAAgB,OAAA,EAAS,EAAE,CAAA;AACpE,EAAA,MAAM,EAAE,aAAA,EAAc,GAAI,OAAA,EAAQ;AAElC,EAAA,MAAM,EAAE,KAAA,EAAO,OAAA,EAAS,wBAAA,EAA0B,wBAAuB,GAAI,OAAA;AAAA,IACzE,OAAO;AAAA,MACH,KAAA,EAAO,aAAA,CAAc,EAAE,EAAA,EAAI,kCAAkC,CAAA;AAAA,MAC7D,OAAA,EAAS,aAAA,CAAc,EAAE,EAAA,EAAI,oCAAoC,CAAA;AAAA,MACjE,0BAA0B,aAAA,CAAc;AAAA,QACpC,EAAA,EAAI;AAAA,OACP,CAAA;AAAA,MACD,wBAAwB,aAAA,CAAc;AAAA,QAClC,EAAA,EAAI;AAAA,OACP;AAAA,KACL,CAAA;AAAA,IACA,CAAC,aAAa;AAAA,GAClB;AAEA,EAAA,uBACI,IAAA,CAAC,OAAO,IAAA,EAAP,EAAY,MAAM,MAAA,EAAQ,cAAA,EAAgC,MAAK,aAAA,EAC5D,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,CAAO,UAAP,EAAgB,CAAA;AAAA,wBAChB,MAAA,CAAO,UAAA,EAAP,EACG,QAAA,kBAAA,IAAA,CAAC,MAAA,CAAO,SAAP,EACG,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAO,MAAA,EAAP,EAAc,UAAS,OAAA,EAAQ,UAAA,EAAW,QACtC,QAAA,EAAA,KAAA,EACL,CAAA;AAAA,sBACA,GAAA,CAAC,MAAA,CAAO,IAAA,EAAP,EAAa,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,sBACtB,IAAA,CAAC,MAAA,CAAO,MAAA,EAAP,EACG,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACG,EAAA,EAAG,WAAA;AAAA,YACH,KAAA,EAAM,cAAA;AAAA,YACN,MAAA,EAAQ,EAAE,EAAA,EAAI,cAAA,EAAe;AAAA,YAC7B,WAAA,EAAa,wBAAA;AAAA,YACb,OAAA,EAAS,eAAA;AAAA,YAER,QAAA,EAAA;AAAA;AAAA,SACL;AAAA,wBACA,GAAA,CAAC,UAAO,OAAA,EAAQ,SAAA,EAAU,KAAK,eAAA,EAAiB,OAAA,EAAS,eACpD,QAAA,EAAA,sBAAA,EACL;AAAA,OAAA,EACJ;AAAA,KAAA,EACJ,CAAA,EACJ;AAAA,GAAA,EACJ,CAAA;AAER;;;;"}

package/implementation/components/property-editor/PropertyEditor.d.ts

@@ -1,5 +1,10 @@
-import type { ReactElement, ReactNode } from "react";
-export interface PropertyEditorProps {
-    readonly children: ReactNode;
-}
-export declare function PropertyEditor({ children }: PropertyEditorProps): ReactElement;
+import { FeatureEditorProps } from "../../../api/editor/editor";
+import { CreationStep, UpdateStep } from "../../../api/model/EditingStep";
+import { FeatureTemplate } from "../../../api/model/FeatureTemplate";
+import { EditingCallbacks } from "../../editor/useEditingCallbacks";
+export declare function PropertyEditor(props: {
+    editingStep: CreationStep | UpdateStep;
+    callbacks: EditingCallbacks;
+    templates: FeatureTemplate[];
+    resolveFormTemplate: FeatureEditorProps["resolveFormTemplate"];
+}): import("react/jsx-runtime").JSX.Element | undefined;

package/implementation/components/property-editor/PropertyEditor.js

@@ -1,15 +1,84 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useDisclosure, VStack, Box } from '@chakra-ui/react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Flex, useDisclosure } from '@chakra-ui/react';
 import { useEvent } from '@open-pioneer/react-utils';
 import { useReactiveSnapshot } from '@open-pioneer/reactivity';
-import { usePropertyFormContext } from '../../context/usePropertyFormContext.js';
+import { useMemo, useCallback } from 'react';
 import { ButtonRow } from './ButtonRow.js';
+import { CancelConfirmationDialog } from './CancelConfirmationDialog.js';
 import { DeleteConfirmationDialog } from './DeleteConfirmationDialog.js';
+import { DeclarativeFormContext, CustomFormContextImpl, FormContext } from '../../context/PropertyFormContext.js';
+import { PropertyField } from './PropertyField.js';
+import { PropertyForm } from './PropertyForm.js';
+import { usePropertyFormContext } from '../../context/usePropertyFormContext.js';
 
-function PropertyEditor({ children }) {
+function PropertyEditor(props) {
+  const { editingStep, callbacks, templates, resolveFormTemplate } = props;
+  const formTemplate = useFormTemplate(templates, resolveFormTemplate, editingStep);
+  const context = useMemo(() => {
+    if (!formTemplate) {
+      return void 0;
+    }
+    if (formTemplate.kind === "declarative") {
+      return new DeclarativeFormContext(editingStep, callbacks, formTemplate);
+    } else {
+      return new CustomFormContextImpl(editingStep, callbacks, formTemplate);
+    }
+  }, [formTemplate, editingStep, callbacks]);
+  return context && formTemplate && /* @__PURE__ */ jsx(FormContext, { value: context, children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: "editor__property-editor",
+      direction: "column",
+      height: "full",
+      overflowY: "hidden",
+      children: [
+        /* @__PURE__ */ jsx(PropertyForm, { children: formTemplate.kind === "dynamic" ? formTemplate.renderForm() : formTemplate.fields.map((field, index) => /* @__PURE__ */ jsx(PropertyField, { field }, index)) }),
+        /* @__PURE__ */ jsx(EditorControls, {})
+      ]
+    }
+  ) });
+}
+function useFormTemplate(templates, customResolver, editingStep) {
+  const defaultResolver = useDefaultFormTemplateResolver(templates);
+  const resolveFormTemplate = customResolver ?? defaultResolver;
+  const feature = editingStep.feature;
+  const layer = editingStep.id === "update" ? editingStep.layer : void 0;
+  const explicitTemplate = editingStep.id === "creation" ? editingStep.template : void 0;
+  return useMemo(() => {
+    if (explicitTemplate) {
+      return explicitTemplate;
+    } else if (editingStep.id === "update") {
+      return resolveFormTemplate({ feature, layer });
+    } else {
+      return void 0;
+    }
+  }, [explicitTemplate, editingStep.id, feature, layer, resolveFormTemplate]);
+}
+function useDefaultFormTemplateResolver(templates) {
+  return useCallback(
+    ({ layer }) => {
+      if (layer?.id != null) {
+        return templates.find(({ layerId }) => layer.id === layerId);
+      } else {
+        return void 0;
+      }
+    },
+    [templates]
+  );
+}
+function EditorControls() {
   const context = usePropertyFormContext();
   const canSave = useReactiveSnapshot(() => context.isValid, [context]);
-  const { open: dialogIsOpen, onOpen: openDialog, onClose: closeDialog } = useDisclosure();
+  const {
+    open: deleteDialogIsOpen,
+    onOpen: openDeleteDialog,
+    onClose: closeDeleteDialog
+  } = useDisclosure();
+  const {
+    open: cancelDialogIsOpen,
+    onOpen: openCancelDialog,
+    onClose: closeCancelConfirmationDialog
+  } = useDisclosure();
   const onSaveClick = useEvent(async () => {
     const properties = context.getPropertiesAsObject();
     context.feature.setProperties(properties);
@@ -17,28 +86,37 @@ function PropertyEditor({ children }) {
   });
   const onDeleteClick = useEvent(async () => {
     await context.callbacks.onDelete();
-    closeDialog();
+    closeDeleteDialog();
+  });
+  const onConfirmCancelClick = useEvent(() => {
+    context.callbacks.onCancel();
+    closeCancelConfirmationDialog();
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(VStack, { className: "editor__property-editor", height: "full", gap: 5, align: "stretch", children: [
-      /* @__PURE__ */ jsx(Box, { flex: 1, overflowY: "auto", children }),
-      /* @__PURE__ */ jsx(
-        ButtonRow,
-        {
-          canSave,
-          showDeleteButton: context.mode === "update",
-          onSave: onSaveClick,
-          onDelete: openDialog,
-          onCancel: context.callbacks.onCancel
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx(
+      ButtonRow,
+      {
+        canSave,
+        showDeleteButton: context.mode === "update",
+        onSave: onSaveClick,
+        onDelete: openDeleteDialog,
+        onCancel: openCancelDialog
+      }
+    ),
     /* @__PURE__ */ jsx(
       DeleteConfirmationDialog,
       {
-        isOpen: dialogIsOpen,
+        isOpen: deleteDialogIsOpen,
         onDelete: onDeleteClick,
-        onCancel: closeDialog
+        onCancel: closeDeleteDialog
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CancelConfirmationDialog,
+      {
+        isOpen: cancelDialogIsOpen,
+        onConfirmCancel: onConfirmCancelClick,
+        onAbortCancel: closeCancelConfirmationDialog
       }
     )
   ] });