@dynatrace/strato-components 3.0.1 → 3.1.1

package/filters/filter-field/FilterField.css

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

package/filters/filter-field/FilterField.d.ts

@@ -16,7 +16,7 @@ export declare const FilterField: ((props: FilterFieldProps & import("react").Re
         (props: import("./suggestions/Suggestions.js").FilterFieldSuggestionsProps): import("react/jsx-runtime.js").JSX.Element;
         displayValue: string;
     };
-    Suggestion: (props: import("../../index.js").StylingProps & import("../../index.js").DataTestId & import("../../index.js").DOMProps & import("./suggestions/Suggestion.types.js").FilterFieldSuggestion & {
+    Suggestion: (props: import("../../index.js").StylingProps & import("../../index.js").DataTestId & import("../../index.js").DOMProps & import("../../index.js").AriaLabelingProps & import("./suggestions/Suggestion.types.js").FilterFieldSuggestion & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
     SuggestionGroup: {

package/filters/filter-field/FilterField.js

@@ -81,6 +81,7 @@ var import_auto_format_logical_operators = require("./utils/auto-format-logical-
 var import_get_next_suggestion = require("./utils/get-next-suggestion.js");
 var import_key_suggestions = require("./utils/suggestions-utils/key-suggestions.js");
 var import_VisuallyHidden = require("../../core/components/visually-hidden/VisuallyHidden.js");
+var import_OverlayStacking = require("../../core/contexts/OverlayStacking.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_useId = require("../../core/hooks/useId.js");
@@ -96,6 +97,7 @@ var import_useSyncedFormControlProps = require("../../forms/forms-core/hooks/use
 var import_formfield_messages_state_reducer = require("../../forms/forms-core/state/formfield-messages-state-reducer.js");
 var import_useInputHint = require("../../forms/hooks/useInputHint.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
+var import_useOverlay = require("../../overlays/hooks/useOverlay.js");
 var import_useOverlayWithTrigger = require("../../overlays/hooks/useOverlayWithTrigger.js");
 var import_Text = require("../../typography/text/Text.js");
 const COMPONENT_NAME = "FilterField";
@@ -128,7 +130,8 @@ const _FilterField = (0, import_react.forwardRef)(
       onFilter,
       validatorMap,
       parserConfig,
-      filterNamespace
+      filterNamespace,
+      customTypes
     } = props;
     const setCursorPosition = (0, import_useErrorLogsStore.useErrorLogsStore)(
       (state2) => state2.setCursorPosition
@@ -144,6 +147,7 @@ const _FilterField = (0, import_react.forwardRef)(
     const onChangeRef = (0, import_useUpdatableCallback.useUpdatableCallback)(onChange);
     const onFilterRef = (0, import_useUpdatableCallback.useUpdatableCallback)(onFilter);
     const validatorMapRef = (0, import_react.useRef)(validatorMap);
+    const customTypesRef = (0, import_react.useRef)(customTypes);
     const fallbackKeysRef = (0, import_react.useRef)();
     const filterStatementKeysMapRef = (0, import_react.useRef)();
     const numberParser = (0, import_getNumberParser.getNumberParser)();
@@ -167,6 +171,7 @@ const _FilterField = (0, import_react.forwardRef)(
       setIsControlled(isControlled);
     }, [isControlled, setIsControlled]);
     const placeholder = intl.formatMessage(import_messages.filterFieldMessages.placeholder);
+    const overlayStacking = (0, import_react.useContext)(import_OverlayStacking.OverlayStackingContext);
     const suggestionsOverlayRef = (0, import_react.useRef)(null);
     const {
       targetRef,
@@ -177,7 +182,17 @@ const _FilterField = (0, import_react.forwardRef)(
       placement: "bottom-start",
       placementFallbacks: ["top-start"],
       widthStrategy: "trigger",
-      offset: 4
+      offset: 4,
+      // Workaround to close all other overlays when opening the suggestions overlay to avoid overlapping overlays.
+      // TODO: Refactor with APPDEV-3373.
+      onOpenChange(isOpen) {
+        if (isOpen && !suggestionsOverlayRef.current && editorViewRef.current?.hasFocus) {
+          (0, import_useOverlay.closeAllOverlays)(overlayStacking);
+          requestAnimationFrame(() => {
+            editorViewRef.current?.focus();
+          });
+        }
+      }
     });
     const overlayRef = (0, import_useMergeRefs.useMergeRefs)([
       suggestionsOverlayRef,
@@ -306,7 +321,11 @@ const _FilterField = (0, import_react.forwardRef)(
     };
     const saveRecentFilter = (0, import_useRecentFilters.useRecentFilterMutation)(filterNamespace);
     (0, import_useRecentFilterSuggestions.useRecentFilterSuggestions)(editorViewRef, filterNamespace);
-    (0, import_usePinnedFilterSuggestions.usePinnedFilterSuggestions)(editorViewRef, filterNamespace);
+    (0, import_usePinnedFilterSuggestions.usePinnedFilterSuggestions)(
+      editorViewRef,
+      filterNamespace,
+      overlayState.isOpen
+    );
     (0, import_react.useImperativeHandle)(
       forwardedRef,
       () => ({
@@ -328,11 +347,10 @@ const _FilterField = (0, import_react.forwardRef)(
             payload: { isTouched: true }
           });
         },
-        saveRecentFilter: () => {
+        saveRecentFilter: async () => {
           if (filterNamespace) {
-            return saveRecentFilter(valueRef.current);
+            await saveRecentFilter(valueRef.current);
           }
-          return Promise.resolve();
         }
       }),
       [
@@ -400,6 +418,7 @@ const _FilterField = (0, import_react.forwardRef)(
           numberParser,
           doc: transaction.newDoc.toString(),
           validatorMap: validatorMapRef?.current,
+          customTypes: customTypesRef.current,
           parserConfig
         });
         isValidSearchRef.current = isValidSearch2;
@@ -504,7 +523,8 @@ const _FilterField = (0, import_react.forwardRef)(
               filterStatementKeysMap: filterStatementKeysMapRef.current,
               _onSuggest,
               getSyntaxTree,
-              parserConfig
+              parserConfig,
+              customTypes: customTypesRef.current
             })
           ),
           /**
@@ -628,21 +648,25 @@ const _FilterField = (0, import_react.forwardRef)(
         numberParser,
         doc: editorView.state.doc.toString(),
         validatorMap,
+        customTypes: customTypesRef.current,
         parserConfig
       });
       isValidSearchRef.current = isValidSearch;
       updateSyntaxError(isValid);
       return () => editorView.destroy();
     }, []);
-    if (!(0, import_lodash_es.isEqual)(validatorMap, validatorMapRef.current) && editorViewRef.current) {
-      const validatorMapChanged = !(0, import_lodash_es.isEqual)(
-        validatorMap,
-        validatorMapRef.current
-      );
+    const validatorMapChanged = !(0, import_lodash_es.isEqual)(validatorMap, validatorMapRef.current);
+    const customTypesChanged = !(0, import_lodash_es.isEqual)(customTypes, customTypesRef.current);
+    if ((validatorMapChanged || customTypesChanged) && editorViewRef.current) {
       if (validatorMapChanged) {
         validatorMapRef.current = validatorMap;
         fallbackKeysRef.current = (0, import_key_suggestions.getFallbackKeys)(validatorMap);
         filterStatementKeysMapRef.current = (0, import_key_suggestions.getFilterStatementKeysMap)(validatorMap);
+      }
+      if (customTypesChanged) {
+        customTypesRef.current = customTypes;
+      }
+      if (validatorMapChanged || customTypesChanged) {
         viewDispatch({
           effects: import_editor_config.suggestionsCompartment.reconfigure(
             (0, import_suggestions_extension.suggestionsExtension)({
@@ -651,9 +675,10 @@ const _FilterField = (0, import_react.forwardRef)(
               onSuggest,
               _onSuggest,
               getSyntaxTree,
-              validatorMap,
+              validatorMap: validatorMapRef.current,
               fallbackKeys: fallbackKeysRef.current,
               filterStatementKeysMap: filterStatementKeysMapRef.current,
+              customTypes: customTypesRef.current,
               parserConfig
             })
           )
@@ -668,7 +693,8 @@ const _FilterField = (0, import_react.forwardRef)(
             view: editorViewRef.current,
             numberParser,
             doc: doc.toString(),
-            validatorMap,
+            validatorMap: validatorMapRef.current,
+            customTypes: customTypesRef.current,
             parserConfig
           });
           updateSyntaxError(isValid);
@@ -684,7 +710,7 @@ const _FilterField = (0, import_react.forwardRef)(
               insert: doc.toString()
             }
           });
-          if (validatorMapChanged) {
+          if (validatorMapChanged || customTypesChanged) {
             queueMicrotask(() => {
               if (editorViewRef.current) {
                 (0, import_autocomplete.startCompletion)(editorViewRef.current);
@@ -711,9 +737,10 @@ const _FilterField = (0, import_react.forwardRef)(
             onSuggest,
             _onSuggest,
             getSyntaxTree,
-            validatorMap,
+            validatorMap: validatorMapRef.current,
             fallbackKeys: fallbackKeysRef.current,
             filterStatementKeysMap: filterStatementKeysMapRef.current,
+            customTypes: customTypesRef.current,
             parserConfig
           })
         )
@@ -815,7 +842,7 @@ const _FilterField = (0, import_react.forwardRef)(
         focusedListItem,
         filterFieldId: id,
         term: suggestionsContext.current?.token.textValue,
-        autoSuggestions: autoSuggestions ? autoSuggestionsConfig : { flattenedSuggestions: [] },
+        autoSuggestions: autoSuggestions ? autoSuggestionsConfig : {},
         recentSuggestionValues,
         pinnedSuggestionValues,
         logicalOperatorSuggestionValues,
@@ -927,6 +954,7 @@ const _FilterField = (0, import_react.forwardRef)(
                         numberParser,
                         doc: editorViewRef.current.state.doc.toString(),
                         validatorMap: validatorMapRef.current,
+                        customTypes,
                         parserConfig
                       });
                       onFilterRef.current?.({