@dynatrace/strato-components 3.12.1 → 3.13.0

package/filters/filter-field/decorations/wildcards-in-value.js

@@ -0,0 +1,116 @@
+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 wildcards_in_value_exports = {};
+__export(wildcards_in_value_exports, {
+  createWildcardInValueDecorationPlugin: () => createWildcardInValueDecorationPlugin,
+  createWildcardInValueDecorations: () => createWildcardInValueDecorations
+});
+module.exports = __toCommonJS(wildcards_in_value_exports);
+var import_language = require("@codemirror/language");
+var import_state = require("@codemirror/state");
+var import_view = require("@codemirror/view");
+var import_decoration_marks = require("./decoration-marks.js");
+function createWildcardInValueDecorations(view, matchesWildcardConversion) {
+  const builder = new import_state.RangeSetBuilder();
+  for (const { from, to } of view.visibleRanges) {
+    const tree = (0, import_language.syntaxTree)(view.state);
+    tree.iterate({
+      from,
+      to,
+      enter: (node) => {
+        if (node.name === "ExistsOperator") {
+          builder.add(node.to - 1, node.to, import_decoration_marks.wildcardInValueMark);
+          return false;
+        }
+        if (node.name !== "FilterSimpleValue" && node.name !== "ListValue") {
+          return;
+        }
+        const cursor = node.node.cursor();
+        if (!cursor.firstChild()) {
+          return false;
+        }
+        do {
+          if (cursor.name === "PositionOperator" || cursor.name === "InvalidPositionOperator") {
+            builder.add(cursor.from, cursor.to, import_decoration_marks.wildcardInValueMark);
+          } else if (cursor.name === "Identifier" || cursor.name === "Variable") {
+            if (matchesWildcardConversion) {
+              addMidIdentifierWildcards(builder, view, cursor.from, cursor.to);
+            }
+          } else if (cursor.name === "String" || cursor.name === "IncompleteString") {
+            if (matchesWildcardConversion) {
+              addMidIdentifierWildcards(builder, view, cursor.from, cursor.to);
+            } else {
+              addPositionWildcardsInString(
+                builder,
+                view,
+                cursor.from,
+                cursor.to
+              );
+            }
+          }
+        } while (cursor.nextSibling());
+        return false;
+      }
+    });
+  }
+  return builder.finish();
+}
+function addMidIdentifierWildcards(builder, view, nodeFrom, nodeTo) {
+  const text = view.state.sliceDoc(nodeFrom, nodeTo);
+  let i = 0;
+  while (i < text.length) {
+    if (text[i] === "\\") {
+      i += 2;
+    } else {
+      if (text[i] === "*") {
+        builder.add(nodeFrom + i, nodeFrom + i + 1, import_decoration_marks.wildcardInValueMark);
+      }
+      i++;
+    }
+  }
+}
+function addPositionWildcardsInString(builder, view, nodeFrom, nodeTo) {
+  addMidIdentifierWildcards(builder, view, nodeFrom + 1, nodeFrom + 2);
+  if (nodeTo - 2 > nodeFrom + 1) {
+    addMidIdentifierWildcards(builder, view, nodeTo - 2, nodeTo - 1);
+  }
+}
+function createWildcardInValueDecorationPlugin(matchesWildcardConversion) {
+  return import_view.ViewPlugin.fromClass(
+    class {
+      decorations;
+      constructor(view) {
+        this.decorations = createWildcardInValueDecorations(
+          view,
+          matchesWildcardConversion
+        );
+      }
+      update(update) {
+        if (update.docChanged) {
+          this.decorations = createWildcardInValueDecorations(
+            update.view,
+            matchesWildcardConversion
+          );
+        }
+      }
+    },
+    {
+      decorations: (view) => view.decorations
+    }
+  );
+}

package/filters/filter-field/extensions/syntax-highlighting-extension.d.ts

@@ -1,3 +1,3 @@
 import type { Extension } from '@codemirror/state';
-export declare const FilterFieldSyntaxHighlightingExtension: Extension;
+export declare function createFilterFieldSyntaxHighlightingExtension(matchesWildcardConversion: boolean): Extension;
 //# sourceMappingURL=syntax-highlighting-extension.d.ts.map

package/filters/filter-field/extensions/syntax-highlighting-extension.js

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var syntax_highlighting_extension_exports = {};
 __export(syntax_highlighting_extension_exports, {
-  FilterFieldSyntaxHighlightingExtension: () => FilterFieldSyntaxHighlightingExtension
+  createFilterFieldSyntaxHighlightingExtension: () => createFilterFieldSyntaxHighlightingExtension
 });
 module.exports = __toCommonJS(syntax_highlighting_extension_exports);
 var import_language = require("@codemirror/language");
@@ -32,21 +32,25 @@ var import_filter_statements = require("../decorations/filter-statements.js");
 var import_filter_values = require("../decorations/filter-values.js");
 var import_filter_variable = require("../decorations/filter-variable.js");
 var import_highlight = require("../decorations/highlight.js");
-const FilterFieldSyntaxHighlightingExtension = (() => [
-  // Enable highlighting using the defined highlighter.
-  // This adds the spans and classes used to style the different parts of a filter.
-  (0, import_language.syntaxHighlighting)(import_highlight.filterFieldHighlighter),
-  // Add decoration plugins for wrapping filter groups, statements, keys, and values
-  // in additional spans for styling. This is not possible using only a highlighter
-  // since the highlighter can only wrap nodes that have no more nesting levels.
-  import_escaped_characters.EscapedCharacterDecorationPlugin,
-  import_filter_errors.FilterErrorDecorationPlugin,
-  import_filter_keys.FilterKeyDecorationPlugin,
-  import_filter_search.FilterSearchDecorationPlugin,
-  import_filter_variable.FilterVariableDecorationPlugin,
-  import_filter_values.FilterValueDecorationPlugin,
-  import_filter_exists_operator.FilterExistsDecorationPlugin,
-  import_filter_statements_delete_widget.FilterStatementDeleteWidgetPlugin,
-  import_filter_statements.FilterStatementDecorationPlugin,
-  (0, import_view.tooltips)({ parent: document.body })
-])();
+var import_wildcards_in_value = require("../decorations/wildcards-in-value.js");
+function createFilterFieldSyntaxHighlightingExtension(matchesWildcardConversion) {
+  return [
+    // Enable highlighting using the defined highlighter.
+    // This adds the spans and classes used to style the different parts of a filter.
+    (0, import_language.syntaxHighlighting)(import_highlight.filterFieldHighlighter),
+    // Add decoration plugins for wrapping filter groups, statements, keys, and values
+    // in additional spans for styling. This is not possible using only a highlighter
+    // since the highlighter can only wrap nodes that have no more nesting levels.
+    import_escaped_characters.EscapedCharacterDecorationPlugin,
+    import_filter_errors.FilterErrorDecorationPlugin,
+    import_filter_keys.FilterKeyDecorationPlugin,
+    import_filter_search.FilterSearchDecorationPlugin,
+    import_filter_variable.FilterVariableDecorationPlugin,
+    import_filter_values.FilterValueDecorationPlugin,
+    (0, import_wildcards_in_value.createWildcardInValueDecorationPlugin)(matchesWildcardConversion),
+    import_filter_exists_operator.FilterExistsDecorationPlugin,
+    import_filter_statements_delete_widget.FilterStatementDeleteWidgetPlugin,
+    import_filter_statements.FilterStatementDecorationPlugin,
+    (0, import_view.tooltips)({ parent: document.body })
+  ];
+}

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

@@ -92,7 +92,7 @@ function useShowMore(props) {
     () => sliceFn(items, primaryCount),
     // Only recompute when the suggestions themselves change to avoid flashing
     // when the primaryCount toggles (e.g., empty vs filled input) without data changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     [items, sliceFn]
   );
   if (primaryCount === -1) {

package/filters/filter-field/hooks/useSuggestions.d.ts

@@ -54,6 +54,5 @@ export declare function useSuggestions(props: {
     applySuggestion: (element: HTMLElement | null, value: string, trailing: string | undefined, insertionStrategy: FilterFieldSuggestionProps["insertionStrategy"], cursorBeforeTrailing: boolean | undefined, range: FilterFieldNodeBase["range"] | undefined, shouldEscapeSuggestion?: boolean) => void;
     handleNextSuggestion: (nextSuggestion: HTMLElement | null) => void;
     _onSuggest: InternalFilterFieldSuggestionsCallback;
-    suggestionsOverlayHintId: string;
 };
 //# sourceMappingURL=useSuggestions.d.ts.map

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

@@ -168,9 +168,7 @@ function useSuggestions(props) {
   const contentEditableDivAriaLabel = intl.formatMessage(
     import_messages.filterFieldMessages.ariaLabel
   );
-  const suggestionsOverlayHintId = "suggestions-overlay-announcement";
   const ariaDescribedBys = ariaProps["aria-describedby"] ?? "";
-  const suggestionsHintId = isOpen ? suggestionsOverlayHintId : "";
   const ariaLabelProp = ariaLabelingProps?.["aria-label"];
   const ariaDetailsProp = ariaLabelingProps?.["aria-details"] ?? "";
   const ariaLabelledbyProp = ariaLabelingProps?.["aria-labelledby"] ?? "";
@@ -188,7 +186,7 @@ function useSuggestions(props) {
       ...ariaDisabled && {
         "aria-disabled": `${ariaDisabled}`
       },
-      "aria-describedby": (ariaDescribedBys + " " + suggestionsHintId).trim(),
+      "aria-describedby": ariaDescribedBys.trim(),
       ...ariaDetailsProp && {
         "aria-details": `${ariaDetailsProp}`
       },
@@ -205,7 +203,6 @@ function useSuggestions(props) {
       contentEditableDivAriaLabel,
       focusedListItem,
       isOpen,
-      suggestionsHintId,
       id
     ]
   );
@@ -240,7 +237,7 @@ function useSuggestions(props) {
       setFocusedListItem(void 0);
     },
     // Excluding suggestionsContext. We are accessing the current context by reference, will always be up to date.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
     [setFocusedListItem, viewDispatch]
   );
   if (prevOpen && !isOpen) {
@@ -312,7 +309,6 @@ function useSuggestions(props) {
     suggestionsContext,
     applySuggestion,
     handleNextSuggestion,
-    _onSuggest,
-    suggestionsOverlayHintId
+    _onSuggest
   };
 }

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

@@ -138,6 +138,11 @@ export declare const filterFieldMessages: {
             description: string;
             id: string;
         };
+        matchesWildcard: {
+            defaultMessage: string;
+            description: string;
+            id: string;
+        };
     };
     /**
      * Suggestions
@@ -293,11 +298,6 @@ export declare const filterFieldMessages: {
                 id: string;
                 description: string;
             };
-            overlayAnnouncement: {
-                defaultMessage: string;
-                id: string;
-                description: string;
-            };
             pastedContent: {
                 defaultMessage: string;
                 id: string;
@@ -315,32 +315,12 @@ export declare const filterFieldMessages: {
             };
         };
         ariaLiveInfo: {
-            availableSuggestions: {
+            suggestionsOpen: {
                 defaultMessage: string;
                 id: string;
                 description: string;
             };
-            moreSuggestionsAvailable: {
-                defaultMessage: string;
-                id: string;
-                description: string;
-            };
-            additionallyAvailableSuggestions: {
-                defaultMessage: string;
-                id: string;
-                description: string;
-            };
-            logicalOperator: {
-                defaultMessage: string;
-                id: string;
-                description: string;
-            };
-            recentlyUsedSuggestions: {
-                defaultMessage: string;
-                id: string;
-                description: string;
-            };
-            pinnedSuggestions: {
+            suggestionsOpenWithFilter: {
                 defaultMessage: string;
                 id: string;
                 description: string;
@@ -386,6 +366,11 @@ export declare const filterFieldMessages: {
             description: string;
             id: string;
         };
+        matchesWildcard: {
+            defaultMessage: string;
+            description: string;
+            id: string;
+        };
     };
     /**
      * Linting

package/filters/filter-field/messages.js

@@ -162,6 +162,11 @@ const filterFieldMessages = {
       defaultMessage: "Contains is not supported for this key.",
       description: "Message shown if the contains operator is not supported for this key.",
       id: "8lZa/1S3ydSfb3iO"
+    },
+    matchesWildcard: {
+      defaultMessage: "Wildcard matching is not supported for this key.",
+      description: "Message shown if the matches-wildcard operator is not supported for this key.",
+      id: "EURS16Ydd/jqrdlA"
     }
   }),
   /**
@@ -320,11 +325,6 @@ const filterFieldMessages = {
         id: "r2QQIGUPC6lQhGDf",
         description: "Aria-label for logical operator suggestions in the filter field"
       },
-      overlayAnnouncement: {
-        defaultMessage: "Suggestions overlay opened. Press enter to apply the filter when no suggestion is focused. Please continue typing to filter.",
-        id: "SfuoDLpInG4rrNfA",
-        description: "Filter field screen reader announcement for opened suggestions."
-      },
       pastedContent: {
         defaultMessage: "Suggestions for pasted content",
         id: "4ccf9fJlKURtBw/8",
@@ -342,35 +342,15 @@ const filterFieldMessages = {
       }
     }),
     ariaLiveInfo: (0, import_react_intl.defineMessages)({
-      availableSuggestions: {
-        defaultMessage: "Available suggestions:",
-        id: "zSm9YklUFyPurvQU",
-        description: "Screen reader announcement introducing the list of available filter suggestions."
-      },
-      moreSuggestionsAvailable: {
-        defaultMessage: "This is just an overview, more suggestions might be available. Continue typing to filter.",
-        id: "q2NfrgHXNjwfJzpm",
-        description: "Screen reader announcement indicating that additional suggestions exist beyond the first five displayed."
-      },
-      additionallyAvailableSuggestions: {
-        defaultMessage: "Additionally available suggestions:",
-        id: "nZQixLAUTDhflk9Q",
-        description: "Screen reader announcement introducing additional suggestion categories such as recent, pinned, or search suggestions."
-      },
-      logicalOperator: {
-        defaultMessage: "Logical operator suggestion: OR",
-        id: "p/8O9bMs2knnRDWA",
-        description: "Screen reader announcement for the availability of the logical OR operator as a suggestion option."
-      },
-      recentlyUsedSuggestions: {
-        defaultMessage: "{value} recently used suggestion(s).",
-        id: "1fdceSDwpC0elRzY",
-        description: "Screen reader announcement for the count of recently used filter suggestions available for selection."
-      },
-      pinnedSuggestions: {
-        defaultMessage: "{value} pinned filter suggestion(s).",
-        id: "dtWYZ7eG/P5QCKp5",
-        description: "Screen reader announcement for the count of user-pinned filter suggestions available for selection."
+      suggestionsOpen: {
+        defaultMessage: "Suggestions open with {count, plural, one {# option} other {# options}}. Continue typing to update suggestions.",
+        id: "dokXtjZU6w2uBddc",
+        description: "Screen reader announcement stating how many filter suggestions are available and that typing updates them."
+      },
+      suggestionsOpenWithFilter: {
+        defaultMessage: "Suggestions open with {count, plural, one {# option} other {# options}}. Continue typing to update suggestions, {filterText}",
+        id: "fhA473CUMyXpVWiB",
+        description: "Screen reader announcement stating how many filter suggestions are available, that typing updates them, and the current filter text."
       },
       filterCleared: {
         defaultMessage: "Filter cleared.",
@@ -412,6 +392,11 @@ const filterFieldMessages = {
       defaultMessage: "Doesn't contain {value}",
       description: "Message shown if the not-contains operator can be used with the current value.",
       id: "mXDFppLKSC7oX/Ba"
+    },
+    matchesWildcard: {
+      defaultMessage: "Use{value}as value with wildcard",
+      description: "Message shown if the matches-wildcard operator can be used with the current value.",
+      id: "l8fOdr9WXExJDZAY"
     }
   }),
   /**

package/filters/filter-field/suggestions/AriaLiveInfo.d.ts

@@ -1,11 +1,11 @@
-import type { FlattenedSuggestionItem } from './Suggestion.types.js';
-interface AriaLiveInfoProps {
-    flattenedSuggestionItems: FlattenedSuggestionItem[];
-}
 /**
- * Component providing hidden aria-live region to announce available suggestions to screen readers.
+ * Component providing hidden aria-live region to announce the number of available suggestions
+ * to screen readers.
+ *
+ * Keyboard interaction hints are deliberately omitted — navigating a `listbox` with the arrow
+ * keys is conveyed by the role itself, and repeating it on every keystroke was reported as
+ * excessive verbosity in an accessibility audit.
  * @internal
  */
-export declare const AriaLiveInfo: ({ flattenedSuggestionItems, }: AriaLiveInfoProps) => import("react").JSX.Element;
-export {};
+export declare const AriaLiveInfo: () => import("react").JSX.Element;
 //# sourceMappingURL=AriaLiveInfo.d.ts.map

package/filters/filter-field/suggestions/AriaLiveInfo.js

@@ -23,79 +23,21 @@ module.exports = __toCommonJS(AriaLiveInfo_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_intl = require("react-intl");
+var import_Suggestion = require("./Suggestion.js");
 var import_VisuallyHidden = require("../../../core/components/visually-hidden/VisuallyHidden.js");
-var import_can_receive_default_text_format = require("../../../core/utils/can-receive-default-text-format.js");
+var import_useId = require("../../../core/hooks/useId.js");
 var import_useFilterFieldContext = require("../hooks/useFilterFieldContext.js");
 var import_messages = require("../messages.js");
-const MAX_ANNOUNCED_SUGGESTIONS = 5;
 const ARIA_LIVE_DEBOUNCE_MS = 600;
-const DefaultSuggestionsAriaLiveInfo = ({
-  suggestions
-}) => {
-  if (!suggestions.length) {
-    return null;
+function isSelectableFlattenedSuggestion(item) {
+  if (item.kind === "suggestion") {
+    return (0, import_Suggestion.isSelectableSuggestion)(item.data);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { children: suggestions.slice(0, MAX_ANNOUNCED_SUGGESTIONS).map((suggestion, index) => {
-    let suggestionText;
-    if ((0, import_can_receive_default_text_format.canReceiveDefaultTextFormat)(suggestion.displayValue)) {
-      suggestionText = suggestion.displayValue;
-    } else if ((0, import_can_receive_default_text_format.canReceiveDefaultTextFormat)(suggestion.value)) {
-      suggestionText = suggestion.value;
-    }
-    if (suggestionText) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: suggestionText }, `${suggestionText}-${index}`);
-    }
-    return null;
-  }) });
-};
-const LogicalOperatorSuggestionAriaLiveInfo = ({
-  hasLogicalOperators
-}) => {
-  if (!hasLogicalOperators) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_intl.FormattedMessage,
-    {
-      ...import_messages.filterFieldMessages.suggestions.ariaLiveInfo.logicalOperator
-    }
-  ) });
-};
-const GeneralSuggestionsAriaLiveInfo = ({
-  values
-}) => values.map((value) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: value.displayValue }, value.value));
-const RecentAndPinnedSuggestionsAriaLiveInfo = ({
-  message,
-  count
-}) => {
-  if (count === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_react_intl.FormattedMessage,
-    {
-      ...message,
-      values: {
-        value: count
-      }
-    }
-  ) });
-};
-const extractSuggestions = (flattenedItems, limit = MAX_ANNOUNCED_SUGGESTIONS) => {
-  const result = [];
-  for (const item of flattenedItems) {
-    if (result.length >= limit) {
-      break;
-    }
-    if (item.kind === "suggestion") {
-      result.push(item.data);
-    }
-  }
-  return result;
-};
-const AriaLiveInfo = ({
-  flattenedSuggestionItems
-}) => {
+  return item.kind === "react-node" && (0, import_react.isValidElement)(item.node) && (0, import_Suggestion.isSelectableSuggestion)(item.node.props);
+}
+const AriaLiveInfo = () => {
+  const intl = (0, import_react_intl.useIntl)();
+  const liveRegionId = (0, import_useId.useId)();
   const {
     isValidSearch,
     pastedContentSuggestionValues,
@@ -103,106 +45,68 @@ const AriaLiveInfo = ({
     recentSuggestionValues,
     pinnedSuggestionValues,
     searchSuggestionValues,
-    parserConfig
+    fallbackKeySuggestionValues,
+    statementSuggestionValues,
+    parserConfig,
+    flattenedSuggestionItems,
+    editorView
   } = (0, import_useFilterFieldContext.useFilterFieldContext)();
-  const showSearchSuggestions = isValidSearch?.current && searchSuggestionValues.length > 0 && // eslint-disable-next-line @typescript-eslint/no-deprecated
+  const showSearchSuggestions = isValidSearch?.current && searchSuggestionValues.length > 0 && // oxlint-disable-next-line typescript/no-deprecated
   (parserConfig?.searchConversion ?? false);
-  const hasAdditionalContent = pastedContentSuggestionValues.length > 0 || logicalOperatorSuggestionValues.length > 0 || showSearchSuggestions || recentSuggestionValues.length > 0 || pinnedSuggestionValues.length > 0;
-  const combinedSuggestions = (0, import_react.useMemo)(
-    () => extractSuggestions(flattenedSuggestionItems, MAX_ANNOUNCED_SUGGESTIONS),
-    [flattenedSuggestionItems]
-  );
+  const optionCount = (0, import_react.useMemo)(() => {
+    let count = 0;
+    for (const item of flattenedSuggestionItems) {
+      if (isSelectableFlattenedSuggestion(item)) {
+        count++;
+      }
+    }
+    return count + pastedContentSuggestionValues.length + fallbackKeySuggestionValues.length + statementSuggestionValues.length + logicalOperatorSuggestionValues.length + recentSuggestionValues.length + pinnedSuggestionValues.length + (showSearchSuggestions ? searchSuggestionValues.length : 0);
+  }, [
+    flattenedSuggestionItems,
+    pastedContentSuggestionValues.length,
+    fallbackKeySuggestionValues.length,
+    statementSuggestionValues.length,
+    logicalOperatorSuggestionValues.length,
+    recentSuggestionValues.length,
+    pinnedSuggestionValues.length,
+    searchSuggestionValues.length,
+    showSearchSuggestions
+  ]);
+  const filterText = editorView?.state.doc.toString() ?? "";
   const [debouncedState, setDebouncedState] = (0, import_react.useState)(
-    () => ({
-      combinedSuggestions: [],
-      hasAdditionalContent: false,
-      showSearchSuggestions: false,
-      pastedContentSuggestionValues: [],
-      logicalOperatorSuggestionsAvailable: false,
-      recentSuggestionCount: 0,
-      pinnedSuggestionCount: 0,
-      searchSuggestionValues: []
-    })
+    () => ({ optionCount, filterText })
   );
   (0, import_react.useEffect)(() => {
     const handle = setTimeout(() => {
-      setDebouncedState({
-        combinedSuggestions,
-        hasAdditionalContent,
-        showSearchSuggestions: !!showSearchSuggestions,
-        pastedContentSuggestionValues,
-        logicalOperatorSuggestionsAvailable: logicalOperatorSuggestionValues.length > 0,
-        recentSuggestionCount: recentSuggestionValues.length,
-        pinnedSuggestionCount: pinnedSuggestionValues.length,
-        searchSuggestionValues
-      });
+      setDebouncedState({ optionCount, filterText });
     }, ARIA_LIVE_DEBOUNCE_MS);
     return () => {
       clearTimeout(handle);
     };
-  }, [
-    combinedSuggestions,
-    hasAdditionalContent,
-    showSearchSuggestions,
-    pastedContentSuggestionValues,
-    logicalOperatorSuggestionValues.length,
-    recentSuggestionValues.length,
-    pinnedSuggestionValues.length,
-    searchSuggestionValues
-  ]);
-  const hasContent = debouncedState.combinedSuggestions.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", children: hasContent || debouncedState.hasAdditionalContent ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_intl.FormattedMessage,
-      {
-        ...import_messages.filterFieldMessages.suggestions.ariaLiveInfo.availableSuggestions
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      DefaultSuggestionsAriaLiveInfo,
-      {
-        suggestions: debouncedState.combinedSuggestions
-      }
-    ),
-    debouncedState.hasAdditionalContent && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        GeneralSuggestionsAriaLiveInfo,
-        {
-          values: debouncedState.pastedContentSuggestionValues
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        LogicalOperatorSuggestionAriaLiveInfo,
-        {
-          hasLogicalOperators: debouncedState.logicalOperatorSuggestionsAvailable
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        RecentAndPinnedSuggestionsAriaLiveInfo,
-        {
-          message: import_messages.filterFieldMessages.suggestions.ariaLiveInfo.recentlyUsedSuggestions,
-          count: debouncedState.recentSuggestionCount
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        RecentAndPinnedSuggestionsAriaLiveInfo,
-        {
-          message: import_messages.filterFieldMessages.suggestions.ariaLiveInfo.pinnedSuggestions,
-          count: debouncedState.pinnedSuggestionCount
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        GeneralSuggestionsAriaLiveInfo,
-        {
-          values: debouncedState.searchSuggestionValues
-        }
-      )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_react_intl.FormattedMessage,
+  }, [optionCount, filterText]);
+  let announcementText = "";
+  if (debouncedState.filterText) {
+    announcementText = intl.formatMessage(
+      import_messages.filterFieldMessages.suggestions.ariaLiveInfo.suggestionsOpenWithFilter,
       {
-        ...import_messages.filterFieldMessages.suggestions.ariaLiveInfo.moreSuggestionsAvailable
+        count: debouncedState.optionCount,
+        filterText: debouncedState.filterText
       }
-    )
-  ] }) : null }) });
+    );
+  } else {
+    announcementText = intl.formatMessage(
+      import_messages.filterFieldMessages.suggestions.ariaLiveInfo.suggestionsOpen,
+      { count: debouncedState.optionCount }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      id: liveRegionId,
+      children: announcementText
+    }
+  ) });
 };