@dynatrace/strato-components 3.7.1 → 3.9.0

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

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

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

@@ -1,10 +1,11 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { useMemo, Fragment, useRef, useEffect } from "react";
+import { useMemo, Fragment as Fragment2, useRef, useEffect } from "react";
 import { getOrCreateNamedHighlight } from "./CSSHighlight.js";
 import * as filterfieldStyles from "../FilterField.sty.js";
 import * as styles from "./FilterStatement.sty.js";
 import { convertStringToFilterFieldTree } from "../utils/conversion/string-tree-conversion.js";
+import { statementStatusRegistry } from "../utils/statement-status-registry.js";
 import {
   isFilterFieldBigIntNode,
   isFilterFieldBooleanNode,
@@ -24,6 +25,7 @@ import {
   isFilterFieldStringNode,
   isFilterFieldVariableNode
 } from "../utils/tree-node-guards.js";
+import { FILTERFIELD_ALL_OPERATORS } from "../utils/validation-utils/operator-specification.js";
 function WhitespaceRenderer(props) {
   const { start: startNode, end: endNode } = props;
   if (!startNode || !endNode) {
@@ -72,6 +74,7 @@ function withNodeRenderer(className) {
     return /* @__PURE__ */ jsx("span", { ref, className: clsx(styles.escapeCharacter, className), children: node?.textValue });
   };
 }
+const PlainTextRenderer = withNodeRenderer("");
 const KeyRenderer = withNodeRenderer(
   filterfieldStyles.filterKey
 );
@@ -81,10 +84,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__ */ jsx("span", { className: clsx(filterfieldStyles.operator), children: textValue });
+  }
+  if (textValue.includes("$[") || textValue.endsWith("]") || textValue.endsWith("$")) {
+    return /* @__PURE__ */ jsx("span", { className: clsx(filterfieldStyles.variable), children: textValue });
+  }
+  return /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+    prefix && /* @__PURE__ */ jsx("span", { className: styles.escapeCharacter, children: prefix }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(styles.escapeCharacter, filterfieldStyles.variable),
+        children: value
+      }
+    ),
+    suffix && /* @__PURE__ */ 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__ */ jsx(LeafNodeRenderer, { node: item }, item.range.from));
+    textPos = itemEnd;
+  }
+  if (textPos < textValue.length) {
+    rendered.push(textValue.slice(textPos));
+  }
+  return /* @__PURE__ */ jsx("span", { className: styles.escapeCharacter, children: rendered });
+}
 const JSONPathRenderer = withNodeRenderer(
   filterfieldStyles.filterValue
 );
@@ -100,12 +147,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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(styles.escapeCharacter, filterfieldStyles.operator),
+        children: operatorText
+      }
+    ),
+    hasSpace && /* @__PURE__ */ jsx("span", { className: styles.whitespace, children: " " }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: clsx(styles.escapeCharacter, filterfieldStyles.filterValue),
+        children: "*"
+      }
+    )
+  ] });
+}
+function SearchOperatorSplitRenderer(props) {
+  const { node } = props;
+  const hasSpace = node.textValue === "* ~";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: filterfieldStyles.filterKey, children: "*" }),
+    hasSpace && /* @__PURE__ */ jsx("span", { className: styles.whitespace, children: " " }),
+    /* @__PURE__ */ jsx("span", { className: filterfieldStyles.operator, children: "~" })
+  ] });
+}
 const InclusionOperatorRenderer = withNodeRenderer(
   filterfieldStyles.operator
 );
@@ -121,13 +194,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__ */ jsxs("span", { className: filterfieldStyles.operator, children: [
           /* @__PURE__ */ jsx("span", { className: styles.whitespace, children: " " }),
           node.logicalOperator,
           /* @__PURE__ */ jsx("span", { className: styles.whitespace, children: " " })
         ] });
-      } else if (node.explicitLogicalOperator === false && !isLast) {
+      } else if (!isLast) {
         joiner = /* @__PURE__ */ jsx(
           WhitespaceRenderer,
           {
@@ -136,12 +209,12 @@ function GroupRenderer(props) {
           }
         );
       }
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
+      return /* @__PURE__ */ jsxs(Fragment2, { children: [
         /* @__PURE__ */ jsx(NodeRenderer, { node: childNode }),
         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) {
@@ -156,13 +229,23 @@ function ValueRenderer(props) {
 }
 function StatementRenderer(props) {
   const { node } = props;
-  return /* @__PURE__ */ jsxs("span", { className: styles.statement, children: [
-    /* @__PURE__ */ jsx(KeyRenderer, { node: node.key }),
-    /* @__PURE__ */ jsx(WhitespaceRenderer, { start: node.key, end: node.comparisonOperator }),
-    /* @__PURE__ */ jsx(LeafNodeRenderer, { node: node.comparisonOperator }),
-    /* @__PURE__ */ jsx(WhitespaceRenderer, { start: node.comparisonOperator, end: node.value }),
-    /* @__PURE__ */ jsx(ValueRenderer, { node: node.value })
-  ] });
+  const status = statementStatusRegistry.get(node);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: clsx(
+        status && status !== "indeterminate" && styles.statement,
+        status === "incomplete" && styles.incompleteStatement
+      ),
+      children: [
+        node.key && (!node.comparisonOperator && !node.value && !isFilterFieldKeyNode(node.key) ? /* @__PURE__ */ jsx(FreeTextRenderer, { node: node.key }) : /* @__PURE__ */ jsx(KeyRenderer, { node: node.key })),
+        /* @__PURE__ */ jsx(WhitespaceRenderer, { start: node.key, end: node.comparisonOperator }),
+        /* @__PURE__ */ jsx(LeafNodeRenderer, { node: node.comparisonOperator }),
+        /* @__PURE__ */ jsx(WhitespaceRenderer, { start: node.comparisonOperator, end: node.value }),
+        /* @__PURE__ */ jsx(ValueRenderer, { node: node.value })
+      ]
+    }
+  );
 }
 function LeafNodeRenderer(props) {
   const { node } = props;
@@ -181,7 +264,7 @@ function LeafNodeRenderer(props) {
   if (isFilterFieldNumberNode(node)) {
     return /* @__PURE__ */ jsx(NumberRenderer, { node });
   }
-  if (isFilterFieldJSONPathNode(node)) {
+  if (isFilterFieldJSONPathNode(node) || node && node.textValue.includes("$")) {
     return /* @__PURE__ */ jsx(JSONPathRenderer, { node });
   }
   if (isFilterFieldBigIntNode(node)) {
@@ -194,10 +277,15 @@ function LeafNodeRenderer(props) {
     return /* @__PURE__ */ jsx(DurationRenderer, { node });
   }
   if (isFilterFieldExistsOperatorNode(node)) {
-    return /* @__PURE__ */ jsx(ExistsOperatorRenderer, { node });
+    return /* @__PURE__ */ jsx(ExistsOperatorSplitRenderer, { node });
   }
-  if (isFilterFieldSearchOperatorNode(node)) {
-    return /* @__PURE__ */ jsx(SearchOperatorRenderer, { node });
+  if (isFilterFieldSearchOperatorNode(node) || node && ["*~", "* ~"].includes(node.textValue)) {
+    return /* @__PURE__ */ jsx(
+      SearchOperatorSplitRenderer,
+      {
+        node
+      }
+    );
   }
   if (isFilterFieldInclusionOperatorNode(node)) {
     return /* @__PURE__ */ jsx(InclusionOperatorRenderer, { node });
@@ -232,7 +320,15 @@ function FilterStatement(props) {
     return convertStringToFilterFieldTree(filterString ?? "", {
       parserConfig: {
         jsonPathConversion: true,
-        searchConversion: true
+        searchConversion: true,
+        ipAddressConversion: true,
+        uidConversion: true,
+        timestampConversion: true,
+        smartscapeIdConversion: true
+      },
+      validatorMap: {
+        comparisonOperators: FILTERFIELD_ALL_OPERATORS,
+        exhaustive: false
       }
     });
   }, [filterString]);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/components/FilterStatement.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useMemo, Fragment, useRef, useEffect, type ReactElement } from 'react';\n\nimport { getOrCreateNamedHighlight } from './CSSHighlight.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport * as filterfieldStyles from '../FilterField.sty.js';\nimport * as styles from './FilterStatement.sty.js';\nimport {\n  FilterFieldStringNode,\n  type FilterFieldBigIntNode,\n  type FilterFieldBooleanNode,\n  type FilterFieldComparisonOperatorNode,\n  type FilterFieldDurationNode,\n  type FilterFieldExistsOperatorNode,\n  type FilterFieldGroupNode,\n  type FilterFieldInclusionOperatorNode,\n  type FilterFieldKeyNode,\n  type FilterFieldLeafNode,\n  type FilterFieldListNode,\n  type FilterFieldNode,\n  type FilterFieldNodeBase,\n  type FilterFieldNumberNode,\n  type FilterFieldRootNode,\n  type FilterFieldSearchOperatorNode,\n  type FilterFieldStatementNode,\n  type FilterFieldValueNode,\n  type FilterFieldVariableNode,\n  type FilterFieldJSONPathNode,\n  FilterFieldErrorNode,\n} from '../types/tree-nodes.js';\nimport { convertStringToFilterFieldTree } from '../utils/conversion/string-tree-conversion.js';\nimport {\n  isFilterFieldBigIntNode,\n  isFilterFieldBooleanNode,\n  isFilterFieldComparisonOperatorNode,\n  isFilterFieldDurationNode,\n  isFilterFieldErrorNode,\n  isFilterFieldExistsOperatorNode,\n  isFilterFieldGroupNode,\n  isFilterFieldInclusionOperatorNode,\n  isFilterFieldJSONPathNode,\n  isFilterFieldKeyNode,\n  isFilterFieldLeafNode,\n  isFilterFieldListNode,\n  isFilterFieldNumberNode,\n  isFilterFieldSearchOperatorNode,\n  isFilterFieldStatementNode,\n  isFilterFieldStringNode,\n  isFilterFieldVariableNode,\n} from '../utils/tree-node-guards.js';\n\nfunction WhitespaceRenderer(\n  props: Readonly<{\n    start?: FilterFieldNodeBase;\n    end?: FilterFieldNodeBase;\n  }>,\n) {\n  const { start: startNode, end: endNode } = props;\n\n  if (!startNode || !endNode) {\n    return null;\n  }\n\n  const numberOfSpaces = Math.max(\n    0,\n    (endNode.range.from ?? -1) - (startNode.range.to ?? -1),\n  );\n  return Array(numberOfSpaces)\n    .fill(' ')\n    .map((item, index) => (\n      <span className={styles.whitespace} key={`${item}-${index}`}>\n        &#32;\n      </span>\n    ));\n}\n\nfunction withNodeRenderer<T extends FilterFieldLeafNode | FilterFieldListNode>(\n  className: string,\n) {\n  return function Component(props: Readonly<{ node: T }>) {\n    const { node } = props;\n\n    const ref = useRef<HTMLSpanElement>(null);\n    const highlight = useMemo(\n      () => getOrCreateNamedHighlight('filter-field-escape-characters'),\n      [],\n    );\n    useEffect(() => {\n      const ranges: Array<Range> = [];\n      if (node?.textValue.includes('\\\\') && ref.current) {\n        const textNode = ref.current.childNodes.item(0);\n        if (textNode) {\n          const textContent = textNode.textContent ?? '';\n          let index = 0;\n          while ((index = textContent.indexOf('\\\\', index)) !== -1) {\n            // ignore if there is nothing to escape.\n            if (index + 1 >= textContent.length) {\n              break;\n            }\n            const range = new Range();\n            range.setStart(textNode, index);\n            range.setEnd(textNode, index + 2);\n            ranges.push(range);\n            index += 2; // Move past the current match\n            highlight.add(range);\n          }\n        }\n      }\n\n      return () => {\n        for (const range of ranges) {\n          highlight.delete(range);\n        }\n      };\n    }, [highlight, node?.textValue]);\n\n    return (\n      <span ref={ref} className={clsx(styles.escapeCharacter, className)}>\n        {node?.textValue}\n      </span>\n    );\n  };\n}\nconst KeyRenderer = withNodeRenderer<FilterFieldKeyNode>(\n  filterfieldStyles.filterKey,\n);\nconst StringRenderer = withNodeRenderer<FilterFieldStringNode>(\n  filterfieldStyles.filterValue,\n);\nconst ComparisonOperatorRenderer =\n  withNodeRenderer<FilterFieldComparisonOperatorNode>(\n    filterfieldStyles.operator,\n  );\nconst ListRenderer = withNodeRenderer<FilterFieldListNode>('');\nconst VariableRenderer = withNodeRenderer<FilterFieldVariableNode>(\n  filterfieldStyles.variable,\n);\n\nconst JSONPathRenderer = withNodeRenderer<FilterFieldJSONPathNode>(\n  filterfieldStyles.filterValue,\n);\nconst NumberRenderer = withNodeRenderer<FilterFieldNumberNode>(\n  filterfieldStyles.filterValue,\n);\nconst BigIntRenderer = withNodeRenderer<FilterFieldBigIntNode>(\n  filterfieldStyles.filterValue,\n);\nconst BooleanRenderer = withNodeRenderer<FilterFieldBooleanNode>(\n  filterfieldStyles.filterValue,\n);\nconst DurationRenderer = withNodeRenderer<FilterFieldDurationNode>(\n  filterfieldStyles.filterValue,\n);\nconst ExistsOperatorRenderer = withNodeRenderer<FilterFieldExistsOperatorNode>(\n  filterfieldStyles.operator,\n);\nconst SearchOperatorRenderer = withNodeRenderer<FilterFieldSearchOperatorNode>(\n  filterfieldStyles.operator,\n);\nconst InclusionOperatorRenderer =\n  withNodeRenderer<FilterFieldInclusionOperatorNode>(\n    filterfieldStyles.operator,\n  );\nconst ErrorRenderer = withNodeRenderer<FilterFieldErrorNode>(\n  filterfieldStyles.error,\n);\n\nfunction GroupRenderer(props: Readonly<{ node: FilterFieldGroupNode }>) {\n  const { node } = props;\n  const lastChild = node.children[node.children.length - 1];\n  return (\n    <span>\n      {node.explicit ? '(' : ''}\n      {node.children.map((childNode, index, allChildren) => {\n        const isLast = index === allChildren.length - 1;\n        const nextChild = node.children[index + 1];\n        let joiner: ReactElement | null = null;\n\n        if (\n          node.explicitLogicalOperator &&\n          !isLast &&\n          nextChild?.type !== 'Error' &&\n          (!('value' in nextChild) || nextChild.value !== '')\n        ) {\n          joiner = (\n            <span className={filterfieldStyles.operator}>\n              <span className={styles.whitespace}>&#32;</span>\n              {node.logicalOperator}\n              <span className={styles.whitespace}>&#32;</span>\n            </span>\n          );\n        } else if (node.explicitLogicalOperator === false && !isLast) {\n          joiner = (\n            <WhitespaceRenderer\n              start={childNode}\n              end={allChildren.at(index + 1)}\n            />\n          );\n        }\n\n        return (\n          <Fragment key={`${childNode.range.from}-${childNode.range.to}`}>\n            <NodeRenderer node={childNode} />\n            {joiner}\n          </Fragment>\n        );\n      })}\n      {node.explicit &&\n      lastChild.type !== 'Error' &&\n      (!('value' in lastChild) || lastChild.value !== '')\n        ? ')'\n        : ''}\n    </span>\n  );\n}\n\nfunction ValueRenderer(props: Readonly<{ node?: FilterFieldValueNode }>) {\n  const { node } = props;\n\n  if (isFilterFieldLeafNode(node)) {\n    return <LeafNodeRenderer node={node} />;\n  }\n  if (isFilterFieldListNode(node)) {\n    return <ListRenderer node={node} />;\n  }\n  return null;\n}\n\nfunction StatementRenderer(\n  props: Readonly<{ node: FilterFieldStatementNode }>,\n) {\n  const { node } = props;\n  return (\n    <span className={styles.statement}>\n      <KeyRenderer node={node.key as FilterFieldKeyNode} />\n      <WhitespaceRenderer start={node.key} end={node.comparisonOperator} />\n      <LeafNodeRenderer node={node.comparisonOperator} />\n      <WhitespaceRenderer start={node.comparisonOperator} end={node.value} />\n      <ValueRenderer node={node.value} />\n    </span>\n  );\n}\n\nfunction LeafNodeRenderer(props: Readonly<{ node?: FilterFieldLeafNode }>) {\n  const { node } = props;\n\n  if (isFilterFieldKeyNode(node)) {\n    return <KeyRenderer node={node} />;\n  }\n  if (isFilterFieldComparisonOperatorNode(node)) {\n    return <ComparisonOperatorRenderer node={node} />;\n  }\n  if (isFilterFieldStringNode(node)) {\n    return <StringRenderer node={node} />;\n  }\n  if (isFilterFieldVariableNode(node)) {\n    return <VariableRenderer node={node} />;\n  }\n  if (isFilterFieldNumberNode(node)) {\n    return <NumberRenderer node={node} />;\n  }\n  if (isFilterFieldJSONPathNode(node)) {\n    return <JSONPathRenderer node={node} />;\n  }\n  if (isFilterFieldBigIntNode(node)) {\n    return <BigIntRenderer node={node} />;\n  }\n  if (isFilterFieldBooleanNode(node)) {\n    return <BooleanRenderer node={node} />;\n  }\n  if (isFilterFieldDurationNode(node)) {\n    return <DurationRenderer node={node} />;\n  }\n  if (isFilterFieldExistsOperatorNode(node)) {\n    return <ExistsOperatorRenderer node={node} />;\n  }\n  if (isFilterFieldSearchOperatorNode(node)) {\n    return <SearchOperatorRenderer node={node} />;\n  }\n  if (isFilterFieldInclusionOperatorNode(node)) {\n    return <InclusionOperatorRenderer node={node} />;\n  }\n  if (isFilterFieldErrorNode(node)) {\n    return <ErrorRenderer node={node} />;\n  }\n\n  return null;\n}\n\nexport function NodeRenderer(\n  props: Readonly<{ node: FilterFieldRootNode | FilterFieldNode }>,\n) {\n  const { node } = props;\n\n  if (isFilterFieldGroupNode(node)) {\n    return <GroupRenderer node={node} />;\n  }\n\n  if (isFilterFieldStatementNode(node)) {\n    return <StatementRenderer node={node} />;\n  }\n\n  if (isFilterFieldErrorNode(node)) {\n    return <ErrorRenderer node={node} />;\n  }\n\n  return null;\n}\n\n/**\n * Accepted properties for FilterStatement.\n * @internal\n */\nexport type FilterStatementProps = StylingProps &\n  DataTestId & { value?: string; highlighting?: 'syntax' | 'minimal' };\n\n/**\n * The `FilterStatement` component renders and highlights a filter string\n * using an optimized parser for syntax highlighting.\n * @internal\n */\nexport function FilterStatement(props: FilterStatementProps) {\n  const {\n    value: filterString,\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    highlighting = 'syntax',\n  } = props;\n\n  const tokenizedValue = useMemo(() => {\n    return convertStringToFilterFieldTree(filterString ?? '', {\n      parserConfig: {\n        jsonPathConversion: true,\n        searchConversion: true,\n      },\n    });\n  }, [filterString]);\n\n  return (\n    <div\n      className={clsx(styles.root, consumerClassName, [\n        highlighting === 'syntax' && styles.highlighting.syntax,\n        highlighting === 'minimal' && styles.highlighting.minimal,\n      ])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      <NodeRenderer node={tokenizedValue.tree as FilterFieldRootNode} />\n    </div>\n  );\n}\n"],
-  "mappings": "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",
-  "names": []
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useMemo, Fragment, useRef, useEffect, type ReactElement } from 'react';\n\nimport { getOrCreateNamedHighlight } from './CSSHighlight.js';\nimport type { DataTestId } from '../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../core/types/styling-props.js';\nimport * as filterfieldStyles from '../FilterField.sty.js';\nimport * as styles from './FilterStatement.sty.js';\nimport {\n  FilterFieldStringNode,\n  type FilterFieldBigIntNode,\n  type FilterFieldBooleanNode,\n  type FilterFieldComparisonOperatorNode,\n  type FilterFieldDurationNode,\n  type FilterFieldExistsOperatorNode,\n  type FilterFieldGroupNode,\n  type FilterFieldInclusionOperatorNode,\n  type FilterFieldKeyNode,\n  type FilterFieldLeafNode,\n  type FilterFieldListNode,\n  type FilterFieldNode,\n  type FilterFieldNodeBase,\n  type FilterFieldNumberNode,\n  type FilterFieldRootNode,\n  type FilterFieldSearchOperatorNode,\n  type FilterFieldStatementNode,\n  type FilterFieldValueNode,\n  type FilterFieldVariableNode,\n  type FilterFieldJSONPathNode,\n  FilterFieldErrorNode,\n} from '../types/tree-nodes.js';\nimport { convertStringToFilterFieldTree } from '../utils/conversion/string-tree-conversion.js';\nimport { statementStatusRegistry } from '../utils/statement-status-registry.js';\nimport {\n  isFilterFieldBigIntNode,\n  isFilterFieldBooleanNode,\n  isFilterFieldComparisonOperatorNode,\n  isFilterFieldDurationNode,\n  isFilterFieldErrorNode,\n  isFilterFieldExistsOperatorNode,\n  isFilterFieldGroupNode,\n  isFilterFieldInclusionOperatorNode,\n  isFilterFieldJSONPathNode,\n  isFilterFieldKeyNode,\n  isFilterFieldLeafNode,\n  isFilterFieldListNode,\n  isFilterFieldNumberNode,\n  isFilterFieldSearchOperatorNode,\n  isFilterFieldStatementNode,\n  isFilterFieldStringNode,\n  isFilterFieldVariableNode,\n} from '../utils/tree-node-guards.js';\nimport { FILTERFIELD_ALL_OPERATORS } from '../utils/validation-utils/operator-specification.js';\n\nfunction WhitespaceRenderer(\n  props: Readonly<{\n    start?: FilterFieldNodeBase;\n    end?: FilterFieldNodeBase;\n  }>,\n) {\n  const { start: startNode, end: endNode } = props;\n\n  if (!startNode || !endNode) {\n    return null;\n  }\n\n  const numberOfSpaces = Math.max(\n    0,\n    (endNode.range.from ?? -1) - (startNode.range.to ?? -1),\n  );\n  return Array(numberOfSpaces)\n    .fill(' ')\n    .map((item, index) => (\n      <span className={styles.whitespace} key={`${item}-${index}`}>\n        &#32;\n      </span>\n    ));\n}\n\nfunction withNodeRenderer<T extends FilterFieldLeafNode | FilterFieldListNode>(\n  className: string,\n) {\n  return function Component(props: Readonly<{ node: T }>) {\n    const { node } = props;\n\n    const ref = useRef<HTMLSpanElement>(null);\n    const highlight = useMemo(\n      () => getOrCreateNamedHighlight('filter-field-escape-characters'),\n      [],\n    );\n    useEffect(() => {\n      const ranges: Array<Range> = [];\n      if (node?.textValue.includes('\\\\') && ref.current) {\n        const textNode = ref.current.childNodes.item(0);\n        if (textNode) {\n          const textContent = textNode.textContent ?? '';\n          let index = 0;\n          while ((index = textContent.indexOf('\\\\', index)) !== -1) {\n            // ignore if there is nothing to escape.\n            if (index + 1 >= textContent.length) {\n              break;\n            }\n            const range = new Range();\n            range.setStart(textNode, index);\n            range.setEnd(textNode, index + 2);\n            ranges.push(range);\n            index += 2; // Move past the current match\n            highlight.add(range);\n          }\n        }\n      }\n\n      return () => {\n        for (const range of ranges) {\n          highlight.delete(range);\n        }\n      };\n    }, [highlight, node?.textValue]);\n\n    return (\n      <span ref={ref} className={clsx(styles.escapeCharacter, className)}>\n        {node?.textValue}\n      </span>\n    );\n  };\n}\n\nconst PlainTextRenderer = withNodeRenderer<FilterFieldLeafNode>('');\nconst KeyRenderer = withNodeRenderer<FilterFieldKeyNode>(\n  filterfieldStyles.filterKey,\n);\nconst StringRenderer = withNodeRenderer<FilterFieldStringNode>(\n  filterfieldStyles.filterValue,\n);\nconst ComparisonOperatorRenderer =\n  withNodeRenderer<FilterFieldComparisonOperatorNode>(\n    filterfieldStyles.operator,\n  );\nfunction FreeTextRenderer(props: Readonly<{ node: FilterFieldLeafNode }>) {\n  const { node } = props;\n  const { textValue } = node;\n\n  if (['AND', 'OR'].includes(textValue)) {\n    return (\n      <span className={clsx(filterfieldStyles.operator)}>{textValue}</span>\n    );\n  }\n  if (\n    textValue.includes('$[') ||\n    textValue.endsWith(']') ||\n    textValue.endsWith('$')\n  ) {\n    return (\n      <span className={clsx(filterfieldStyles.variable)}>{textValue}</span>\n    );\n  }\n  return <PlainTextRenderer node={node} />;\n}\n\nfunction VariableRenderer(props: Readonly<{ node: FilterFieldVariableNode }>) {\n  const { node } = props;\n  const { textValue, value } = node;\n  const varStart = textValue.indexOf(value);\n  const prefix = varStart > 0 ? textValue.slice(0, varStart) : '';\n  const suffix = textValue.slice(varStart + value.length);\n  return (\n    <>\n      {prefix && <span className={styles.escapeCharacter}>{prefix}</span>}\n      <span\n        className={clsx(styles.escapeCharacter, filterfieldStyles.variable)}\n      >\n        {value}\n      </span>\n      {suffix && <span className={styles.escapeCharacter}>{suffix}</span>}\n    </>\n  );\n}\n\nfunction ListRenderer(props: Readonly<{ node: FilterFieldListNode }>) {\n  const { node } = props;\n  const { textValue, value: items, range: listRange } = node;\n  const rendered: Array<ReactElement | string> = [];\n  let textPos = 0;\n\n  for (const item of items) {\n    const itemStart = item.range.from - listRange.from;\n    const itemEnd = item.range.to - listRange.from;\n    if (itemStart > textPos) {\n      rendered.push(textValue.slice(textPos, itemStart));\n    }\n    rendered.push(<LeafNodeRenderer key={item.range.from} node={item} />);\n    textPos = itemEnd;\n  }\n\n  if (textPos < textValue.length) {\n    rendered.push(textValue.slice(textPos));\n  }\n\n  return <span className={styles.escapeCharacter}>{rendered}</span>;\n}\n\nconst JSONPathRenderer = withNodeRenderer<FilterFieldJSONPathNode>(\n  filterfieldStyles.filterValue,\n);\nconst NumberRenderer = withNodeRenderer<FilterFieldNumberNode>(\n  filterfieldStyles.filterValue,\n);\nconst BigIntRenderer = withNodeRenderer<FilterFieldBigIntNode>(\n  filterfieldStyles.filterValue,\n);\nconst BooleanRenderer = withNodeRenderer<FilterFieldBooleanNode>(\n  filterfieldStyles.filterValue,\n);\nconst DurationRenderer = withNodeRenderer<FilterFieldDurationNode>(\n  filterfieldStyles.filterValue,\n);\nfunction ExistsOperatorSplitRenderer(\n  props: Readonly<{ node: FilterFieldExistsOperatorNode }>,\n) {\n  const { textValue } = props.node;\n  const starIdx = textValue.indexOf('*');\n  const operatorText = textValue.slice(0, starIdx).trimEnd();\n  const hasSpace = textValue[starIdx - 1] === ' ';\n  return (\n    <>\n      <span\n        className={clsx(styles.escapeCharacter, filterfieldStyles.operator)}\n      >\n        {operatorText}\n      </span>\n      {hasSpace && <span className={styles.whitespace}>&#32;</span>}\n      <span\n        className={clsx(styles.escapeCharacter, filterfieldStyles.filterValue)}\n      >\n        *\n      </span>\n    </>\n  );\n}\nfunction SearchOperatorSplitRenderer(\n  props: Readonly<{\n    node: FilterFieldSearchOperatorNode;\n  }>,\n) {\n  const { node } = props;\n  const hasSpace = node.textValue === '* ~';\n  return (\n    <>\n      <span className={filterfieldStyles.filterKey}>*</span>\n      {hasSpace && <span className={styles.whitespace}>&#32;</span>}\n      <span className={filterfieldStyles.operator}>~</span>\n    </>\n  );\n}\nconst InclusionOperatorRenderer =\n  withNodeRenderer<FilterFieldInclusionOperatorNode>(\n    filterfieldStyles.operator,\n  );\nconst ErrorRenderer = withNodeRenderer<FilterFieldErrorNode>(\n  filterfieldStyles.error,\n);\n\nfunction GroupRenderer(props: Readonly<{ node: FilterFieldGroupNode }>) {\n  const { node } = props;\n  const lastChild = node.children[node.children.length - 1];\n  return (\n    <span>\n      {node.explicit ? '(' : ''}\n      {node.children.map((childNode, index, allChildren) => {\n        const isLast = index === allChildren.length - 1;\n        const nextChild = node.children[index + 1];\n        let joiner: ReactElement | null = null;\n\n        if (\n          node.explicitLogicalOperator &&\n          nextChild !== undefined &&\n          nextChild.range.from - childNode.range.to > 1 &&\n          !isLast &&\n          ((nextChild?.type !== 'Error' &&\n            (!('value' in nextChild) || nextChild.value !== '')) ||\n            node.logicalOperator === 'OR')\n        ) {\n          joiner = (\n            <span className={filterfieldStyles.operator}>\n              <span className={styles.whitespace}>&#32;</span>\n              {node.logicalOperator}\n              <span className={styles.whitespace}>&#32;</span>\n            </span>\n          );\n        } else if (!isLast) {\n          joiner = (\n            <WhitespaceRenderer\n              start={childNode}\n              end={allChildren.at(index + 1)}\n            />\n          );\n        }\n\n        return (\n          <Fragment key={`${childNode.range.from}-${childNode.range.to}`}>\n            <NodeRenderer node={childNode} />\n            {joiner}\n          </Fragment>\n        );\n      })}\n      {node.explicit &&\n      lastChild !== undefined &&\n      lastChild.range.to < node.range.to\n        ? ')'\n        : ''}\n    </span>\n  );\n}\n\nfunction ValueRenderer(props: Readonly<{ node?: FilterFieldValueNode }>) {\n  const { node } = props;\n\n  if (isFilterFieldLeafNode(node)) {\n    return <LeafNodeRenderer node={node} />;\n  }\n  if (isFilterFieldListNode(node)) {\n    return <ListRenderer node={node} />;\n  }\n  return null;\n}\n\nfunction StatementRenderer(\n  props: Readonly<{ node: FilterFieldStatementNode }>,\n) {\n  const { node } = props;\n  const status = statementStatusRegistry.get(node);\n  return (\n    <span\n      className={clsx(\n        status && status !== 'indeterminate' && styles.statement,\n        status === 'incomplete' && styles.incompleteStatement,\n      )}\n    >\n      {node.key &&\n        (!node.comparisonOperator &&\n        !node.value &&\n        !isFilterFieldKeyNode(node.key) ? (\n          <FreeTextRenderer node={node.key} />\n        ) : (\n          <KeyRenderer node={node.key as FilterFieldKeyNode} />\n        ))}\n\n      <WhitespaceRenderer start={node.key} end={node.comparisonOperator} />\n      <LeafNodeRenderer node={node.comparisonOperator} />\n      <WhitespaceRenderer start={node.comparisonOperator} end={node.value} />\n      <ValueRenderer node={node.value} />\n    </span>\n  );\n}\n\nfunction LeafNodeRenderer(props: Readonly<{ node?: FilterFieldLeafNode }>) {\n  const { node } = props;\n  if (isFilterFieldKeyNode(node)) {\n    return <KeyRenderer node={node} />;\n  }\n  if (isFilterFieldComparisonOperatorNode(node)) {\n    return <ComparisonOperatorRenderer node={node} />;\n  }\n  if (isFilterFieldStringNode(node)) {\n    return <StringRenderer node={node} />;\n  }\n  if (isFilterFieldVariableNode(node)) {\n    return <VariableRenderer node={node} />;\n  }\n  if (isFilterFieldNumberNode(node)) {\n    return <NumberRenderer node={node} />;\n  }\n  if (\n    isFilterFieldJSONPathNode(node) ||\n    (node && node.textValue.includes('$'))\n  ) {\n    return <JSONPathRenderer node={node as FilterFieldJSONPathNode} />;\n  }\n  if (isFilterFieldBigIntNode(node)) {\n    return <BigIntRenderer node={node} />;\n  }\n  if (isFilterFieldBooleanNode(node)) {\n    return <BooleanRenderer node={node} />;\n  }\n  if (isFilterFieldDurationNode(node)) {\n    return <DurationRenderer node={node} />;\n  }\n  if (isFilterFieldExistsOperatorNode(node)) {\n    return <ExistsOperatorSplitRenderer node={node} />;\n  }\n  if (\n    isFilterFieldSearchOperatorNode(node) ||\n    (node && ['*~', '* ~'].includes(node.textValue))\n  ) {\n    return (\n      <SearchOperatorSplitRenderer\n        node={node as FilterFieldSearchOperatorNode}\n      />\n    );\n  }\n  if (isFilterFieldInclusionOperatorNode(node)) {\n    return <InclusionOperatorRenderer node={node} />;\n  }\n  if (isFilterFieldErrorNode(node)) {\n    return <ErrorRenderer node={node} />;\n  }\n\n  return null;\n}\n\nexport function NodeRenderer(\n  props: Readonly<{ node: FilterFieldRootNode | FilterFieldNode }>,\n) {\n  const { node } = props;\n\n  if (isFilterFieldGroupNode(node)) {\n    return <GroupRenderer node={node} />;\n  }\n\n  if (isFilterFieldStatementNode(node)) {\n    return <StatementRenderer node={node} />;\n  }\n\n  if (isFilterFieldErrorNode(node)) {\n    return <ErrorRenderer node={node} />;\n  }\n\n  return null;\n}\n\n/**\n * Accepted properties for FilterStatement.\n * @internal\n */\nexport type FilterStatementProps = StylingProps &\n  DataTestId & { value?: string; highlighting?: 'syntax' | 'minimal' };\n\n/**\n * The `FilterStatement` component renders and highlights a filter string\n * using an optimized parser for syntax highlighting.\n * @internal\n */\nexport function FilterStatement(props: FilterStatementProps) {\n  const {\n    value: filterString,\n    'data-testid': dataTestId,\n    className: consumerClassName,\n    style: consumerStyle,\n    highlighting = 'syntax',\n  } = props;\n\n  const tokenizedValue = useMemo(() => {\n    return convertStringToFilterFieldTree(filterString ?? '', {\n      parserConfig: {\n        jsonPathConversion: true,\n        searchConversion: true,\n        ipAddressConversion: true,\n        uidConversion: true,\n        timestampConversion: true,\n        smartscapeIdConversion: true,\n      },\n      validatorMap: {\n        comparisonOperators: FILTERFIELD_ALL_OPERATORS,\n        exhaustive: false,\n      },\n    });\n  }, [filterString]);\n\n  return (\n    <div\n      className={clsx(styles.root, consumerClassName, [\n        highlighting === 'syntax' && styles.highlighting.syntax,\n        highlighting === 'minimal' && styles.highlighting.minimal,\n      ])}\n      style={consumerStyle}\n      data-testid={dataTestId}\n    >\n      <NodeRenderer node={tokenizedValue.tree as FilterFieldRootNode} />\n    </div>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["Fragment"]
 }

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

@@ -4,16 +4,18 @@ import "../FilterField.css";
 import "../suggestions/SuggestionsOverlay.css";
 import "../suggestions/Suggestion.css";
 import "./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";
 export {
   escapeCharacter,
   highlight,
   highlighting,
+  incompleteStatement,
   root,
   statement,
   whitespace

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/components/FilterStatement.css.ts"],
-  "sourcesContent": ["import '../../../core/styles/virtualFocus.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../FilterField.css';\nimport '../suggestions/SuggestionsOverlay.css';\nimport '../suggestions/Suggestion.css';\nimport './FilterStatement.css';\nexport var escapeCharacter = '_ia7amm4-3-7-1';\nexport var highlight = '_ia7amm5-3-7-1';\nexport var highlighting = {syntax:'_ia7amm0-3-7-1',minimal:'_ia7amm1-3-7-1'};\nexport var root = '_ia7amm2-3-7-1 _96tj13c-3-7-1';\nexport var statement = '_ia7amm3-3-7-1';\nexport var whitespace = '_ia7amm6-3-7-1';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,eAAe,EAAC,QAAO,kBAAiB,SAAQ,iBAAgB;AACpE,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,aAAa;",
+  "sourcesContent": ["import '../../../core/styles/virtualFocus.css';\nimport '../../../core/components/app-root/AppRoot.css';\nimport '../FilterField.css';\nimport '../suggestions/SuggestionsOverlay.css';\nimport '../suggestions/Suggestion.css';\nimport './FilterStatement.css';\nexport var escapeCharacter = '_ia7amm5-3-9-0';\nexport var highlight = '_ia7amm6-3-9-0';\nexport var highlighting = {syntax:'_ia7amm0-3-9-0',minimal:'_ia7amm1-3-9-0'};\nexport var incompleteStatement = '_ia7amm4-3-9-0';\nexport var root = '_ia7amm2-3-9-0 _96tj13c-3-9-0';\nexport var statement = '_ia7amm3-3-9-0';\nexport var whitespace = '_ia7amm7-3-9-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,kBAAkB;AACtB,IAAI,YAAY;AAChB,IAAI,eAAe,EAAC,QAAO,kBAAiB,SAAQ,iBAAgB;AACpE,IAAI,sBAAsB;AAC1B,IAAI,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,aAAa;",
   "names": []
 }

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

@@ -5,7 +5,7 @@ import {
   pinnedFiltersEffect
 } from "../../editor-state-configs/editor-config.js";
 function usePinnedFilterSuggestions(editorViewRef, filterNamespace = null, isOpen) {
-  const pinnedFilters = usePinnedFilters(filterNamespace);
+  const { filters: pinnedFilters } = usePinnedFilters(filterNamespace);
   useEffect(() => {
     if (!editorViewRef.current) {
       return;

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/filter-field/hooks/recent-and-pinned/usePinnedFilterSuggestions.tsx"],
-  "sourcesContent": ["import type { EditorView } from '@codemirror/view';\nimport { type RefObject, useEffect } from 'react';\n\nimport { usePinnedFilters } from './usePinnedFilters.js';\nimport {\n  ANNOTATION_SUGGESTION_PIN,\n  pinnedFiltersEffect,\n} from '../../editor-state-configs/editor-config.js';\nimport type { FilterFieldSuggestion } from '../../suggestions/Suggestion.types.js';\n\n/**\n * Syncs the namespaced store of the filter field to the suggestions.\n */\nexport function usePinnedFilterSuggestions(\n  editorViewRef: RefObject<EditorView>,\n  filterNamespace: string | null = null,\n  isOpen: boolean,\n): void {\n  const pinnedFilters = usePinnedFilters(filterNamespace);\n\n  useEffect(() => {\n    if (!editorViewRef.current) {\n      return;\n    }\n\n    const pinnedFiltersSuggestions = pinnedFilters.map<FilterFieldSuggestion>(\n      (storedFilter) => ({\n        value: storedFilter.filter,\n        insertionStrategy: 'replace-all',\n        displayValue: storedFilter.filter,\n      }),\n    );\n\n    editorViewRef.current.dispatch({\n      userEvent: !isOpen ? undefined : ANNOTATION_SUGGESTION_PIN,\n      effects: [pinnedFiltersEffect.of(pinnedFiltersSuggestions)],\n    });\n    // pinnedFilters needs to be stringified.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editorViewRef.current, JSON.stringify(pinnedFilters)]);\n}\n"],
-  "mappings": "AACA,SAAyB,iBAAiB;AAE1C,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMA,SAAS,2BACd,eACA,kBAAiC,MACjC,QACM;AACN,QAAM,gBAAgB,iBAAiB,eAAe;AAEtD,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,SAAS;AAC1B;AAAA,IACF;AAEA,UAAM,2BAA2B,cAAc;AAAA,MAC7C,CAAC,kBAAkB;AAAA,QACjB,OAAO,aAAa;AAAA,QACpB,mBAAmB;AAAA,QACnB,cAAc,aAAa;AAAA,MAC7B;AAAA,IACF;AAEA,kBAAc,QAAQ,SAAS;AAAA,MAC7B,WAAW,CAAC,SAAS,SAAY;AAAA,MACjC,SAAS,CAAC,oBAAoB,GAAG,wBAAwB,CAAC;AAAA,IAC5D,CAAC;AAAA,EAGH,GAAG,CAAC,cAAc,SAAS,KAAK,UAAU,aAAa,CAAC,CAAC;AAC3D;",
+  "sourcesContent": ["import type { EditorView } from '@codemirror/view';\nimport { type RefObject, useEffect } from 'react';\n\nimport { usePinnedFilters } from './usePinnedFilters.js';\nimport {\n  ANNOTATION_SUGGESTION_PIN,\n  pinnedFiltersEffect,\n} from '../../editor-state-configs/editor-config.js';\nimport type { FilterFieldSuggestion } from '../../suggestions/Suggestion.types.js';\n\n/**\n * Syncs the namespaced store of the filter field to the suggestions.\n */\nexport function usePinnedFilterSuggestions(\n  editorViewRef: RefObject<EditorView>,\n  filterNamespace: string | null = null,\n  isOpen: boolean,\n): void {\n  const { filters: pinnedFilters } = usePinnedFilters(filterNamespace);\n\n  useEffect(() => {\n    if (!editorViewRef.current) {\n      return;\n    }\n\n    const pinnedFiltersSuggestions = pinnedFilters.map<FilterFieldSuggestion>(\n      (storedFilter) => ({\n        value: storedFilter.filter,\n        insertionStrategy: 'replace-all',\n        displayValue: storedFilter.filter,\n      }),\n    );\n\n    editorViewRef.current.dispatch({\n      userEvent: !isOpen ? undefined : ANNOTATION_SUGGESTION_PIN,\n      effects: [pinnedFiltersEffect.of(pinnedFiltersSuggestions)],\n    });\n    // pinnedFilters needs to be stringified.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [editorViewRef.current, JSON.stringify(pinnedFilters)]);\n}\n"],
+  "mappings": "AACA,SAAyB,iBAAiB;AAE1C,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMA,SAAS,2BACd,eACA,kBAAiC,MACjC,QACM;AACN,QAAM,EAAE,SAAS,cAAc,IAAI,iBAAiB,eAAe;AAEnE,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,SAAS;AAC1B;AAAA,IACF;AAEA,UAAM,2BAA2B,cAAc;AAAA,MAC7C,CAAC,kBAAkB;AAAA,QACjB,OAAO,aAAa;AAAA,QACpB,mBAAmB;AAAA,QACnB,cAAc,aAAa;AAAA,MAC7B;AAAA,IACF;AAEA,kBAAc,QAAQ,SAAS;AAAA,MAC7B,WAAW,CAAC,SAAS,SAAY;AAAA,MACjC,SAAS,CAAC,oBAAoB,GAAG,wBAAwB,CAAC;AAAA,IAC5D,CAAC;AAAA,EAGH,GAAG,CAAC,cAAc,SAAS,KAAK,UAAU,aAAa,CAAC,CAAC;AAC3D;",
   "names": []
 }

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

@@ -1,38 +1,45 @@
+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,
+  removeFilterFromState
+} from "../../state/recent-pinned-store.js";
+import { useFilterFieldLoggerContext } from "../useFilterFieldLoggerContext.js";
 function usePinnedFilters(name = null) {
-  const setFilters = useRecentAndPinnedFiltersStore(
-    (state) => state.setPinnedFilters,
-    name
+  const { logger } = useFilterFieldLoggerContext();
+  const { value, error } = useUserAppState(
+    `strato-FilterField-pinnedFilters-${name}`
   );
-  const filters = useRecentAndPinnedFiltersStore(
-    (state) => state.pinnedFilters,
-    name
-  );
-  usePersistedFilter(
-    name,
-    `strato-FilterField-pinnedFilters-${name}`,
-    setFilters
-  );
-  return filters;
+  useEffect(() => {
+    if (isUnauthorized(error) || isForbidden(error)) {
+      logger?.warn(
+        "FilterField pinned and recent error - permissions not met",
+        error
+      );
+    }
+  }, [error, logger]);
+  return {
+    filters: name === null ? [] : parseStoredFilters(value),
+    canPin: name !== null && !isUnauthorized(error) && !isForbidden(error)
+  };
 }
 function usePinnedFilterMutation(name = null) {
-  const { mutate: pinFilter } = usePersistedFilterMutation(
-    `strato-FilterField-pinnedFilters-${name}`,
-    name,
-    "pin"
-  );
-  const { mutate: unpinFilter } = usePersistedFilterMutation(
-    `strato-FilterField-pinnedFilters-${name}`,
-    name,
-    "unpin"
+  const { setValue } = useUserAppState(
+    `strato-FilterField-pinnedFilters-${name}`
   );
   return {
-    pinFilter,
-    unpinFilter
+    pinFilter: (filterString) => {
+      setValue(
+        (previous) => addFilterToState(parseStoredFilters(previous), filterString, 10)
+      ).catch(() => void 0);
+    },
+    unpinFilter: (filterString) => {
+      setValue(
+        (previous) => removeFilterFromState(parseStoredFilters(previous), filterString)
+      ).catch(() => void 0);
+    }
   };
 }
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/filter-field/hooks/recent-and-pinned/usePinnedFilters.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 pinned filters store.\n */\nexport function usePinnedFilters(name: string | null = null): StoredFilter[] {\n  const setFilters = useRecentAndPinnedFiltersStore(\n    (state) => state.setPinnedFilters,\n    name,\n  );\n  const filters = useRecentAndPinnedFiltersStore(\n    (state) => state.pinnedFilters,\n    name,\n  );\n\n  usePersistedFilter(\n    name,\n    `strato-FilterField-pinnedFilters-${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 usePinnedFilterMutation(name: string | null = null) {\n  const { mutate: pinFilter } = usePersistedFilterMutation(\n    `strato-FilterField-pinnedFilters-${name}`,\n    name,\n    'pin',\n  );\n\n  const { mutate: unpinFilter } = usePersistedFilterMutation(\n    `strato-FilterField-pinnedFilters-${name}`,\n    name,\n    'unpin',\n  );\n\n  return {\n    pinFilter,\n    unpinFilter,\n  };\n}\n"],
-  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sCAAsC;AAMxC,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,wBAAwB,OAAsB,MAAM;AAClE,QAAM,EAAE,QAAQ,UAAU,IAAI;AAAA,IAC5B,oCAAoC,IAAI;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AAEA,QAAM,EAAE,QAAQ,YAAY,IAAI;AAAA,IAC9B,oCAAoC,IAAI;AAAA,IACxC;AAAA,IACA;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,EACF;AACF;",
+  "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  removeFilterFromState,\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 pinned filters store.\n * Returns parsed filters and a `canPin` flag that is `false` when the user\n * lacks permission to use app state (401/403 from the initial fetch).\n * Transient errors (network failures, 500s) do not disable pinning.\n */\nexport function usePinnedFilters(name: string | null = null): {\n  filters: StoredFilter[];\n  canPin: boolean;\n} {\n  const { logger } = useFilterFieldLoggerContext();\n  const { value, error } = useUserAppState<RawStoredFilter[]>(\n    `strato-FilterField-pinnedFilters-${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 {\n    filters: name === null ? [] : parseStoredFilters(value),\n    canPin: name !== null && !isUnauthorized(error) && !isForbidden(error),\n  };\n}\n\n/**\n * Allows access to the namespaced pinned filters store setter.\n * @internal\n */\nexport function usePinnedFilterMutation(name: string | null = null): {\n  pinFilter: (filterString: string) => void;\n  unpinFilter: (filterString: string) => void;\n} {\n  const { setValue } = useUserAppState<RawStoredFilter[]>(\n    `strato-FilterField-pinnedFilters-${name}`,\n  );\n\n  return {\n    pinFilter: (filterString: string) => {\n      setValue((previous) =>\n        addFilterToState(parseStoredFilters(previous), filterString, 10),\n      ).catch(() => undefined);\n    },\n    unpinFilter: (filterString: string) => {\n      setValue((previous) =>\n        removeFilterFromState(parseStoredFilters(previous), filterString),\n      ).catch(() => undefined);\n    },\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,aAAa,sBAAsB;AAE5C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,mCAAmC;AAQrC,SAAS,iBAAiB,OAAsB,MAGrD;AACA,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;AAAA,IACL,SAAS,SAAS,OAAO,CAAC,IAAI,mBAAmB,KAAK;AAAA,IACtD,QAAQ,SAAS,QAAQ,CAAC,eAAe,KAAK,KAAK,CAAC,YAAY,KAAK;AAAA,EACvE;AACF;AAMO,SAAS,wBAAwB,OAAsB,MAG5D;AACA,QAAM,EAAE,SAAS,IAAI;AAAA,IACnB,oCAAoC,IAAI;AAAA,EAC1C;AAEA,SAAO;AAAA,IACL,WAAW,CAAC,iBAAyB;AACnC;AAAA,QAAS,CAAC,aACR,iBAAiB,mBAAmB,QAAQ,GAAG,cAAc,EAAE;AAAA,MACjE,EAAE,MAAM,MAAM,MAAS;AAAA,IACzB;AAAA,IACA,aAAa,CAAC,iBAAyB;AACrC;AAAA,QAAS,CAAC,aACR,sBAAsB,mBAAmB,QAAQ,GAAG,YAAY;AAAA,MAClE,EAAE,MAAM,MAAM,MAAS;AAAA,IACzB;AAAA,EACF;AACF;",
   "names": []
 }