@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/filters/filter-field/hooks/recent-and-pinned/useRecentFilters.js

@@ -1,31 +1,33 @@
+import { useEffect } from "react";
+import { isForbidden, isUnauthorized } from "@dynatrace-sdk/client-state";
+import { useUserAppState } from "../../../../core/sdk/app-state/useAppState.js";
 import {
-  usePersistedFilter,
-  usePersistedFilterMutation
-} from "./usePersistedFilter.js";
-import { useRecentAndPinnedFiltersStore } from "./useRecentFiltersStore.js";
+  addFilterToState,
+  parseStoredFilters
+} from "../../state/recent-pinned-store.js";
+import { useFilterFieldLoggerContext } from "../useFilterFieldLoggerContext.js";
 function useRecentFilters(name = null) {
-  const setFilters = useRecentAndPinnedFiltersStore(
-    (state) => state.setRecentFilters,
-    name
+  const { logger } = useFilterFieldLoggerContext();
+  const { value, error } = useUserAppState(
+    `strato-FilterField-recentFilters-${name}`
   );
-  const filters = useRecentAndPinnedFiltersStore(
-    (state) => state.recentFilters,
-    name
-  );
-  usePersistedFilter(
-    name,
-    `strato-FilterField-recentFilters-${name}`,
-    setFilters
-  );
-  return filters;
+  useEffect(() => {
+    if (isUnauthorized(error) || isForbidden(error)) {
+      logger?.warn(
+        "FilterField pinned and recent error - permissions not met",
+        error
+      );
+    }
+  }, [error, logger]);
+  return name === null ? [] : parseStoredFilters(value);
 }
 function useRecentFilterMutation(name = null) {
-  const { mutateAsync } = usePersistedFilterMutation(
-    `strato-FilterField-recentFilters-${name}`,
-    name,
-    "save"
+  const { setValue } = useUserAppState(
+    `strato-FilterField-recentFilters-${name}`
+  );
+  return (filterString) => setValue(
+    (previous) => addFilterToState(parseStoredFilters(previous), filterString, 100)
   );
-  return mutateAsync;
 }
 export {
   useRecentFilterMutation,

package/esm/filters/filter-field/hooks/recent-and-pinned/useRecentFilters.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/filter-field/hooks/recent-and-pinned/useRecentFilters.ts"],
-  "sourcesContent": ["import {\n  usePersistedFilter,\n  usePersistedFilterMutation,\n} from './usePersistedFilter.js';\nimport { useRecentAndPinnedFiltersStore } from './useRecentFiltersStore.js';\nimport type { StoredFilter } from '../../state/recent-pinned-store.js';\n\n/**\n * Allows access to the namespaced recent filters store.\n * @internal\n */\nexport function useRecentFilters(name: string | null = null): StoredFilter[] {\n  const setFilters = useRecentAndPinnedFiltersStore(\n    (state) => state.setRecentFilters,\n    name,\n  );\n  const filters = useRecentAndPinnedFiltersStore(\n    (state) => state.recentFilters,\n    name,\n  );\n\n  usePersistedFilter(\n    name,\n    `strato-FilterField-recentFilters-${name}`,\n    setFilters,\n  );\n\n  return filters;\n}\n\n/**\n * Allows access to the namespaced recent filters store setter.\n * @internal\n */\nexport function useRecentFilterMutation(\n  name: string | null = null,\n): (value: string) => Promise<void | StoredFilter[]> {\n  const { mutateAsync } = usePersistedFilterMutation(\n    `strato-FilterField-recentFilters-${name}`,\n    name,\n    'save',\n  );\n\n  return mutateAsync;\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sCAAsC;AAOxC,SAAS,iBAAiB,OAAsB,MAAsB;AAC3E,QAAM,aAAa;AAAA,IACjB,CAAC,UAAU,MAAM;AAAA,IACjB;AAAA,EACF;AACA,QAAM,UAAU;AAAA,IACd,CAAC,UAAU,MAAM;AAAA,IACjB;AAAA,EACF;AAEA;AAAA,IACE;AAAA,IACA,oCAAoC,IAAI;AAAA,IACxC;AAAA,EACF;AAEA,SAAO;AACT;AAMO,SAAS,wBACd,OAAsB,MAC6B;AACnD,QAAM,EAAE,YAAY,IAAI;AAAA,IACtB,oCAAoC,IAAI;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import { useEffect } from 'react';\n\nimport { isForbidden, isUnauthorized } from '@dynatrace-sdk/client-state';\n\nimport { useUserAppState } from '../../../../core/sdk/app-state/useAppState.js';\nimport {\n  addFilterToState,\n  parseStoredFilters,\n  type RawStoredFilter,\n  type StoredFilter,\n} from '../../state/recent-pinned-store.js';\nimport { useFilterFieldLoggerContext } from '../useFilterFieldLoggerContext.js';\n\n/**\n * Allows access to the namespaced recent filters store.\n * @internal\n */\nexport function useRecentFilters(name: string | null = null): StoredFilter[] {\n  const { logger } = useFilterFieldLoggerContext();\n  const { value, error } = useUserAppState<RawStoredFilter[]>(\n    `strato-FilterField-recentFilters-${name}`,\n  );\n\n  useEffect(() => {\n    if (isUnauthorized(error) || isForbidden(error)) {\n      logger?.warn(\n        'FilterField pinned and recent error - permissions not met',\n        error,\n      );\n    }\n  }, [error, logger]);\n\n  return name === null ? [] : parseStoredFilters(value);\n}\n\n/**\n * Allows access to the namespaced recent filters store setter.\n * @internal\n */\nexport function useRecentFilterMutation(\n  name: string | null = null,\n): (filterString: string) => Promise<void> {\n  const { setValue } = useUserAppState<RawStoredFilter[]>(\n    `strato-FilterField-recentFilters-${name}`,\n  );\n\n  return (filterString: string) =>\n    setValue((previous) =>\n      addFilterToState(parseStoredFilters(previous), filterString, 100),\n    );\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,aAAa,sBAAsB;AAE5C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,mCAAmC;AAMrC,SAAS,iBAAiB,OAAsB,MAAsB;AAC3E,QAAM,EAAE,OAAO,IAAI,4BAA4B;AAC/C,QAAM,EAAE,OAAO,MAAM,IAAI;AAAA,IACvB,oCAAoC,IAAI;AAAA,EAC1C;AAEA,YAAU,MAAM;AACd,QAAI,eAAe,KAAK,KAAK,YAAY,KAAK,GAAG;AAC/C,cAAQ;AAAA,QACN;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,SAAO,SAAS,OAAO,CAAC,IAAI,mBAAmB,KAAK;AACtD;AAMO,SAAS,wBACd,OAAsB,MACmB;AACzC,QAAM,EAAE,SAAS,IAAI;AAAA,IACnB,oCAAoC,IAAI;AAAA,EAC1C;AAEA,SAAO,CAAC,iBACN;AAAA,IAAS,CAAC,aACR,iBAAiB,mBAAmB,QAAQ,GAAG,cAAc,GAAG;AAAA,EAClE;AACJ;",
   "names": []
 }

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

@@ -11,7 +11,7 @@ import { useIntl } from "react-intl";
 import { useErrorLogsStore } from "./useErrorLogsStore.js";
 import { useReferencedState } from "./useReferencedState.js";
 import { usePrevious } from "../../../core/hooks/usePrevious.js";
-import { useFormFieldValidation } from "../../../forms/forms-core/hooks/useFormFieldValidation.js";
+import { useFormFieldValidationAriaProps } from "../../../forms/forms-core/hooks/useFormFieldValidation.js";
 import {
   ANNOTATION_SUGGESTION_APPLY,
   ariaAttributesCompartment,
@@ -42,16 +42,11 @@ function useSuggestions(props) {
     editorViewRef,
     onSuggest,
     viewDispatch,
-    hiddenInputRef,
     ariaLabelingProps
   } = props;
   const { showBoundary } = useErrorBoundary();
   const setUserAction = useErrorLogsStore((state) => state.setAction);
-  const { ariaProps } = useFormFieldValidation(
-    hiddenInputRef,
-    {},
-    ariaLabelingProps
-  );
+  const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);
   const [
     autoSuggestionValues,
     setAutoSuggestionValues,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/hooks/useSuggestions.ts"],
-  "sourcesContent": ["import type { Transaction, TransactionSpec } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport {\n  isValidElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n} from 'react';\nimport { useErrorBoundary } from 'react-error-boundary';\nimport { useIntl } from 'react-intl';\n\nimport { useErrorLogsStore } from './useErrorLogsStore.js';\nimport { useReferencedState } from './useReferencedState.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { useFormFieldValidation } from '../../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport type { FilterFieldAutoSuggestionsContextProps } from '../contexts/FilterFieldContext.types.js';\nimport {\n  ANNOTATION_SUGGESTION_APPLY,\n  ariaAttributesCompartment,\n  stringAnnotation,\n} from '../editor-state-configs/editor-config.js';\nimport { filterFieldMessages } from '../messages.js';\nimport type {\n  FilterFieldSuggestion,\n  FilterFieldSuggestionProps,\n} from '../suggestions/Suggestion.types.js';\nimport type {\n  FilterFieldSuggestionsContext,\n  InternalFilterFieldSuggestionsCallback,\n} from '../suggestions/suggestions-extension.js';\nimport type {\n  FilterFieldGroupedSuggestions,\n  FilterFieldSuggestionsCallback,\n} from '../types/suggestions.js';\nimport type { FilterFieldNodeBase } from '../types/tree-nodes.js';\nimport {\n  getCurrentFocusableListItem,\n  type VirtualFocusItem,\n} from '../utils/get-next-suggestion.js';\nimport { getSuggestionTransaction } from '../utils/get-suggestion-transaction.js';\nimport type { FilterFieldSuggestionRecentPinnedSuggestion } from '../utils/suggestions-utils/recent-and-pinned-suggestions.js';\n\n/**\n * Suggestion arrays can contain ReactNode values (e.g. icons on custom types).\n * In dev mode, React elements created via jsxDEV() (used by @vitejs/plugin-react-swc\n * with development:true) carry an _owner property pointing to the currently rendering\n * Fiber, which has circular back-references. JSON.stringify would throw on those.\n * The replacer intercepts React elements before _owner is traversed, replacing each\n * element with a stable string token derived from its type.\n * @internal\n */\nexport function stringifySuggestions(value: unknown): string {\n  return JSON.stringify(value, replacer);\n}\n\nfunction replacer(_key: string, value: unknown): unknown {\n  if (isValidElement(value)) {\n    const type = value.type;\n    return `$$ReactElement:${\n      typeof type === 'string'\n        ? type\n        : (type as { displayName?: string; name?: string }).displayName ??\n          (type as { displayName?: string; name?: string }).name ??\n          'Component'\n    }`;\n  }\n\n  return value;\n}\n\nexport function useSuggestions(props: {\n  ariaDisabled: boolean | undefined;\n  autoSuggestions: boolean;\n  isOpen: boolean;\n  id: string;\n  suggestionsOverlayRef: MutableRefObject<HTMLDivElement | null>;\n  editorViewRef: MutableRefObject<EditorView | null>;\n  viewDispatch: (\n    args: Transaction | TransactionSpec | TransactionSpec[],\n  ) => void;\n  onSuggest?: FilterFieldSuggestionsCallback;\n  hiddenInputRef: MutableRefObject<HTMLInputElement | null>;\n  ariaLabelingProps?: AriaLabelingProps;\n}) {\n  const {\n    ariaDisabled,\n    autoSuggestions,\n    isOpen,\n    id,\n    suggestionsOverlayRef,\n    editorViewRef,\n    onSuggest,\n    viewDispatch,\n    hiddenInputRef,\n    ariaLabelingProps,\n  } = props;\n\n  const { showBoundary } = useErrorBoundary();\n  const setUserAction = useErrorLogsStore((state) => state.setAction);\n  const { ariaProps } = useFormFieldValidation(\n    hiddenInputRef,\n    {},\n    ariaLabelingProps,\n  );\n\n  const [\n    autoSuggestionValues,\n    setAutoSuggestionValues,\n    autoSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldGroupedSuggestions>({});\n\n  const [\n    recentSuggestionValues,\n    setRecentSuggestionValues,\n    recentSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestionRecentPinnedSuggestion[]>([]);\n\n  const [\n    pinnedSuggestionValues,\n    setPinnedSuggestionValues,\n    pinnedSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestionRecentPinnedSuggestion[]>([]);\n\n  const [\n    logicalOperatorSuggestionValues,\n    setLogicalOperatorSuggestionValues,\n    logicalOperatorSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [\n    pastedContentSuggestionValues,\n    setPastedContentSuggestionValues,\n    pastedContentSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [\n    searchSuggestionValues,\n    setSearchSuggestionValues,\n    searchSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [\n    fallbackKeySuggestionValues,\n    setFallbackKeySuggestionValues,\n    fallbackKeySuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [\n    statementSuggestionValues,\n    setStatementSuggestionValues,\n    statementSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [prevAutoSuggestionValues, setPrevAutoSuggestionValues] =\n    useState<FilterFieldGroupedSuggestions>({});\n\n  const [prevRecentSuggestionValues, setPrevRecentSuggestionValues] = useState<\n    FilterFieldSuggestionRecentPinnedSuggestion[]\n  >([]);\n\n  const [\n    prevPastedContentSuggestionValues,\n    setPrevPastedContentSuggestionValues,\n  ] = useState<FilterFieldSuggestion[]>([]);\n\n  const [prevSearchSuggestionValues, setPrevSearchSuggestionValues] = useState<\n    FilterFieldSuggestion[]\n  >([]);\n\n  const [prevFallbackKeySuggestionValues, setPrevFallbackKeySuggestionValues] =\n    useState<FilterFieldSuggestion[]>([]);\n\n  const [prevStatementSuggestionValues, setPrevStatementSuggestionValues] =\n    useState<FilterFieldSuggestion[]>([]);\n\n  const [focusedListItem, setFocusedListItem] = useState<\n    VirtualFocusItem | undefined\n  >();\n  // Previously focused suggestion. Used to trigger an update of the attributes\n  // compartment when rendering to avoid an additional re-render.\n  const prevFocusedListItem = usePrevious(focusedListItem);\n\n  // The currently entered last term to use for highlighting matching parts of suggestions.\n  const suggestionsContext = useRef<FilterFieldSuggestionsContext | undefined>(\n    undefined,\n  );\n\n  // Suggestions callback to determine which suggestions to show.\n  const _onSuggest: InternalFilterFieldSuggestionsCallback = useCallback(\n    (args) => {\n      suggestionsContext.current = args.suggestionsContext;\n\n      if (\n        autoSuggestions &&\n        stringifySuggestions(args.autoSuggestionValues) !==\n          stringifySuggestions(autoSuggestionValuesRef.current)\n      ) {\n        setAutoSuggestionValues(args.autoSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.recentSuggestionValues) !==\n        stringifySuggestions(recentSuggestionValuesRef.current)\n      ) {\n        setRecentSuggestionValues(args.recentSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.pinnedSuggestionValues) !==\n        stringifySuggestions(pinnedSuggestionValuesRef.current)\n      ) {\n        setPinnedSuggestionValues(args.pinnedSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.logicalOperatorSuggestionValues) !==\n        stringifySuggestions(logicalOperatorSuggestionValuesRef.current)\n      ) {\n        setLogicalOperatorSuggestionValues(\n          args.logicalOperatorSuggestionValues,\n        );\n      }\n\n      if (\n        stringifySuggestions(args.pastedContentSuggestionValues) !==\n        stringifySuggestions(pastedContentSuggestionValuesRef.current)\n      ) {\n        setPastedContentSuggestionValues(args.pastedContentSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.searchSuggestionValues) !==\n        stringifySuggestions(searchSuggestionValuesRef.current)\n      ) {\n        setSearchSuggestionValues(args.searchSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.fallbackKeySuggestionValues) !==\n        stringifySuggestions(fallbackKeySuggestionValuesRef.current)\n      ) {\n        setFallbackKeySuggestionValues(args.fallbackKeySuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.filterStatementSuggestionValues) !==\n        stringifySuggestions(statementSuggestionValuesRef.current)\n      ) {\n        setStatementSuggestionValues(args.filterStatementSuggestionValues);\n      }\n    },\n    [\n      autoSuggestions,\n      autoSuggestionValuesRef,\n      recentSuggestionValuesRef,\n      pinnedSuggestionValuesRef,\n      logicalOperatorSuggestionValuesRef,\n      pastedContentSuggestionValuesRef,\n      searchSuggestionValuesRef,\n      fallbackKeySuggestionValuesRef,\n      statementSuggestionValuesRef,\n      setAutoSuggestionValues,\n      setRecentSuggestionValues,\n      setPinnedSuggestionValues,\n      setLogicalOperatorSuggestionValues,\n      setPastedContentSuggestionValues,\n      setSearchSuggestionValues,\n      setFallbackKeySuggestionValues,\n      setStatementSuggestionValues,\n    ],\n  );\n\n  const [prevOpen, setPrevOpen] = useState(isOpen);\n\n  const intl = useIntl();\n  const contentEditableDivAriaLabel = intl.formatMessage(\n    filterFieldMessages.ariaLabel,\n  );\n\n  const suggestionsOverlayHintId = 'suggestions-overlay-announcement';\n  const ariaDescribedBys = ariaProps['aria-describedby'] ?? '';\n  const suggestionsHintId = isOpen ? suggestionsOverlayHintId : '';\n  const ariaLabelProp = ariaLabelingProps?.['aria-label'];\n  const ariaDetailsProp = ariaLabelingProps?.['aria-details'] ?? '';\n  const ariaLabelledbyProp = ariaLabelingProps?.['aria-labelledby'] ?? '';\n\n  const ariaAttributes = useMemo(\n    () => ({\n      'aria-label': ariaLabelProp ?? contentEditableDivAriaLabel,\n      'aria-autocomplete': 'list',\n      'aria-haspopup': 'listbox',\n      ...(isOpen && {\n        'aria-controls': `suggestions-${id}`,\n      }),\n      ...(focusedListItem?.id && {\n        'aria-activedescendant': focusedListItem?.id,\n      }),\n      ...(ariaDisabled && {\n        'aria-disabled': `${ariaDisabled}`,\n      }),\n      'aria-describedby': (ariaDescribedBys + ' ' + suggestionsHintId).trim(),\n      ...(ariaDetailsProp && {\n        'aria-details': `${ariaDetailsProp}`,\n      }),\n      ...(ariaLabelledbyProp && {\n        'aria-labelledby': `${ariaLabelledbyProp}`,\n      }),\n    }),\n    [\n      ariaDescribedBys,\n      ariaDisabled,\n      ariaLabelProp,\n      ariaDetailsProp,\n      ariaLabelledbyProp,\n      contentEditableDivAriaLabel,\n      focusedListItem,\n      isOpen,\n      suggestionsHintId,\n      id,\n    ],\n  );\n\n  /**\n   * Apply the given suggested value to the document, replacing the selection\n   * so that the cursor ends up at the end of the inserted text.\n   */\n  const applySuggestion = useCallback(\n    (\n      element: HTMLElement | null,\n      value: string,\n      trailing: string | undefined,\n      insertionStrategy: FilterFieldSuggestionProps['insertionStrategy'],\n      cursorBeforeTrailing: boolean | undefined,\n      range: FilterFieldNodeBase['range'] | undefined,\n      shouldEscapeSuggestion?: boolean,\n    ) => {\n      if (!editorViewRef.current || !suggestionsContext.current || !element) {\n        return;\n      }\n\n      setUserAction({\n        type: 'applySuggestion',\n        data: {\n          value,\n          trailing,\n          insertionStrategy,\n          cursorBeforeTrailing,\n        },\n      });\n\n      const suggestionTransaction = getSuggestionTransaction(\n        value,\n        range,\n        shouldEscapeSuggestion,\n        trailing,\n        insertionStrategy,\n        cursorBeforeTrailing,\n        suggestionsContext.current,\n        editorViewRef.current.state,\n      );\n\n      // The applied suggestion will always override the last token.\n      viewDispatch({\n        ...suggestionTransaction,\n        annotations: stringAnnotation.of(ANNOTATION_SUGGESTION_APPLY),\n      });\n      setFocusedListItem(undefined);\n    },\n    // Excluding suggestionsContext. We are accessing the current context by reference, will always be up to date.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [setFocusedListItem, viewDispatch],\n  );\n\n  if (prevOpen && !isOpen) {\n    // Defer triggering the onSuggest callback, else the filter field is still rendering\n    // while the callback may already update the suggestions, which would lead to a runtime error.\n    // (Cannot update a component while rendering a different component)\n    queueMicrotask(() => {\n      try {\n        onSuggest?.();\n      } catch (e) {\n        showBoundary(e);\n      }\n    });\n  }\n\n  // Update the currently focused suggestion.\n  if (\n    prevOpen !== isOpen ||\n    autoSuggestionValuesRef.current !== prevAutoSuggestionValues ||\n    recentSuggestionValuesRef.current !== prevRecentSuggestionValues ||\n    pastedContentSuggestionValuesRef.current !==\n      prevPastedContentSuggestionValues ||\n    searchSuggestionValuesRef.current !== prevSearchSuggestionValues ||\n    fallbackKeySuggestionValuesRef.current !==\n      prevFallbackKeySuggestionValues ||\n    statementSuggestionValuesRef.current !== prevStatementSuggestionValues\n  ) {\n    if (isOpen) {\n      // If the currently focused suggestion is still in the document, do nothing.\n      if (\n        !getCurrentFocusableListItem(\n          suggestionsOverlayRef.current,\n          focusedListItem?.id,\n        )\n      ) {\n        setFocusedListItem(undefined);\n      }\n    }\n    setPrevAutoSuggestionValues(autoSuggestionValuesRef.current ?? {});\n    setPrevRecentSuggestionValues(recentSuggestionValuesRef.current ?? []);\n    setPrevPastedContentSuggestionValues(\n      pastedContentSuggestionValuesRef.current ?? [],\n    );\n    setPrevSearchSuggestionValues(searchSuggestionValuesRef.current ?? []);\n    setPrevFallbackKeySuggestionValues(\n      fallbackKeySuggestionValuesRef.current ?? [],\n    );\n    setPrevStatementSuggestionValues(\n      statementSuggestionValuesRef.current ?? [],\n    );\n    setPrevOpen(isOpen);\n  }\n\n  // Update aria attributes if overlay state or focused suggestion changes.\n  if (prevFocusedListItem !== focusedListItem || prevOpen !== isOpen) {\n    viewDispatch({\n      effects: ariaAttributesCompartment.reconfigure(\n        EditorView.contentAttributes.of(ariaAttributes),\n      ),\n    });\n  }\n\n  const handleNextSuggestion = (nextSuggestion: HTMLElement | null) => {\n    if (nextSuggestion) {\n      const id = nextSuggestion.dataset.stratoFilterFieldVirtualFocusId;\n      const type = nextSuggestion.dataset\n        .stratoFilterFieldVirtualFocusType as VirtualFocusItem['type'];\n      setFocusedListItem({ id, type });\n      nextSuggestion.scrollIntoView({ block: 'center' });\n    }\n  };\n\n  const autoSuggestionsConfig =\n    useMemo<FilterFieldAutoSuggestionsContextProps>((): FilterFieldAutoSuggestionsContextProps => {\n      const filterValue = suggestionsContext.current?.currentStatement?.value;\n      const cursorPosition = editorViewRef.current?.state.selection.main.head;\n\n      return {\n        trailing: cursorPosition === filterValue?.range.to ? ' ' : undefined,\n        groupedSuggestions: autoSuggestionValues,\n      };\n      // Excluding editorViewRef. We are accessing the current value by reference, will always be up to date.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [autoSuggestionValues]);\n\n  return {\n    ariaAttributes,\n    autoSuggestionsConfig,\n    recentSuggestionValues,\n    pinnedSuggestionValues,\n    logicalOperatorSuggestionValues,\n    pastedContentSuggestionValues,\n    searchSuggestionValues,\n    fallbackKeySuggestionValues,\n    statementSuggestionValues,\n    focusedListItem,\n    suggestionsContext,\n    applySuggestion,\n    handleNextSuggestion,\n    _onSuggest,\n    suggestionsOverlayHintId: suggestionsOverlayHintId,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Transaction, TransactionSpec } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport {\n  isValidElement,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type MutableRefObject,\n} from 'react';\nimport { useErrorBoundary } from 'react-error-boundary';\nimport { useIntl } from 'react-intl';\n\nimport { useErrorLogsStore } from './useErrorLogsStore.js';\nimport { useReferencedState } from './useReferencedState.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport { AriaLabelingProps } from '../../../core/types/a11y-props.js';\nimport { useFormFieldValidationAriaProps } from '../../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport type { FilterFieldAutoSuggestionsContextProps } from '../contexts/FilterFieldContext.types.js';\nimport {\n  ANNOTATION_SUGGESTION_APPLY,\n  ariaAttributesCompartment,\n  stringAnnotation,\n} from '../editor-state-configs/editor-config.js';\nimport { filterFieldMessages } from '../messages.js';\nimport type {\n  FilterFieldSuggestion,\n  FilterFieldSuggestionProps,\n} from '../suggestions/Suggestion.types.js';\nimport type {\n  FilterFieldSuggestionsContext,\n  InternalFilterFieldSuggestionsCallback,\n} from '../suggestions/suggestions-extension.js';\nimport type {\n  FilterFieldGroupedSuggestions,\n  FilterFieldSuggestionsCallback,\n} from '../types/suggestions.js';\nimport type { FilterFieldNodeBase } from '../types/tree-nodes.js';\nimport {\n  getCurrentFocusableListItem,\n  type VirtualFocusItem,\n} from '../utils/get-next-suggestion.js';\nimport { getSuggestionTransaction } from '../utils/get-suggestion-transaction.js';\nimport type { FilterFieldSuggestionRecentPinnedSuggestion } from '../utils/suggestions-utils/recent-and-pinned-suggestions.js';\n\n/**\n * Suggestion arrays can contain ReactNode values (e.g. icons on custom types).\n * In dev mode, React elements created via jsxDEV() (used by @vitejs/plugin-react-swc\n * with development:true) carry an _owner property pointing to the currently rendering\n * Fiber, which has circular back-references. JSON.stringify would throw on those.\n * The replacer intercepts React elements before _owner is traversed, replacing each\n * element with a stable string token derived from its type.\n * @internal\n */\nexport function stringifySuggestions(value: unknown): string {\n  return JSON.stringify(value, replacer);\n}\n\nfunction replacer(_key: string, value: unknown): unknown {\n  if (isValidElement(value)) {\n    const type = value.type;\n    return `$$ReactElement:${\n      typeof type === 'string'\n        ? type\n        : (type as { displayName?: string; name?: string }).displayName ??\n          (type as { displayName?: string; name?: string }).name ??\n          'Component'\n    }`;\n  }\n\n  return value;\n}\n\nexport function useSuggestions(props: {\n  ariaDisabled: boolean | undefined;\n  autoSuggestions: boolean;\n  isOpen: boolean;\n  id: string;\n  suggestionsOverlayRef: MutableRefObject<HTMLDivElement | null>;\n  editorViewRef: MutableRefObject<EditorView | null>;\n  viewDispatch: (\n    args: Transaction | TransactionSpec | TransactionSpec[],\n  ) => void;\n  onSuggest?: FilterFieldSuggestionsCallback;\n  ariaLabelingProps?: AriaLabelingProps;\n}) {\n  const {\n    ariaDisabled,\n    autoSuggestions,\n    isOpen,\n    id,\n    suggestionsOverlayRef,\n    editorViewRef,\n    onSuggest,\n    viewDispatch,\n    ariaLabelingProps,\n  } = props;\n\n  const { showBoundary } = useErrorBoundary();\n  const setUserAction = useErrorLogsStore((state) => state.setAction);\n  const ariaProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  const [\n    autoSuggestionValues,\n    setAutoSuggestionValues,\n    autoSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldGroupedSuggestions>({});\n\n  const [\n    recentSuggestionValues,\n    setRecentSuggestionValues,\n    recentSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestionRecentPinnedSuggestion[]>([]);\n\n  const [\n    pinnedSuggestionValues,\n    setPinnedSuggestionValues,\n    pinnedSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestionRecentPinnedSuggestion[]>([]);\n\n  const [\n    logicalOperatorSuggestionValues,\n    setLogicalOperatorSuggestionValues,\n    logicalOperatorSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [\n    pastedContentSuggestionValues,\n    setPastedContentSuggestionValues,\n    pastedContentSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [\n    searchSuggestionValues,\n    setSearchSuggestionValues,\n    searchSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [\n    fallbackKeySuggestionValues,\n    setFallbackKeySuggestionValues,\n    fallbackKeySuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [\n    statementSuggestionValues,\n    setStatementSuggestionValues,\n    statementSuggestionValuesRef,\n  ] = useReferencedState<FilterFieldSuggestion[]>([]);\n\n  const [prevAutoSuggestionValues, setPrevAutoSuggestionValues] =\n    useState<FilterFieldGroupedSuggestions>({});\n\n  const [prevRecentSuggestionValues, setPrevRecentSuggestionValues] = useState<\n    FilterFieldSuggestionRecentPinnedSuggestion[]\n  >([]);\n\n  const [\n    prevPastedContentSuggestionValues,\n    setPrevPastedContentSuggestionValues,\n  ] = useState<FilterFieldSuggestion[]>([]);\n\n  const [prevSearchSuggestionValues, setPrevSearchSuggestionValues] = useState<\n    FilterFieldSuggestion[]\n  >([]);\n\n  const [prevFallbackKeySuggestionValues, setPrevFallbackKeySuggestionValues] =\n    useState<FilterFieldSuggestion[]>([]);\n\n  const [prevStatementSuggestionValues, setPrevStatementSuggestionValues] =\n    useState<FilterFieldSuggestion[]>([]);\n\n  const [focusedListItem, setFocusedListItem] = useState<\n    VirtualFocusItem | undefined\n  >();\n  // Previously focused suggestion. Used to trigger an update of the attributes\n  // compartment when rendering to avoid an additional re-render.\n  const prevFocusedListItem = usePrevious(focusedListItem);\n\n  // The currently entered last term to use for highlighting matching parts of suggestions.\n  const suggestionsContext = useRef<FilterFieldSuggestionsContext | undefined>(\n    undefined,\n  );\n\n  // Suggestions callback to determine which suggestions to show.\n  const _onSuggest: InternalFilterFieldSuggestionsCallback = useCallback(\n    (args) => {\n      suggestionsContext.current = args.suggestionsContext;\n\n      if (\n        autoSuggestions &&\n        stringifySuggestions(args.autoSuggestionValues) !==\n          stringifySuggestions(autoSuggestionValuesRef.current)\n      ) {\n        setAutoSuggestionValues(args.autoSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.recentSuggestionValues) !==\n        stringifySuggestions(recentSuggestionValuesRef.current)\n      ) {\n        setRecentSuggestionValues(args.recentSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.pinnedSuggestionValues) !==\n        stringifySuggestions(pinnedSuggestionValuesRef.current)\n      ) {\n        setPinnedSuggestionValues(args.pinnedSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.logicalOperatorSuggestionValues) !==\n        stringifySuggestions(logicalOperatorSuggestionValuesRef.current)\n      ) {\n        setLogicalOperatorSuggestionValues(\n          args.logicalOperatorSuggestionValues,\n        );\n      }\n\n      if (\n        stringifySuggestions(args.pastedContentSuggestionValues) !==\n        stringifySuggestions(pastedContentSuggestionValuesRef.current)\n      ) {\n        setPastedContentSuggestionValues(args.pastedContentSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.searchSuggestionValues) !==\n        stringifySuggestions(searchSuggestionValuesRef.current)\n      ) {\n        setSearchSuggestionValues(args.searchSuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.fallbackKeySuggestionValues) !==\n        stringifySuggestions(fallbackKeySuggestionValuesRef.current)\n      ) {\n        setFallbackKeySuggestionValues(args.fallbackKeySuggestionValues);\n      }\n\n      if (\n        stringifySuggestions(args.filterStatementSuggestionValues) !==\n        stringifySuggestions(statementSuggestionValuesRef.current)\n      ) {\n        setStatementSuggestionValues(args.filterStatementSuggestionValues);\n      }\n    },\n    [\n      autoSuggestions,\n      autoSuggestionValuesRef,\n      recentSuggestionValuesRef,\n      pinnedSuggestionValuesRef,\n      logicalOperatorSuggestionValuesRef,\n      pastedContentSuggestionValuesRef,\n      searchSuggestionValuesRef,\n      fallbackKeySuggestionValuesRef,\n      statementSuggestionValuesRef,\n      setAutoSuggestionValues,\n      setRecentSuggestionValues,\n      setPinnedSuggestionValues,\n      setLogicalOperatorSuggestionValues,\n      setPastedContentSuggestionValues,\n      setSearchSuggestionValues,\n      setFallbackKeySuggestionValues,\n      setStatementSuggestionValues,\n    ],\n  );\n\n  const [prevOpen, setPrevOpen] = useState(isOpen);\n\n  const intl = useIntl();\n  const contentEditableDivAriaLabel = intl.formatMessage(\n    filterFieldMessages.ariaLabel,\n  );\n\n  const suggestionsOverlayHintId = 'suggestions-overlay-announcement';\n  const ariaDescribedBys = ariaProps['aria-describedby'] ?? '';\n  const suggestionsHintId = isOpen ? suggestionsOverlayHintId : '';\n  const ariaLabelProp = ariaLabelingProps?.['aria-label'];\n  const ariaDetailsProp = ariaLabelingProps?.['aria-details'] ?? '';\n  const ariaLabelledbyProp = ariaLabelingProps?.['aria-labelledby'] ?? '';\n\n  const ariaAttributes = useMemo(\n    () => ({\n      'aria-label': ariaLabelProp ?? contentEditableDivAriaLabel,\n      'aria-autocomplete': 'list',\n      'aria-haspopup': 'listbox',\n      ...(isOpen && {\n        'aria-controls': `suggestions-${id}`,\n      }),\n      ...(focusedListItem?.id && {\n        'aria-activedescendant': focusedListItem?.id,\n      }),\n      ...(ariaDisabled && {\n        'aria-disabled': `${ariaDisabled}`,\n      }),\n      'aria-describedby': (ariaDescribedBys + ' ' + suggestionsHintId).trim(),\n      ...(ariaDetailsProp && {\n        'aria-details': `${ariaDetailsProp}`,\n      }),\n      ...(ariaLabelledbyProp && {\n        'aria-labelledby': `${ariaLabelledbyProp}`,\n      }),\n    }),\n    [\n      ariaDescribedBys,\n      ariaDisabled,\n      ariaLabelProp,\n      ariaDetailsProp,\n      ariaLabelledbyProp,\n      contentEditableDivAriaLabel,\n      focusedListItem,\n      isOpen,\n      suggestionsHintId,\n      id,\n    ],\n  );\n\n  /**\n   * Apply the given suggested value to the document, replacing the selection\n   * so that the cursor ends up at the end of the inserted text.\n   */\n  const applySuggestion = useCallback(\n    (\n      element: HTMLElement | null,\n      value: string,\n      trailing: string | undefined,\n      insertionStrategy: FilterFieldSuggestionProps['insertionStrategy'],\n      cursorBeforeTrailing: boolean | undefined,\n      range: FilterFieldNodeBase['range'] | undefined,\n      shouldEscapeSuggestion?: boolean,\n    ) => {\n      if (!editorViewRef.current || !suggestionsContext.current || !element) {\n        return;\n      }\n\n      setUserAction({\n        type: 'applySuggestion',\n        data: {\n          value,\n          trailing,\n          insertionStrategy,\n          cursorBeforeTrailing,\n        },\n      });\n\n      const suggestionTransaction = getSuggestionTransaction(\n        value,\n        range,\n        shouldEscapeSuggestion,\n        trailing,\n        insertionStrategy,\n        cursorBeforeTrailing,\n        suggestionsContext.current,\n        editorViewRef.current.state,\n      );\n\n      // The applied suggestion will always override the last token.\n      viewDispatch({\n        ...suggestionTransaction,\n        annotations: stringAnnotation.of(ANNOTATION_SUGGESTION_APPLY),\n      });\n      setFocusedListItem(undefined);\n    },\n    // Excluding suggestionsContext. We are accessing the current context by reference, will always be up to date.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [setFocusedListItem, viewDispatch],\n  );\n\n  if (prevOpen && !isOpen) {\n    // Defer triggering the onSuggest callback, else the filter field is still rendering\n    // while the callback may already update the suggestions, which would lead to a runtime error.\n    // (Cannot update a component while rendering a different component)\n    queueMicrotask(() => {\n      try {\n        onSuggest?.();\n      } catch (e) {\n        showBoundary(e);\n      }\n    });\n  }\n\n  // Update the currently focused suggestion.\n  if (\n    prevOpen !== isOpen ||\n    autoSuggestionValuesRef.current !== prevAutoSuggestionValues ||\n    recentSuggestionValuesRef.current !== prevRecentSuggestionValues ||\n    pastedContentSuggestionValuesRef.current !==\n      prevPastedContentSuggestionValues ||\n    searchSuggestionValuesRef.current !== prevSearchSuggestionValues ||\n    fallbackKeySuggestionValuesRef.current !==\n      prevFallbackKeySuggestionValues ||\n    statementSuggestionValuesRef.current !== prevStatementSuggestionValues\n  ) {\n    if (isOpen) {\n      // If the currently focused suggestion is still in the document, do nothing.\n      if (\n        !getCurrentFocusableListItem(\n          suggestionsOverlayRef.current,\n          focusedListItem?.id,\n        )\n      ) {\n        setFocusedListItem(undefined);\n      }\n    }\n    setPrevAutoSuggestionValues(autoSuggestionValuesRef.current ?? {});\n    setPrevRecentSuggestionValues(recentSuggestionValuesRef.current ?? []);\n    setPrevPastedContentSuggestionValues(\n      pastedContentSuggestionValuesRef.current ?? [],\n    );\n    setPrevSearchSuggestionValues(searchSuggestionValuesRef.current ?? []);\n    setPrevFallbackKeySuggestionValues(\n      fallbackKeySuggestionValuesRef.current ?? [],\n    );\n    setPrevStatementSuggestionValues(\n      statementSuggestionValuesRef.current ?? [],\n    );\n    setPrevOpen(isOpen);\n  }\n\n  // Update aria attributes if overlay state or focused suggestion changes.\n  if (prevFocusedListItem !== focusedListItem || prevOpen !== isOpen) {\n    viewDispatch({\n      effects: ariaAttributesCompartment.reconfigure(\n        EditorView.contentAttributes.of(ariaAttributes),\n      ),\n    });\n  }\n\n  const handleNextSuggestion = (nextSuggestion: HTMLElement | null) => {\n    if (nextSuggestion) {\n      const id = nextSuggestion.dataset.stratoFilterFieldVirtualFocusId;\n      const type = nextSuggestion.dataset\n        .stratoFilterFieldVirtualFocusType as VirtualFocusItem['type'];\n      setFocusedListItem({ id, type });\n      nextSuggestion.scrollIntoView({ block: 'center' });\n    }\n  };\n\n  const autoSuggestionsConfig =\n    useMemo<FilterFieldAutoSuggestionsContextProps>((): FilterFieldAutoSuggestionsContextProps => {\n      const filterValue = suggestionsContext.current?.currentStatement?.value;\n      const cursorPosition = editorViewRef.current?.state.selection.main.head;\n\n      return {\n        trailing: cursorPosition === filterValue?.range.to ? ' ' : undefined,\n        groupedSuggestions: autoSuggestionValues,\n      };\n      // Excluding editorViewRef. We are accessing the current value by reference, will always be up to date.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [autoSuggestionValues]);\n\n  return {\n    ariaAttributes,\n    autoSuggestionsConfig,\n    recentSuggestionValues,\n    pinnedSuggestionValues,\n    logicalOperatorSuggestionValues,\n    pastedContentSuggestionValues,\n    searchSuggestionValues,\n    fallbackKeySuggestionValues,\n    statementSuggestionValues,\n    focusedListItem,\n    suggestionsContext,\n    applySuggestion,\n    handleNextSuggestion,\n    _onSuggest,\n    suggestionsOverlayHintId: suggestionsOverlayHintId,\n  };\n}\n"],
+  "mappings": "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",
   "names": ["id"]
 }

package/esm/filters/filter-field/state/recent-pinned-store.js

@@ -1,5 +1,13 @@
-import { createStore } from "zustand";
 import { parserVersion } from "../utils/conversion/tree-conversion.js";
+function parseStoredFilters(raw) {
+  if (!raw) {
+    return [];
+  }
+  return raw.map((f) => ({
+    ...f,
+    timeUsed: f.timeUsed !== null && f.timeUsed !== void 0 ? new Date(f.timeUsed) : /* @__PURE__ */ new Date()
+  }));
+}
 function addFilterToState(storedFilters, filter, limit) {
   const trimmedFilter = filter.trim();
   const foundIndex = storedFilters.findIndex(
@@ -32,57 +40,9 @@ function removeFilterFromState(storedFilters, filter) {
   }
   return newValues;
 }
-function createRecentAndPinnedFilterStore() {
-  return createStore((set, get) => ({
-    canPin: true,
-    setCanPin: (canPin) => {
-      set(() => ({ canPin }));
-    },
-    recentFilters: [],
-    setRecentFilters: (filters) => {
-      set(() => ({ recentFilters: filters }));
-    },
-    saveRecentFilter: (filterString) => {
-      set((state) => ({
-        recentFilters: addFilterToState(state.recentFilters, filterString, 100)
-      }));
-      return get().recentFilters;
-    },
-    pinnedFilters: [],
-    setPinnedFilters: (filters) => {
-      set(() => ({ pinnedFilters: filters }));
-    },
-    pinFilter: (filterString) => {
-      set((state) => ({
-        pinnedFilters: addFilterToState(state.pinnedFilters, filterString, 10)
-      }));
-      return get().pinnedFilters;
-    },
-    unpinFilter: (filterString) => {
-      set((state) => ({
-        pinnedFilters: removeFilterFromState(state.pinnedFilters, filterString)
-      }));
-      return get().pinnedFilters;
-    }
-  }));
-}
-const voidStore = createStore(() => ({
-  canPin: true,
-  setCanPin: () => void 0,
-  recentFilters: [],
-  setRecentFilters: () => void 0,
-  saveRecentFilter: (filter) => [],
-  pinnedFilters: [],
-  setPinnedFilters: (filters) => void 0,
-  pinFilter: (filter) => [],
-  unpinFilter: (filter) => []
-}));
-const scopedRecentAndPinnedFiltersStores = /* @__PURE__ */ new Map([["root", createRecentAndPinnedFilterStore()]]);
 export {
   addFilterToState,
-  createRecentAndPinnedFilterStore,
-  removeFilterFromState,
-  scopedRecentAndPinnedFiltersStores,
-  voidStore
+  parseStoredFilters,
+  removeFilterFromState
 };
 //# sourceMappingURL=recent-pinned-store.js.map

package/esm/filters/filter-field/state/recent-pinned-store.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/state/recent-pinned-store.tsx"],
-  "sourcesContent": ["import { createStore, type StoreApi } from 'zustand';\n\nimport { parserVersion } from '../utils/conversion/tree-conversion.js';\n\n/** @internal */\nexport interface StoredFilter {\n  filter: string;\n  parserVersion: string;\n  timeUsed: Date;\n}\n\n/**\n * Interface defining the store for recent filters.\n * @internal\n */\nexport interface RecentAndPinnedFiltersState {\n  canPin: boolean;\n  setCanPin: (canPin: boolean) => void;\n  recentFilters: Array<StoredFilter>;\n  setRecentFilters: (filters: Array<StoredFilter>) => void;\n  saveRecentFilter: (filter: string) => Array<StoredFilter>;\n  pinnedFilters: Array<StoredFilter>;\n  setPinnedFilters: (filters: Array<StoredFilter>) => void;\n  pinFilter: (filter: string) => Array<StoredFilter>;\n  unpinFilter: (filter: string) => Array<StoredFilter>;\n}\n\n/**\n * Update logic for saving a filter to the store.\n * @internal\n */\nexport function addFilterToState(\n  storedFilters: StoredFilter[],\n  filter: string,\n  limit: number,\n): StoredFilter[] {\n  const trimmedFilter = filter.trim();\n  const foundIndex = storedFilters.findIndex(\n    (saved) => saved.filter === trimmedFilter,\n  );\n  const newValues = [...storedFilters];\n\n  // The current filter that is trying to be saved was not in the store yet\n  // so we can add it.\n  if (foundIndex === -1) {\n    newValues.push({\n      filter: trimmedFilter,\n      parserVersion: parserVersion,\n      timeUsed: new Date(),\n    });\n  } else if (foundIndex > -1) {\n    // If the filter is found in the list, but the parser version\n    // mismatches, we can update the parser version.\n    if (storedFilters[foundIndex].parserVersion !== parserVersion) {\n      newValues[foundIndex].parserVersion = parserVersion;\n    }\n\n    // If the filter is found in the list, we can also update the timeUsed\n    storedFilters[foundIndex].timeUsed = new Date();\n  }\n\n  // Sort by timeUsed descending (newest first).\n  newValues.sort((a, b) => b.timeUsed.getTime() - a.timeUsed.getTime());\n\n  return newValues.slice(0, limit);\n}\n\n/**\n * Update logic for unpinning a filter\n * @internal\n */\nexport function removeFilterFromState(\n  storedFilters: StoredFilter[],\n  filter: string,\n): StoredFilter[] {\n  const trimmedFilter = filter.trim();\n  const foundIndex = storedFilters.findIndex(\n    (saved) => saved.filter === trimmedFilter,\n  );\n  const newValues = [...storedFilters];\n\n  if (foundIndex > -1) {\n    newValues.splice(foundIndex, 1);\n  }\n  return newValues;\n}\n\n/**\n * Creates a standalone store that can be used to namespace connected filter field storages.\n * @internal\n */\nexport function createRecentAndPinnedFilterStore() {\n  return createStore<RecentAndPinnedFiltersState>((set, get) => ({\n    canPin: true,\n    setCanPin: (canPin: boolean) => {\n      set(() => ({ canPin }));\n    },\n    recentFilters: [],\n    setRecentFilters: (filters: StoredFilter[]) => {\n      set(() => ({ recentFilters: filters }));\n    },\n    saveRecentFilter: (filterString: string) => {\n      set((state) => ({\n        recentFilters: addFilterToState(state.recentFilters, filterString, 100),\n      }));\n      return get().recentFilters;\n    },\n    pinnedFilters: [],\n    setPinnedFilters: (filters: StoredFilter[]) => {\n      set(() => ({ pinnedFilters: filters }));\n    },\n    pinFilter: (filterString: string) => {\n      set((state) => ({\n        pinnedFilters: addFilterToState(state.pinnedFilters, filterString, 10),\n      }));\n      return get().pinnedFilters;\n    },\n    unpinFilter: (filterString: string) => {\n      set((state) => ({\n        pinnedFilters: removeFilterFromState(state.pinnedFilters, filterString),\n      }));\n      return get().pinnedFilters;\n    },\n  }));\n}\n\n/**\n * Void store for opt out feature\n * @internal\n */\nexport const voidStore = createStore<RecentAndPinnedFiltersState>(() => ({\n  canPin: true,\n  setCanPin: () => undefined,\n  recentFilters: [],\n  setRecentFilters: () => undefined,\n  saveRecentFilter: (filter: string) => [],\n  pinnedFilters: [],\n  setPinnedFilters: (filters: StoredFilter[]) => undefined,\n  pinFilter: (filter: string) => [],\n  unpinFilter: (filter: string) => [],\n}));\n\n/**\n * Create a shareable saved filters store map that maps a namespace to a store.\n * @internal\n */\nexport const scopedRecentAndPinnedFiltersStores = new Map<\n  string | symbol,\n  StoreApi<RecentAndPinnedFiltersState>\n>([['root', createRecentAndPinnedFilterStore()]]);\n"],
-  "mappings": "AAAA,SAAS,mBAAkC;AAE3C,SAAS,qBAAqB;AA6BvB,SAAS,iBACd,eACA,QACA,OACgB;AAChB,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,cAAc;AAAA,IAC/B,CAAC,UAAU,MAAM,WAAW;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,GAAG,aAAa;AAInC,MAAI,eAAe,IAAI;AACrB,cAAU,KAAK;AAAA,MACb,QAAQ;AAAA,MACR;AAAA,MACA,UAAU,oBAAI,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,WAAW,aAAa,IAAI;AAG1B,QAAI,cAAc,UAAU,EAAE,kBAAkB,eAAe;AAC7D,gBAAU,UAAU,EAAE,gBAAgB;AAAA,IACxC;AAGA,kBAAc,UAAU,EAAE,WAAW,oBAAI,KAAK;AAAA,EAChD;AAGA,YAAU,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,QAAQ,IAAI,EAAE,SAAS,QAAQ,CAAC;AAEpE,SAAO,UAAU,MAAM,GAAG,KAAK;AACjC;AAMO,SAAS,sBACd,eACA,QACgB;AAChB,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,cAAc;AAAA,IAC/B,CAAC,UAAU,MAAM,WAAW;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,GAAG,aAAa;AAEnC,MAAI,aAAa,IAAI;AACnB,cAAU,OAAO,YAAY,CAAC;AAAA,EAChC;AACA,SAAO;AACT;AAMO,SAAS,mCAAmC;AACjD,SAAO,YAAyC,CAAC,KAAK,SAAS;AAAA,IAC7D,QAAQ;AAAA,IACR,WAAW,CAAC,WAAoB;AAC9B,UAAI,OAAO,EAAE,OAAO,EAAE;AAAA,IACxB;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAC,YAA4B;AAC7C,UAAI,OAAO,EAAE,eAAe,QAAQ,EAAE;AAAA,IACxC;AAAA,IACA,kBAAkB,CAAC,iBAAyB;AAC1C,UAAI,CAAC,WAAW;AAAA,QACd,eAAe,iBAAiB,MAAM,eAAe,cAAc,GAAG;AAAA,MACxE,EAAE;AACF,aAAO,IAAI,EAAE;AAAA,IACf;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,kBAAkB,CAAC,YAA4B;AAC7C,UAAI,OAAO,EAAE,eAAe,QAAQ,EAAE;AAAA,IACxC;AAAA,IACA,WAAW,CAAC,iBAAyB;AACnC,UAAI,CAAC,WAAW;AAAA,QACd,eAAe,iBAAiB,MAAM,eAAe,cAAc,EAAE;AAAA,MACvE,EAAE;AACF,aAAO,IAAI,EAAE;AAAA,IACf;AAAA,IACA,aAAa,CAAC,iBAAyB;AACrC,UAAI,CAAC,WAAW;AAAA,QACd,eAAe,sBAAsB,MAAM,eAAe,YAAY;AAAA,MACxE,EAAE;AACF,aAAO,IAAI,EAAE;AAAA,IACf;AAAA,EACF,EAAE;AACJ;AAMO,MAAM,YAAY,YAAyC,OAAO;AAAA,EACvE,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EACjB,eAAe,CAAC;AAAA,EAChB,kBAAkB,MAAM;AAAA,EACxB,kBAAkB,CAAC,WAAmB,CAAC;AAAA,EACvC,eAAe,CAAC;AAAA,EAChB,kBAAkB,CAAC,YAA4B;AAAA,EAC/C,WAAW,CAAC,WAAmB,CAAC;AAAA,EAChC,aAAa,CAAC,WAAmB,CAAC;AACpC,EAAE;AAMK,MAAM,qCAAqC,oBAAI,IAGpD,CAAC,CAAC,QAAQ,iCAAiC,CAAC,CAAC,CAAC;",
+  "sourcesContent": ["import { parserVersion } from '../utils/conversion/tree-conversion.js';\n\n/** @internal */\nexport interface StoredFilter {\n  filter: string;\n  parserVersion: string;\n  timeUsed: Date;\n}\n\n/**\n * JSON shape as stored. timeUsed arrives as an ISO string after JSON.parse,\n * but may also be a Date when returned from addFilterToState (before serialization).\n * @internal\n */\nexport interface RawStoredFilter {\n  filter: string;\n  parserVersion?: string;\n  timeUsed?: Date | string;\n}\n\n/**\n * Re-hydrate a JSON-parsed filter array, converting timeUsed strings back to Dates.\n * @internal\n */\nexport function parseStoredFilters(\n  raw: RawStoredFilter[] | undefined,\n): StoredFilter[] {\n  if (!raw) {\n    return [];\n  }\n  return raw.map((f) => ({\n    ...f,\n    timeUsed:\n      f.timeUsed !== null && f.timeUsed !== undefined\n        ? new Date(f.timeUsed)\n        : new Date(),\n  })) as StoredFilter[];\n}\n\n/**\n * Update logic for saving a filter to the store.\n * @internal\n */\nexport function addFilterToState(\n  storedFilters: StoredFilter[],\n  filter: string,\n  limit: number,\n): StoredFilter[] {\n  const trimmedFilter = filter.trim();\n  const foundIndex = storedFilters.findIndex(\n    (saved) => saved.filter === trimmedFilter,\n  );\n  const newValues = [...storedFilters];\n\n  // The current filter that is trying to be saved was not in the store yet\n  // so we can add it.\n  if (foundIndex === -1) {\n    newValues.push({\n      filter: trimmedFilter,\n      parserVersion: parserVersion,\n      timeUsed: new Date(),\n    });\n  } else if (foundIndex > -1) {\n    // If the filter is found in the list, but the parser version\n    // mismatches, we can update the parser version.\n    if (storedFilters[foundIndex].parserVersion !== parserVersion) {\n      newValues[foundIndex].parserVersion = parserVersion;\n    }\n\n    // If the filter is found in the list, we can also update the timeUsed\n    storedFilters[foundIndex].timeUsed = new Date();\n  }\n\n  // Sort by timeUsed descending (newest first).\n  newValues.sort((a, b) => b.timeUsed.getTime() - a.timeUsed.getTime());\n\n  return newValues.slice(0, limit);\n}\n\n/**\n * Update logic for unpinning a filter\n * @internal\n */\nexport function removeFilterFromState(\n  storedFilters: StoredFilter[],\n  filter: string,\n): StoredFilter[] {\n  const trimmedFilter = filter.trim();\n  const foundIndex = storedFilters.findIndex(\n    (saved) => saved.filter === trimmedFilter,\n  );\n  const newValues = [...storedFilters];\n\n  if (foundIndex > -1) {\n    newValues.splice(foundIndex, 1);\n  }\n  return newValues;\n}\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAwBvB,SAAS,mBACd,KACgB;AAChB,MAAI,CAAC,KAAK;AACR,WAAO,CAAC;AAAA,EACV;AACA,SAAO,IAAI,IAAI,CAAC,OAAO;AAAA,IACrB,GAAG;AAAA,IACH,UACE,EAAE,aAAa,QAAQ,EAAE,aAAa,SAClC,IAAI,KAAK,EAAE,QAAQ,IACnB,oBAAI,KAAK;AAAA,EACjB,EAAE;AACJ;AAMO,SAAS,iBACd,eACA,QACA,OACgB;AAChB,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,cAAc;AAAA,IAC/B,CAAC,UAAU,MAAM,WAAW;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,GAAG,aAAa;AAInC,MAAI,eAAe,IAAI;AACrB,cAAU,KAAK;AAAA,MACb,QAAQ;AAAA,MACR;AAAA,MACA,UAAU,oBAAI,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,WAAW,aAAa,IAAI;AAG1B,QAAI,cAAc,UAAU,EAAE,kBAAkB,eAAe;AAC7D,gBAAU,UAAU,EAAE,gBAAgB;AAAA,IACxC;AAGA,kBAAc,UAAU,EAAE,WAAW,oBAAI,KAAK;AAAA,EAChD;AAGA,YAAU,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,QAAQ,IAAI,EAAE,SAAS,QAAQ,CAAC;AAEpE,SAAO,UAAU,MAAM,GAAG,KAAK;AACjC;AAMO,SAAS,sBACd,eACA,QACgB;AAChB,QAAM,gBAAgB,OAAO,KAAK;AAClC,QAAM,aAAa,cAAc;AAAA,IAC/B,CAAC,UAAU,MAAM,WAAW;AAAA,EAC9B;AACA,QAAM,YAAY,CAAC,GAAG,aAAa;AAEnC,MAAI,aAAa,IAAI;AACnB,cAAU,OAAO,YAAY,CAAC;AAAA,EAChC;AACA,SAAO;AACT;",
   "names": []
 }

package/esm/filters/filter-field/suggestions/RecentPinnedSuggestionItem.css

@@ -1,8 +1,8 @@
-._vt0w9g0-3-7-1 {
+._vt0w9g0-3-9-0 {
   display: grid;
   grid-template-columns: 1fr auto;
 }
-._vt0w9g1-3-7-1 {
+._vt0w9g1-3-9-0 {
   appearance: none;
   visibility: hidden;
   position: absolute;
@@ -12,25 +12,25 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1smjoa14-3-7-1:hover ._vt0w9g1-3-7-1, ._1smjoa14-3-7-1:has(._9mvxlq0-3-7-1) ._vt0w9g1-3-7-1 {
+._1smjoa14-3-9-0:hover ._vt0w9g1-3-9-0, ._1smjoa14-3-9-0:has(._9mvxlq0-3-9-0) ._vt0w9g1-3-9-0 {
   position: initial;
   visibility: visible;
   height: 100%;
 }
-._1jgl8s50-3-7-1 ._vt0w9g1-3-7-1 {
+._1jgl8s50-3-9-0 ._vt0w9g1-3-9-0 {
   border-left-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-7-1 ._vt0w9g1-3-7-1:hover {
+._1jgl8s50-3-9-0 ._vt0w9g1-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-7-1 ._vt0w9g1-3-7-1:active {
+._1jgl8s50-3-9-0 ._vt0w9g1-3-9-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._vt0w9g0-3-7-1 ._1smjoa10-3-7-1 > div {
+._vt0w9g0-3-9-0 ._1smjoa10-3-9-0 > div {
   background-color: transparent;
 }
-@container _ssu5rt0-3-7-1 (min-width: 641px) {
-  ._vt0w9g0-3-7-1:hover ._tn2lgm0-3-7-1, ._vt0w9g0-3-7-1._9mvxlq0-3-7-1 ._tn2lgm0-3-7-1, ._vt0w9g0-3-7-1:has(._9mvxlq0-3-7-1) ._tn2lgm0-3-7-1 {
+@container _ssu5rt0-3-9-0 (min-width: 641px) {
+  ._vt0w9g0-3-9-0:hover ._tn2lgm0-3-9-0, ._vt0w9g0-3-9-0._9mvxlq0-3-9-0 ._tn2lgm0-3-9-0, ._vt0w9g0-3-9-0:has(._9mvxlq0-3-9-0) ._tn2lgm0-3-9-0 {
     display: none;
   }
 }

package/esm/filters/filter-field/suggestions/RecentPinnedSuggestionItem.js

@@ -76,7 +76,7 @@ function RecentAndPinnedSuggestionItem(props) {
           FilterStatement,
           {
             value: suggestion.displayValue?.toString(),
-            highlighting: "minimal"
+            highlighting: "syntax"
           }
         ),
         suggestion.value ? /* @__PURE__ */ jsx(

package/esm/filters/filter-field/suggestions/RecentPinnedSuggestionItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/RecentPinnedSuggestionItem.tsx"],
-  "sourcesContent": ["import { useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { getOrCreateNamedHighlight } from '../components/CSSHighlight.js';\nimport { FilterStatement } from '../components/FilterStatement.js';\nimport { useFilterFieldContext } from '../hooks/useFilterFieldContext.js';\nimport { useFilterFieldLoggerContext } from '../hooks/useFilterFieldLoggerContext.js';\nimport { useShowMore } from '../hooks/useShowMore.js';\nimport { filterFieldMessages } from '../messages.js';\nimport * as styles from './RecentPinnedSuggestionItem.sty.js';\nimport * as suggestionStyles from './Suggestion.sty.js';\nimport { Suggestion } from './Suggestion.js';\nimport type { FilterFieldSuggestion } from './Suggestion.types.js';\nimport { SuggestionGroup } from './SuggestionGroup.js';\nimport { SuggestionGroupLabel } from './SuggestionGroupLabel.js';\nimport { SuggestionPin } from './SuggestionPin.js';\n\n/**\n * @internal\n */\nfunction RecentAndPinnedSuggestionItem(\n  props: Readonly<{\n    suggestion: FilterFieldSuggestion;\n    index: number;\n    ranges: Array<[number, number]>;\n  }>,\n) {\n  const { suggestion, index, ranges, ...remainingProps } = props;\n\n  const suggestionRef = useRef<HTMLDivElement>(null);\n\n  const id = useId();\n\n  const { logger } = useFilterFieldLoggerContext();\n\n  const suggestionHighlight = useMemo(\n    () => getOrCreateNamedHighlight('filterfield-suggestions-highlight'),\n    [],\n  );\n\n  useEffect(() => {\n    const highlightRanges: Array<Range> = [];\n    if (suggestionRef.current) {\n      const valueElement = suggestionRef.current.querySelector(\n        `.${suggestionStyles.value} span`,\n      );\n      if (valueElement && valueElement.textContent !== '') {\n        const textNode = valueElement.childNodes.item(0);\n        if (textNode.nodeType === Node.TEXT_NODE) {\n          const textLength = textNode.textContent?.length ?? 0;\n\n          for (const [start, end] of ranges) {\n            // Clamp the start and end to the length of the text content to avoid errors when creating ranges.\n            const clampedStart = Math.min(start, textLength);\n            const clampedEnd = Math.min(end, textLength);\n\n            if (clampedStart >= clampedEnd) {\n              continue;\n            }\n\n            try {\n              const range = new Range();\n              range.setStart(textNode, clampedStart);\n              range.setEnd(textNode, clampedEnd);\n              suggestionHighlight.add(range);\n              highlightRanges.push(range);\n            } catch (error) {\n              logger?.warn(\n                'FilterField suggestion highlight range error',\n                error,\n              );\n            }\n          }\n        }\n      }\n    }\n    return () => {\n      if (highlightRanges) {\n        for (const range of highlightRanges) {\n          suggestionHighlight.delete(range);\n        }\n      }\n    };\n  }, [logger, ranges, suggestionHighlight]);\n\n  return (\n    <Suggestion\n      className={styles.recentSuggestion}\n      key={`${suggestion.value ?? 'non-interactive-'}${index}`}\n      ref={suggestionRef}\n      {...suggestion}\n      {...remainingProps}\n    >\n      <FilterStatement\n        value={suggestion.displayValue?.toString()}\n        highlighting=\"minimal\"\n      />\n      {suggestion.value ? (\n        <SuggestionPin\n          // Role needs to be option, because otherwise NVDA will crash if the activeDecendant of a listbox is anything other than a role option or group.\n          role=\"option\"\n          filterString={suggestion.value}\n          className={styles.suggestionPin}\n          placement=\"right\"\n          fallbackPlacements={['right', 'left']}\n          id={id}\n          data-strato-filter-field-virtual-focus-id={id}\n          data-strato-filter-field-virtual-focus-type=\"pinned-suggestion\"\n        />\n      ) : null}\n    </Suggestion>\n  );\n}\n\n/**\n * @internal\n */\nexport function RecentSuggestionGroup() {\n  const { filterFieldId, recentSuggestionValues } = useFilterFieldContext();\n\n  let primaryCount = 2;\n  if (recentSuggestionValues.length === 3) {\n    primaryCount = 3;\n  }\n\n  const {\n    items: slicedRecentSuggestionValues,\n    isSliced,\n    controlProps,\n  } = useShowMore({\n    items: recentSuggestionValues,\n    primaryCount,\n  });\n\n  if (recentSuggestionValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <SuggestionGroup\n        aria-labelledby={`${filterFieldId ?? ''}-recent-filters`}\n      >\n        <SuggestionGroupLabel id={`${filterFieldId ?? ''}-recent-filters`}>\n          <FormattedMessage {...filterFieldMessages.suggestions.recentlyUsed} />\n        </SuggestionGroupLabel>\n        {slicedRecentSuggestionValues?.map((recentItem, index) => (\n          <RecentAndPinnedSuggestionItem\n            suggestion={recentItem.suggestion}\n            index={index}\n            key={recentItem.suggestion.value ?? index}\n            data-strato-filter-field-virtual-focus-type=\"recent-suggestion\"\n            ranges={recentItem.ranges}\n          />\n        ))}\n      </SuggestionGroup>\n      {isSliced && (\n        <div role=\"presentation\">\n          <Button {...controlProps} />\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * @internal\n */\nexport function PinnedSuggestionGroup() {\n  const { filterFieldId, pinnedSuggestionValues } = useFilterFieldContext();\n\n  if (pinnedSuggestionValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <SuggestionGroup aria-labelledby={`${filterFieldId ?? ''}-pinned-filters`}>\n      <SuggestionGroupLabel id={`${filterFieldId ?? ''}-pinned-filters`}>\n        <FormattedMessage {...filterFieldMessages.suggestions.pinnedFilters} />\n      </SuggestionGroupLabel>\n      {pinnedSuggestionValues?.map((pinnedItem, index) => (\n        <RecentAndPinnedSuggestionItem\n          suggestion={pinnedItem.suggestion}\n          index={index}\n          key={pinnedItem.suggestion.value ?? index}\n          data-strato-filter-field-virtual-focus-type=\"pinned-suggestion\"\n          ranges={pinnedItem.ranges}\n        />\n      ))}\n    </SuggestionGroup>\n  );\n}\n"],
+  "sourcesContent": ["import { useEffect, useMemo, useRef } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { getOrCreateNamedHighlight } from '../components/CSSHighlight.js';\nimport { FilterStatement } from '../components/FilterStatement.js';\nimport { useFilterFieldContext } from '../hooks/useFilterFieldContext.js';\nimport { useFilterFieldLoggerContext } from '../hooks/useFilterFieldLoggerContext.js';\nimport { useShowMore } from '../hooks/useShowMore.js';\nimport { filterFieldMessages } from '../messages.js';\nimport * as styles from './RecentPinnedSuggestionItem.sty.js';\nimport * as suggestionStyles from './Suggestion.sty.js';\nimport { Suggestion } from './Suggestion.js';\nimport type { FilterFieldSuggestion } from './Suggestion.types.js';\nimport { SuggestionGroup } from './SuggestionGroup.js';\nimport { SuggestionGroupLabel } from './SuggestionGroupLabel.js';\nimport { SuggestionPin } from './SuggestionPin.js';\n\n/**\n * @internal\n */\nfunction RecentAndPinnedSuggestionItem(\n  props: Readonly<{\n    suggestion: FilterFieldSuggestion;\n    index: number;\n    ranges: Array<[number, number]>;\n  }>,\n) {\n  const { suggestion, index, ranges, ...remainingProps } = props;\n\n  const suggestionRef = useRef<HTMLDivElement>(null);\n\n  const id = useId();\n\n  const { logger } = useFilterFieldLoggerContext();\n\n  const suggestionHighlight = useMemo(\n    () => getOrCreateNamedHighlight('filterfield-suggestions-highlight'),\n    [],\n  );\n\n  useEffect(() => {\n    const highlightRanges: Array<Range> = [];\n    if (suggestionRef.current) {\n      const valueElement = suggestionRef.current.querySelector(\n        `.${suggestionStyles.value} span`,\n      );\n      if (valueElement && valueElement.textContent !== '') {\n        const textNode = valueElement.childNodes.item(0);\n        if (textNode.nodeType === Node.TEXT_NODE) {\n          const textLength = textNode.textContent?.length ?? 0;\n\n          for (const [start, end] of ranges) {\n            // Clamp the start and end to the length of the text content to avoid errors when creating ranges.\n            const clampedStart = Math.min(start, textLength);\n            const clampedEnd = Math.min(end, textLength);\n\n            if (clampedStart >= clampedEnd) {\n              continue;\n            }\n\n            try {\n              const range = new Range();\n              range.setStart(textNode, clampedStart);\n              range.setEnd(textNode, clampedEnd);\n              suggestionHighlight.add(range);\n              highlightRanges.push(range);\n            } catch (error) {\n              logger?.warn(\n                'FilterField suggestion highlight range error',\n                error,\n              );\n            }\n          }\n        }\n      }\n    }\n    return () => {\n      if (highlightRanges) {\n        for (const range of highlightRanges) {\n          suggestionHighlight.delete(range);\n        }\n      }\n    };\n  }, [logger, ranges, suggestionHighlight]);\n\n  return (\n    <Suggestion\n      className={styles.recentSuggestion}\n      key={`${suggestion.value ?? 'non-interactive-'}${index}`}\n      ref={suggestionRef}\n      {...suggestion}\n      {...remainingProps}\n    >\n      <FilterStatement\n        value={suggestion.displayValue?.toString()}\n        highlighting=\"syntax\"\n      />\n      {suggestion.value ? (\n        <SuggestionPin\n          // Role needs to be option, because otherwise NVDA will crash if the activeDecendant of a listbox is anything other than a role option or group.\n          role=\"option\"\n          filterString={suggestion.value}\n          className={styles.suggestionPin}\n          placement=\"right\"\n          fallbackPlacements={['right', 'left']}\n          id={id}\n          data-strato-filter-field-virtual-focus-id={id}\n          data-strato-filter-field-virtual-focus-type=\"pinned-suggestion\"\n        />\n      ) : null}\n    </Suggestion>\n  );\n}\n\n/**\n * @internal\n */\nexport function RecentSuggestionGroup() {\n  const { filterFieldId, recentSuggestionValues } = useFilterFieldContext();\n\n  let primaryCount = 2;\n  if (recentSuggestionValues.length === 3) {\n    primaryCount = 3;\n  }\n\n  const {\n    items: slicedRecentSuggestionValues,\n    isSliced,\n    controlProps,\n  } = useShowMore({\n    items: recentSuggestionValues,\n    primaryCount,\n  });\n\n  if (recentSuggestionValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <SuggestionGroup\n        aria-labelledby={`${filterFieldId ?? ''}-recent-filters`}\n      >\n        <SuggestionGroupLabel id={`${filterFieldId ?? ''}-recent-filters`}>\n          <FormattedMessage {...filterFieldMessages.suggestions.recentlyUsed} />\n        </SuggestionGroupLabel>\n        {slicedRecentSuggestionValues?.map((recentItem, index) => (\n          <RecentAndPinnedSuggestionItem\n            suggestion={recentItem.suggestion}\n            index={index}\n            key={recentItem.suggestion.value ?? index}\n            data-strato-filter-field-virtual-focus-type=\"recent-suggestion\"\n            ranges={recentItem.ranges}\n          />\n        ))}\n      </SuggestionGroup>\n      {isSliced && (\n        <div role=\"presentation\">\n          <Button {...controlProps} />\n        </div>\n      )}\n    </>\n  );\n}\n\n/**\n * @internal\n */\nexport function PinnedSuggestionGroup() {\n  const { filterFieldId, pinnedSuggestionValues } = useFilterFieldContext();\n\n  if (pinnedSuggestionValues.length === 0) {\n    return null;\n  }\n\n  return (\n    <SuggestionGroup aria-labelledby={`${filterFieldId ?? ''}-pinned-filters`}>\n      <SuggestionGroupLabel id={`${filterFieldId ?? ''}-pinned-filters`}>\n        <FormattedMessage {...filterFieldMessages.suggestions.pinnedFilters} />\n      </SuggestionGroupLabel>\n      {pinnedSuggestionValues?.map((pinnedItem, index) => (\n        <RecentAndPinnedSuggestionItem\n          suggestion={pinnedItem.suggestion}\n          index={index}\n          key={pinnedItem.suggestion.value ?? index}\n          data-strato-filter-field-virtual-focus-type=\"pinned-suggestion\"\n          ranges={pinnedItem.ranges}\n        />\n      ))}\n    </SuggestionGroup>\n  );\n}\n"],
   "mappings": "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",
   "names": []
 }

package/esm/filters/filter-field/suggestions/RecentPinnedSuggestionItem.sty.js

@@ -4,8 +4,8 @@ import "../../../core/styles/virtualFocus.css";
 import "./Suggestion.css";
 import "./SuggestionDetails.css";
 import "./RecentPinnedSuggestionItem.css";
-var recentSuggestion = "_vt0w9g0-3-7-1";
-var suggestionPin = "_vt0w9g1-3-7-1";
+var recentSuggestion = "_vt0w9g0-3-9-0";
+var suggestionPin = "_vt0w9g1-3-9-0";
 export {
   recentSuggestion,
   suggestionPin

package/esm/filters/filter-field/suggestions/RecentPinnedSuggestionItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/suggestions/RecentPinnedSuggestionItem.css.ts"],
-  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/virtualFocus.css';\nimport './Suggestion.css';\nimport './SuggestionDetails.css';\nimport './RecentPinnedSuggestionItem.css';\nexport var recentSuggestion = '_vt0w9g0-3-7-1';\nexport var suggestionPin = '_vt0w9g1-3-7-1';"],
+  "sourcesContent": ["import './SuggestionsOverlay.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/virtualFocus.css';\nimport './Suggestion.css';\nimport './SuggestionDetails.css';\nimport './RecentPinnedSuggestionItem.css';\nexport var recentSuggestion = '_vt0w9g0-3-9-0';\nexport var suggestionPin = '_vt0w9g1-3-9-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,gBAAgB;",
   "names": []
 }

package/esm/filters/filter-field/suggestions/Suggestion.css

@@ -1,7 +1,7 @@
-._1smjoa11-3-7-1 {
+._1smjoa11-3-9-0 {
   min-width: 0;
 }
-._1smjoa14-3-7-1 {
+._1smjoa14-3-9-0 {
   cursor: pointer;
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -9,17 +9,17 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   overflow: hidden;
 }
-._1smjoa14-3-7-1:hover {
+._1smjoa14-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1smjoa14-3-7-1:has(._9mvxlq0-3-7-1) {
+._1smjoa14-3-9-0:has(._9mvxlq0-3-9-0) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   transition: none;
 }
-._1jgl8s50-3-7-1 ._1smjoa14-3-7-1:hover {
+._1jgl8s50-3-9-0 ._1smjoa14-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1smjoa15-3-7-1 {
+._1smjoa15-3-9-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
@@ -27,68 +27,68 @@
   flex: 1;
   grid-auto-flow: row;
 }
-._1smjoa15-3-7-1:hover {
+._1smjoa15-3-9-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1smjoa15-3-7-1:active {
+._1smjoa15-3-9-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1smjoa14-3-7-1 span:only-child ._1smjoa15-3-7-1 {
+._1smjoa14-3-9-0 span:only-child ._1smjoa15-3-9-0 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1smjoa16-3-7-1 {
+._1smjoa16-3-9-0 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1smjoa17-3-7-1 {
+._1smjoa17-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-weight: var(--dt-typography-text-base-default-weight, 400);
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-12, 12px);
 }
-._1smjoa18-3-7-1 {
+._1smjoa18-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   font-weight: var(--dt-typography-text-base-default-weight, 400);
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-12, 12px);
 }
-._1smjoa19-3-7-1 {
+._1smjoa19-3-9-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1smjoa1a-3-7-1 {
+._1smjoa1a-3-9-0 {
   white-space: nowrap;
   gap: 0;
 }
-._1smjoa1b-3-7-1 {
+._1smjoa1b-3-9-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._1smjoa1b-3-7-1 mark, ._1smjoa14-3-7-1 mark, ._1smjoa14-3-7-1:not(._1smjoa1c-3-7-1) *::highlight(filterfield-suggestions-highlight) {
+._1smjoa1b-3-9-0 mark, ._1smjoa14-3-9-0 mark, ._1smjoa14-3-9-0:not(._1smjoa1c-3-9-0) *::highlight(filterfield-suggestions-highlight) {
   white-space: pre-wrap;
   background: none;
   color: inherit;
   text-decoration: underline;
 }
-._1smjoa16-3-7-1 > mark, ._1smjoa16-3-7-1 > span {
+._1smjoa16-3-9-0 > mark, ._1smjoa16-3-9-0 > span {
   white-space: nowrap;
 }
-._1smjoa1d-3-7-1 ._1smjoa10-3-7-1 > div {
+._1smjoa1d-3-9-0 ._1smjoa10-3-9-0 > div {
   background-color: transparent;
 }
-._1smjoa1a-3-7-1 mark {
+._1smjoa1a-3-9-0 mark {
   white-space: preserve nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1smjoa1f-3-7-1 ._1smjoa10-3-7-1 > div {
+._1smjoa1f-3-9-0 ._1smjoa10-3-9-0 > div {
   background-color: transparent;
 }
-@container _ssu5rt0-3-7-1 (min-width: 641px) {
-  ._1smjoa15-3-7-1 {
+@container _ssu5rt0-3-9-0 (min-width: 641px) {
+  ._1smjoa15-3-9-0 {
     grid-auto-flow: column;
     justify-content: space-between;
   }
 }
-@container _ssu5rt0-3-7-1 (min-width: 1921px) {
-  ._1smjoa15-3-7-1 {
+@container _ssu5rt0-3-9-0 (min-width: 1921px) {
+  ._1smjoa15-3-9-0 {
     grid-auto-columns: 30% auto;
     justify-content: start;
   }

package/esm/filters/filter-field/suggestions/Suggestion.sty.js

@@ -2,22 +2,22 @@ import "./SuggestionsOverlay.css";
 import "../../../core/components/app-root/AppRoot.css";
 import "../../../core/styles/virtualFocus.css";
 import "./Suggestion.css";
-var defaultSuggestion = "_1smjoa1c-3-7-1";
-var icon = "_1smjoa10-3-7-1";
-var matchableSuggestionDetails = "_1smjoa12-3-7-1";
-var pastingSuggestion = "_1smjoa1f-3-7-1";
-var searchSuggestion = "_1smjoa1d-3-7-1";
-var statementSuggestionValue = "_1smjoa1e-3-7-1";
-var suggestion = "_1smjoa14-3-7-1";
-var suggestionContent = "_1smjoa15-3-7-1";
-var suggestionText = "_1smjoa16-3-7-1";
-var suggestionsEmptyState = "_1smjoa17-3-7-1";
-var suggestionsJSONPathHint = "_1smjoa18-3-7-1";
-var suggestionsLoading = "_1smjoa19-3-7-1";
-var tooltipWrapper = "_1smjoa1b-3-7-1";
-var truncateWithinMark = "_1smjoa1a-3-7-1";
-var value = "_1smjoa11-3-7-1";
-var virtualizedSuggestion = "_1smjoa13-3-7-1";
+var defaultSuggestion = "_1smjoa1c-3-9-0";
+var icon = "_1smjoa10-3-9-0";
+var matchableSuggestionDetails = "_1smjoa12-3-9-0";
+var pastingSuggestion = "_1smjoa1f-3-9-0";
+var searchSuggestion = "_1smjoa1d-3-9-0";
+var statementSuggestionValue = "_1smjoa1e-3-9-0";
+var suggestion = "_1smjoa14-3-9-0";
+var suggestionContent = "_1smjoa15-3-9-0";
+var suggestionText = "_1smjoa16-3-9-0";
+var suggestionsEmptyState = "_1smjoa17-3-9-0";
+var suggestionsJSONPathHint = "_1smjoa18-3-9-0";
+var suggestionsLoading = "_1smjoa19-3-9-0";
+var tooltipWrapper = "_1smjoa1b-3-9-0";
+var truncateWithinMark = "_1smjoa1a-3-9-0";
+var value = "_1smjoa11-3-9-0";
+var virtualizedSuggestion = "_1smjoa13-3-9-0";
 export {
   defaultSuggestion,
   icon,