@dynatrace/strato-components 3.10.4 → 3.11.1

package/filters/filter-field/FilterField.js

@@ -76,6 +76,7 @@ var import_suggestions_extension = require("./suggestions/suggestions-extension.
 var import_Suggestions = require("./suggestions/Suggestions.js");
 var import_SuggestionsOverlay = require("./suggestions/SuggestionsOverlay.js");
 var import_auto_format_logical_operators = require("./utils/auto-format-logical-operators.js");
+var import_compute_minimal_doc_change = require("./utils/compute-minimal-doc-change.js");
 var import_get_next_suggestion = require("./utils/get-next-suggestion.js");
 var import_normalize_validator_map = require("./utils/validation-utils/normalize-validator-map.js");
 var import_ErrorFallback = require("../../core/components/error-fallback/ErrorFallback.js");
@@ -88,11 +89,13 @@ var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_sdk_logger = require("../../core/sdk/sdk-logger.js");
 var import_is_slot = require("../../core/utils/is-slot.js");
 var editorStyles = __toESM(require("../../editors/base-code-editor/BaseCodeEditor.sty.js"));
+var import_useInternalFormRegistration = require("../../forms/form/hooks/useInternalFormRegistration.js");
 var import_FormFieldMessageContextProvider = require("../../forms/forms-core/components/form-field/FormFieldMessageContextProvider.js");
 var import_FormFieldMessageBaseItem = require("../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
 var import_useFormControl = require("../../forms/forms-core/hooks/useFormControl.js");
 var import_useFormFieldValidation = require("../../forms/forms-core/hooks/useFormFieldValidation.js");
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
+var import_useContainerFocus = require("../../forms/hooks/useContainerFocus.js");
 var import_types = require("../../forms/validation/types.js");
 var import_useCustomMessageEmitter = require("../../forms/validation/useCustomMessageEmitter.js");
 var import_useValidationStateEmitter = require("../../forms/validation/useValidationStateEmitter.js");
@@ -117,6 +120,8 @@ const _FilterField = (0, import_react.forwardRef)(
       readOnly: propReadOnly = false,
       placeholder: placeholderProp,
       id: propId,
+      _form,
+      _messageTarget,
       autoSuggestions = false,
       defaultSuggestionsCount: _defaultSuggestionsCount,
       // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
@@ -135,6 +140,8 @@ const _FilterField = (0, import_react.forwardRef)(
       filterNamespace,
       customTypes,
       onValidityChange,
+      onFocus,
+      onBlur,
       ...remainingProps
     } = props;
     const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
@@ -148,7 +155,10 @@ const _FilterField = (0, import_react.forwardRef)(
     );
     const { getSyntaxTree } = (0, import_useCachedTreeConversion.useCachedTreeConversion)();
     const intl = (0, import_react_intl.useIntl)();
-    const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+    const formValidityChangeRef = (0, import_react.useRef)(void 0);
+    const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(
+      (state2) => formValidityChangeRef.current?.(state2)
+    );
     const { showBoundary } = (0, import_react_error_boundary.useErrorBoundary)();
     const onChangeRef = (0, import_useUpdatableCallback.useUpdatableCallback)(onChange);
     const onFilterRef = (0, import_useUpdatableCallback.useUpdatableCallback)(onFilter);
@@ -334,7 +344,10 @@ const _FilterField = (0, import_react.forwardRef)(
             type: import_formfield_messages_state_reducer.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: import_types.StratoValidityStateKeys.syntaxError.toString(),
               variant: "error",
               message: intl.formatMessage(import_messages.filterFieldMessages.syntaxError),
               messageType: "formcontrol"
@@ -365,17 +378,54 @@ const _FilterField = (0, import_react.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: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
         payload: { isTouched: true }
       });
-      const state2 = getFilterFieldValidationState("blur");
-      lastEmittedHadErrorsRef.current = state2.errors.length > 0;
       emitValidationState(state2);
     };
+    const {
+      containerClassName,
+      onBlur: hookOnBlur,
+      ...restContainerFocusProps
+    } = (0, import_useContainerFocus.useContainerFocus)({
+      disabled,
+      emitValidationState,
+      getBlurValidationState: performBlurValidation,
+      onFocus: (event) => {
+        formFieldMessageContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: false }
+        });
+        focusHandlers.onFocus?.(event);
+        onFocus?.(event);
+      },
+      onBlur: (event) => {
+        focusHandlers.onBlur?.(event);
+        onBlur?.(event);
+      }
+    });
+    const isReportingValidityRef = (0, import_react.useRef)(false);
+    const containerFocusProps = {
+      ...restContainerFocusProps,
+      onBlur: (event) => {
+        isReportingValidityRef.current = true;
+        try {
+          hookOnBlur(event);
+        } finally {
+          isReportingValidityRef.current = false;
+        }
+      }
+    };
     const saveRecentFilter = (0, import_useRecentFilters.useRecentFilterMutation)(filterNamespace);
     (0, import_useRecentFilterSuggestions.useRecentFilterSuggestions)(editorViewRef, filterNamespace);
     (0, import_usePinnedFilterSuggestions.usePinnedFilterSuggestions)(
@@ -467,6 +517,56 @@ const _FilterField = (0, import_react.forwardRef)(
     const isValidSearchRef = (0, import_react.useRef)(false);
     const requiredRef = (0, import_react.useRef)(required);
     requiredRef.current = required;
+    const formControl = (0, import_useInternalFormRegistration.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: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: false, resetShowError: true }
+        });
+        formFieldMessageContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+          payload: {
+            id: filterFieldRequiredErrorRef.current,
+            messageType: "formcontrol"
+          }
+        });
+        formFieldMessageContextDispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
+          payload: {
+            id: filterFieldCustomErrorRef.current,
+            messageType: "formcontrol"
+          }
+        });
+      }
+    });
+    formValidityChangeRef.current = formControl.onValidityChange;
     (0, import_react.useEffect)(() => {
       if (!triggerRef.current) {
         return;
@@ -855,12 +955,12 @@ const _FilterField = (0, import_react.forwardRef)(
               };
             }
           }
+          const change = (0, import_compute_minimal_doc_change.computeMinimalDocChange)(
+            editorViewRef.current?.state.doc.toString() ?? "",
+            value
+          );
           viewDispatch({
-            changes: {
-              from: 0,
-              to: editorViewRef.current?.state.doc.length ?? 0,
-              insert: value
-            },
+            changes: change,
             annotations: import_editor_config.stringAnnotation.of(import_editor_config.ANNOTATION_DOC_CHANGED_CONTROLLED),
             selection: dispatchedSelection
           });
@@ -975,19 +1075,16 @@ const _FilterField = (0, import_react.forwardRef)(
         "data-dtrum-allow": dataDtrumAllow,
         gap: 4,
         flexDirection: "column",
-        className: (0, import_clsx.default)(styles.wrapper, consumerClassName),
+        className: (0, import_clsx.default)(
+          styles.wrapper,
+          consumerClassName,
+          containerClassName
+        ),
         style: consumerStyle,
         onMouseMove: () => {
           setHideDeleteWhileTyping(false);
         },
-        ...focusHandlers,
-        onFocus: (event) => {
-          focusHandlers.onFocus?.(event);
-          formFieldMessageContextDispatch?.({
-            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-            payload: { isTouched: false }
-          });
-        },
+        ...containerFocusProps,
         ...behavioralTrackingProps,
         "data-dt-component": COMPONENT_NAME,
         children: [
@@ -1015,12 +1112,6 @@ const _FilterField = (0, import_react.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;
@@ -1223,6 +1314,7 @@ const _FilterField = (0, import_react.forwardRef)(
             {
               ref: hiddenInputRef,
               name,
+              form: _form,
               value: valueRef.current,
               required,
               disabled,
@@ -1237,8 +1329,10 @@ const _FilterField = (0, import_react.forwardRef)(
               onInvalid: (event) => {
                 event.preventDefault();
                 markTouched();
-                event.currentTarget.focus();
-                onInputBlur();
+                if (!isReportingValidityRef.current) {
+                  event.currentTarget.focus();
+                  onInputBlur();
+                }
               },
               "aria-hidden": "true"
             }

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

@@ -48,33 +48,34 @@ __export(FilterField_css_exports, {
 });
 module.exports = __toCommonJS(FilterField_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
+var import_diagnostic_tooltip_css_ts_vanilla = require("../../core/styles/diagnostic-tooltip.css");
 var import_FilterField_css_ts_vanilla = require("./FilterField.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ariaDisabled = "_96tj13o-3-10-4";
-var container = "_96tj13c-3-10-4";
-var disabled = "_96tj13p-3-10-4 _96tj13n-3-10-4 _96tj13o-3-10-4";
-var error = "_96tj1311-3-10-4";
-var errorText = "_96tj13e-3-10-4";
-var errorVars = "_96tj13d-3-10-4";
-var escapedCharacter = "_96tj1310-3-10-4";
-var existsOperator = "_96tj13z-3-10-4";
-var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-10-4", variantClassNames: { hasError: { true: "_96tj13g-3-10-4" }, disabled: { true: "_96tj13h-3-10-4" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
-var filterKey = "_96tj13v-3-10-4";
-var filterStatement = "_96tj13j-3-10-4 _96tj13i-3-10-4";
-var filterStatementBase = "_96tj13i-3-10-4";
-var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-10-4", variantClassNames: { incomplete: { true: "_96tj13s-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var filterStatementDeleteIcon = "_96tj13t-3-10-4";
-var filterStatementDeleteWidget = "_96tj13q-3-10-4";
-var filterValue = "_96tj13w-3-10-4";
-var incompleteFilterStatement = "_96tj13k-3-10-4 _96tj13i-3-10-4";
-var intermediateFilterStatement = "_96tj13l-3-10-4";
-var operator = "_96tj13y-3-10-4";
-var pastedContent = "_96tj13m-3-10-4";
-var postSpotError = "_96tj1314-3-10-4";
-var preSpotError = "_96tj1313-3-10-4";
-var readOnly = "_96tj13n-3-10-4";
-var spotError = "_96tj1312-3-10-4";
-var suggestionHintContainer = "_96tj13u-3-10-4";
-var suggestionsOverlayAnnouncement = "_96tj1315-3-10-4";
-var variable = "_96tj13x-3-10-4";
-var wrapper = "_96tj13b-3-10-4";
+var ariaDisabled = "_96tj13o-3-11-1";
+var container = "_96tj13c-3-11-1";
+var disabled = "_96tj13n-3-11-1 _96tj13o-3-11-1";
+var error = "_96tj1311-3-11-1";
+var errorText = "_96tj13e-3-11-1";
+var errorVars = "_96tj13d-3-11-1";
+var escapedCharacter = "_96tj1310-3-11-1";
+var existsOperator = "_96tj13z-3-11-1";
+var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-11-1", variantClassNames: { hasError: { true: "_96tj13g-3-11-1" }, disabled: { true: "_96tj13h-3-11-1" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
+var filterKey = "_96tj13v-3-11-1";
+var filterStatement = "_96tj13j-3-11-1 _96tj13i-3-11-1";
+var filterStatementBase = "_96tj13i-3-11-1";
+var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-11-1", variantClassNames: { incomplete: { true: "_96tj13s-3-11-1" } }, defaultVariants: {}, compoundVariants: [] });
+var filterStatementDeleteIcon = "_96tj13t-3-11-1";
+var filterStatementDeleteWidget = "_96tj13q-3-11-1";
+var filterValue = "_96tj13w-3-11-1";
+var incompleteFilterStatement = "_96tj13k-3-11-1 _96tj13i-3-11-1";
+var intermediateFilterStatement = "_96tj13l-3-11-1";
+var operator = "_96tj13y-3-11-1";
+var pastedContent = "_96tj13m-3-11-1";
+var postSpotError = "_96tj1314-3-11-1";
+var preSpotError = "_96tj1313-3-11-1";
+var readOnly = "_96tj13n-3-11-1";
+var spotError = "_96tj1312-3-11-1";
+var suggestionHintContainer = "_96tj13u-3-11-1";
+var suggestionsOverlayAnnouncement = "_96tj1315-3-11-1";
+var variable = "_96tj13x-3-11-1";
+var wrapper = "_96tj13b-3-11-1";

package/filters/filter-field/FilterField.types.d.ts

@@ -7,11 +7,24 @@ import type { DataTestId } from '../../core/types/data-props.js';
 import type { FormControlProps } from '../../core/types/form-control-props.js';
 import type { MaskingProps } from '../../core/types/masking-props.js';
 import type { StylingProps } from '../../core/types/styling-props.js';
+import type { MessageTarget } from '../../forms/validation/message-routing.js';
 /**
  * Accepted properties for FilterField.
  * @public
  */
-export type FilterFieldProps = PropsWithChildren<StylingProps & DataTestId & MaskingProps & BehaviorTrackingProps & FormControlProps<string, (value: string, tree: FilterFieldTree, isValid: boolean) => void> & {
+export type FilterFieldProps = PropsWithChildren<StylingProps & DataTestId & MaskingProps & BehaviorTrackingProps & FormControlProps<string, (value: string, tree: FilterFieldTree, isValid: boolean) => void, HTMLDivElement> & {
+    /**
+     * Internal: associates this control with a `_Form` rendered outside its
+     * React subtree via the native `form` attribute. Unstable.
+     * @internal
+     */
+    _form?: string;
+    /**
+     * Internal: routes this control's native/Strato validation messages to the
+     * field outlet (default), the enclosing form's outlet, or both. Unstable.
+     * @internal
+     */
+    _messageTarget?: MessageTarget | MessageTarget[];
     /**
      * Placeholder text displayed when the filter field is empty.
      * @defaultValue 'Type to filter'

package/filters/filter-field/components/FilterFieldSuffixButtons.css

@@ -1,13 +1,13 @@
-._ck599t0-3-10-4 {
+._ck599t0-3-11-1 {
   position: absolute;
   right: var(--dt-spacings-size-4, 4px);
   top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
   gap: var(--dt-spacings-size-2, 2px);
 }
-._ck599t1-3-10-4 {
+._ck599t1-3-11-1 {
   margin: var(--dt-spacings-size-2, 2px) 0;
 }
-._ck599t2-3-10-4 {
+._ck599t2-3-11-1 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }

package/filters/filter-field/components/FilterFieldSuffixButtons.sty.js

@@ -23,6 +23,6 @@ __export(FilterFieldSuffixButtons_css_exports, {
 });
 module.exports = __toCommonJS(FilterFieldSuffixButtons_css_exports);
 var import_FilterFieldSuffixButtons_css_ts_vanilla = require("./FilterFieldSuffixButtons.css");
-var button = "_ck599t2-3-10-4";
-var divider = "_ck599t1-3-10-4";
-var suffix = "_ck599t0-3-10-4";
+var button = "_ck599t2-3-11-1";
+var divider = "_ck599t1-3-11-1";
+var suffix = "_ck599t0-3-11-1";

package/filters/filter-field/components/FilterStatement.css

@@ -1,4 +1,4 @@
-._ia7amm2-3-10-4 {
+._ia7amm2-3-11-1 {
   overflow-x: hidden;
   overflow-y: auto;
   text-overflow: ellipsis;
@@ -9,55 +9,55 @@
   min-height: 21px;
   white-space: pre;
 }
-._1smjoa1b-3-10-4 ._ia7amm2-3-10-4 {
+._1smjoa1b-3-11-1 ._ia7amm2-3-11-1 {
   line-height: 24px;
   padding-right: 12px;
   white-space: pre-wrap;
 }
-._ia7amm3-3-10-4 {
+._ia7amm3-3-11-1 {
   padding: var(--dt-spacings-size-2, 2px) calc(var(--dt-spacings-size-4, 4px) - var(--dt-borders-width-default, 1px)) 3px;
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
   transition: borderRadius var(--dt-timings-base-default, 300ms);
   text-wrap: nowrap;
 }
-._1smjoa15-3-10-4:hover ._ia7amm3-3-10-4, ._1smjoa15-3-10-4._9mvxlq0-3-10-4 ._ia7amm3-3-10-4 {
+._1smjoa15-3-11-1:hover ._ia7amm3-3-11-1, ._1smjoa15-3-11-1._9mvxlq0-3-11-1 ._ia7amm3-3-11-1 {
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
 }
-._ia7amm0-3-10-4 ._ia7amm3-3-10-4 {
+._ia7amm0-3-11-1 ._ia7amm3-3-11-1 {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   border-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1smjoa1b-3-10-4 ._ia7amm3-3-10-4 {
+._1smjoa1b-3-11-1 ._ia7amm3-3-11-1 {
   text-wrap: wrap;
 }
-._ia7amm0-3-10-4 ._ia7amm4-3-10-4 {
+._ia7amm0-3-11-1 ._ia7amm4-3-11-1 {
   background-color: transparent;
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._ia7amm0-3-10-4 ._ia7amm5-3-10-4::highlight(filter-field-escape-characters) {
+._ia7amm0-3-11-1 ._ia7amm5-3-11-1::highlight(filter-field-escape-characters) {
   color: var(--dt-colors-syntax-operators, #8136a9);
 }
-._ia7amm1-3-10-4 ._ia7amm3-3-10-4 * {
+._ia7amm1-3-11-1 ._ia7amm3-3-11-1 * {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._ia7amm1-3-10-4 ._96tj13y-3-10-4 {
+._ia7amm1-3-11-1 ._96tj13y-3-11-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._ia7amm1-3-10-4::highlight(filterfield-suggestions-highlight) {
+._ia7amm1-3-11-1::highlight(filterfield-suggestions-highlight) {
   text-decoration: none;
 }
-._ia7amm3-3-10-4::highlight(filterfield-suggestions-highlight) {
+._ia7amm3-3-11-1::highlight(filterfield-suggestions-highlight) {
   text-decoration: underline;
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   text-underline-offset: 4.2px;
 }
-._ia7amm6-3-10-4 + ._ia7amm7-3-10-4:has(+ ._ia7amm6-3-10-4) {
+._ia7amm6-3-11-1 + ._ia7amm7-3-11-1:has(+ ._ia7amm6-3-11-1) {
   text-decoration: underline;
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   text-underline-offset: 4.2px;
 }
-._1smjoa1b-3-10-4 div:has(._ia7amm2-3-10-4) {
+._1smjoa1b-3-11-1 div:has(._ia7amm2-3-11-1) {
   max-height: 72px;
   padding-right: 0;
 }

package/filters/filter-field/components/FilterStatement.js

@@ -216,13 +216,11 @@ function GroupRenderer(props) {
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.whitespace, children: " " })
         ] });
       } else if (!isLast) {
-        joiner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          WhitespaceRenderer,
-          {
-            start: childNode,
-            end: allChildren.at(index + 1)
-          }
-        );
+        let start = childNode;
+        if ((0, import_tree_node_guards.isFilterFieldStatementNode)(childNode)) {
+          start = childNode.value ?? childNode.comparisonOperator ?? childNode.key ?? childNode;
+        }
+        joiner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WhitespaceRenderer, { start, end: allChildren.at(index + 1) });
       }
       return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NodeRenderer, { node: childNode }),
@@ -279,7 +277,7 @@ function LeafNodeRenderer(props) {
   if ((0, import_tree_node_guards.isFilterFieldNumberNode)(node)) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberRenderer, { node });
   }
-  if ((0, import_tree_node_guards.isFilterFieldJSONPathNode)(node) || node && node.textValue.includes("$")) {
+  if ((0, import_tree_node_guards.isFilterFieldJSONPathNode)(node) || node?.textValue.includes("$")) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JSONPathRenderer, { node });
   }
   if ((0, import_tree_node_guards.isFilterFieldBigIntNode)(node)) {

package/filters/filter-field/components/FilterStatement.sty.js

@@ -28,14 +28,15 @@ __export(FilterStatement_css_exports, {
 module.exports = __toCommonJS(FilterStatement_css_exports);
 var import_virtualFocus_css_ts_vanilla = require("../../../core/styles/virtualFocus.css");
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
+var import_diagnostic_tooltip_css_ts_vanilla = require("../../../core/styles/diagnostic-tooltip.css");
 var import_FilterField_css_ts_vanilla = require("../FilterField.css");
 var import_SuggestionsOverlay_css_ts_vanilla = require("../suggestions/SuggestionsOverlay.css");
 var import_Suggestion_css_ts_vanilla = require("../suggestions/Suggestion.css");
 var import_FilterStatement_css_ts_vanilla = require("./FilterStatement.css");
-var escapeCharacter = "_ia7amm5-3-10-4";
-var highlight = "_ia7amm6-3-10-4";
-var highlighting = { syntax: "_ia7amm0-3-10-4", minimal: "_ia7amm1-3-10-4" };
-var incompleteStatement = "_ia7amm4-3-10-4";
-var root = "_ia7amm2-3-10-4 _96tj13c-3-10-4";
-var statement = "_ia7amm3-3-10-4";
-var whitespace = "_ia7amm7-3-10-4";
+var escapeCharacter = "_ia7amm5-3-11-1";
+var highlight = "_ia7amm6-3-11-1";
+var highlighting = { syntax: "_ia7amm0-3-11-1", minimal: "_ia7amm1-3-11-1" };
+var incompleteStatement = "_ia7amm4-3-11-1";
+var root = "_ia7amm2-3-11-1 _96tj13c-3-11-1";
+var statement = "_ia7amm3-3-11-1";
+var whitespace = "_ia7amm7-3-11-1";

package/filters/filter-field/error-fallback/filter-value-obfuscation-util.js

@@ -44,7 +44,7 @@ const TYPE_REPLACEMENT_MAP = {
   InclusionOperator: null,
   Boolean: null
 };
-const EXTENDED_RESERVED_CHARACTERS = `.${import_escape_suggestion.RESERVED_CHARACTERS}`;
+const NON_OBFUSCATED_CHARACTERS = `.$:[\\],'\`${import_escape_suggestion.RESERVED_CHARACTERS}`;
 function getReplacementChar(node) {
   if (node.type in TYPE_REPLACEMENT_MAP) {
     return TYPE_REPLACEMENT_MAP[node.type];
@@ -56,7 +56,7 @@ function obfuscateText(textValue, replacementChar) {
     return "";
   }
   return textValue.split("").map((char) => {
-    if (EXTENDED_RESERVED_CHARACTERS.includes(char)) {
+    if (NON_OBFUSCATED_CHARACTERS.includes(char)) {
       return char;
     }
     return replacementChar;

package/filters/filter-field/hooks/useFilterFieldLinting.js

@@ -115,6 +115,9 @@ function useFilterFieldLinting(customTypes) {
         invalidCharacterInIdentifier: intl.formatMessage(
           import_messages.filterFieldMessages.linting.invalidCharacterInIdentifier
         ),
+        invalidDecimalSeparatorInNumber: intl.formatMessage(
+          import_messages.filterFieldMessages.linting.invalidDecimalSeparatorInNumber
+        ),
         unsupportedSearchOperator: intl.formatMessage(
           import_messages.filterFieldMessages.linting.unsupportedSearchOperator
         ),

package/filters/filter-field/messages.d.ts

@@ -491,6 +491,11 @@ export declare const filterFieldMessages: {
             id: string;
             description: string;
         };
+        invalidDecimalSeparatorInNumber: {
+            defaultMessage: string;
+            id: string;
+            description: string;
+        };
         unsupportedSearchOperator: {
             defaultMessage: string;
             id: string;

package/filters/filter-field/messages.js

@@ -519,6 +519,11 @@ const filterFieldMessages = {
         id: "lLbR2C5+S97CTJ4v",
         description: "Filter field invalid characters"
       },
+      invalidDecimalSeparatorInNumber: {
+        defaultMessage: "Use a period as the decimal separator (for example, 3.5)",
+        id: "peQntgQSmqMbRmBI",
+        description: "Filter field comma used as decimal separator in number"
+      },
       unsupportedSearchOperator: {
         defaultMessage: "The search operator is not supported in this filter field.",
         id: "1xChk0S6M7Z4tXFB",

package/filters/filter-field/parser/character-codes.d.ts

@@ -1,5 +1,6 @@
 export declare const characterCodes: {
     EOF: number;
+    NEWLINE: number;
     SPACE: number;
     BANG: number;
     DOUBLEQUOTE: number;
@@ -10,7 +11,9 @@ export declare const characterCodes: {
     COMMA: number;
     DASH: number;
     DOT: number;
+    LESS_THAN: number;
     EQUALS: number;
+    GREATER_THAN: number;
     SQUARE_OPENING_BRACKET: number;
     BACKSLASH: number;
     TILDE: number;

package/filters/filter-field/parser/character-codes.js

@@ -23,6 +23,7 @@ __export(character_codes_exports, {
 module.exports = __toCommonJS(character_codes_exports);
 const characterCodes = {
   EOF: -1,
+  NEWLINE: 10,
   SPACE: 32,
   BANG: 33,
   DOUBLEQUOTE: 34,
@@ -33,7 +34,9 @@ const characterCodes = {
   COMMA: 44,
   DASH: 45,
   DOT: 46,
+  LESS_THAN: 60,
   EQUALS: 61,
+  GREATER_THAN: 62,
   SQUARE_OPENING_BRACKET: 91,
   BACKSLASH: 92,
   TILDE: 126

package/filters/filter-field/parser/external-tokenizers/json-path-identifier-tokenizer.js

@@ -23,11 +23,14 @@ module.exports = __toCommonJS(json_path_identifier_tokenizer_exports);
 var import_lr = require("@lezer/lr");
 var import_character_codes = require("../character-codes.js");
 var import_parser_terms = require("../parser.terms.js");
-const { BACKSLASH } = import_character_codes.characterCodes;
-const disallowedJsonPathIdentifierChars = new RegExp(/[,()!<>="$:[\]~ .]/);
+const { BACKSLASH, DOUBLEQUOTE } = import_character_codes.characterCodes;
+const disallowedJsonPathIdentifierChars = new RegExp(/[,()!<>=:[\]~ .]/);
 const jsonPathIdentifierTokenizer = new import_lr.ExternalTokenizer(
-  (inputStream, stack) => {
-    if (stack.context.lastToken !== "JsonPathBase" || inputStream.next === -1) {
+  (inputStream) => {
+    if (inputStream.next === -1) {
+      return;
+    }
+    if (inputStream.next === DOUBLEQUOTE) {
       return;
     }
     const start = inputStream.pos;

package/filters/filter-field/parser/external-tokenizers/key-identifier-tokenizer.d.ts

@@ -0,0 +1,11 @@
+import { ExternalTokenizer } from '@lezer/lr';
+/**
+ * Tokenizes the filter key as an identifier that allows a non-leading dollar sign as a literal
+ * character (e.g. `json$key = 123`). A leading dollar sign returns `0` to defer to the grammar's
+ * `Variable` token. The scanned run stops at a JSONPath boundary (`$.` or `$[`) — a trailing `$`
+ * that begins a JSONPath is left for the grammar's `JsonPathBase` rule to consume. See
+ * dev-decisions.md.
+ * @internal
+ */
+export declare const keyIdentifierTokenizer: ExternalTokenizer;
+//# sourceMappingURL=key-identifier-tokenizer.d.ts.map