@dynatrace/strato-components 3.6.0 → 3.7.1

package/filters/filter/MoreMenu.js

@@ -29,8 +29,8 @@ var import_Item = require("./Item.js");
 var import_filter_state_types = require("./types/filter-state.types.js");
 var import_getTextFromNode = require("./utils/getTextFromNode.js");
 var import_Button = require("../../buttons/button/Button.js");
+var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_useId = require("../../core/hooks/useId.js");
-var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_is_slot = require("../../core/utils/is-slot.js");
 var import_Select = require("../../forms/select/Select.js");
 var import_Flex = require("../../layouts/flex/Flex.js");

package/filters/filter-field/FilterField.css

@@ -1,94 +1,94 @@
-._96tj13b-3-6-0 {
+._96tj13b-3-7-1 {
   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-1 {
+  --_96tj130-3-7-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_96tj131-3-7-1: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj132-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj133-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-7-1: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj135-3-7-1: var(--dt-colors-syntax-operators, #8136a9);
+  --_96tj136-3-7-1: var(--dt-colors-syntax-operators, #8136a9);
+  --_96tj137-3-7-1: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) transparent;
+  --_96tj138-3-7-1: transparent;
+  --_96tj13a-3-7-1: transparent;
+  --_96tj139-3-7-1: var(--dt-colors-icon-neutral-default, #2f2f4f);
   position: relative;
   width: 100%;
   max-height: inherit;
 }
-._96tj13c-3-6-0::selection {
+._96tj13c-3-7-1::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-1 {
+  --_96tj137-3-7-1: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-accent, #bb0731);
+  --_96tj138-3-7-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_96tj13a-3-7-1: var(--dt-colors-border-critical-accent, #bb0731);
+  --_96tj139-3-7-1: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._96tj13e-3-6-0 {
+._96tj13e-3-7-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._96tj13f-3-6-0 {
+._96tj13f-3-7-1 {
   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-1 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._96tj13h-3-6-0 {
+._96tj13h-3-7-1 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._96tj13i-3-6-0 {
+._96tj13i-3-7-1 {
   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-1 {
+  background-color: var(--_96tj130-3-7-1);
   border-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._96tj13j-3-6-0:hover {
+._96tj13j-3-7-1: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-1: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-1 {
   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-1 {
+  --_96tj131-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj132-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj135-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj133-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
   line-height: 24px;
 }
-._96tj13n-3-6-0 {
+._96tj13n-3-7-1 {
   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-1 {
+  --_96tj130-3-7-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_96tj131-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj134-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj132-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj135-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj137-3-7-1: var(--dt-borders-width-default, 1px) var(--dt-borders-style-dashed, dashed) var(--dt-colors-border-critical-disabled, #dadbe480);
+  --_96tj138-3-7-1: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_96tj133-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_96tj13a-3-7-1: var(--dt-colors-border-critical-disabled, #dadbe480);
+}
+._96tj13q-3-7-1 {
   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-1:hover {
   opacity: 1;
   pointer-events: initial;
 }
-._96tj13r-3-6-0 {
+._96tj13r-3-7-1 {
   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-1);
+  background-color: var(--_96tj130-3-7-1);
   box-shadow: -1px 0px 0px 0px var(--dt-colors-background-surface-default, #fff);
 }
-._96tj13r-3-6-0:hover {
+._96tj13r-3-7-1: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-1: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-1 {
   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-1:hover {
   border-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._96tj13t-3-6-0 {
+._96tj13t-3-7-1 {
   color: var(--dt-colors-icon-neutral-default, #2f2f4f);
   pointer-events: none;
 }
-._96tj13c-3-6-0.hideDeleteWhileTyping ._96tj13i-3-6-0:hover {
+._96tj13c-3-7-1.hideDeleteWhileTyping ._96tj13i-3-7-1:hover {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._96tj13c-3-6-0.hideDeleteWhileTyping ._96tj13k-3-6-0:hover {
+._96tj13c-3-7-1.hideDeleteWhileTyping ._96tj13k-3-7-1: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-1:not(.hideDeleteWhileTyping) ._96tj13j-3-7-1:hover ._96tj13q-3-7-1,
+  ._96tj13c-3-7-1:not(.hideDeleteWhileTyping) ._96tj13k-3-7-1:hover ._96tj13q-3-7-1 {
   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-1:not(.hideDeleteWhileTyping) ._96tj13j-3-7-1:has(img + ._96tj13q-3-7-1:hover),
+  ._96tj13c-3-7-1:not(.hideDeleteWhileTyping) ._96tj13k-3-7-1:has(img + ._96tj13q-3-7-1: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-1);
 }
-._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-1 {
+  --_96tj131-3-7-1: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj132-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_96tj134-3-7-1: var(--dt-colors-syntax-variable, #2754b5);
+  --_96tj135-3-7-1: var(--dt-colors-syntax-operators, #8136a9);
 }
-._96tj13v-3-6-0 {
-  color: var(--_96tj131-3-6-0);
+._96tj13v-3-7-1 {
+  color: var(--_96tj131-3-7-1);
 }
-._96tj13w-3-6-0 {
-  color: var(--_96tj132-3-6-0);
+._96tj13w-3-7-1 {
+  color: var(--_96tj132-3-7-1);
 }
-._96tj13x-3-6-0 {
-  color: var(--_96tj134-3-6-0);
+._96tj13x-3-7-1 {
+  color: var(--_96tj134-3-7-1);
 }
-._96tj13y-3-6-0 {
-  color: var(--_96tj135-3-6-0);
+._96tj13y-3-7-1 {
+  color: var(--_96tj135-3-7-1);
 }
-._96tj13z-3-6-0 ._96tj13y-3-6-0 {
-  --_96tj135-3-6-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+._96tj13z-3-7-1 ._96tj13y-3-7-1 {
+  --_96tj135-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._96tj1310-3-6-0 {
-  color: var(--_96tj136-3-6-0);
+._96tj1310-3-7-1 {
+  color: var(--_96tj136-3-7-1);
 }
-._96tj1311-3-6-0 {
+._96tj1311-3-7-1 {
   position: relative;
   z-index: 0;
 }
-._96tj1311-3-6-0::before {
+._96tj1311-3-7-1::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-1);
   z-index: -1;
 }
-._96tj1311-3-6-0::after {
+._96tj1311-3-7-1::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-1);
   pointer-events: none;
 }
-._96tj1312-3-6-0 {
+._96tj1312-3-7-1 {
   position: relative;
 }
-._96tj1312-3-6-0::after {
+._96tj1312-3-7-1::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-1);
   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-1::after {
   left: 0;
   transform: translateX(-50%);
 }
-._96tj1314-3-6-0::after {
+._96tj1314-3-7-1::after {
   right: 0;
   transform: translateX(50%);
 }
-._96tj13c-3-6-0 .cm-editor {
+._96tj13c-3-7-1 .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-1: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-1 .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-1 ._96tj13r-3-7-1 {
   display: none;
 }
-._96tj13n-3-6-0 ._96tj13r-3-6-0 ._96tj13s-3-6-0 {
+._96tj13n-3-7-1 ._96tj13r-3-7-1 ._96tj13s-3-7-1 {
   display: none;
 }
-._96tj13n-3-6-0 .cm-cursorLayer {
+._96tj13n-3-7-1 .cm-cursorLayer {
   display: none;
 }
-._96tj13o-3-6-0 .cm-editor {
+._96tj13o-3-7-1 .cm-editor {
   border-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._96tj13c-3-6-0 .cm-editor.cm-focused.cm-focused {
+._96tj13c-3-7-1 .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-1 ._96tj13c-3-7-1 .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-1 ._96tj13c-3-7-1 .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-1._96tj13e-3-7-1 .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-1 ._96tj13c-3-7-1._96tj13e-3-7-1 .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-1 .cm-line.cm-line {
   padding-left: 0;
-  color: var(--_96tj133-3-6-0);
+  color: var(--_96tj133-3-7-1);
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
 }
-._96tj13c-3-6-0 .cm-scroller {
+._96tj13c-3-7-1 .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-1 .cm-cursor {
   border-color: var(--dt-colors-text-neutral-default, #2f2f4f);
   margin-left: 0;
 }
-._96tj13c-3-6-0 .cm-selectionLayer {
+._96tj13c-3-7-1 .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-1 .cm-selectionBackground, ._96tj13c-3-7-1 .ͼ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-1 .cm-lintRange-error.cm-lintRange-error {
   background-image: none;
 }
-._96tj13c-3-6-0 .cm-lintPoint-error::after {
+._96tj13c-3-7-1 .cm-lintPoint-error::after {
   border: none;
 }
-._96tj13c-3-6-0 .cm-tooltip-autocomplete.cm-tooltip-autocomplete {
+._96tj13c-3-7-1 .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-1 .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-1 .cm-placeholder.cm-placeholder,
+._96tj13o-3-7-1 .cm-placeholder.cm-placeholder {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._96tj13e-3-6-0 .cm-placeholder.cm-placeholder {
+._96tj13e-3-7-1 .cm-placeholder.cm-placeholder {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._96tj1315-3-6-0 {
+._96tj1315-3-7-1 {
   position: absolute;
   width: 1px;
   height: 1px;

package/filters/filter-field/FilterField.js

@@ -233,7 +233,8 @@ const _FilterField = (0, import_react.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);
       }
     }, [
@@ -937,7 +938,12 @@ const _FilterField = (0, import_react.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;

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

@@ -50,31 +50,31 @@ module.exports = __toCommonJS(FilterField_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_FilterField_css_ts_vanilla = require("./FilterField.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ariaDisabled = "_96tj13o-3-6-0";
-var container = "_96tj13c-3-6-0";
-var disabled = "_96tj13p-3-6-0 _96tj13n-3-6-0 _96tj13o-3-6-0";
-var error = "_96tj1311-3-6-0";
-var errorText = "_96tj13e-3-6-0";
-var errorVars = "_96tj13d-3-6-0";
-var escapedCharacter = "_96tj1310-3-6-0";
-var existsOperator = "_96tj13z-3-6-0";
-var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-6-0", variantClassNames: { hasError: { true: "_96tj13g-3-6-0" }, disabled: { true: "_96tj13h-3-6-0" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
-var filterKey = "_96tj13v-3-6-0";
-var filterStatement = "_96tj13j-3-6-0 _96tj13i-3-6-0";
-var filterStatementBase = "_96tj13i-3-6-0";
-var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-6-0", variantClassNames: { incomplete: { true: "_96tj13s-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
-var filterStatementDeleteIcon = "_96tj13t-3-6-0";
-var filterStatementDeleteWidget = "_96tj13q-3-6-0";
-var filterValue = "_96tj13w-3-6-0";
-var incompleteFilterStatement = "_96tj13k-3-6-0 _96tj13i-3-6-0";
-var intermediateFilterStatement = "_96tj13l-3-6-0";
-var operator = "_96tj13y-3-6-0";
-var pastedContent = "_96tj13m-3-6-0";
-var postSpotError = "_96tj1314-3-6-0";
-var preSpotError = "_96tj1313-3-6-0";
-var readOnly = "_96tj13n-3-6-0";
-var spotError = "_96tj1312-3-6-0";
-var suggestionHintContainer = "_96tj13u-3-6-0";
-var suggestionsOverlayAnnouncement = "_96tj1315-3-6-0";
-var variable = "_96tj13x-3-6-0";
-var wrapper = "_96tj13b-3-6-0";
+var ariaDisabled = "_96tj13o-3-7-1";
+var container = "_96tj13c-3-7-1";
+var disabled = "_96tj13p-3-7-1 _96tj13n-3-7-1 _96tj13o-3-7-1";
+var error = "_96tj1311-3-7-1";
+var errorText = "_96tj13e-3-7-1";
+var errorVars = "_96tj13d-3-7-1";
+var escapedCharacter = "_96tj1310-3-7-1";
+var existsOperator = "_96tj13z-3-7-1";
+var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-7-1", variantClassNames: { hasError: { true: "_96tj13g-3-7-1" }, disabled: { true: "_96tj13h-3-7-1" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
+var filterKey = "_96tj13v-3-7-1";
+var filterStatement = "_96tj13j-3-7-1 _96tj13i-3-7-1";
+var filterStatementBase = "_96tj13i-3-7-1";
+var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-7-1", variantClassNames: { incomplete: { true: "_96tj13s-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var filterStatementDeleteIcon = "_96tj13t-3-7-1";
+var filterStatementDeleteWidget = "_96tj13q-3-7-1";
+var filterValue = "_96tj13w-3-7-1";
+var incompleteFilterStatement = "_96tj13k-3-7-1 _96tj13i-3-7-1";
+var intermediateFilterStatement = "_96tj13l-3-7-1";
+var operator = "_96tj13y-3-7-1";
+var pastedContent = "_96tj13m-3-7-1";
+var postSpotError = "_96tj1314-3-7-1";
+var preSpotError = "_96tj1313-3-7-1";
+var readOnly = "_96tj13n-3-7-1";
+var spotError = "_96tj1312-3-7-1";
+var suggestionHintContainer = "_96tj13u-3-7-1";
+var suggestionsOverlayAnnouncement = "_96tj1315-3-7-1";
+var variable = "_96tj13x-3-7-1";
+var wrapper = "_96tj13b-3-7-1";

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

@@ -1,13 +1,13 @@
-._ck599t0-3-6-0 {
+._ck599t0-3-7-1 {
   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-6-0 {
+._ck599t1-3-7-1 {
   margin: var(--dt-spacings-size-2, 2px) 0;
 }
-._ck599t2-3-6-0 {
+._ck599t2-3-7-1 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }

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

@@ -23,6 +23,6 @@ __export(FilterFieldSuffixButtons_css_exports, {
 });
 module.exports = __toCommonJS(FilterFieldSuffixButtons_css_exports);
 var import_FilterFieldSuffixButtons_css_ts_vanilla = require("./FilterFieldSuffixButtons.css");
-var button = "_ck599t2-3-6-0";
-var divider = "_ck599t1-3-6-0";
-var suffix = "_ck599t0-3-6-0";
+var button = "_ck599t2-3-7-1";
+var divider = "_ck599t1-3-7-1";
+var suffix = "_ck599t0-3-7-1";

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

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