@dynatrace/strato-components 3.6.0 → 3.7.0

package/esm/filters/filter/MoreMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/filter/MoreMenu.tsx"],
-  "sourcesContent": ["import {\n  type ReactNode,\n  useMemo,\n  useRef,\n  Children,\n  type ReactElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useFilterBarContext } from './hooks/useFilterBarContext.js';\nimport { Item } from './Item.js';\nimport { FilterBarActions } from './types/filter-state.types.js';\nimport { getTextFromNode } from './utils/getTextFromNode.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Select } from '../../forms/select/Select.js';\nimport { SelectMultiValue } from '../../forms/select/types.js';\nimport { FormControlWithOverlayRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\ntype MoreMenuProps = {\n  children: ReactNode[];\n};\n\n/**\n * The moreMenu allows to hide and show further filters. All filterBar.Items inside are hidden initially.\n * @internal\n */\nexport const MoreMenu = ({ children }: MoreMenuProps) => {\n  const intl = useIntl();\n  const label = intl.formatMessage({\n    defaultMessage: 'Add filter',\n    id: '+BUznwQEJTiILiAa',\n    description:\n      'Message to display by default for adding more Filters to the FilterBar.',\n  });\n\n  const { focusClassName, focusProps } = useFocusRing({\n    color: 'neutral',\n    focusWithin: true,\n    ignoreModality: true,\n  });\n\n  const { dispatch, setLastAddedItem, state } = useFilterBarContext(),\n    { itemsPinnedState } = state;\n\n  const selectRef = useRef<FormControlWithOverlayRef | null>(null);\n\n  const allPinnableFilters = useMemo<\n    Record<string, { elem: ReactElement; label: string }>\n  >(() => {\n    const temp: Record<string, { elem: ReactElement; label: string }> = {};\n    for (const child of Children.toArray(children)) {\n      if (isSlot(child, Item)) {\n        const uniqueName: string = child.props.name;\n        temp[uniqueName] = {\n          elem: child,\n          label: getTextFromNode(child.props.label, intl, uniqueName),\n        };\n      }\n    }\n    return temp;\n  }, [children, intl]);\n\n  const optionalPinnedItems = useMemo(\n    () =>\n      Object.entries(itemsPinnedState || {}).reduce((keys, [key, value]) => {\n        if (value === 'pinned-optional') {\n          keys.push(key);\n        }\n        return keys;\n      }, [] as Array<string | number>),\n    [itemsPinnedState],\n  );\n\n  const handleSelectChange = (newValues: SelectMultiValue<string | number>) => {\n    setLastAddedItem(null);\n\n    const union = new Set([\n      ...(newValues ?? []),\n      ...(optionalPinnedItems || []),\n    ]);\n\n    // Check for newly selected items and pin those\n    if (\n      !optionalPinnedItems ||\n      (newValues && optionalPinnedItems.length < newValues.length)\n    ) {\n      const filtersToPin = [...union].filter(\n        (key) => !optionalPinnedItems?.includes(key),\n      );\n\n      selectRef?.current?.close();\n      filtersToPin?.length && setLastAddedItem(filtersToPin[0]?.toString());\n\n      dispatch({\n        type: FilterBarActions.PIN,\n        payload: {\n          keys: filtersToPin,\n        },\n      });\n\n      return;\n    }\n\n    // Check for newly unselected items and unpin those\n    if (!newValues) {\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: {\n          keys: optionalPinnedItems ?? [],\n        },\n      });\n    } else if (\n      optionalPinnedItems &&\n      optionalPinnedItems.length > newValues.length\n    ) {\n      const keys = [...union].filter((key) => !newValues?.includes(key));\n\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: { keys },\n      });\n    }\n  };\n\n  const labelId = useId();\n\n  return (\n    <>\n      {optionalPinnedItems.map(\n        (key) =>\n          allPinnableFilters[key] && (\n            <Flex key={key} gap={2} alignItems=\"flex-end\">\n              {allPinnableFilters[key].elem}\n            </Flex>\n          ),\n      )}\n      <div style={{ maxWidth: '100%' }} {...focusProps}>\n        <Select\n          value={optionalPinnedItems}\n          onChange={handleSelectChange}\n          id=\"user-select\"\n          multiple={true}\n          clearable\n          ref={selectRef}\n          data-dt-name=\"AddFilter\"\n        >\n          <Select.CustomTrigger>\n            <Button as=\"div\" id={labelId} className={focusClassName}>\n              {label}\n              <Button.Suffix>\n                <ChevronDownSmallIcon />\n              </Button.Suffix>\n            </Button>\n          </Select.CustomTrigger>\n          <Select.Content width=\"fit-content\">\n            <Select.Filter />\n            {Object.keys(allPinnableFilters).map((key) => (\n              <Select.Option value={key} key={key}>\n                {allPinnableFilters[key].label}\n              </Select.Option>\n            ))}\n          </Select.Content>\n        </Select>\n      </div>\n    </>\n  );\n};\n\n(MoreMenu as typeof MoreMenu & { displayName: string }).displayName =\n  'FilterBar.MoreMenu';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type ReactNode,\n  useMemo,\n  useRef,\n  Children,\n  type ReactElement,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { useFilterBarContext } from './hooks/useFilterBarContext.js';\nimport { Item } from './Item.js';\nimport { FilterBarActions } from './types/filter-state.types.js';\nimport { getTextFromNode } from './utils/getTextFromNode.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { Select } from '../../forms/select/Select.js';\nimport { SelectMultiValue } from '../../forms/select/types.js';\nimport { FormControlWithOverlayRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\n\ntype MoreMenuProps = {\n  children: ReactNode[];\n};\n\n/**\n * The moreMenu allows to hide and show further filters. All filterBar.Items inside are hidden initially.\n * @internal\n */\nexport const MoreMenu = ({ children }: MoreMenuProps) => {\n  const intl = useIntl();\n  const label = intl.formatMessage({\n    defaultMessage: 'Add filter',\n    id: '+BUznwQEJTiILiAa',\n    description:\n      'Message to display by default for adding more Filters to the FilterBar.',\n  });\n\n  const { focusClassName, focusProps } = useFocusRing({\n    color: 'neutral',\n    focusWithin: true,\n    ignoreModality: true,\n  });\n\n  const { dispatch, setLastAddedItem, state } = useFilterBarContext(),\n    { itemsPinnedState } = state;\n\n  const selectRef = useRef<FormControlWithOverlayRef | null>(null);\n\n  const allPinnableFilters = useMemo<\n    Record<string, { elem: ReactElement; label: string }>\n  >(() => {\n    const temp: Record<string, { elem: ReactElement; label: string }> = {};\n    for (const child of Children.toArray(children)) {\n      if (isSlot(child, Item)) {\n        const uniqueName: string = child.props.name;\n        temp[uniqueName] = {\n          elem: child,\n          label: getTextFromNode(child.props.label, intl, uniqueName),\n        };\n      }\n    }\n    return temp;\n  }, [children, intl]);\n\n  const optionalPinnedItems = useMemo(\n    () =>\n      Object.entries(itemsPinnedState || {}).reduce((keys, [key, value]) => {\n        if (value === 'pinned-optional') {\n          keys.push(key);\n        }\n        return keys;\n      }, [] as Array<string | number>),\n    [itemsPinnedState],\n  );\n\n  const handleSelectChange = (newValues: SelectMultiValue<string | number>) => {\n    setLastAddedItem(null);\n\n    const union = new Set([\n      ...(newValues ?? []),\n      ...(optionalPinnedItems || []),\n    ]);\n\n    // Check for newly selected items and pin those\n    if (\n      !optionalPinnedItems ||\n      (newValues && optionalPinnedItems.length < newValues.length)\n    ) {\n      const filtersToPin = [...union].filter(\n        (key) => !optionalPinnedItems?.includes(key),\n      );\n\n      selectRef?.current?.close();\n      filtersToPin?.length && setLastAddedItem(filtersToPin[0]?.toString());\n\n      dispatch({\n        type: FilterBarActions.PIN,\n        payload: {\n          keys: filtersToPin,\n        },\n      });\n\n      return;\n    }\n\n    // Check for newly unselected items and unpin those\n    if (!newValues) {\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: {\n          keys: optionalPinnedItems ?? [],\n        },\n      });\n    } else if (\n      optionalPinnedItems &&\n      optionalPinnedItems.length > newValues.length\n    ) {\n      const keys = [...union].filter((key) => !newValues?.includes(key));\n\n      dispatch({\n        type: FilterBarActions.UNPIN,\n        payload: { keys },\n      });\n    }\n  };\n\n  const labelId = useId();\n\n  return (\n    <>\n      {optionalPinnedItems.map(\n        (key) =>\n          allPinnableFilters[key] && (\n            <Flex key={key} gap={2} alignItems=\"flex-end\">\n              {allPinnableFilters[key].elem}\n            </Flex>\n          ),\n      )}\n      <div style={{ maxWidth: '100%' }} {...focusProps}>\n        <Select\n          value={optionalPinnedItems}\n          onChange={handleSelectChange}\n          id=\"user-select\"\n          multiple={true}\n          clearable\n          ref={selectRef}\n          data-dt-name=\"AddFilter\"\n        >\n          <Select.CustomTrigger>\n            <Button as=\"div\" id={labelId} className={focusClassName}>\n              {label}\n              <Button.Suffix>\n                <ChevronDownSmallIcon />\n              </Button.Suffix>\n            </Button>\n          </Select.CustomTrigger>\n          <Select.Content width=\"fit-content\">\n            <Select.Filter />\n            {Object.keys(allPinnableFilters).map((key) => (\n              <Select.Option value={key} key={key}>\n                {allPinnableFilters[key].label}\n              </Select.Option>\n            ))}\n          </Select.Content>\n        </Select>\n      </div>\n    </>\n  );\n};\n\n(MoreMenu as typeof MoreMenu & { displayName: string }).displayName =\n  'FilterBar.MoreMenu';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/filters/filter-field/FilterField.css

@@ -1,94 +1,94 @@
-._96tj13b-3-6-0 {
+._96tj13b-3-7-0 {
   max-height: 80px;
 }
-._96tj13c-3-6-0 {
-  --_96tj130-3-6-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_96tj131-3-6-0: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj132-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj133-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-6-0: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj135-3-6-0: var(--dt-colors-syntax-operators, #8136a9);
-  --_96tj136-3-6-0: var(--dt-colors-syntax-operators, #8136a9);
-  --_96tj137-3-6-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) transparent;
-  --_96tj138-3-6-0: transparent;
-  --_96tj13a-3-6-0: transparent;
-  --_96tj139-3-6-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
+._96tj13c-3-7-0 {
+  --_96tj130-3-7-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_96tj131-3-7-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj132-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj133-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-7-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj135-3-7-0: var(--dt-colors-syntax-operators, #8136a9);
+  --_96tj136-3-7-0: var(--dt-colors-syntax-operators, #8136a9);
+  --_96tj137-3-7-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) transparent;
+  --_96tj138-3-7-0: transparent;
+  --_96tj13a-3-7-0: transparent;
+  --_96tj139-3-7-0: var(--dt-colors-icon-neutral-default, #2f2f4f);
   position: relative;
   width: 100%;
   max-height: inherit;
 }
-._96tj13c-3-6-0::selection {
+._96tj13c-3-7-0::selection {
   background: #fff;
 }
-._96tj13d-3-6-0 {
-  --_96tj137-3-6-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-accent, #bb0731);
-  --_96tj138-3-6-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_96tj13a-3-6-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_96tj139-3-6-0: var(--dt-colors-icon-critical-default, #bb0731);
+._96tj13d-3-7-0 {
+  --_96tj137-3-7-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-accent, #bb0731);
+  --_96tj138-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_96tj13a-3-7-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_96tj139-3-7-0: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._96tj13e-3-6-0 {
+._96tj13e-3-7-0 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._96tj13f-3-6-0 {
+._96tj13f-3-7-0 {
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
   position: absolute;
   left: var(--dt-spacings-size-6, 6px);
   top: var(--dt-spacings-size-6, 6px);
   z-index: 1;
 }
-._96tj13g-3-6-0 {
+._96tj13g-3-7-0 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._96tj13h-3-6-0 {
+._96tj13h-3-7-0 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._96tj13i-3-6-0 {
+._96tj13i-3-7-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);
   line-height: 24px;
 }
-._96tj13j-3-6-0 {
-  background-color: var(--_96tj130-3-6-0);
+._96tj13j-3-7-0 {
+  background-color: var(--_96tj130-3-7-0);
   border-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._96tj13j-3-6-0:hover {
+._96tj13j-3-7-0:hover {
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
 }
-._96tj13k-3-6-0:hover {
+._96tj13k-3-7-0:hover {
   position: relative;
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
   border-right-width: 0;
   padding-right: var(--dt-spacings-size-4, 4px);
 }
-._96tj13l-3-6-0 {
+._96tj13l-3-7-0 {
   line-height: 24px;
 }
-._96tj13m-3-6-0 {
-  --_96tj131-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj132-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj135-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj133-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+._96tj13m-3-7-0 {
+  --_96tj131-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj132-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj135-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj133-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
   line-height: 24px;
 }
-._96tj13n-3-6-0 {
+._96tj13n-3-7-0 {
   cursor: not-allowed;
 }
-._96tj13o-3-6-0 {
-  --_96tj130-3-6-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_96tj131-3-6-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj134-3-6-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj132-3-6-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj135-3-6-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj137-3-6-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-disabled, #dadbe480);
-  --_96tj138-3-6-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_96tj133-3-6-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_96tj13a-3-6-0: var(--dt-colors-border-critical-disabled, #dadbe480);
-}
-._96tj13q-3-6-0 {
+._96tj13o-3-7-0 {
+  --_96tj130-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_96tj131-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj134-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj132-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj135-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj137-3-7-0: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-disabled, #dadbe480);
+  --_96tj138-3-7-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_96tj133-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj13a-3-7-0: var(--dt-colors-border-critical-disabled, #dadbe480);
+}
+._96tj13q-3-7-0 {
   position: relative;
   opacity: 0;
   font-size: var(--dt-typography-text-base-default-size, 14px);
@@ -97,11 +97,11 @@
   user-select: none;
   transition: none;
 }
-._96tj13q-3-6-0:hover {
+._96tj13q-3-7-0:hover {
   opacity: 1;
   pointer-events: initial;
 }
-._96tj13r-3-6-0 {
+._96tj13r-3-7-0 {
   position: absolute;
   top: calc((var(--dt-spacings-size-2, 2px) + var(--dt-borders-width-default, 1px)) * -1);
   left: var(--dt-spacings-size-4, 4px);
@@ -114,15 +114,15 @@
   border-radius: 0 var(--dt-borders-radius-field-subdued, 3px) var(--dt-borders-radius-field-subdued, 3px) 0;
   line-height: 0;
   cursor: pointer;
-  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--_96tj130-3-6-0);
-  background-color: var(--_96tj130-3-6-0);
+  border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--_96tj130-3-7-0);
+  background-color: var(--_96tj130-3-7-0);
   box-shadow: -1px 0px 0px 0px var(--dt-colors-background-surface-default, #fff);
 }
-._96tj13r-3-6-0:hover {
+._96tj13r-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   border-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._96tj13r-3-6-0:before {
+._96tj13r-3-7-0:before {
   content: "";
   position: absolute;
   left: calc(var(--dt-borders-width-default, 1px) * -1);
@@ -133,193 +133,193 @@
   border-left: none;
   border-radius: 0 calc(var(--dt-borders-radius-field-subdued, 3px) + 3px) calc(var(--dt-borders-radius-field-subdued, 3px) + 3px) 0;
 }
-._96tj13s-3-6-0 {
+._96tj13s-3-7-0 {
   background-color: var(--dt-colors-background-surface-default, #fff);
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
   box-shadow: none;
 }
-._96tj13s-3-6-0:hover {
+._96tj13s-3-7-0:hover {
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._96tj13t-3-6-0 {
+._96tj13t-3-7-0 {
   color: var(--dt-colors-icon-neutral-default, #2f2f4f);
   pointer-events: none;
 }
-._96tj13c-3-6-0.hideDeleteWhileTyping ._96tj13i-3-6-0:hover {
+._96tj13c-3-7-0.hideDeleteWhileTyping ._96tj13i-3-7-0:hover {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._96tj13c-3-6-0.hideDeleteWhileTyping ._96tj13k-3-6-0:hover {
+._96tj13c-3-7-0.hideDeleteWhileTyping ._96tj13k-3-7-0:hover {
   padding-right: calc(var(--dt-spacings-size-4, 4px) - var(--dt-borders-width-default, 1px));
   border-right-width: var(--dt-borders-width-default, 1px);
 }
-._96tj13c-3-6-0:not(.hideDeleteWhileTyping) ._96tj13j-3-6-0:hover ._96tj13q-3-6-0,
-  ._96tj13c-3-6-0:not(.hideDeleteWhileTyping) ._96tj13k-3-6-0:hover ._96tj13q-3-6-0 {
+._96tj13c-3-7-0:not(.hideDeleteWhileTyping) ._96tj13j-3-7-0:hover ._96tj13q-3-7-0,
+  ._96tj13c-3-7-0:not(.hideDeleteWhileTyping) ._96tj13k-3-7-0:hover ._96tj13q-3-7-0 {
   opacity: 1;
   pointer-events: initial;
   transition: opacity var(--dt-timings-base-default, 300ms);
 }
-._96tj13c-3-6-0:not(.hideDeleteWhileTyping) ._96tj13j-3-6-0:has(img + ._96tj13q-3-6-0:hover),
-  ._96tj13c-3-6-0:not(.hideDeleteWhileTyping) ._96tj13k-3-6-0:has(img + ._96tj13q-3-6-0:hover) {
+._96tj13c-3-7-0:not(.hideDeleteWhileTyping) ._96tj13j-3-7-0:has(img + ._96tj13q-3-7-0:hover),
+  ._96tj13c-3-7-0:not(.hideDeleteWhileTyping) ._96tj13k-3-7-0:has(img + ._96tj13q-3-7-0:hover) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px) 0 0 var(--dt-borders-radius-field-subdued, 3px);
-  background-color: var(--_96tj130-3-6-0);
+  background-color: var(--_96tj130-3-7-0);
 }
-._96tj13u-3-6-0 {
-  --_96tj131-3-6-0: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj132-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_96tj134-3-6-0: var(--dt-colors-syntax-variable, #2754b5);
-  --_96tj135-3-6-0: var(--dt-colors-syntax-operators, #8136a9);
+._96tj13u-3-7-0 {
+  --_96tj131-3-7-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj132-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-7-0: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj135-3-7-0: var(--dt-colors-syntax-operators, #8136a9);
 }
-._96tj13v-3-6-0 {
-  color: var(--_96tj131-3-6-0);
+._96tj13v-3-7-0 {
+  color: var(--_96tj131-3-7-0);
 }
-._96tj13w-3-6-0 {
-  color: var(--_96tj132-3-6-0);
+._96tj13w-3-7-0 {
+  color: var(--_96tj132-3-7-0);
 }
-._96tj13x-3-6-0 {
-  color: var(--_96tj134-3-6-0);
+._96tj13x-3-7-0 {
+  color: var(--_96tj134-3-7-0);
 }
-._96tj13y-3-6-0 {
-  color: var(--_96tj135-3-6-0);
+._96tj13y-3-7-0 {
+  color: var(--_96tj135-3-7-0);
 }
-._96tj13z-3-6-0 ._96tj13y-3-6-0 {
-  --_96tj135-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+._96tj13z-3-7-0 ._96tj13y-3-7-0 {
+  --_96tj135-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._96tj1310-3-6-0 {
-  color: var(--_96tj136-3-6-0);
+._96tj1310-3-7-0 {
+  color: var(--_96tj136-3-7-0);
 }
-._96tj1311-3-6-0 {
+._96tj1311-3-7-0 {
   position: relative;
   z-index: 0;
 }
-._96tj1311-3-6-0::before {
+._96tj1311-3-7-0::before {
   content: " ";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
   width: 100%;
   line-height: 20px;
-  background-color: var(--_96tj138-3-6-0);
+  background-color: var(--_96tj138-3-7-0);
   z-index: -1;
 }
-._96tj1311-3-6-0::after {
+._96tj1311-3-7-0::after {
   content: " ";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
   left: 0;
   width: 100%;
-  border-bottom: var(--_96tj137-3-6-0);
+  border-bottom: var(--_96tj137-3-7-0);
   pointer-events: none;
 }
-._96tj1312-3-6-0 {
+._96tj1312-3-7-0 {
   position: relative;
 }
-._96tj1312-3-6-0::after {
+._96tj1312-3-7-0::after {
   content: "";
   position: absolute;
   bottom: calc(var(--dt-spacings-size-4, 4px) * -1);
-  border: var(--dt-spacings-size-4, 4px) solid var(--_96tj13a-3-6-0);
+  border: var(--dt-spacings-size-4, 4px) solid var(--_96tj13a-3-7-0);
   border-left: var(--dt-spacings-size-4, 4px) solid transparent;
   border-right: var(--dt-spacings-size-4, 4px) solid transparent;
   border-top: none;
   z-index: 250;
 }
-._96tj1313-3-6-0::after {
+._96tj1313-3-7-0::after {
   left: 0;
   transform: translateX(-50%);
 }
-._96tj1314-3-6-0::after {
+._96tj1314-3-7-0::after {
   right: 0;
   transform: translateX(50%);
 }
-._96tj13c-3-6-0 .cm-editor {
+._96tj13c-3-7-0 .cm-editor {
   padding: 0;
   padding-inline: var(--dt-spacings-size-28, 28px) var(--dt-spacings-size-32, 32px);
   min-height: 32px;
   max-height: inherit;
   justify-content: center;
 }
-._96tj13c-3-6-0:has([data-suggestion-pin="true"]) .cm-editor {
+._96tj13c-3-7-0:has([data-suggestion-pin="true"]) .cm-editor {
   padding-inline: var(--dt-spacings-size-28, 28px) var(--dt-spacings-size-64, 64px);
 }
-._96tj13p-3-6-0 .cm-editor {
+._96tj13p-3-7-0 .cm-editor {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
   pointer-events: none;
 }
-._96tj13n-3-6-0 ._96tj13r-3-6-0 {
+._96tj13n-3-7-0 ._96tj13r-3-7-0 {
   display: none;
 }
-._96tj13n-3-6-0 ._96tj13r-3-6-0 ._96tj13s-3-6-0 {
+._96tj13n-3-7-0 ._96tj13r-3-7-0 ._96tj13s-3-7-0 {
   display: none;
 }
-._96tj13n-3-6-0 .cm-cursorLayer {
+._96tj13n-3-7-0 .cm-cursorLayer {
   display: none;
 }
-._96tj13o-3-6-0 .cm-editor {
+._96tj13o-3-7-0 .cm-editor {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._96tj13c-3-6-0 .cm-editor.cm-focused.cm-focused {
+._96tj13c-3-7-0 .cm-editor.cm-focused.cm-focused {
   border-color: var(--dt-colors-border-neutral-accent, #595a7d);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1jgl8s50-3-6-0 ._96tj13c-3-6-0 .cm-editor.cm-focused.cm-focused::before {
+._1jgl8s50-3-7-0 ._96tj13c-3-7-0 .cm-editor.cm-focused.cm-focused::before {
   content: none;
 }
-._1jgl8s50-3-6-0 ._96tj13c-3-6-0 .cm-editor.cm-focused.cm-focused {
+._1jgl8s50-3-7-0 ._96tj13c-3-7-0 .cm-editor.cm-focused.cm-focused {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d), inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._96tj13c-3-6-0._96tj13e-3-6-0 .cm-editor.cm-focused.cm-focused {
+._96tj13c-3-7-0._96tj13e-3-7-0 .cm-editor.cm-focused.cm-focused {
   border-color: var(--dt-colors-border-critical-accent, #bb0731);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._1jgl8s50-3-6-0 ._96tj13c-3-6-0._96tj13e-3-6-0 .cm-editor.cm-focused.cm-focused {
+._1jgl8s50-3-7-0 ._96tj13c-3-7-0._96tj13e-3-7-0 .cm-editor.cm-focused.cm-focused {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731), inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--dt-colors-border-critical-default, #f6d6d5);
 }
-._96tj13c-3-6-0 .cm-line.cm-line {
+._96tj13c-3-7-0 .cm-line.cm-line {
   padding-left: 0;
-  color: var(--_96tj133-3-6-0);
+  color: var(--_96tj133-3-7-0);
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
 }
-._96tj13c-3-6-0 .cm-scroller {
+._96tj13c-3-7-0 .cm-scroller {
   display: block !important;
   overflow-x: hidden;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._96tj13c-3-6-0 .cm-cursor {
+._96tj13c-3-7-0 .cm-cursor {
   border-color: var(--dt-colors-text-neutral-default, #2f2f4f);
   margin-left: 0;
 }
-._96tj13c-3-6-0 .cm-selectionLayer {
+._96tj13c-3-7-0 .cm-selectionLayer {
   z-index: unset !important;
   transform: unset !important;
 }
-._96tj13c-3-6-0 .cm-selectionBackground, ._96tj13c-3-6-0 .ͼ2 .cm-selectionBackground {
+._96tj13c-3-7-0 .cm-selectionBackground, ._96tj13c-3-7-0 .ͼ2 .cm-selectionBackground {
   background-image: linear-gradient(var(--dt-colors-background-container-neutral-accent, #5b5c81), var(--dt-colors-background-container-neutral-accent, #5b5c81)) !important;
   mix-blend-mode: difference;
 }
-._96tj13c-3-6-0 .cm-lintRange-error.cm-lintRange-error {
+._96tj13c-3-7-0 .cm-lintRange-error.cm-lintRange-error {
   background-image: none;
 }
-._96tj13c-3-6-0 .cm-lintPoint-error::after {
+._96tj13c-3-7-0 .cm-lintPoint-error::after {
   border: none;
 }
-._96tj13c-3-6-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete {
+._96tj13c-3-7-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete {
   left: 0 !important;
   right: 0;
   width: unset;
   max-width: unset;
   transform: translateY(var(--dt-spacings-size-4, 4px));
 }
-._96tj13c-3-6-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete ul {
+._96tj13c-3-7-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete ul {
   max-width: unset;
 }
-._96tj13p-3-6-0 .cm-placeholder.cm-placeholder,
-._96tj13o-3-6-0 .cm-placeholder.cm-placeholder {
+._96tj13p-3-7-0 .cm-placeholder.cm-placeholder,
+._96tj13o-3-7-0 .cm-placeholder.cm-placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._96tj13e-3-6-0 .cm-placeholder.cm-placeholder {
+._96tj13e-3-7-0 .cm-placeholder.cm-placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._96tj1315-3-6-0 {
+._96tj1315-3-7-0 {
   position: absolute;
   width: 1px;
   height: 1px;

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

@@ -239,7 +239,8 @@ const _FilterField = forwardRef(
       if (showError && !hasFormControlError && !hasSyntaxError && !formFieldMessageState.showError) {
         setShowError(false);
       }
-      if (!editorViewRef.current?.hasFocus && formFieldMessageState.isTouched && (hasFormControlError || formFieldMessageState.showError || hasSyntaxError)) {
+      const hasNotFocusInside = !editorViewRef.current?.hasFocus && !internalRootRef.current?.contains(document.activeElement);
+      if (hasNotFocusInside && formFieldMessageState.isTouched && (hasFormControlError || formFieldMessageState.showError || hasSyntaxError)) {
         setShowError(true);
       }
     }, [
@@ -943,7 +944,12 @@ const _FilterField = forwardRef(
                   hideDeleteWhileTyping
                 }
               ),
-              onBlur: onInputBlur,
+              onBlur: (event) => {
+                if (event.relatedTarget instanceof Node && internalRootRef.current?.contains(event.relatedTarget)) {
+                  return;
+                }
+                onInputBlur();
+              },
               onKeyDown: (event) => {
                 if (event.target instanceof HTMLElement && event.target.closest("button")) {
                   return;