@dynatrace/strato-components 3.4.0 → 3.5.0

package/esm/filters/filter-field/FilterField.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/filter-field/FilterField.css.ts"],
-  "sourcesContent": ["import './FilterField.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ariaDisabled = '_96tj13o-3-4-0';\nexport var container = '_96tj13c-3-4-0';\nexport var disabled = '_96tj13p-3-4-0 _96tj13n-3-4-0 _96tj13o-3-4-0';\nexport var error = '_96tj1311-3-4-0';\nexport var errorText = '_96tj13e-3-4-0';\nexport var errorVars = '_96tj13d-3-4-0';\nexport var escapedCharacter = '_96tj1310-3-4-0';\nexport var existsOperator = '_96tj13z-3-4-0';\nexport var filterIcon = _7a468({defaultClassName:'_96tj13f-3-4-0',variantClassNames:{hasError:{true:'_96tj13g-3-4-0'},disabled:{true:'_96tj13h-3-4-0'}},defaultVariants:{hasError:false,disabled:false},compoundVariants:[]});\nexport var filterKey = '_96tj13v-3-4-0';\nexport var filterStatement = '_96tj13j-3-4-0 _96tj13i-3-4-0';\nexport var filterStatementBase = '_96tj13i-3-4-0';\nexport var filterStatementDeleteButton = _7a468({defaultClassName:'_96tj13r-3-4-0',variantClassNames:{incomplete:{true:'_96tj13s-3-4-0'}},defaultVariants:{},compoundVariants:[]});\nexport var filterStatementDeleteIcon = '_96tj13t-3-4-0';\nexport var filterStatementDeleteWidget = '_96tj13q-3-4-0';\nexport var filterValue = '_96tj13w-3-4-0';\nexport var incompleteFilterStatement = '_96tj13k-3-4-0 _96tj13i-3-4-0';\nexport var intermediateFilterStatement = '_96tj13l-3-4-0';\nexport var operator = '_96tj13y-3-4-0';\nexport var pastedContent = '_96tj13m-3-4-0';\nexport var postSpotError = '_96tj1314-3-4-0';\nexport var preSpotError = '_96tj1313-3-4-0';\nexport var readOnly = '_96tj13n-3-4-0';\nexport var spotError = '_96tj1312-3-4-0';\nexport var suggestionHintContainer = '_96tj13u-3-4-0';\nexport var suggestionsOverlayAnnouncement = '_96tj1315-3-4-0';\nexport var variable = '_96tj13x-3-4-0';\nexport var wrapper = '_96tj13b-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,iBAAiB;AACrB,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,UAAS,OAAM,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrN,IAAI,YAAY;AAChB,IAAI,kBAAkB;AACtB,IAAI,sBAAsB;AAC1B,IAAI,8BAA8B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1K,IAAI,4BAA4B;AAChC,IAAI,8BAA8B;AAClC,IAAI,cAAc;AAClB,IAAI,4BAA4B;AAChC,IAAI,8BAA8B;AAClC,IAAI,WAAW;AACf,IAAI,gBAAgB;AACpB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,0BAA0B;AAC9B,IAAI,iCAAiC;AACrC,IAAI,WAAW;AACf,IAAI,UAAU;",
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './FilterField.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var ariaDisabled = '_96tj13o-3-5-0';\nexport var container = '_96tj13c-3-5-0';\nexport var disabled = '_96tj13p-3-5-0 _96tj13n-3-5-0 _96tj13o-3-5-0';\nexport var error = '_96tj1311-3-5-0';\nexport var errorText = '_96tj13e-3-5-0';\nexport var errorVars = '_96tj13d-3-5-0';\nexport var escapedCharacter = '_96tj1310-3-5-0';\nexport var existsOperator = '_96tj13z-3-5-0';\nexport var filterIcon = _7a468({defaultClassName:'_96tj13f-3-5-0',variantClassNames:{hasError:{true:'_96tj13g-3-5-0'},disabled:{true:'_96tj13h-3-5-0'}},defaultVariants:{hasError:false,disabled:false},compoundVariants:[]});\nexport var filterKey = '_96tj13v-3-5-0';\nexport var filterStatement = '_96tj13j-3-5-0 _96tj13i-3-5-0';\nexport var filterStatementBase = '_96tj13i-3-5-0';\nexport var filterStatementDeleteButton = _7a468({defaultClassName:'_96tj13r-3-5-0',variantClassNames:{incomplete:{true:'_96tj13s-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var filterStatementDeleteIcon = '_96tj13t-3-5-0';\nexport var filterStatementDeleteWidget = '_96tj13q-3-5-0';\nexport var filterValue = '_96tj13w-3-5-0';\nexport var incompleteFilterStatement = '_96tj13k-3-5-0 _96tj13i-3-5-0';\nexport var intermediateFilterStatement = '_96tj13l-3-5-0';\nexport var operator = '_96tj13y-3-5-0';\nexport var pastedContent = '_96tj13m-3-5-0';\nexport var postSpotError = '_96tj1314-3-5-0';\nexport var preSpotError = '_96tj1313-3-5-0';\nexport var readOnly = '_96tj13n-3-5-0';\nexport var spotError = '_96tj1312-3-5-0';\nexport var suggestionHintContainer = '_96tj13u-3-5-0';\nexport var suggestionsOverlayAnnouncement = '_96tj1315-3-5-0';\nexport var variable = '_96tj13x-3-5-0';\nexport var wrapper = '_96tj13b-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,eAAe;AACnB,IAAI,YAAY;AAChB,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,iBAAiB;AACrB,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,UAAS,OAAM,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrN,IAAI,YAAY;AAChB,IAAI,kBAAkB;AACtB,IAAI,sBAAsB;AAC1B,IAAI,8BAA8B,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1K,IAAI,4BAA4B;AAChC,IAAI,8BAA8B;AAClC,IAAI,cAAc;AAClB,IAAI,4BAA4B;AAChC,IAAI,8BAA8B;AAClC,IAAI,WAAW;AACf,IAAI,gBAAgB;AACpB,IAAI,gBAAgB;AACpB,IAAI,eAAe;AACnB,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,0BAA0B;AAC9B,IAAI,iCAAiC;AACrC,IAAI,WAAW;AACf,IAAI,UAAU;",
   "names": []
 }

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

@@ -1,13 +1,13 @@
-._ck599t0-3-4-0 {
+._ck599t0-3-5-0 {
   position: absolute;
   right: var(--dt-spacings-size-4, 4px);
   top: var(--dt-spacings-size-4, 4px);
   z-index: 1;
   gap: var(--dt-spacings-size-2, 2px);
 }
-._ck599t1-3-4-0 {
+._ck599t1-3-5-0 {
   margin: var(--dt-spacings-size-2, 2px) 0;
 }
-._ck599t2-3-4-0 {
+._ck599t2-3-5-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }

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

@@ -1,7 +1,7 @@
 import "./FilterFieldSuffixButtons.css";
-var button = "_ck599t2-3-4-0";
-var divider = "_ck599t1-3-4-0";
-var suffix = "_ck599t0-3-4-0";
+var button = "_ck599t2-3-5-0";
+var divider = "_ck599t1-3-5-0";
+var suffix = "_ck599t0-3-5-0";
 export {
   button,
   divider,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/components/FilterFieldSuffixButtons.css.ts"],
-  "sourcesContent": ["import './FilterFieldSuffixButtons.css';\nexport var button = '_ck599t2-3-4-0';\nexport var divider = '_ck599t1-3-4-0';\nexport var suffix = '_ck599t0-3-4-0';"],
+  "sourcesContent": ["import './FilterFieldSuffixButtons.css';\nexport var button = '_ck599t2-3-5-0';\nexport var divider = '_ck599t1-3-5-0';\nexport var suffix = '_ck599t0-3-5-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,UAAU;AACd,IAAI,SAAS;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._ia7amm2-3-4-0 {
+._ia7amm2-3-5-0 {
   overflow-x: hidden;
   overflow-y: auto;
   text-overflow: ellipsis;
@@ -9,51 +9,51 @@
   min-height: 21px;
   white-space: pre;
 }
-._1smjoa1a-3-4-0 ._ia7amm2-3-4-0 {
+._1smjoa1a-3-5-0 ._ia7amm2-3-5-0 {
   line-height: 24px;
   padding-right: 12px;
   white-space: pre-wrap;
 }
-._ia7amm3-3-4-0 {
+._ia7amm3-3-5-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;
 }
-._1smjoa14-3-4-0:hover ._ia7amm3-3-4-0, ._1smjoa14-3-4-0.virtual-focus ._ia7amm3-3-4-0 {
+._1smjoa14-3-5-0:hover ._ia7amm3-3-5-0, ._1smjoa14-3-5-0._9mvxlq0-3-5-0 ._ia7amm3-3-5-0 {
   border-color: var(--dt-colors-border-neutral-default-hover, #d0d1dc);
 }
-._ia7amm0-3-4-0 ._ia7amm3-3-4-0 {
+._ia7amm0-3-5-0 ._ia7amm3-3-5-0 {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   border-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1smjoa1a-3-4-0 ._ia7amm3-3-4-0 {
+._1smjoa1a-3-5-0 ._ia7amm3-3-5-0 {
   text-wrap: wrap;
 }
-._ia7amm0-3-4-0 ._ia7amm4-3-4-0::highlight(filter-field-ecape-characters) {
+._ia7amm0-3-5-0 ._ia7amm4-3-5-0::highlight(filter-field-escape-characters) {
   color: var(--dt-colors-syntax-operators, #8136a9);
 }
-._ia7amm1-3-4-0 ._ia7amm3-3-4-0 * {
+._ia7amm1-3-5-0 ._ia7amm3-3-5-0 * {
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._ia7amm1-3-4-0 ._96tj13y-3-4-0 {
+._ia7amm1-3-5-0 ._96tj13y-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._ia7amm1-3-4-0::highlight(filterfield-suggestions-highlight) {
+._ia7amm1-3-5-0::highlight(filterfield-suggestions-highlight) {
   text-decoration: none;
 }
-._ia7amm3-3-4-0::highlight(filterfield-suggestions-highlight) {
+._ia7amm3-3-5-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-4-0 + ._ia7amm6-3-4-0:has(+ ._ia7amm5-3-4-0) {
+._ia7amm5-3-5-0 + ._ia7amm6-3-5-0:has(+ ._ia7amm5-3-5-0) {
   text-decoration: underline;
   text-decoration-color: var(--dt-colors-border-neutral-accent, #595a7d);
   text-underline-offset: 4.2px;
 }
-._1smjoa1a-3-4-0 div:has(._ia7amm2-3-4-0) {
+._1smjoa1a-3-5-0 div:has(._ia7amm2-3-5-0) {
   max-height: 72px;
   padding-right: 0;
 }

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

@@ -40,7 +40,7 @@ function withNodeRenderer(className) {
     const { node } = props;
     const ref = useRef(null);
     const highlight = useMemo(
-      () => getOrCreateNamedHighlight("filter-field-ecape-characters"),
+      () => getOrCreateNamedHighlight("filter-field-escape-characters"),
       []
     );
     useEffect(() => {

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-ecape-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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",
+  "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": []
 }

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

@@ -1,13 +1,15 @@
+import "../../../core/styles/virtualFocus.css";
+import "../../../core/components/app-root/AppRoot.css";
 import "../FilterField.css";
 import "../suggestions/SuggestionsOverlay.css";
 import "../suggestions/Suggestion.css";
 import "./FilterStatement.css";
-var escapeCharacter = "_ia7amm4-3-4-0";
-var highlight = "_ia7amm5-3-4-0";
-var highlighting = { syntax: "_ia7amm0-3-4-0", minimal: "_ia7amm1-3-4-0" };
-var root = "_ia7amm2-3-4-0 _96tj13c-3-4-0";
-var statement = "_ia7amm3-3-4-0";
-var whitespace = "_ia7amm6-3-4-0";
+var escapeCharacter = "_ia7amm4-3-5-0";
+var highlight = "_ia7amm5-3-5-0";
+var highlighting = { syntax: "_ia7amm0-3-5-0", minimal: "_ia7amm1-3-5-0" };
+var root = "_ia7amm2-3-5-0 _96tj13c-3-5-0";
+var statement = "_ia7amm3-3-5-0";
+var whitespace = "_ia7amm6-3-5-0";
 export {
   escapeCharacter,
   highlight,

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 '../FilterField.css';\nimport '../suggestions/SuggestionsOverlay.css';\nimport '../suggestions/Suggestion.css';\nimport './FilterStatement.css';\nexport var escapeCharacter = '_ia7amm4-3-4-0';\nexport var highlight = '_ia7amm5-3-4-0';\nexport var highlighting = {syntax:'_ia7amm0-3-4-0',minimal:'_ia7amm1-3-4-0'};\nexport var root = '_ia7amm2-3-4-0 _96tj13c-3-4-0';\nexport var statement = '_ia7amm3-3-4-0';\nexport var whitespace = '_ia7amm6-3-4-0';"],
-  "mappings": "AAAA,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 = '_ia7amm4-3-5-0';\nexport var highlight = '_ia7amm5-3-5-0';\nexport var highlighting = {syntax:'_ia7amm0-3-5-0',minimal:'_ia7amm1-3-5-0'};\nexport var root = '_ia7amm2-3-5-0 _96tj13c-3-5-0';\nexport var statement = '_ia7amm3-3-5-0';\nexport var whitespace = '_ia7amm6-3-5-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,OAAO;AACX,IAAI,YAAY;AAChB,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import clsx from "clsx";
 import { useLayoutEffect, useMemo, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import {
@@ -7,10 +6,10 @@ import {
   ChevronUpSmallIcon
 } from "@dynatrace/strato-icons";
 import { useId } from "../../../core/hooks/useId.js";
+import { getVirtualFocusStyles } from "../../../core/styles/getVirtualFocusStyles.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
 import { filterFieldMessages } from "../messages.js";
 import { useFilterFieldContext } from "./useFilterFieldContext.js";
-import * as styles from "../suggestions/RecentPinnedSuggestionItem.sty.js";
 import {
   getCurrentFocusableListItemByIndex,
   getCurrentFocusableListItemIndex
@@ -56,16 +55,9 @@ function useShowMore(props) {
       "data-strato-filter-field-virtual-focus-type": "button",
       "data-dt-name": "ShowMoreLess",
       "data-dt-properties": `state:${isExpanded ? "less" : "more"}`,
-      className: clsx(styles.showMoreButton, {
-        "virtual-focus": id === focusedListItem?.id
-      }),
+      className: getVirtualFocusStyles(id === focusedListItem?.id).className,
       width: "full",
       textAlign: "start",
-      style: {
-        transitionTimingFunction: "none",
-        transitionDuration: "0s",
-        transition: "none"
-      },
       children: /* @__PURE__ */ jsxs(Flex, { gap: 2, as: "span", paddingLeft: 4, children: [
         /* @__PURE__ */ jsx(
           FormattedMessage,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/filters/filter-field/hooks/useShowMore.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useLayoutEffect, useMemo, useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport {\n  ChevronDownSmallIcon,\n  ChevronUpSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport type { ButtonProps } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { filterFieldMessages } from '../messages.js';\nimport { useFilterFieldContext } from './useFilterFieldContext.js';\nimport * as styles from '../suggestions/RecentPinnedSuggestionItem.sty.js';\nimport type { FlattenedSuggestionItem } from '../suggestions/Suggestion.types.js';\nimport {\n  getCurrentFocusableListItemByIndex,\n  getCurrentFocusableListItemIndex,\n} from '../utils/get-next-suggestion.js';\n\n/**\n * Slice result type.\n * @internal\n */\ntype SliceResult<T> = { items: T[]; isSliced: boolean };\n\n/**\n * Slice function type.\n * @internal\n */\ntype SliceFn<T> = (items: T[], count: number) => SliceResult<T>;\n\n/** @internal */\nexport function useShowMore<T>(props: {\n  items: T[];\n  primaryCount: number;\n  sliceFn?: SliceFn<T>;\n}): {\n  items: T[];\n  isSliced: boolean;\n  isExpanded: boolean;\n  controlProps: ButtonProps<'button'>;\n} {\n  const { items, primaryCount, sliceFn: _propSliceFn } = props;\n  const sliceFn: SliceFn<T> = _propSliceFn ?? defaultSlice;\n\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [pendingNextSuggestionIndex, setPendingNextSuggestionIndex] = useState<\n    number | null\n  >(null);\n\n  const { focusedListItem, handleNextSuggestion, suggestionsOverlayRef } =\n    useFilterFieldContext();\n\n  const id = useId();\n\n  useLayoutEffect(() => {\n    if (pendingNextSuggestionIndex !== null) {\n      const element = getCurrentFocusableListItemByIndex(\n        suggestionsOverlayRef,\n        pendingNextSuggestionIndex,\n      );\n      handleNextSuggestion(element);\n\n      setPendingNextSuggestionIndex(null);\n    }\n  }, [pendingNextSuggestionIndex, suggestionsOverlayRef, handleNextSuggestion]);\n\n  const controlProps = useMemo<ButtonProps<'button'>>(\n    () => ({\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      onClick: (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const isKeyboard =\n          event.detail === 0 || event.nativeEvent instanceof KeyboardEvent;\n\n        if (isExpanded || !isKeyboard) {\n          setIsExpanded((previousState) => !previousState);\n          return;\n        }\n\n        const index = getCurrentFocusableListItemIndex(\n          suggestionsOverlayRef,\n          focusedListItem?.id,\n        );\n\n        setIsExpanded((previousState) => !previousState);\n\n        // Set the index for useLayoutEffect to handle after DOM update\n        setPendingNextSuggestionIndex(index ?? null);\n      },\n      id,\n      'data-strato-filter-field-virtual-focus-id': id,\n      'data-strato-filter-field-virtual-focus-type': 'button',\n      'data-dt-name': 'ShowMoreLess',\n      'data-dt-properties': `state:${isExpanded ? 'less' : 'more'}`,\n      className: clsx(styles.showMoreButton, {\n        'virtual-focus': id === focusedListItem?.id,\n      }),\n      width: 'full',\n      textAlign: 'start',\n      style: {\n        transitionTimingFunction: 'none',\n        transitionDuration: '0s',\n        transition: 'none',\n      },\n      children: (\n        <Flex gap={2} as=\"span\" paddingLeft={4}>\n          <FormattedMessage\n            {...filterFieldMessages.suggestions.showMore}\n            values={{ isExpanded }}\n          />\n          {isExpanded ? <ChevronUpSmallIcon /> : <ChevronDownSmallIcon />}\n        </Flex>\n      ),\n    }),\n    [focusedListItem?.id, id, isExpanded, suggestionsOverlayRef],\n  );\n\n  const { items: resultItems, isSliced } = useMemo(\n    () => sliceFn(items, primaryCount),\n    // Only recompute when the suggestions themselves change to avoid flashing\n    // when the primaryCount toggles (e.g., empty vs filled input) without data changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [items, sliceFn],\n  );\n\n  if (primaryCount === -1) {\n    return {\n      items,\n      isSliced: false,\n      isExpanded,\n      controlProps,\n    };\n  }\n\n  return {\n    items: isExpanded ? items : resultItems,\n    isSliced,\n    controlProps,\n    isExpanded,\n  };\n}\n\n/**\n * Simple array slicing with +1 buffer to avoid showing \"show more\" if there is only one additional item.\n * @internal\n */\nfunction defaultSlice<T>(items: T[], count: number): SliceResult<T> {\n  if (items.length <= count + 1) {\n    return { items, isSliced: false };\n  }\n  return { items: items.slice(0, count), isSliced: true };\n}\n\n/**\n * Slice the flat suggestions in case they exceed the defined limit of suggestions\n * shown. Group headers don't count toward the  suggestion limit, but will only be rendered\n * if a suggestion is still visible afterwards.\n * Suggestions will only be sliced if there are at least two more suggestions than\n * the defined count.\n *\n * Example with a count of 5 that explains why we do it that way:\n * - 5 suggestions: we show all suggestions (they're still below the count that was\n * specified)\n * - 6 suggestions: we show all suggestions (adding a show more button would only\n * redundantly collapse one suggestion)\n * - 7 suggestions: we show only five suggestions + a show more button to reveal the\n * additional suggestions\n * @internal\n */\nexport function sliceFlattenedSuggestions(\n  suggestions: FlattenedSuggestionItem[],\n  count: number,\n): SliceResult<FlattenedSuggestionItem> {\n  if (count === -1) {\n    return { items: suggestions, isSliced: false };\n  }\n\n  let totalSuggestionCount = 0;\n  for (const item of suggestions) {\n    if (item.kind !== 'group-header') {\n      totalSuggestionCount++;\n    }\n  }\n\n  // Return original suggestions if they fit within the limit.\n  if (totalSuggestionCount <= count + 1) {\n    return { items: suggestions, isSliced: false };\n  }\n\n  let visibleCount = 0;\n  const itemsShown: FlattenedSuggestionItem[] = [];\n\n  for (const item of suggestions) {\n    // Add group header, but don't increase the visible count, since group headers don't count towards the suggestion limit.\n    if (item.kind === 'group-header') {\n      itemsShown.push(item);\n      continue;\n    }\n\n    if (visibleCount >= count) {\n      break;\n    }\n\n    itemsShown.push(item);\n    visibleCount++;\n  }\n\n  // Trim trailing group-header.\n  if (\n    itemsShown.length > 0 &&\n    itemsShown[itemsShown.length - 1].kind === 'group-header'\n  ) {\n    itemsShown.pop();\n  }\n\n  return { items: itemsShown, isSliced: true };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useLayoutEffect, useMemo, useState } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport {\n  ChevronDownSmallIcon,\n  ChevronUpSmallIcon,\n} from '@dynatrace/strato-icons';\n\nimport type { ButtonProps } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { getVirtualFocusStyles } from '../../../core/styles/getVirtualFocusStyles.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { filterFieldMessages } from '../messages.js';\nimport { useFilterFieldContext } from './useFilterFieldContext.js';\nimport type { FlattenedSuggestionItem } from '../suggestions/Suggestion.types.js';\nimport {\n  getCurrentFocusableListItemByIndex,\n  getCurrentFocusableListItemIndex,\n} from '../utils/get-next-suggestion.js';\n\n/**\n * Slice result type.\n * @internal\n */\ntype SliceResult<T> = { items: T[]; isSliced: boolean };\n\n/**\n * Slice function type.\n * @internal\n */\ntype SliceFn<T> = (items: T[], count: number) => SliceResult<T>;\n\n/** @internal */\nexport function useShowMore<T>(props: {\n  items: T[];\n  primaryCount: number;\n  sliceFn?: SliceFn<T>;\n}): {\n  items: T[];\n  isSliced: boolean;\n  isExpanded: boolean;\n  controlProps: ButtonProps<'button'>;\n} {\n  const { items, primaryCount, sliceFn: _propSliceFn } = props;\n  const sliceFn: SliceFn<T> = _propSliceFn ?? defaultSlice;\n\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [pendingNextSuggestionIndex, setPendingNextSuggestionIndex] = useState<\n    number | null\n  >(null);\n\n  const { focusedListItem, handleNextSuggestion, suggestionsOverlayRef } =\n    useFilterFieldContext();\n\n  const id = useId();\n\n  useLayoutEffect(() => {\n    if (pendingNextSuggestionIndex !== null) {\n      const element = getCurrentFocusableListItemByIndex(\n        suggestionsOverlayRef,\n        pendingNextSuggestionIndex,\n      );\n      handleNextSuggestion(element);\n\n      setPendingNextSuggestionIndex(null);\n    }\n  }, [pendingNextSuggestionIndex, suggestionsOverlayRef, handleNextSuggestion]);\n\n  const controlProps = useMemo<ButtonProps<'button'>>(\n    () => ({\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      onClick: (event) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const isKeyboard =\n          event.detail === 0 || event.nativeEvent instanceof KeyboardEvent;\n\n        if (isExpanded || !isKeyboard) {\n          setIsExpanded((previousState) => !previousState);\n          return;\n        }\n\n        const index = getCurrentFocusableListItemIndex(\n          suggestionsOverlayRef,\n          focusedListItem?.id,\n        );\n\n        setIsExpanded((previousState) => !previousState);\n\n        // Set the index for useLayoutEffect to handle after DOM update\n        setPendingNextSuggestionIndex(index ?? null);\n      },\n      id,\n      'data-strato-filter-field-virtual-focus-id': id,\n      'data-strato-filter-field-virtual-focus-type': 'button',\n      'data-dt-name': 'ShowMoreLess',\n      'data-dt-properties': `state:${isExpanded ? 'less' : 'more'}`,\n      className: getVirtualFocusStyles(id === focusedListItem?.id).className,\n      width: 'full',\n      textAlign: 'start',\n      children: (\n        <Flex gap={2} as=\"span\" paddingLeft={4}>\n          <FormattedMessage\n            {...filterFieldMessages.suggestions.showMore}\n            values={{ isExpanded }}\n          />\n          {isExpanded ? <ChevronUpSmallIcon /> : <ChevronDownSmallIcon />}\n        </Flex>\n      ),\n    }),\n    [focusedListItem?.id, id, isExpanded, suggestionsOverlayRef],\n  );\n\n  const { items: resultItems, isSliced } = useMemo(\n    () => sliceFn(items, primaryCount),\n    // Only recompute when the suggestions themselves change to avoid flashing\n    // when the primaryCount toggles (e.g., empty vs filled input) without data changes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [items, sliceFn],\n  );\n\n  if (primaryCount === -1) {\n    return {\n      items,\n      isSliced: false,\n      isExpanded,\n      controlProps,\n    };\n  }\n\n  return {\n    items: isExpanded ? items : resultItems,\n    isSliced,\n    controlProps,\n    isExpanded,\n  };\n}\n\n/**\n * Simple array slicing with +1 buffer to avoid showing \"show more\" if there is only one additional item.\n * @internal\n */\nfunction defaultSlice<T>(items: T[], count: number): SliceResult<T> {\n  if (items.length <= count + 1) {\n    return { items, isSliced: false };\n  }\n  return { items: items.slice(0, count), isSliced: true };\n}\n\n/**\n * Slice the flat suggestions in case they exceed the defined limit of suggestions\n * shown. Group headers don't count toward the  suggestion limit, but will only be rendered\n * if a suggestion is still visible afterwards.\n * Suggestions will only be sliced if there are at least two more suggestions than\n * the defined count.\n *\n * Example with a count of 5 that explains why we do it that way:\n * - 5 suggestions: we show all suggestions (they're still below the count that was\n * specified)\n * - 6 suggestions: we show all suggestions (adding a show more button would only\n * redundantly collapse one suggestion)\n * - 7 suggestions: we show only five suggestions + a show more button to reveal the\n * additional suggestions\n * @internal\n */\nexport function sliceFlattenedSuggestions(\n  suggestions: FlattenedSuggestionItem[],\n  count: number,\n): SliceResult<FlattenedSuggestionItem> {\n  if (count === -1) {\n    return { items: suggestions, isSliced: false };\n  }\n\n  let totalSuggestionCount = 0;\n  for (const item of suggestions) {\n    if (item.kind !== 'group-header') {\n      totalSuggestionCount++;\n    }\n  }\n\n  // Return original suggestions if they fit within the limit.\n  if (totalSuggestionCount <= count + 1) {\n    return { items: suggestions, isSliced: false };\n  }\n\n  let visibleCount = 0;\n  const itemsShown: FlattenedSuggestionItem[] = [];\n\n  for (const item of suggestions) {\n    // Add group header, but don't increase the visible count, since group headers don't count towards the suggestion limit.\n    if (item.kind === 'group-header') {\n      itemsShown.push(item);\n      continue;\n    }\n\n    if (visibleCount >= count) {\n      break;\n    }\n\n    itemsShown.push(item);\n    visibleCount++;\n  }\n\n  // Trim trailing group-header.\n  if (\n    itemsShown.length > 0 &&\n    itemsShown[itemsShown.length - 1].kind === 'group-header'\n  ) {\n    itemsShown.pop();\n  }\n\n  return { items: itemsShown, isSliced: true };\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,38 +1,36 @@
-._vt0w9g0-3-4-0 {
+._vt0w9g0-3-5-0 {
   display: grid;
   grid-template-columns: 1fr auto;
 }
-._vt0w9g1-3-4-0 {
-  border-radius: var(--dt-borders-radius-field-subdued, 3px);
-}
-._vt0w9g2-3-4-0 {
+._vt0w9g1-3-5-0 {
   appearance: none;
   visibility: hidden;
   position: absolute;
-  transition: none;
   border-left-width: var(--dt-borders-width-emphasized, 2px);
   border-left-style: solid;
   border-left-color: var(--dt-colors-background-surface-default, #fff);
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1smjoa13-3-4-0:hover ._vt0w9g2-3-4-0, ._1smjoa13-3-4-0:has(.virtual-focus) ._vt0w9g2-3-4-0 {
+._1smjoa13-3-5-0:hover ._vt0w9g1-3-5-0, ._1smjoa13-3-5-0:has(._9mvxlq0-3-5-0) ._vt0w9g1-3-5-0 {
   position: initial;
   visibility: visible;
   height: 100%;
 }
-._vt0w9g2-3-4-0.virtual-focus {
+._1jgl8s50-3-5-0 ._vt0w9g1-3-5-0 {
+  border-left-width: var(--dt-borders-width-default, 1px);
+}
+._1jgl8s50-3-5-0 ._vt0w9g1-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._vt0w9g3-3-4-0.virtual-focus {
-  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-5-0 ._vt0w9g1-3-5-0:active {
+  background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._vt0w9g0-3-4-0 ._1smjoa10-3-4-0 > div {
+._vt0w9g0-3-5-0 ._1smjoa10-3-5-0 > div {
   background-color: transparent;
 }
-@container _ssu5rt0-3-4-0 (min-width: 641px) {
-  ._vt0w9g0-3-4-0:hover ._tn2lgm0-3-4-0, ._vt0w9g0-3-4-0.virtual-focus ._tn2lgm0-3-4-0, ._vt0w9g0-3-4-0:has(.virtual-focus) ._tn2lgm0-3-4-0 {
+@container _ssu5rt0-3-5-0 (min-width: 641px) {
+  ._vt0w9g0-3-5-0:hover ._tn2lgm0-3-5-0, ._vt0w9g0-3-5-0._9mvxlq0-3-5-0 ._tn2lgm0-3-5-0, ._vt0w9g0-3-5-0:has(._9mvxlq0-3-5-0) ._tn2lgm0-3-5-0 {
     display: none;
   }
 }

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

@@ -1,15 +1,13 @@
 import "./SuggestionsOverlay.css";
+import "../../../core/components/app-root/AppRoot.css";
+import "../../../core/styles/virtualFocus.css";
 import "./Suggestion.css";
 import "./SuggestionDetails.css";
 import "./RecentPinnedSuggestionItem.css";
-var pinButton = "_vt0w9g1-3-4-0";
-var recentSuggestion = "_vt0w9g0-3-4-0";
-var showMoreButton = "_vt0w9g3-3-4-0";
-var suggestionPin = "_vt0w9g2-3-4-0";
+var recentSuggestion = "_vt0w9g0-3-5-0";
+var suggestionPin = "_vt0w9g1-3-5-0";
 export {
-  pinButton,
   recentSuggestion,
-  showMoreButton,
   suggestionPin
 };
 //# sourceMappingURL=RecentPinnedSuggestionItem.sty.js.map

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 './Suggestion.css';\nimport './SuggestionDetails.css';\nimport './RecentPinnedSuggestionItem.css';\nexport var pinButton = '_vt0w9g1-3-4-0';\nexport var recentSuggestion = '_vt0w9g0-3-4-0';\nexport var showMoreButton = '_vt0w9g3-3-4-0';\nexport var suggestionPin = '_vt0w9g2-3-4-0';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,mBAAmB;AACvB,IAAI,iBAAiB;AACrB,IAAI,gBAAgB;",
+  "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-5-0';\nexport var suggestionPin = '_vt0w9g1-3-5-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-4-0 {
+._1smjoa11-3-5-0 {
   min-width: 0;
 }
-._1smjoa13-3-4-0 {
+._1smjoa13-3-5-0 {
   cursor: pointer;
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -9,13 +9,17 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   overflow: hidden;
 }
-._1smjoa13-3-4-0:hover {
+._1smjoa13-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1smjoa13-3-4-0:has(.virtual-focus) {
+._1smjoa13-3-5-0:has(._9mvxlq0-3-5-0) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  transition: none;
 }
-._1smjoa14-3-4-0 {
+._1jgl8s50-3-5-0 ._1smjoa13-3-5-0:hover {
+  background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+}
+._1smjoa14-3-5-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);
@@ -23,71 +27,68 @@
   flex: 1;
   grid-auto-flow: row;
 }
-._1smjoa14-3-4-0:hover {
+._1smjoa14-3-5-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1smjoa14-3-4-0:active {
+._1smjoa14-3-5-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1smjoa14-3-4-0.virtual-focus {
-  background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-}
-._1smjoa13-3-4-0 span:only-child ._1smjoa14-3-4-0 {
+._1smjoa13-3-5-0 span:only-child ._1smjoa14-3-5-0 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1smjoa15-3-4-0 {
+._1smjoa15-3-5-0 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1smjoa16-3-4-0 {
+._1smjoa16-3-5-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);
 }
-._1smjoa17-3-4-0 {
+._1smjoa17-3-5-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);
 }
-._1smjoa18-3-4-0 {
+._1smjoa18-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1smjoa19-3-4-0 {
+._1smjoa19-3-5-0 {
   white-space: nowrap;
   gap: 0;
 }
-._1smjoa1a-3-4-0 {
+._1smjoa1a-3-5-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._1smjoa1a-3-4-0 mark, ._1smjoa13-3-4-0 mark, ._1smjoa13-3-4-0:not(._1smjoa1b-3-4-0) *::highlight(filterfield-suggestions-highlight) {
+._1smjoa1a-3-5-0 mark, ._1smjoa13-3-5-0 mark, ._1smjoa13-3-5-0:not(._1smjoa1b-3-5-0) *::highlight(filterfield-suggestions-highlight) {
   white-space: pre-wrap;
   background: none;
   color: inherit;
   text-decoration: underline;
 }
-._1smjoa15-3-4-0 > mark, ._1smjoa15-3-4-0 > span {
+._1smjoa15-3-5-0 > mark, ._1smjoa15-3-5-0 > span {
   white-space: nowrap;
 }
-._1smjoa1c-3-4-0 ._1smjoa10-3-4-0 > div {
+._1smjoa1c-3-5-0 ._1smjoa10-3-5-0 > div {
   background-color: transparent;
 }
-._1smjoa19-3-4-0 mark {
+._1smjoa19-3-5-0 mark {
   white-space: preserve nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1smjoa1e-3-4-0 ._1smjoa10-3-4-0 > div {
+._1smjoa1e-3-5-0 ._1smjoa10-3-5-0 > div {
   background-color: transparent;
 }
-@container _ssu5rt0-3-4-0 (min-width: 641px) {
-  ._1smjoa14-3-4-0 {
+@container _ssu5rt0-3-5-0 (min-width: 641px) {
+  ._1smjoa14-3-5-0 {
     grid-auto-flow: column;
     justify-content: space-between;
   }
 }
-@container _ssu5rt0-3-4-0 (min-width: 1921px) {
-  ._1smjoa14-3-4-0 {
+@container _ssu5rt0-3-5-0 (min-width: 1921px) {
+  ._1smjoa14-3-5-0 {
     grid-auto-columns: 30% auto;
     justify-content: start;
   }

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

@@ -17,6 +17,7 @@ import { Chip } from "../../../content/chip/Chip.js";
 import { useId } from "../../../core/hooks/useId.js";
 import { useMergeRefs } from "../../../core/hooks/useMergeRefs.js";
 import { useSlots } from "../../../core/hooks/useSlots.js";
+import { getVirtualFocusStyles } from "../../../core/styles/getVirtualFocusStyles.js";
 import { canReceiveDefaultTextFormat as _canReceiveDefaultTextFormat } from "../../../core/utils/can-receive-default-text-format.js";
 import { Flex } from "../../../layouts/flex/Flex.js";
 import { Grid } from "../../../layouts/grid/Grid.js";
@@ -286,9 +287,7 @@ const Suggestion = forwardRef((props, forwardedRef) => {
                 rowGap: 0,
                 className: clsx(
                   styles.suggestionContent,
-                  {
-                    "virtual-focus": isFocused
-                  },
+                  getVirtualFocusStyles(!!isFocused).className,
                   id === "strato-filterfield-suggestion-pasted-content" ? styles.pastingSuggestion : {}
                 ),
                 paddingLeft: icon ? 8 : 12,