@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/filters/filter-field/FilterField.js

@@ -75,6 +75,7 @@ import { suggestionsExtension } from "./suggestions/suggestions-extension.js";
 import { Suggestions } from "./suggestions/Suggestions.js";
 import { SuggestionsOverlay } from "./suggestions/SuggestionsOverlay.js";
 import { autoFormatLogicalOperators } from "./utils/auto-format-logical-operators.js";
+import { computeMinimalDocChange } from "./utils/compute-minimal-doc-change.js";
 import {
   getCurrentFocusableListItem,
   getFirstFocusableListItem,
@@ -94,6 +95,7 @@ import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
 import { createStratoLogger } from "../../core/sdk/sdk-logger.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 import * as editorStyles from "../../editors/base-code-editor/BaseCodeEditor.sty.js";
+import { useInternalFormRegistration } from "../../forms/form/hooks/useInternalFormRegistration.js";
 import { withFormFieldMessageContextProvider } from "../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js";
 import { InternalBaseItem as BaseItem } from "../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
 import { useFormControl } from "../../forms/forms-core/hooks/useFormControl.js";
@@ -102,6 +104,7 @@ import {
   getI18nValidationMessage
 } from "../../forms/forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../../forms/forms-core/state/formfield-messages-state-reducer.js";
+import { useContainerFocus } from "../../forms/hooks/useContainerFocus.js";
 import {
   NativeValidityStateKeys,
   StratoValidityStateKeys
@@ -129,6 +132,8 @@ const _FilterField = forwardRef(
       readOnly: propReadOnly = false,
       placeholder: placeholderProp,
       id: propId,
+      _form,
+      _messageTarget,
       autoSuggestions = false,
       defaultSuggestionsCount: _defaultSuggestionsCount,
       // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
@@ -147,6 +152,8 @@ const _FilterField = forwardRef(
       filterNamespace,
       customTypes,
       onValidityChange,
+      onFocus,
+      onBlur,
       ...remainingProps
     } = props;
     const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
@@ -160,7 +167,10 @@ const _FilterField = forwardRef(
     );
     const { getSyntaxTree } = useCachedTreeConversion();
     const intl = useIntl();
-    const _emitValidationState = useValidationStateEmitter(onValidityChange);
+    const formValidityChangeRef = useRef(void 0);
+    const _emitValidationState = useValidationStateEmitter(
+      (state2) => formValidityChangeRef.current?.(state2)
+    );
     const { showBoundary } = useErrorBoundary();
     const onChangeRef = useUpdatableCallback(onChange);
     const onFilterRef = useUpdatableCallback(onFilter);
@@ -346,7 +356,10 @@ const _FilterField = forwardRef(
             type: FormFieldMessagesAction.ADDMESSAGE,
             payload: {
               id: filterFieldCustomErrorRef.current,
-              validityStateKey: "customError",
+              // Emit the semantic 'syntaxError' key (not 'customError') so this
+              // direct dispatch and the form runtime's re-injected entry share a
+              // validityStateKey.
+              validityStateKey: StratoValidityStateKeys.syntaxError.toString(),
               variant: "error",
               message: intl.formatMessage(filterFieldMessages.syntaxError),
               messageType: "formcontrol"
@@ -377,17 +390,54 @@ const _FilterField = forwardRef(
         emitValidationState(state2);
       }
     };
-    const onInputBlur = () => {
+    const performBlurValidation = () => {
       isDirtyRef.current = true;
       validate();
+      const state2 = getFilterFieldValidationState("blur");
+      lastEmittedHadErrorsRef.current = state2.errors.length > 0;
+      return state2;
+    };
+    const onInputBlur = () => {
+      const state2 = performBlurValidation();
       formFieldMessageContextDispatch?.({
         type: FormFieldMessagesAction.SETISTOUCHED,
         payload: { isTouched: true }
       });
-      const state2 = getFilterFieldValidationState("blur");
-      lastEmittedHadErrorsRef.current = state2.errors.length > 0;
       emitValidationState(state2);
     };
+    const {
+      containerClassName,
+      onBlur: hookOnBlur,
+      ...restContainerFocusProps
+    } = useContainerFocus({
+      disabled,
+      emitValidationState,
+      getBlurValidationState: performBlurValidation,
+      onFocus: (event) => {
+        formFieldMessageContextDispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: false }
+        });
+        focusHandlers.onFocus?.(event);
+        onFocus?.(event);
+      },
+      onBlur: (event) => {
+        focusHandlers.onBlur?.(event);
+        onBlur?.(event);
+      }
+    });
+    const isReportingValidityRef = useRef(false);
+    const containerFocusProps = {
+      ...restContainerFocusProps,
+      onBlur: (event) => {
+        isReportingValidityRef.current = true;
+        try {
+          hookOnBlur(event);
+        } finally {
+          isReportingValidityRef.current = false;
+        }
+      }
+    };
     const saveRecentFilter = useRecentFilterMutation(filterNamespace);
     useRecentFilterSuggestions(editorViewRef, filterNamespace);
     usePinnedFilterSuggestions(
@@ -479,6 +529,56 @@ const _FilterField = forwardRef(
     const isValidSearchRef = useRef(false);
     const requiredRef = useRef(required);
     requiredRef.current = required;
+    const formControl = useInternalFormRegistration({
+      id,
+      name,
+      form: _form,
+      messageTarget: _messageTarget,
+      onValidityChange,
+      getValue: () => valueRef.current,
+      focus: () => {
+        hiddenInputRef.current?.focus();
+        editorViewRef.current?.dispatch({
+          selection: { anchor: editorViewRef.current.state.doc.length }
+        });
+      },
+      validateField: ({ reveal, trigger }) => {
+        isDirtyRef.current = true;
+        validate();
+        if (reveal) {
+          markTouched();
+        }
+        const validationState = emitValidationState(
+          getFilterFieldValidationState(trigger)
+        );
+        lastEmittedHadErrorsRef.current = validationState.errors.length > 0;
+        return Promise.resolve(validationState);
+      },
+      resetValidation: () => {
+        hiddenInputRef.current?.setCustomValidity("");
+        isDirtyRef.current = false;
+        lastEmittedHadErrorsRef.current = false;
+        formFieldMessageContextDispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: false, resetShowError: true }
+        });
+        formFieldMessageContextDispatch?.({
+          type: FormFieldMessagesAction.REMOVEMESSAGE,
+          payload: {
+            id: filterFieldRequiredErrorRef.current,
+            messageType: "formcontrol"
+          }
+        });
+        formFieldMessageContextDispatch?.({
+          type: FormFieldMessagesAction.REMOVEMESSAGE,
+          payload: {
+            id: filterFieldCustomErrorRef.current,
+            messageType: "formcontrol"
+          }
+        });
+      }
+    });
+    formValidityChangeRef.current = formControl.onValidityChange;
     useEffect(() => {
       if (!triggerRef.current) {
         return;
@@ -867,12 +967,12 @@ const _FilterField = forwardRef(
               };
             }
           }
+          const change = computeMinimalDocChange(
+            editorViewRef.current?.state.doc.toString() ?? "",
+            value
+          );
           viewDispatch({
-            changes: {
-              from: 0,
-              to: editorViewRef.current?.state.doc.length ?? 0,
-              insert: value
-            },
+            changes: change,
             annotations: stringAnnotation.of(ANNOTATION_DOC_CHANGED_CONTROLLED),
             selection: dispatchedSelection
           });
@@ -987,19 +1087,16 @@ const _FilterField = forwardRef(
         "data-dtrum-allow": dataDtrumAllow,
         gap: 4,
         flexDirection: "column",
-        className: clsx(styles.wrapper, consumerClassName),
+        className: clsx(
+          styles.wrapper,
+          consumerClassName,
+          containerClassName
+        ),
         style: consumerStyle,
         onMouseMove: () => {
           setHideDeleteWhileTyping(false);
         },
-        ...focusHandlers,
-        onFocus: (event) => {
-          focusHandlers.onFocus?.(event);
-          formFieldMessageContextDispatch?.({
-            type: FormFieldMessagesAction.SETISTOUCHED,
-            payload: { isTouched: false }
-          });
-        },
+        ...containerFocusProps,
         ...behavioralTrackingProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
@@ -1027,12 +1124,6 @@ const _FilterField = forwardRef(
                   hideDeleteWhileTyping
                 }
               ),
-              onBlur: (event) => {
-                if (event.relatedTarget instanceof Node && internalRootRef.current?.contains(event.relatedTarget)) {
-                  return;
-                }
-                onInputBlur();
-              },
               onKeyDown: (event) => {
                 if (event.target instanceof HTMLElement && event.target.closest("button")) {
                   return;
@@ -1235,6 +1326,7 @@ const _FilterField = forwardRef(
             {
               ref: hiddenInputRef,
               name,
+              form: _form,
               value: valueRef.current,
               required,
               disabled,
@@ -1249,8 +1341,10 @@ const _FilterField = forwardRef(
               onInvalid: (event) => {
                 event.preventDefault();
                 markTouched();
-                event.currentTarget.focus();
-                onInputBlur();
+                if (!isReportingValidityRef.current) {
+                  event.currentTarget.focus();
+                  onInputBlur();
+                }
               },
               "aria-hidden": "true"
             }