@dynatrace/strato-components 3.0.1 → 3.1.1

package/filters/filter-field/utils/conversion/string-tree-conversion.js

@@ -24,13 +24,17 @@ module.exports = __toCommonJS(string_tree_conversion_exports);
 var import_tree_conversion = require("./tree-conversion.js");
 var import_getNumberParser = require("../../parser/getNumberParser.js");
 var import_parser = require("../../parser/parser.js");
-function convertStringToFilterFieldTree(filterString, validatorMapOrParserConfig, parserConfig) {
+function convertStringToFilterFieldTree(filterString, optionsOrValidatorMap, parserConfig) {
   let validatorMap;
-  let _parserConfig = parserConfig;
-  if (isFilterFieldValidatorMap(validatorMapOrParserConfig)) {
-    validatorMap = validatorMapOrParserConfig;
-  } else if (parserConfig === void 0) {
-    _parserConfig = validatorMapOrParserConfig;
+  let customTypes = void 0;
+  let _parserConfig;
+  if (isConvertStringToFilterFieldTreeOptions(optionsOrValidatorMap)) {
+    validatorMap = optionsOrValidatorMap?.validatorMap;
+    customTypes = optionsOrValidatorMap?.customTypes;
+    _parserConfig = optionsOrValidatorMap?.parserConfig;
+  } else {
+    validatorMap = optionsOrValidatorMap;
+    _parserConfig = parserConfig;
   }
   const numberParser = (0, import_getNumberParser.getNumberParser)();
   const parsedTree = import_parser.parser.parse(filterString);
@@ -39,12 +43,14 @@ function convertStringToFilterFieldTree(filterString, validatorMapOrParserConfig
     numberParser,
     doc: filterString,
     validatorMap,
+    customTypes,
     parserConfig: _parserConfig
   });
   return { tree, isValid };
 }
-function isFilterFieldValidatorMap(value) {
-  return typeof value === "object" && (value?.keyPredicates !== void 0 || typeof value?.exhaustive === "boolean") || Array.isArray(
-    value?.comparisonOperators
-  );
+function isConvertStringToFilterFieldTreeOptions(value) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    return false;
+  }
+  return "validatorMap" in value || "customTypes" in value || "parserConfig" in value;
 }

package/filters/filter-field/utils/conversion/tree-conversion.d.ts

@@ -3,7 +3,7 @@ import type { Tree } from '@lezer/common';
 import type { FilterFieldProps } from '../../FilterField.types.js';
 import type { NumberFormatParser } from '../../parser/getNumberParser.js';
 import type { FilterFieldTree } from '../../types/tree-nodes.js';
-import type { FilterFieldValidatorMap } from '../../types/validation.js';
+import type { FilterFieldCustomTypes, FilterFieldValidatorMap } from '../../types/validation.js';
 /**
  * Used parser version
  * @internal
@@ -13,12 +13,13 @@ export declare const parserVersion = "004";
  * Iterate over the parsed document and convert the lezer tree to an object.
  * @internal
  */
-export declare function convertLezerTree({ tree, view, numberParser, doc, validatorMap, parserConfig, }: {
+export declare function convertLezerTree({ tree, view, numberParser, doc, validatorMap, customTypes, parserConfig, }: {
     tree: Tree;
     numberParser: NumberFormatParser;
     view?: EditorView;
     doc?: string;
     validatorMap?: FilterFieldValidatorMap;
+    customTypes?: FilterFieldCustomTypes;
     parserConfig?: FilterFieldProps['parserConfig'];
 }): {
     tree?: FilterFieldTree;

package/filters/filter-field/utils/conversion/tree-conversion.js

@@ -32,6 +32,7 @@ function convertLezerTree({
   numberParser,
   doc,
   validatorMap,
+  customTypes,
   parserConfig
 }) {
   const errorsStateField = view?.state.field(import_editor_config.usedErrors, false);
@@ -44,6 +45,7 @@ function convertLezerTree({
     numberParser,
     doc,
     validatorMap,
+    customTypes,
     parserConfig
   });
   const {
@@ -70,6 +72,7 @@ function convertFlatLezerTree({
   numberParser,
   doc,
   validatorMap,
+  customTypes,
   parserConfig
 }) {
   if (!doc || doc.toString() === "") {
@@ -95,6 +98,7 @@ function convertFlatLezerTree({
           doc,
           numberParser,
           validatorMap,
+          customTypes,
           parserConfig,
           "Filter"
         );

package/filters/filter-field/utils/suggestions-utils/flatten-suggestions.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from 'react';
+import type { FilterFieldSuggestion, FlattenedSuggestionItem, GroupMetadata } from '../../suggestions/Suggestion.types.js';
+import type { FilterFieldSuggestionGroup } from '../../suggestions/SuggestionGroup.types.js';
+/**
+ * Flattens a suggestions array so that every suggestion — whether standalone or inside a group — becomes its own entry.
+ * Group labels are emitted as separate `group-header` items.
+ * Empty groups are omitted entirely.
+ * The original array can contain:
+ * - Data objects of type FilterFieldSuggestion and FilterFieldSuggestionGroup
+ * - FilterField.SuggestionGroup and FilterField.SuggestionGroupLabel elements
+ * @internal
+ */
+export declare function flattenSuggestions(items: (ReactNode | FilterFieldSuggestion | FilterFieldSuggestionGroup)[]): {
+    flattenedSuggestionItems: FlattenedSuggestionItem[];
+    groupMetadata: GroupMetadata[];
+};

package/filters/filter-field/utils/suggestions-utils/flatten-suggestions.js

@@ -0,0 +1,117 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var flatten_suggestions_exports = {};
+__export(flatten_suggestions_exports, {
+  flattenSuggestions: () => flattenSuggestions
+});
+module.exports = __toCommonJS(flatten_suggestions_exports);
+var import_react = require("react");
+var import_is_slot = require("../../../../core/utils/is-slot.js");
+var import_SuggestionGroup = require("../../suggestions/SuggestionGroup.js");
+var import_SuggestionGroupLabel = require("../../suggestions/SuggestionGroupLabel.js");
+var import_tree_node_guards = require("../tree-node-guards.js");
+function flattenSuggestions(items) {
+  const flattenedSuggestionItems = [];
+  const groupMetadata = [];
+  let isFirstGroup = true;
+  for (let index = 0; index < items.length; index++) {
+    const item = items[index];
+    if ((0, import_react.isValidElement)(item)) {
+      if ((0, import_is_slot.isSlot)(item, import_SuggestionGroup.SuggestionGroup)) {
+        const { label, suggestions, children, id } = item.props;
+        const groupId = id ?? `__group_${index}`;
+        const childArray = import_react.Children.toArray(children);
+        const labelSlot = (0, import_is_slot.isSlot)(childArray[0], import_SuggestionGroupLabel.SuggestionGroupLabel) ? childArray[0] : void 0;
+        const groupedSuggestionChildren = labelSlot ? childArray.slice(1) : childArray;
+        const suggestionCount = (suggestions?.length ?? 0) + groupedSuggestionChildren.length;
+        if (suggestionCount === 0) {
+          continue;
+        }
+        const hasLabel = labelSlot !== void 0 || label !== void 0;
+        const shouldAddHeader = hasLabel || !isFirstGroup;
+        isFirstGroup = false;
+        if (shouldAddHeader) {
+          if (labelSlot) {
+            flattenedSuggestionItems.push({
+              kind: "group-header",
+              label: labelSlot,
+              groupId
+            });
+            groupMetadata.push({ groupId, label: labelSlot });
+          } else if (label) {
+            flattenedSuggestionItems.push({
+              kind: "group-header",
+              label,
+              groupId
+            });
+            groupMetadata.push({ groupId, label });
+          } else {
+            flattenedSuggestionItems.push({ kind: "group-header", groupId });
+          }
+        }
+        if (suggestions) {
+          for (const s of suggestions) {
+            flattenedSuggestionItems.push({
+              kind: "suggestion",
+              data: s,
+              groupId
+            });
+          }
+        }
+        for (const child of groupedSuggestionChildren) {
+          flattenedSuggestionItems.push({
+            kind: "react-node",
+            node: child,
+            groupId
+          });
+        }
+        continue;
+      }
+      flattenedSuggestionItems.push({ kind: "react-node", node: item });
+      continue;
+    }
+    if ((0, import_tree_node_guards.isFilterFieldSuggestionGroup)(item)) {
+      const groupId = item.id ?? `__group_${index}`;
+      if (!item.suggestions || item.suggestions.length === 0) {
+        continue;
+      }
+      const hasLabel = item.label !== void 0;
+      const shouldAddHeader = hasLabel || !isFirstGroup;
+      isFirstGroup = false;
+      if (shouldAddHeader) {
+        flattenedSuggestionItems.push({
+          kind: "group-header",
+          label: item.label,
+          groupId
+        });
+        if (hasLabel) {
+          groupMetadata.push({ groupId, label: item.label });
+        }
+      }
+      for (const s of item.suggestions) {
+        flattenedSuggestionItems.push({ kind: "suggestion", data: s, groupId });
+      }
+      continue;
+    }
+    if ((0, import_tree_node_guards.isFilterFieldSuggestion)(item)) {
+      flattenedSuggestionItems.push({ kind: "suggestion", data: item });
+    }
+  }
+  return { flattenedSuggestionItems, groupMetadata };
+}

package/filters/filter-field/utils/suggestions-utils/get-suggestions.d.ts

@@ -3,15 +3,9 @@ import type { FilterFieldProps } from '../../FilterField.types.js';
 import type { FilterFieldSuggestion } from '../../suggestions/Suggestion.types.js';
 import type { FilterFieldGroupedSuggestions, FilterFieldSuggestionsCallback } from '../../types/suggestions.js';
 import type { FilterFieldLezerNodeType, FilterFieldStatementNode, FilterFieldStatementTokenType, FilterFieldValueNode } from '../../types/tree-nodes.js';
-import type { FilterFieldValidatorMap } from '../../types/validation.js';
-/**
- * Matches a potential JSONPath (also incomplete ones like `content$.`)
- * https://regex101.com/r/9QQvzF/1
- * @internal
- */
-export declare const JSONPATH_PATTERN_PARTIAL: RegExp;
+import type { FilterFieldCustomTypes, FilterFieldValidatorMap } from '../../types/validation.js';
 /** @internal */
-export declare function getSuggestions({ suggestionTypes, overlappingSuggestions, currentStatement, currentToken, currentTokenType, prevNode, validatorMap, parserConfig, showLogicalOperators, showInclusionOperators, doc, suggestionTypeForToken, }: {
+export declare function getSuggestions({ suggestionTypes, overlappingSuggestions, currentStatement, currentToken, currentTokenType, prevNode, validatorMap, customTypes, parserConfig, showLogicalOperators, showInclusionOperators, doc, suggestionTypeForToken, }: {
     suggestionTypes: NonNullable<Parameters<FilterFieldSuggestionsCallback>[0]>['suggestionTypes'];
     overlappingSuggestions?: FilterFieldOverlappingSuggestions;
     currentStatement: FilterFieldStatementNode | undefined;
@@ -19,6 +13,7 @@ export declare function getSuggestions({ suggestionTypes, overlappingSuggestions
     currentTokenType?: FilterFieldStatementTokenType;
     prevNode: FilterFieldLezerNodeType | 'FilterValue';
     validatorMap?: FilterFieldValidatorMap;
+    customTypes?: FilterFieldCustomTypes;
     parserConfig?: FilterFieldProps['parserConfig'];
     showLogicalOperators: boolean;
     showInclusionOperators: boolean;

package/filters/filter-field/utils/suggestions-utils/get-suggestions.js

@@ -18,7 +18,6 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var get_suggestions_exports = {};
 __export(get_suggestions_exports, {
-  JSONPATH_PATTERN_PARTIAL: () => JSONPATH_PATTERN_PARTIAL,
   filterSuggestions: () => filterSuggestions,
   getSuggestions: () => getSuggestions
 });
@@ -29,7 +28,6 @@ var import_shared_suggestions = require("./shared-suggestions.js");
 var import_value_suggestions = require("./value-suggestions.js");
 var import_escape_suggestion = require("../escape-suggestion.js");
 var import_validation_helper_functions = require("../validation-utils/validation-helper-functions.js");
-const JSONPATH_PATTERN_PARTIAL = /^(?:"(?:[^"\\]|\\.)*"|[^\s"$]+)\$(?:(?:\.(?:[a-zA-Z_][\w]*|"(?:[^"\\]|\\.)*")|\[(?:\d+|"(?:[^"\\]|\\.)*")\])*)/;
 const comparisonOperatorAlias = {
   "=*": "= *",
   "!=*": "!= *"
@@ -42,6 +40,7 @@ function getSuggestions({
   currentTokenType,
   prevNode,
   validatorMap,
+  customTypes,
   parserConfig,
   showLogicalOperators,
   showInclusionOperators,
@@ -57,6 +56,7 @@ function getSuggestions({
       let keySuggestions = (0, import_key_suggestions.getKeySuggestions)(
         validatorMap,
         suggestionTypes,
+        customTypes,
         doc,
         token
       );
@@ -152,7 +152,7 @@ function getSuggestions({
     ...groupedSuggestions.comparisonOperator?.suggestions ?? [],
     ...groupedSuggestions.value?.suggestions ?? []
   ];
-  if (suggestionTypes.find((value) => value === "key") && (currentToken.type === "JSONPath" || currentToken.type === "Error" && currentToken.textValue.match(JSONPATH_PATTERN_PARTIAL))) {
+  if (suggestionTypes.find((value) => value === "key") && (currentToken.type === "JSONPath" || currentToken.type === "Error" && currentToken.textValue.match(import_key_suggestions.JSONPATH_PATTERN_PARTIAL))) {
     suggestions = [(0, import_shared_suggestions.getJSONPathHint)()];
     groupedSuggestions.key = {
       id: "strato-filter-field-key-suggestions",
@@ -182,6 +182,8 @@ function filterSuggestions(providedSuggestions, currentToken, currentValue) {
       return false;
     }
     const trimmedValue = trimEscapedCharacters(suggestion.value);
-    return trimmedValue.includes(`${textValue ?? ""}`);
+    const trimmedDisplayValue = typeof suggestion.displayValue === "string" ? trimEscapedCharacters(suggestion.displayValue) : void 0;
+    const matchTarget = trimmedDisplayValue ?? trimmedValue;
+    return matchTarget.includes(`${textValue ?? ""}`);
   });
 }

package/filters/filter-field/utils/suggestions-utils/key-suggestions.d.ts

@@ -3,12 +3,18 @@ import type { FallbackKeys, FilterStatementKeysMap } from '../../FilterField.typ
 import type { FilterFieldSuggestionProps } from '../../suggestions/Suggestion.types.js';
 import type { FilterFieldSuggestionType } from '../../types/suggestions.js';
 import type { FilterFieldLeafNode, FilterFieldStatementNode, FilterFieldValueNode } from '../../types/tree-nodes.js';
-import type { FilterFieldValidatorMap } from '../../types/validation.js';
+import type { FilterFieldCustomTypes, FilterFieldValidatorMap } from '../../types/validation.js';
+/**
+ * Matches a potential JSONPath (also incomplete ones like `content$.`)
+ * https://regex101.com/r/9QQvzF/1
+ * @internal
+ */
+export declare const JSONPATH_PATTERN_PARTIAL: RegExp;
 /**
  * Lists all defined filter keys
  * @internal
  */
-export declare function getKeySuggestions(validatorMap: FilterFieldValidatorMap | undefined, suggestionTypes?: FilterFieldSuggestionType, doc?: string, currentToken?: FilterFieldValueNode): FilterFieldSuggestionProps[];
+export declare function getKeySuggestions(validatorMap: FilterFieldValidatorMap | undefined, suggestionTypes?: FilterFieldSuggestionType, customTypes?: FilterFieldCustomTypes, doc?: string, currentToken?: FilterFieldValueNode): FilterFieldSuggestionProps[];
 /** @internal */
 export declare function getSearchSuggestions(context: CompletionContext, currentStatement: FilterFieldStatementNode | undefined, currentToken: FilterFieldValueNode, suggestionTypes: FilterFieldSuggestionType, isInsideAGroup: boolean): FilterFieldSuggestionProps[];
 /** @internal */

package/filters/filter-field/utils/suggestions-utils/key-suggestions.js

@@ -18,6 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var key_suggestions_exports = {};
 __export(key_suggestions_exports, {
+  JSONPATH_PATTERN_PARTIAL: () => JSONPATH_PATTERN_PARTIAL,
   getFallbackKeySuggestions: () => getFallbackKeySuggestions,
   getFallbackKeys: () => getFallbackKeys,
   getFilterStatementKeysMap: () => getFilterStatementKeysMap,
@@ -29,15 +30,15 @@ module.exports = __toCommonJS(key_suggestions_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
-var import_get_suggestions = require("./get-suggestions.js");
 var import_shared_suggestions = require("./shared-suggestions.js");
 var import_suggestion_type = require("./suggestion-type.js");
 var import_messages = require("../../messages.js");
 var import_type_guards = require("../validation-utils/type-guards.js");
 var import_validation_helper_functions = require("../validation-utils/validation-helper-functions.js");
+const JSONPATH_PATTERN_PARTIAL = /^(?:"(?:[^"\\]|\\.)*"|[^\s"$]+)\$(?:(?:\.(?:[a-zA-Z_][\w]*|"(?:[^"\\]|\\.)*")|\[(?:\d+|"(?:[^"\\]|\\.)*")\])*)/;
 const SEARCH_OPERATOR_VALUES = ["", "*", "* ", "*~", "* ~"];
 const isSearchOperatorValue = (value) => SEARCH_OPERATOR_VALUES.includes(value);
-function getKeySuggestions(validatorMap, suggestionTypes = [], doc, currentToken) {
+function getKeySuggestions(validatorMap, suggestionTypes = [], customTypes, doc, currentToken) {
   const keyPredicates = validatorMap?.keyPredicates;
   const validatorMapIsExhaustive = validatorMap?.exhaustive;
   let textValue = currentToken?.textValue ?? "";
@@ -68,10 +69,14 @@ function getKeySuggestions(validatorMap, suggestionTypes = [], doc, currentToken
         suggestionMatchesTextValue = true;
       }
       let valuePredicate;
+      let displayValue;
+      let details;
       if ((0, import_type_guards.isFilterFieldValidatorMapTypeSpecification)(keyPredicate)) {
         valuePredicate = keyPredicate;
       } else {
         valuePredicate = keyPredicate.valuePredicate;
+        displayValue = keyPredicate.displayValue;
+        details = keyPredicate.details;
       }
       const { suggestionType, hasLiteralValues } = (0, import_suggestion_type.getValidValueTypes)(valuePredicate);
       if (suggestionType === "JSONPath") {
@@ -85,7 +90,9 @@ function getKeySuggestions(validatorMap, suggestionTypes = [], doc, currentToken
           return {
             value: key,
             icon: getIconForValueType(type),
-            suggestionType: "validatorMap"
+            suggestionType: "validatorMap",
+            displayValue,
+            details
           };
         });
       }
@@ -93,13 +100,17 @@ function getKeySuggestions(validatorMap, suggestionTypes = [], doc, currentToken
         return {
           value: key,
           icon: getIconForValueType("Any"),
-          suggestionType: "validatorMap"
+          suggestionType: "validatorMap",
+          displayValue,
+          details
         };
       }
       return {
         value: key,
-        icon: getIconForValueType(suggestionType),
-        suggestionType: "validatorMap"
+        icon: getIconForValueType(suggestionType, customTypes),
+        suggestionType: "validatorMap",
+        displayValue,
+        details
       };
     }
   );
@@ -123,7 +134,7 @@ function getSearchSuggestions(context, currentStatement, currentToken, suggestio
   const emptyInput = context.state.doc.toString() === "";
   if (emptyInput || isSearchOperatorValue(textValue)) {
     return [(0, import_shared_suggestions.getSearchSuggestion)()];
-  } else if ((suggestionTypes.includes("key") || suggestionTypes.includes("value") || suggestionTypes.includes("pastedContent")) && !(currentToken.type === "JSONPath" || currentToken.type === "Error" && import_get_suggestions.JSONPATH_PATTERN_PARTIAL.exec(currentToken.textValue) && !currentToken.textValue.endsWith("$"))) {
+  } else if ((suggestionTypes.includes("key") || suggestionTypes.includes("value") || suggestionTypes.includes("pastedContent")) && !(currentToken.type === "JSONPath" || currentToken.type === "Error" && JSONPATH_PATTERN_PARTIAL.exec(currentToken.textValue) && !currentToken.textValue.endsWith("$"))) {
     return [(0, import_shared_suggestions.getSearchSuggestion)(textValue)];
   }
   return [];
@@ -236,7 +247,15 @@ function getFallbackKeys(validatorMap) {
   }
   return keys.length > 0 ? keys : void 0;
 }
-function getIconForValueType(type) {
+function getIconForCustomType(type, customTypes) {
+  for (const [typeName, customType] of Object.entries(customTypes)) {
+    if (typeName === type && typeof customType === "object" && customType.icon !== void 0) {
+      return customType.icon;
+    }
+  }
+  return null;
+}
+function getIconForValueType(type, customTypes) {
   switch (type) {
     case "Number": {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.HashtagIcon, {});
@@ -266,6 +285,9 @@ function getIconForValueType(type) {
     case "Any":
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.AbcIcon, {});
   }
+  if (customTypes) {
+    return getIconForCustomType(type, customTypes);
+  }
 }
 function getDefaultKeySuggestion(value, valueNeedsEscaping = false) {
   const match = /^"(.+)(?<!\\)"$/.exec(value);

package/filters/filter-field/utils/suggestions-utils/shared-suggestions.d.ts

@@ -7,7 +7,7 @@ export declare function getNoMatchingSuggestion(valueType?: FilterFieldPrimitive
 /**
  * @internal
  */
-export declare function getStartTypingSuggestion(suggestionType: 'key' | 'value' | 'search phrase', valueType?: FilterFieldPrimitive): FilterFieldSuggestion;
+export declare function getStartTypingSuggestion(suggestionType: 'key' | 'value' | 'search phrase', valueType?: FilterFieldPrimitive | string): FilterFieldSuggestion;
 /**
  * @internal
  */

package/filters/filter-field/utils/suggestions-utils/suggestion-type.d.ts

@@ -4,7 +4,7 @@ import type { FilterFieldValuePredicate, FilterFieldValuePredicateFn, FilterFiel
  * @internal
  */
 export declare function getValidValueTypes(valuePredicate: FilterFieldValuePredicate | FilterFieldValuePredicateFn | undefined): {
-    types: FilterFieldPrimitive[];
+    types: (FilterFieldPrimitive | string)[];
     suggestionType: FilterFieldValidatorMapTypePredicate['type'];
     hasLiteralValues: boolean;
 };

package/filters/filter-field/utils/suggestions-utils/suggestion-type.js

@@ -38,6 +38,9 @@ function getTypesFromValuePredicate(valuePredicate) {
   if (valuePredicate === void 0) {
     return { types: ["Any"], hasLiteralValues: false };
   }
+  if ((0, import_type_guards.isFilterFieldRichValuePredicate)(valuePredicate)) {
+    return getTypesFromValuePredicate(valuePredicate.value);
+  }
   if (typeof valuePredicate === "string") {
     return { types: ["String"], hasLiteralValues: true };
   }

package/filters/filter-field/utils/suggestions-utils/value-suggestions.js

@@ -159,10 +159,16 @@ function getDefaultValueOrWildcardSuggestion(textValue, value, validatorMap, key
 function getSuggestionFromValuePredicate(predicate, textValue) {
   const { suggestionType } = (0, import_suggestion_type.getValidValueTypes)(predicate);
   const predicateValue = getPredicateValue(predicate);
-  if (!Array.isArray(predicate) && (typeof predicate !== "object" || (0, import_type_guards.isFilterFieldValidatorMapDurationSpecification)(predicate))) {
+  if (!Array.isArray(predicate) && (typeof predicate !== "object" || (0, import_type_guards.isFilterFieldValidatorMapDurationSpecification)(predicate) || (0, import_type_guards.isFilterFieldRichValuePredicate)(predicate))) {
+    const richPredicate = (0, import_type_guards.isFilterFieldRichValuePredicate)(predicate) ? predicate : void 0;
     return {
       key: predicateValue,
-      suggestion: { value: predicateValue, suggestionType: "validatorMap" }
+      suggestion: {
+        value: predicateValue,
+        displayValue: richPredicate?.displayValue,
+        details: richPredicate?.details,
+        suggestionType: "validatorMap"
+      }
     };
   }
   if ((0, import_type_guards.isFilterFieldValidatorMapTypeSpecification)(predicate) && predicate.type === "Boolean") {
@@ -202,6 +208,9 @@ function getPredicateValue(predicate) {
   if (typeof predicate !== "object") {
     return predicate.toString();
   }
+  if ((0, import_type_guards.isFilterFieldRichValuePredicate)(predicate)) {
+    return `${predicate.value}`;
+  }
   if ((0, import_type_guards.isFilterFieldValidatorMapDurationSpecification)(predicate)) {
     return `${predicate.value}${predicate.unit}`;
   }

package/filters/filter-field/utils/validation-utils/operator-specification.d.ts

@@ -15,7 +15,7 @@ export declare const getOperatorShortName: (comparisonOperator: FilterFieldCompa
  * Returns the valid operators for the given type
  * @internal
  */
-export declare const getAllowedOperatorsForType: (type: FilterFieldPrimitive) => Array<FilterFieldComparisonOperators>;
+export declare const getAllowedOperatorsForType: (type: FilterFieldPrimitive | string) => Array<FilterFieldComparisonOperators>;
 /**
  * Default allowed operators
  * @public

package/filters/filter-field/utils/validation-utils/type-guards.d.ts

@@ -1,4 +1,4 @@
-import type { FilterFieldDuration, FilterFieldValidatorMapTypePredicate } from '../../types/validation.js';
+import type { FilterFieldDuration, FilterFieldValidatorMapTypePredicate, FilterFieldRichValuePredicate } from '../../types/validation.js';
 /**
  * Check whether the given value specification is a type specification.
  * @internal
@@ -9,3 +9,8 @@ export declare function isFilterFieldValidatorMapTypeSpecification(valueSpecific
  * @internal
  */
 export declare function isFilterFieldValidatorMapDurationSpecification(valueSpecification: unknown): valueSpecification is FilterFieldDuration;
+/**
+ * Check whether the given value specification is a value predicate with metadata.
+ * @internal
+ */
+export declare function isFilterFieldRichValuePredicate(valueSpecification: unknown): valueSpecification is FilterFieldRichValuePredicate;

package/filters/filter-field/utils/validation-utils/type-guards.js

@@ -18,14 +18,19 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var type_guards_exports = {};
 __export(type_guards_exports, {
+  isFilterFieldRichValuePredicate: () => isFilterFieldRichValuePredicate,
   isFilterFieldValidatorMapDurationSpecification: () => isFilterFieldValidatorMapDurationSpecification,
   isFilterFieldValidatorMapTypeSpecification: () => isFilterFieldValidatorMapTypeSpecification
 });
 module.exports = __toCommonJS(type_guards_exports);
 function isFilterFieldValidatorMapTypeSpecification(valueSpecification) {
-  return typeof valueSpecification === "object" && valueSpecification.type !== void 0;
+  return typeof valueSpecification === "object" && valueSpecification !== null && "type" in valueSpecification && !("value" in valueSpecification);
 }
 function isFilterFieldValidatorMapDurationSpecification(valueSpecification) {
   const castedValueSpecification = valueSpecification;
   return typeof valueSpecification === "object" && castedValueSpecification.value !== void 0 && castedValueSpecification.unit !== void 0;
 }
+function isFilterFieldRichValuePredicate(valueSpecification) {
+  const castedValueSpecification = valueSpecification;
+  return typeof valueSpecification === "object" && castedValueSpecification !== null && "value" in castedValueSpecification && !isFilterFieldValidatorMapTypeSpecification(valueSpecification) && ("displayValue" in castedValueSpecification || "details" in castedValueSpecification);
+}

package/filters/filter-field/utils/validation-utils/validation-helper-functions.d.ts

@@ -1,6 +1,6 @@
 import type { FilterFieldProps } from '../../FilterField.types.js';
 import type { FilterFieldStatementNode } from '../../types/tree-nodes.js';
-import type { FilterFieldValidatorMap, FilterFieldComparisonOperators, FilterFieldDuration } from '../../types/validation.js';
+import type { FilterFieldValidatorMap, FilterFieldComparisonOperators, FilterFieldDuration, FilterFieldCustomTypes, FilterFieldRichValuePredicate } from '../../types/validation.js';
 /**
  * Checks whether the current operator is a wildcard operator.
  * @internal
@@ -26,6 +26,10 @@ export declare function isValidSmartscapeId(value: string): boolean;
  * @internal
  */
 export declare function isValidTimestamp(value: string): boolean;
+/**
+ * Returns the type name when the value is of a custom type.
+ */
+export declare function isValidCustomType(textValue: string, customTypes?: FilterFieldCustomTypes): string | boolean;
 /**
  * checks whether an operator is valid based on the FilterField validatormap
  * @internal
@@ -35,7 +39,7 @@ export declare function isValidOperator(textValue: string, key: string | undefin
  * checks whether a value is valid based on the FilterField validatormap
  * @internal
  */
-export declare function isValidValue(key: string | undefined, valueTextValue: string, valueType: string, validatorMap: FilterFieldValidatorMap | undefined, currentStatement: FilterFieldStatementNode, filterFieldValue: string, parserConfig?: FilterFieldProps['parserConfig']): {
+export declare function isValidValue(key: string | undefined, valueTextValue: string, valueType: string, validatorMap: FilterFieldValidatorMap | undefined, currentStatement: FilterFieldStatementNode, filterFieldValue: string, customTypes?: FilterFieldCustomTypes, parserConfig?: FilterFieldProps['parserConfig']): {
     isValid: boolean;
     message?: string;
 };
@@ -43,7 +47,7 @@ export declare function isValidValue(key: string | undefined, valueTextValue: st
  * Returns the textvalue of a filterfield value predicate that is neither a function nor an array.
  * @internal
  */
-export declare function getValuePredicateTextValue(predicate: string | number | boolean | FilterFieldDuration): string;
+export declare function getValuePredicateTextValue(predicate: string | number | boolean | FilterFieldDuration | FilterFieldRichValuePredicate): string;
 /**
  * Returns the valid operators per type
  * @internal