@dynatrace/strato-components 3.7.1 → 3.9.0

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

@@ -38,7 +38,9 @@ var import_CSSHighlight = require("./CSSHighlight.js");
 var filterfieldStyles = __toESM(require("../FilterField.sty.js"));
 var styles = __toESM(require("./FilterStatement.sty.js"));
 var import_string_tree_conversion = require("../utils/conversion/string-tree-conversion.js");
+var import_statement_status_registry = require("../utils/statement-status-registry.js");
 var import_tree_node_guards = require("../utils/tree-node-guards.js");
+var import_operator_specification = require("../utils/validation-utils/operator-specification.js");
 function WhitespaceRenderer(props) {
   const { start: startNode, end: endNode } = props;
   if (!startNode || !endNode) {
@@ -87,6 +89,7 @@ function withNodeRenderer(className) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref, className: (0, import_clsx.default)(styles.escapeCharacter, className), children: node?.textValue });
   };
 }
+const PlainTextRenderer = withNodeRenderer("");
 const KeyRenderer = withNodeRenderer(
   filterfieldStyles.filterKey
 );
@@ -96,10 +99,54 @@ const StringRenderer = withNodeRenderer(
 const ComparisonOperatorRenderer = withNodeRenderer(
   filterfieldStyles.operator
 );
-const ListRenderer = withNodeRenderer("");
-const VariableRenderer = withNodeRenderer(
-  filterfieldStyles.variable
-);
+function FreeTextRenderer(props) {
+  const { node } = props;
+  const { textValue } = node;
+  if (["AND", "OR"].includes(textValue)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(filterfieldStyles.operator), children: textValue });
+  }
+  if (textValue.includes("$[") || textValue.endsWith("]") || textValue.endsWith("$")) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(filterfieldStyles.variable), children: textValue });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PlainTextRenderer, { node });
+}
+function VariableRenderer(props) {
+  const { node } = props;
+  const { textValue, value } = node;
+  const varStart = textValue.indexOf(value);
+  const prefix = varStart > 0 ? textValue.slice(0, varStart) : "";
+  const suffix = textValue.slice(varStart + value.length);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.escapeCharacter, children: prefix }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: (0, import_clsx.default)(styles.escapeCharacter, filterfieldStyles.variable),
+        children: value
+      }
+    ),
+    suffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.escapeCharacter, children: suffix })
+  ] });
+}
+function ListRenderer(props) {
+  const { node } = props;
+  const { textValue, value: items, range: listRange } = node;
+  const rendered = [];
+  let textPos = 0;
+  for (const item of items) {
+    const itemStart = item.range.from - listRange.from;
+    const itemEnd = item.range.to - listRange.from;
+    if (itemStart > textPos) {
+      rendered.push(textValue.slice(textPos, itemStart));
+    }
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeafNodeRenderer, { node: item }, item.range.from));
+    textPos = itemEnd;
+  }
+  if (textPos < textValue.length) {
+    rendered.push(textValue.slice(textPos));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.escapeCharacter, children: rendered });
+}
 const JSONPathRenderer = withNodeRenderer(
   filterfieldStyles.filterValue
 );
@@ -115,12 +162,38 @@ const BooleanRenderer = withNodeRenderer(
 const DurationRenderer = withNodeRenderer(
   filterfieldStyles.filterValue
 );
-const ExistsOperatorRenderer = withNodeRenderer(
-  filterfieldStyles.operator
-);
-const SearchOperatorRenderer = withNodeRenderer(
-  filterfieldStyles.operator
-);
+function ExistsOperatorSplitRenderer(props) {
+  const { textValue } = props.node;
+  const starIdx = textValue.indexOf("*");
+  const operatorText = textValue.slice(0, starIdx).trimEnd();
+  const hasSpace = textValue[starIdx - 1] === " ";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: (0, import_clsx.default)(styles.escapeCharacter, filterfieldStyles.operator),
+        children: operatorText
+      }
+    ),
+    hasSpace && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.whitespace, children: " " }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: (0, import_clsx.default)(styles.escapeCharacter, filterfieldStyles.filterValue),
+        children: "*"
+      }
+    )
+  ] });
+}
+function SearchOperatorSplitRenderer(props) {
+  const { node } = props;
+  const hasSpace = node.textValue === "* ~";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: filterfieldStyles.filterKey, children: "*" }),
+    hasSpace && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.whitespace, children: " " }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: filterfieldStyles.operator, children: "~" })
+  ] });
+}
 const InclusionOperatorRenderer = withNodeRenderer(
   filterfieldStyles.operator
 );
@@ -136,13 +209,13 @@ function GroupRenderer(props) {
       const isLast = index === allChildren.length - 1;
       const nextChild = node.children[index + 1];
       let joiner = null;
-      if (node.explicitLogicalOperator && !isLast && nextChild?.type !== "Error" && (!("value" in nextChild) || nextChild.value !== "")) {
+      if (node.explicitLogicalOperator && nextChild !== void 0 && nextChild.range.from - childNode.range.to > 1 && !isLast && (nextChild?.type !== "Error" && (!("value" in nextChild) || nextChild.value !== "") || node.logicalOperator === "OR")) {
         joiner = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: filterfieldStyles.operator, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.whitespace, children: " " }),
           node.logicalOperator,
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.whitespace, children: " " })
         ] });
-      } else if (node.explicitLogicalOperator === false && !isLast) {
+      } else if (!isLast) {
         joiner = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           WhitespaceRenderer,
           {
@@ -156,7 +229,7 @@ function GroupRenderer(props) {
         joiner
       ] }, `${childNode.range.from}-${childNode.range.to}`);
     }),
-    node.explicit && lastChild.type !== "Error" && (!("value" in lastChild) || lastChild.value !== "") ? ")" : ""
+    node.explicit && lastChild !== void 0 && lastChild.range.to < node.range.to ? ")" : ""
   ] });
 }
 function ValueRenderer(props) {
@@ -171,13 +244,23 @@ function ValueRenderer(props) {
 }
 function StatementRenderer(props) {
   const { node } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.statement, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyRenderer, { node: node.key }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WhitespaceRenderer, { start: node.key, end: node.comparisonOperator }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeafNodeRenderer, { node: node.comparisonOperator }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WhitespaceRenderer, { start: node.comparisonOperator, end: node.value }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueRenderer, { node: node.value })
-  ] });
+  const status = import_statement_status_registry.statementStatusRegistry.get(node);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "span",
+    {
+      className: (0, import_clsx.default)(
+        status && status !== "indeterminate" && styles.statement,
+        status === "incomplete" && styles.incompleteStatement
+      ),
+      children: [
+        node.key && (!node.comparisonOperator && !node.value && !(0, import_tree_node_guards.isFilterFieldKeyNode)(node.key) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FreeTextRenderer, { node: node.key }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KeyRenderer, { node: node.key })),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WhitespaceRenderer, { start: node.key, end: node.comparisonOperator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LeafNodeRenderer, { node: node.comparisonOperator }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WhitespaceRenderer, { start: node.comparisonOperator, end: node.value }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ValueRenderer, { node: node.value })
+      ]
+    }
+  );
 }
 function LeafNodeRenderer(props) {
   const { node } = props;
@@ -196,7 +279,7 @@ function LeafNodeRenderer(props) {
   if ((0, import_tree_node_guards.isFilterFieldNumberNode)(node)) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NumberRenderer, { node });
   }
-  if ((0, import_tree_node_guards.isFilterFieldJSONPathNode)(node)) {
+  if ((0, import_tree_node_guards.isFilterFieldJSONPathNode)(node) || node && node.textValue.includes("$")) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JSONPathRenderer, { node });
   }
   if ((0, import_tree_node_guards.isFilterFieldBigIntNode)(node)) {
@@ -209,10 +292,15 @@ function LeafNodeRenderer(props) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DurationRenderer, { node });
   }
   if ((0, import_tree_node_guards.isFilterFieldExistsOperatorNode)(node)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExistsOperatorRenderer, { node });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ExistsOperatorSplitRenderer, { node });
   }
-  if ((0, import_tree_node_guards.isFilterFieldSearchOperatorNode)(node)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SearchOperatorRenderer, { node });
+  if ((0, import_tree_node_guards.isFilterFieldSearchOperatorNode)(node) || node && ["*~", "* ~"].includes(node.textValue)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      SearchOperatorSplitRenderer,
+      {
+        node
+      }
+    );
   }
   if ((0, import_tree_node_guards.isFilterFieldInclusionOperatorNode)(node)) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InclusionOperatorRenderer, { node });
@@ -247,7 +335,15 @@ function FilterStatement(props) {
     return (0, import_string_tree_conversion.convertStringToFilterFieldTree)(filterString ?? "", {
       parserConfig: {
         jsonPathConversion: true,
-        searchConversion: true
+        searchConversion: true,
+        ipAddressConversion: true,
+        uidConversion: true,
+        timestampConversion: true,
+        smartscapeIdConversion: true
+      },
+      validatorMap: {
+        comparisonOperators: import_operator_specification.FILTERFIELD_ALL_OPERATORS,
+        exhaustive: false
       }
     });
   }, [filterString]);

package/filters/filter-field/components/FilterStatement.sty.d.ts

@@ -1,6 +1,7 @@
 export declare const highlighting: Record<"minimal" | "syntax", string>;
 export declare const root: string;
 export declare const statement: string;
+export declare const incompleteStatement: string;
 export declare const escapeCharacter: string;
 export declare const highlight: string;
 export declare const whitespace: string;

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

@@ -20,6 +20,7 @@ __export(FilterStatement_css_exports, {
   escapeCharacter: () => escapeCharacter,
   highlight: () => highlight,
   highlighting: () => highlighting,
+  incompleteStatement: () => incompleteStatement,
   root: () => root,
   statement: () => statement,
   whitespace: () => whitespace
@@ -31,9 +32,10 @@ var import_FilterField_css_ts_vanilla = require("../FilterField.css");
 var import_SuggestionsOverlay_css_ts_vanilla = require("../suggestions/SuggestionsOverlay.css");
 var import_Suggestion_css_ts_vanilla = require("../suggestions/Suggestion.css");
 var import_FilterStatement_css_ts_vanilla = require("./FilterStatement.css");
-var escapeCharacter = "_ia7amm4-3-7-1";
-var highlight = "_ia7amm5-3-7-1";
-var highlighting = { syntax: "_ia7amm0-3-7-1", minimal: "_ia7amm1-3-7-1" };
-var root = "_ia7amm2-3-7-1 _96tj13c-3-7-1";
-var statement = "_ia7amm3-3-7-1";
-var whitespace = "_ia7amm6-3-7-1";
+var escapeCharacter = "_ia7amm5-3-9-0";
+var highlight = "_ia7amm6-3-9-0";
+var highlighting = { syntax: "_ia7amm0-3-9-0", minimal: "_ia7amm1-3-9-0" };
+var incompleteStatement = "_ia7amm4-3-9-0";
+var root = "_ia7amm2-3-9-0 _96tj13c-3-9-0";
+var statement = "_ia7amm3-3-9-0";
+var whitespace = "_ia7amm7-3-9-0";

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

@@ -24,7 +24,7 @@ var import_react = require("react");
 var import_usePinnedFilters = require("./usePinnedFilters.js");
 var import_editor_config = require("../../editor-state-configs/editor-config.js");
 function usePinnedFilterSuggestions(editorViewRef, filterNamespace = null, isOpen) {
-  const pinnedFilters = (0, import_usePinnedFilters.usePinnedFilters)(filterNamespace);
+  const { filters: pinnedFilters } = (0, import_usePinnedFilters.usePinnedFilters)(filterNamespace);
   (0, import_react.useEffect)(() => {
     if (!editorViewRef.current) {
       return;

package/filters/filter-field/hooks/recent-and-pinned/usePinnedFilters.d.ts

@@ -1,13 +1,19 @@
 import { type StoredFilter } from '../../state/recent-pinned-store.js';
 /**
  * Allows access to the namespaced pinned filters store.
+ * Returns parsed filters and a `canPin` flag that is `false` when the user
+ * lacks permission to use app state (401/403 from the initial fetch).
+ * Transient errors (network failures, 500s) do not disable pinning.
  */
-export declare function usePinnedFilters(name?: string | null): StoredFilter[];
+export declare function usePinnedFilters(name?: string | null): {
+    filters: StoredFilter[];
+    canPin: boolean;
+};
 /**
- * Allows access to the namespaced recent filters store setter.
+ * Allows access to the namespaced pinned filters store setter.
  * @internal
  */
 export declare function usePinnedFilterMutation(name?: string | null): {
-    pinFilter: import("@tanstack/react-query").UseMutateFunction<void | StoredFilter[], Error, string, unknown>;
-    unpinFilter: import("@tanstack/react-query").UseMutateFunction<void | StoredFilter[], Error, string, unknown>;
+    pinFilter: (filterString: string) => void;
+    unpinFilter: (filterString: string) => void;
 };

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

@@ -21,37 +21,43 @@ __export(usePinnedFilters_exports, {
   usePinnedFilters: () => usePinnedFilters
 });
 module.exports = __toCommonJS(usePinnedFilters_exports);
-var import_usePersistedFilter = require("./usePersistedFilter.js");
-var import_useRecentFiltersStore = require("./useRecentFiltersStore.js");
+var import_react = require("react");
+var import_client_state = require("@dynatrace-sdk/client-state");
+var import_useAppState = require("../../../../core/sdk/app-state/useAppState.js");
+var import_recent_pinned_store = require("../../state/recent-pinned-store.js");
+var import_useFilterFieldLoggerContext = require("../useFilterFieldLoggerContext.js");
 function usePinnedFilters(name = null) {
-  const setFilters = (0, import_useRecentFiltersStore.useRecentAndPinnedFiltersStore)(
-    (state) => state.setPinnedFilters,
-    name
+  const { logger } = (0, import_useFilterFieldLoggerContext.useFilterFieldLoggerContext)();
+  const { value, error } = (0, import_useAppState.useUserAppState)(
+    `strato-FilterField-pinnedFilters-${name}`
   );
-  const filters = (0, import_useRecentFiltersStore.useRecentAndPinnedFiltersStore)(
-    (state) => state.pinnedFilters,
-    name
-  );
-  (0, import_usePersistedFilter.usePersistedFilter)(
-    name,
-    `strato-FilterField-pinnedFilters-${name}`,
-    setFilters
-  );
-  return filters;
+  (0, import_react.useEffect)(() => {
+    if ((0, import_client_state.isUnauthorized)(error) || (0, import_client_state.isForbidden)(error)) {
+      logger?.warn(
+        "FilterField pinned and recent error - permissions not met",
+        error
+      );
+    }
+  }, [error, logger]);
+  return {
+    filters: name === null ? [] : (0, import_recent_pinned_store.parseStoredFilters)(value),
+    canPin: name !== null && !(0, import_client_state.isUnauthorized)(error) && !(0, import_client_state.isForbidden)(error)
+  };
 }
 function usePinnedFilterMutation(name = null) {
-  const { mutate: pinFilter } = (0, import_usePersistedFilter.usePersistedFilterMutation)(
-    `strato-FilterField-pinnedFilters-${name}`,
-    name,
-    "pin"
-  );
-  const { mutate: unpinFilter } = (0, import_usePersistedFilter.usePersistedFilterMutation)(
-    `strato-FilterField-pinnedFilters-${name}`,
-    name,
-    "unpin"
+  const { setValue } = (0, import_useAppState.useUserAppState)(
+    `strato-FilterField-pinnedFilters-${name}`
   );
   return {
-    pinFilter,
-    unpinFilter
+    pinFilter: (filterString) => {
+      setValue(
+        (previous) => (0, import_recent_pinned_store.addFilterToState)((0, import_recent_pinned_store.parseStoredFilters)(previous), filterString, 10)
+      ).catch(() => void 0);
+    },
+    unpinFilter: (filterString) => {
+      setValue(
+        (previous) => (0, import_recent_pinned_store.removeFilterFromState)((0, import_recent_pinned_store.parseStoredFilters)(previous), filterString)
+      ).catch(() => void 0);
+    }
   };
 }

package/filters/filter-field/hooks/recent-and-pinned/useRecentFilters.d.ts

@@ -1,4 +1,4 @@
-import type { StoredFilter } from '../../state/recent-pinned-store.js';
+import { type StoredFilter } from '../../state/recent-pinned-store.js';
 /**
  * Allows access to the namespaced recent filters store.
  * @internal
@@ -8,4 +8,4 @@ export declare function useRecentFilters(name?: string | null): StoredFilter[];
  * Allows access to the namespaced recent filters store setter.
  * @internal
  */
-export declare function useRecentFilterMutation(name?: string | null): (value: string) => Promise<void | StoredFilter[]>;
+export declare function useRecentFilterMutation(name?: string | null): (filterString: string) => Promise<void>;

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

@@ -21,29 +21,31 @@ __export(useRecentFilters_exports, {
   useRecentFilters: () => useRecentFilters
 });
 module.exports = __toCommonJS(useRecentFilters_exports);
-var import_usePersistedFilter = require("./usePersistedFilter.js");
-var import_useRecentFiltersStore = require("./useRecentFiltersStore.js");
+var import_react = require("react");
+var import_client_state = require("@dynatrace-sdk/client-state");
+var import_useAppState = require("../../../../core/sdk/app-state/useAppState.js");
+var import_recent_pinned_store = require("../../state/recent-pinned-store.js");
+var import_useFilterFieldLoggerContext = require("../useFilterFieldLoggerContext.js");
 function useRecentFilters(name = null) {
-  const setFilters = (0, import_useRecentFiltersStore.useRecentAndPinnedFiltersStore)(
-    (state) => state.setRecentFilters,
-    name
+  const { logger } = (0, import_useFilterFieldLoggerContext.useFilterFieldLoggerContext)();
+  const { value, error } = (0, import_useAppState.useUserAppState)(
+    `strato-FilterField-recentFilters-${name}`
   );
-  const filters = (0, import_useRecentFiltersStore.useRecentAndPinnedFiltersStore)(
-    (state) => state.recentFilters,
-    name
-  );
-  (0, import_usePersistedFilter.usePersistedFilter)(
-    name,
-    `strato-FilterField-recentFilters-${name}`,
-    setFilters
-  );
-  return filters;
+  (0, import_react.useEffect)(() => {
+    if ((0, import_client_state.isUnauthorized)(error) || (0, import_client_state.isForbidden)(error)) {
+      logger?.warn(
+        "FilterField pinned and recent error - permissions not met",
+        error
+      );
+    }
+  }, [error, logger]);
+  return name === null ? [] : (0, import_recent_pinned_store.parseStoredFilters)(value);
 }
 function useRecentFilterMutation(name = null) {
-  const { mutateAsync } = (0, import_usePersistedFilter.usePersistedFilterMutation)(
-    `strato-FilterField-recentFilters-${name}`,
-    name,
-    "save"
+  const { setValue } = (0, import_useAppState.useUserAppState)(
+    `strato-FilterField-recentFilters-${name}`
+  );
+  return (filterString) => setValue(
+    (previous) => (0, import_recent_pinned_store.addFilterToState)((0, import_recent_pinned_store.parseStoredFilters)(previous), filterString, 100)
   );
-  return mutateAsync;
 }

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

@@ -28,7 +28,6 @@ export declare function useSuggestions(props: {
     editorViewRef: MutableRefObject<EditorView | null>;
     viewDispatch: (args: Transaction | TransactionSpec | TransactionSpec[]) => void;
     onSuggest?: FilterFieldSuggestionsCallback;
-    hiddenInputRef: MutableRefObject<HTMLInputElement | null>;
     ariaLabelingProps?: AriaLabelingProps;
 }): {
     ariaAttributes: {

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

@@ -53,16 +53,11 @@ function useSuggestions(props) {
     editorViewRef,
     onSuggest,
     viewDispatch,
-    hiddenInputRef,
     ariaLabelingProps
   } = props;
   const { showBoundary } = (0, import_react_error_boundary.useErrorBoundary)();
   const setUserAction = (0, import_useErrorLogsStore.useErrorLogsStore)((state) => state.setAction);
-  const { ariaProps } = (0, import_useFormFieldValidation.useFormFieldValidation)(
-    hiddenInputRef,
-    {},
-    ariaLabelingProps
-  );
+  const ariaProps = (0, import_useFormFieldValidation.useFormFieldValidationAriaProps)(ariaLabelingProps);
   const [
     autoSuggestionValues,
     setAutoSuggestionValues,

package/filters/filter-field/state/recent-pinned-store.d.ts

@@ -1,4 +1,3 @@
-import { type StoreApi } from 'zustand';
 /** @internal */
 export interface StoredFilter {
     filter: string;
@@ -6,20 +5,20 @@ export interface StoredFilter {
     timeUsed: Date;
 }
 /**
- * Interface defining the store for recent filters.
+ * JSON shape as stored. timeUsed arrives as an ISO string after JSON.parse,
+ * but may also be a Date when returned from addFilterToState (before serialization).
  * @internal
  */
-export interface RecentAndPinnedFiltersState {
-    canPin: boolean;
-    setCanPin: (canPin: boolean) => void;
-    recentFilters: Array<StoredFilter>;
-    setRecentFilters: (filters: Array<StoredFilter>) => void;
-    saveRecentFilter: (filter: string) => Array<StoredFilter>;
-    pinnedFilters: Array<StoredFilter>;
-    setPinnedFilters: (filters: Array<StoredFilter>) => void;
-    pinFilter: (filter: string) => Array<StoredFilter>;
-    unpinFilter: (filter: string) => Array<StoredFilter>;
+export interface RawStoredFilter {
+    filter: string;
+    parserVersion?: string;
+    timeUsed?: Date | string;
 }
+/**
+ * Re-hydrate a JSON-parsed filter array, converting timeUsed strings back to Dates.
+ * @internal
+ */
+export declare function parseStoredFilters(raw: RawStoredFilter[] | undefined): StoredFilter[];
 /**
  * Update logic for saving a filter to the store.
  * @internal
@@ -30,18 +29,3 @@ export declare function addFilterToState(storedFilters: StoredFilter[], filter:
  * @internal
  */
 export declare function removeFilterFromState(storedFilters: StoredFilter[], filter: string): StoredFilter[];
-/**
- * Creates a standalone store that can be used to namespace connected filter field storages.
- * @internal
- */
-export declare function createRecentAndPinnedFilterStore(): StoreApi<RecentAndPinnedFiltersState>;
-/**
- * Void store for opt out feature
- * @internal
- */
-export declare const voidStore: StoreApi<RecentAndPinnedFiltersState>;
-/**
- * Create a shareable saved filters store map that maps a namespace to a store.
- * @internal
- */
-export declare const scopedRecentAndPinnedFiltersStores: Map<string | symbol, StoreApi<RecentAndPinnedFiltersState>>;

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

@@ -18,14 +18,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var recent_pinned_store_exports = {};
 __export(recent_pinned_store_exports, {
   addFilterToState: () => addFilterToState,
-  createRecentAndPinnedFilterStore: () => createRecentAndPinnedFilterStore,
-  removeFilterFromState: () => removeFilterFromState,
-  scopedRecentAndPinnedFiltersStores: () => scopedRecentAndPinnedFiltersStores,
-  voidStore: () => voidStore
+  parseStoredFilters: () => parseStoredFilters,
+  removeFilterFromState: () => removeFilterFromState
 });
 module.exports = __toCommonJS(recent_pinned_store_exports);
-var import_zustand = require("zustand");
 var import_tree_conversion = require("../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(
@@ -58,49 +64,3 @@ function removeFilterFromState(storedFilters, filter) {
   }
   return newValues;
 }
-function createRecentAndPinnedFilterStore() {
-  return (0, import_zustand.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 = (0, import_zustand.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()]]);

package/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/filters/filter-field/suggestions/RecentPinnedSuggestionItem.js

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

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

@@ -27,5 +27,5 @@ var import_virtualFocus_css_ts_vanilla = require("../../../core/styles/virtualFo
 var import_Suggestion_css_ts_vanilla = require("./Suggestion.css");
 var import_SuggestionDetails_css_ts_vanilla = require("./SuggestionDetails.css");
 var import_RecentPinnedSuggestionItem_css_ts_vanilla = require("./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";