@dynatrace/strato-components 3.5.2 → 3.6.0

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-5-2";
-var container = "_96tj13c-3-5-2";
-var disabled = "_96tj13p-3-5-2 _96tj13n-3-5-2 _96tj13o-3-5-2";
-var error = "_96tj1311-3-5-2";
-var errorText = "_96tj13e-3-5-2";
-var errorVars = "_96tj13d-3-5-2";
-var escapedCharacter = "_96tj1310-3-5-2";
-var existsOperator = "_96tj13z-3-5-2";
-var filterIcon = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13f-3-5-2", variantClassNames: { hasError: { true: "_96tj13g-3-5-2" }, disabled: { true: "_96tj13h-3-5-2" } }, defaultVariants: { hasError: false, disabled: false }, compoundVariants: [] });
-var filterKey = "_96tj13v-3-5-2";
-var filterStatement = "_96tj13j-3-5-2 _96tj13i-3-5-2";
-var filterStatementBase = "_96tj13i-3-5-2";
-var filterStatementDeleteButton = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_96tj13r-3-5-2", variantClassNames: { incomplete: { true: "_96tj13s-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var filterStatementDeleteIcon = "_96tj13t-3-5-2";
-var filterStatementDeleteWidget = "_96tj13q-3-5-2";
-var filterValue = "_96tj13w-3-5-2";
-var incompleteFilterStatement = "_96tj13k-3-5-2 _96tj13i-3-5-2";
-var intermediateFilterStatement = "_96tj13l-3-5-2";
-var operator = "_96tj13y-3-5-2";
-var pastedContent = "_96tj13m-3-5-2";
-var postSpotError = "_96tj1314-3-5-2";
-var preSpotError = "_96tj1313-3-5-2";
-var readOnly = "_96tj13n-3-5-2";
-var spotError = "_96tj1312-3-5-2";
-var suggestionHintContainer = "_96tj13u-3-5-2";
-var suggestionsOverlayAnnouncement = "_96tj1315-3-5-2";
-var variable = "_96tj13x-3-5-2";
-var wrapper = "_96tj13b-3-5-2";
+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";

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

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

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

@@ -68,6 +68,7 @@ function FilterFieldSuffixButtons(props) {
         },
         annotations: import_state.Transaction.userEvent.of("clear")
       });
+      editorView.focus();
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { className: styles.suffix, gap: 2, children: [

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-5-2";
-var divider = "_ck599t1-3-5-2";
-var suffix = "_ck599t0-3-5-2";
+var button = "_ck599t2-3-6-0";
+var divider = "_ck599t1-3-6-0";
+var suffix = "_ck599t0-3-6-0";

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

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

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

@@ -31,9 +31,9 @@ var import_FilterField_css_ts_vanilla = require("../FilterField.css");
 var import_SuggestionsOverlay_css_ts_vanilla = require("../suggestions/SuggestionsOverlay.css");
 var import_Suggestion_css_ts_vanilla = require("../suggestions/Suggestion.css");
 var import_FilterStatement_css_ts_vanilla = require("./FilterStatement.css");
-var escapeCharacter = "_ia7amm4-3-5-2";
-var highlight = "_ia7amm5-3-5-2";
-var highlighting = { syntax: "_ia7amm0-3-5-2", minimal: "_ia7amm1-3-5-2" };
-var root = "_ia7amm2-3-5-2 _96tj13c-3-5-2";
-var statement = "_ia7amm3-3-5-2";
-var whitespace = "_ia7amm6-3-5-2";
+var escapeCharacter = "_ia7amm4-3-6-0";
+var highlight = "_ia7amm5-3-6-0";
+var highlighting = { syntax: "_ia7amm0-3-6-0", minimal: "_ia7amm1-3-6-0" };
+var root = "_ia7amm2-3-6-0 _96tj13c-3-6-0";
+var statement = "_ia7amm3-3-6-0";
+var whitespace = "_ia7amm6-3-6-0";

package/filters/filter-field/hooks/useSuggestions.js

@@ -23,6 +23,7 @@ __export(useSuggestions_exports, {
 module.exports = __toCommonJS(useSuggestions_exports);
 var import_view = require("@codemirror/view");
 var import_react = require("react");
+var import_react_error_boundary = require("react-error-boundary");
 var import_react_intl = require("react-intl");
 var import_useErrorLogsStore = require("./useErrorLogsStore.js");
 var import_useReferencedState = require("./useReferencedState.js");
@@ -55,6 +56,7 @@ function useSuggestions(props) {
     hiddenInputRef,
     ariaLabelingProps
   } = props;
+  const { showBoundary } = (0, import_react_error_boundary.useErrorBoundary)();
   const setUserAction = (0, import_useErrorLogsStore.useErrorLogsStore)((state) => state.setAction);
   const { ariaProps } = (0, import_useFormFieldValidation.useFormFieldValidation)(
     hiddenInputRef,
@@ -247,7 +249,11 @@ function useSuggestions(props) {
   );
   if (prevOpen && !isOpen) {
     queueMicrotask(() => {
-      onSuggest?.();
+      try {
+        onSuggest?.();
+      } catch (e) {
+        showBoundary(e);
+      }
     });
   }
   if (prevOpen !== isOpen || autoSuggestionValuesRef.current !== prevAutoSuggestionValues || recentSuggestionValuesRef.current !== prevRecentSuggestionValues || pastedContentSuggestionValuesRef.current !== prevPastedContentSuggestionValues || searchSuggestionValuesRef.current !== prevSearchSuggestionValues || fallbackKeySuggestionValuesRef.current !== prevFallbackKeySuggestionValues || statementSuggestionValuesRef.current !== prevStatementSuggestionValues) {

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

@@ -1,8 +1,8 @@
-._vt0w9g0-3-5-2 {
+._vt0w9g0-3-6-0 {
   display: grid;
   grid-template-columns: 1fr auto;
 }
-._vt0w9g1-3-5-2 {
+._vt0w9g1-3-6-0 {
   appearance: none;
   visibility: hidden;
   position: absolute;
@@ -12,25 +12,25 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-._1smjoa13-3-5-2:hover ._vt0w9g1-3-5-2, ._1smjoa13-3-5-2:has(._9mvxlq0-3-5-2) ._vt0w9g1-3-5-2 {
+._1smjoa14-3-6-0:hover ._vt0w9g1-3-6-0, ._1smjoa14-3-6-0:has(._9mvxlq0-3-6-0) ._vt0w9g1-3-6-0 {
   position: initial;
   visibility: visible;
   height: 100%;
 }
-._1jgl8s50-3-5-2 ._vt0w9g1-3-5-2 {
+._1jgl8s50-3-6-0 ._vt0w9g1-3-6-0 {
   border-left-width: var(--dt-borders-width-default, 1px);
 }
-._1jgl8s50-3-5-2 ._vt0w9g1-3-5-2:hover {
+._1jgl8s50-3-6-0 ._vt0w9g1-3-6-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1jgl8s50-3-5-2 ._vt0w9g1-3-5-2:active {
+._1jgl8s50-3-6-0 ._vt0w9g1-3-6-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._vt0w9g0-3-5-2 ._1smjoa10-3-5-2 > div {
+._vt0w9g0-3-6-0 ._1smjoa10-3-6-0 > div {
   background-color: transparent;
 }
-@container _ssu5rt0-3-5-2 (min-width: 641px) {
-  ._vt0w9g0-3-5-2:hover ._tn2lgm0-3-5-2, ._vt0w9g0-3-5-2._9mvxlq0-3-5-2 ._tn2lgm0-3-5-2, ._vt0w9g0-3-5-2:has(._9mvxlq0-3-5-2) ._tn2lgm0-3-5-2 {
+@container _ssu5rt0-3-6-0 (min-width: 641px) {
+  ._vt0w9g0-3-6-0:hover ._tn2lgm0-3-6-0, ._vt0w9g0-3-6-0._9mvxlq0-3-6-0 ._tn2lgm0-3-6-0, ._vt0w9g0-3-6-0:has(._9mvxlq0-3-6-0) ._tn2lgm0-3-6-0 {
     display: none;
   }
 }

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

@@ -27,5 +27,5 @@ var import_virtualFocus_css_ts_vanilla = require("../../../core/styles/virtualFo
 var import_Suggestion_css_ts_vanilla = require("./Suggestion.css");
 var import_SuggestionDetails_css_ts_vanilla = require("./SuggestionDetails.css");
 var import_RecentPinnedSuggestionItem_css_ts_vanilla = require("./RecentPinnedSuggestionItem.css");
-var recentSuggestion = "_vt0w9g0-3-5-2";
-var suggestionPin = "_vt0w9g1-3-5-2";
+var recentSuggestion = "_vt0w9g0-3-6-0";
+var suggestionPin = "_vt0w9g1-3-6-0";

package/filters/filter-field/suggestions/Suggestion.css

@@ -1,7 +1,7 @@
-._1smjoa11-3-5-2 {
+._1smjoa11-3-6-0 {
   min-width: 0;
 }
-._1smjoa13-3-5-2 {
+._1smjoa14-3-6-0 {
   cursor: pointer;
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -9,17 +9,17 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   overflow: hidden;
 }
-._1smjoa13-3-5-2:hover {
+._1smjoa14-3-6-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1smjoa13-3-5-2:has(._9mvxlq0-3-5-2) {
+._1smjoa14-3-6-0:has(._9mvxlq0-3-6-0) {
   background-color: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
   transition: none;
 }
-._1jgl8s50-3-5-2 ._1smjoa13-3-5-2:hover {
+._1jgl8s50-3-6-0 ._1smjoa14-3-6-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1smjoa14-3-5-2 {
+._1smjoa15-3-6-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);
@@ -27,68 +27,68 @@
   flex: 1;
   grid-auto-flow: row;
 }
-._1smjoa14-3-5-2:hover {
+._1smjoa15-3-6-0:hover {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1smjoa14-3-5-2:active {
+._1smjoa15-3-6-0:active {
   background-color: var(--dt-colors-background-field-neutral-emphasized-active, #d0d1dc);
 }
-._1smjoa13-3-5-2 span:only-child ._1smjoa14-3-5-2 {
+._1smjoa14-3-6-0 span:only-child ._1smjoa15-3-6-0 {
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1smjoa15-3-5-2 {
+._1smjoa16-3-6-0 {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1smjoa16-3-5-2 {
+._1smjoa17-3-6-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-5-2 {
+._1smjoa18-3-6-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-5-2 {
+._1smjoa19-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1smjoa19-3-5-2 {
+._1smjoa1a-3-6-0 {
   white-space: nowrap;
   gap: 0;
 }
-._1smjoa1a-3-5-2 {
+._1smjoa1b-3-6-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._1smjoa1a-3-5-2 mark, ._1smjoa13-3-5-2 mark, ._1smjoa13-3-5-2:not(._1smjoa1b-3-5-2) *::highlight(filterfield-suggestions-highlight) {
+._1smjoa1b-3-6-0 mark, ._1smjoa14-3-6-0 mark, ._1smjoa14-3-6-0:not(._1smjoa1c-3-6-0) *::highlight(filterfield-suggestions-highlight) {
   white-space: pre-wrap;
   background: none;
   color: inherit;
   text-decoration: underline;
 }
-._1smjoa15-3-5-2 > mark, ._1smjoa15-3-5-2 > span {
+._1smjoa16-3-6-0 > mark, ._1smjoa16-3-6-0 > span {
   white-space: nowrap;
 }
-._1smjoa1c-3-5-2 ._1smjoa10-3-5-2 > div {
+._1smjoa1d-3-6-0 ._1smjoa10-3-6-0 > div {
   background-color: transparent;
 }
-._1smjoa19-3-5-2 mark {
+._1smjoa1a-3-6-0 mark {
   white-space: preserve nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1smjoa1e-3-5-2 ._1smjoa10-3-5-2 > div {
+._1smjoa1f-3-6-0 ._1smjoa10-3-6-0 > div {
   background-color: transparent;
 }
-@container _ssu5rt0-3-5-2 (min-width: 641px) {
-  ._1smjoa14-3-5-2 {
+@container _ssu5rt0-3-6-0 (min-width: 641px) {
+  ._1smjoa15-3-6-0 {
     grid-auto-flow: column;
     justify-content: space-between;
   }
 }
-@container _ssu5rt0-3-5-2 (min-width: 1921px) {
-  ._1smjoa14-3-5-2 {
+@container _ssu5rt0-3-6-0 (min-width: 1921px) {
+  ._1smjoa15-3-6-0 {
     grid-auto-columns: 30% auto;
     justify-content: start;
   }

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

@@ -191,7 +191,15 @@ const Suggestion = (0, import_react2.forwardRef)((props, forwardedRef) => {
   const isFocused = uniqueId === focusedListItem?.id ? true : void 0;
   const finalDetails = (0, import_react2.useMemo)(() => {
     if (slots.details) {
-      return slots.details;
+      return (0, import_react2.cloneElement)(slots.details, {
+        className: (0, import_clsx.default)(
+          slots.details.props.className,
+          styles.matchableSuggestionDetails
+        )
+      });
+    }
+    if (typeof details === "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionDetails.SuggestionDetails, { className: styles.matchableSuggestionDetails, children: details });
     }
     if (details) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SuggestionDetails.SuggestionDetails, { children: details });

package/filters/filter-field/suggestions/Suggestion.sty.d.ts

@@ -1,5 +1,12 @@
 export declare const icon: string;
 export declare const value: string;
+/**
+ * Marker class with no styles — used purely as a CSS Custom Highlight
+ * selector hook (see Suggestions.tsx). Attached to details elements whose
+ * text is also a matching target (string details + user-provided slots) so
+ * the highlight API can paint matched substrings inside them.
+ */
+export declare const matchableSuggestionDetails: string;
 export declare const virtualizedSuggestion: string;
 export declare const suggestion: string;
 export declare const suggestionContent: string;

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

@@ -19,6 +19,7 @@ var Suggestion_css_exports = {};
 __export(Suggestion_css_exports, {
   defaultSuggestion: () => defaultSuggestion,
   icon: () => icon,
+  matchableSuggestionDetails: () => matchableSuggestionDetails,
   pastingSuggestion: () => pastingSuggestion,
   searchSuggestion: () => searchSuggestion,
   statementSuggestionValue: () => statementSuggestionValue,
@@ -38,18 +39,19 @@ var import_SuggestionsOverlay_css_ts_vanilla = require("./SuggestionsOverlay.css
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_virtualFocus_css_ts_vanilla = require("../../../core/styles/virtualFocus.css");
 var import_Suggestion_css_ts_vanilla = require("./Suggestion.css");
-var defaultSuggestion = "_1smjoa1b-3-5-2";
-var icon = "_1smjoa10-3-5-2";
-var pastingSuggestion = "_1smjoa1e-3-5-2";
-var searchSuggestion = "_1smjoa1c-3-5-2";
-var statementSuggestionValue = "_1smjoa1d-3-5-2";
-var suggestion = "_1smjoa13-3-5-2";
-var suggestionContent = "_1smjoa14-3-5-2";
-var suggestionText = "_1smjoa15-3-5-2";
-var suggestionsEmptyState = "_1smjoa16-3-5-2";
-var suggestionsJSONPathHint = "_1smjoa17-3-5-2";
-var suggestionsLoading = "_1smjoa18-3-5-2";
-var tooltipWrapper = "_1smjoa1a-3-5-2";
-var truncateWithinMark = "_1smjoa19-3-5-2";
-var value = "_1smjoa11-3-5-2";
-var virtualizedSuggestion = "_1smjoa12-3-5-2";
+var defaultSuggestion = "_1smjoa1c-3-6-0";
+var icon = "_1smjoa10-3-6-0";
+var matchableSuggestionDetails = "_1smjoa12-3-6-0";
+var pastingSuggestion = "_1smjoa1f-3-6-0";
+var searchSuggestion = "_1smjoa1d-3-6-0";
+var statementSuggestionValue = "_1smjoa1e-3-6-0";
+var suggestion = "_1smjoa14-3-6-0";
+var suggestionContent = "_1smjoa15-3-6-0";
+var suggestionText = "_1smjoa16-3-6-0";
+var suggestionsEmptyState = "_1smjoa17-3-6-0";
+var suggestionsJSONPathHint = "_1smjoa18-3-6-0";
+var suggestionsLoading = "_1smjoa19-3-6-0";
+var tooltipWrapper = "_1smjoa1b-3-6-0";
+var truncateWithinMark = "_1smjoa1a-3-6-0";
+var value = "_1smjoa11-3-6-0";
+var virtualizedSuggestion = "_1smjoa13-3-6-0";

package/filters/filter-field/suggestions/SuggestionDetails.css

@@ -1,7 +1,7 @@
-._tn2lgm0-3-5-2 {
+._tn2lgm0-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   min-width: 0;
 }
-._tn2lgm1-3-5-2 {
+._tn2lgm1-3-6-0 {
   display: flex;
 }

package/filters/filter-field/suggestions/SuggestionDetails.sty.js

@@ -22,5 +22,5 @@ __export(SuggestionDetails_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionDetails_css_exports);
 var import_SuggestionDetails_css_ts_vanilla = require("./SuggestionDetails.css");
-var suggestionDetails = "_tn2lgm0-3-5-2";
-var suggestionDetailsText = "_tn2lgm1-3-5-2";
+var suggestionDetails = "_tn2lgm0-3-6-0";
+var suggestionDetailsText = "_tn2lgm1-3-6-0";

package/filters/filter-field/suggestions/SuggestionGroup.css

@@ -1,4 +1,4 @@
-._1smjoa12-3-5-2:not(:first-child) > ._5cheea1-3-5-2::before {
+._1smjoa13-3-6-0:not(:first-child) > ._5cheea1-3-6-0::before {
   content: "";
   position: relative;
   display: block;
@@ -6,17 +6,17 @@
   padding-top: var(--dt-spacings-size-8, 8px);
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._5cheea2-3-5-2 {
+._5cheea2-3-6-0 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
   height: fit-content;
 }
-._5cheea2-3-5-2:not(:first-child)::before,
-    ._5cheea0-3-5-2:not(:first-child) ._5cheea2-3-5-2::before,
-    ._ssu5rt2-3-5-2:not(._5cheea0-3-5-2) ._1smjoa12-3-5-2:has(._5cheea2-3-5-2):not(:first-child) ._5cheea2-3-5-2::before,
-    ._ssu5rt2-3-5-2:not(._5cheea0-3-5-2) ._1smjoa12-3-5-2:has(._5cheea2-3-5-2):has(+ ._1smjoa12-3-5-2 > :not(._5cheea2-3-5-2)) ._5cheea2-3-5-2::after
+._5cheea2-3-6-0:not(:first-child)::before,
+    ._5cheea0-3-6-0:not(:first-child) ._5cheea2-3-6-0::before,
+    ._ssu5rt2-3-6-0:not(._5cheea0-3-6-0) ._1smjoa13-3-6-0:has(._5cheea2-3-6-0):not(:first-child) ._5cheea2-3-6-0::before,
+    ._ssu5rt2-3-6-0:not(._5cheea0-3-6-0) ._1smjoa13-3-6-0:has(._5cheea2-3-6-0):has(+ ._1smjoa13-3-6-0 > :not(._5cheea2-3-6-0)) ._5cheea2-3-6-0::after
    {
   content: "";
   position: relative;

package/filters/filter-field/suggestions/SuggestionGroup.sty.js

@@ -27,6 +27,6 @@ var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/A
 var import_virtualFocus_css_ts_vanilla = require("../../../core/styles/virtualFocus.css");
 var import_Suggestion_css_ts_vanilla = require("./Suggestion.css");
 var import_SuggestionGroup_css_ts_vanilla = require("./SuggestionGroup.css");
-var builtInSuggestionsContainer = "_5cheea0-3-5-2";
-var groupHeaderSeparator = "_5cheea1-3-5-2";
-var suggestionGroup = "_5cheea2-3-5-2";
+var builtInSuggestionsContainer = "_5cheea0-3-6-0";
+var groupHeaderSeparator = "_5cheea1-3-6-0";
+var suggestionGroup = "_5cheea2-3-6-0";

package/filters/filter-field/suggestions/SuggestionGroupLabel.css

@@ -1,4 +1,4 @@
-._1mfalko0-3-5-2 {
+._1mfalko0-3-6-0 {
   padding: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);

package/filters/filter-field/suggestions/SuggestionGroupLabel.sty.js

@@ -21,4 +21,4 @@ __export(SuggestionGroupLabel_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionGroupLabel_css_exports);
 var import_SuggestionGroupLabel_css_ts_vanilla = require("./SuggestionGroupLabel.css");
-var suggestionGroupLabel = "_1mfalko0-3-5-2";
+var suggestionGroupLabel = "_1mfalko0-3-6-0";

package/filters/filter-field/suggestions/SuggestionTips.css

@@ -1,22 +1,22 @@
-._1dx7u80-3-5-2 {
-  --_1igzksy0-3-5-2: var(--dt-borders-radius-surface-subdued, 9px);
+._1dx7u80-3-6-0 {
+  --_1igzksy0-3-6-0: var(--dt-borders-radius-surface-subdued, 9px);
 }
-._1dx7u81-3-5-2 {
+._1dx7u81-3-6-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   flex: 1;
 }
-._1dx7u82-3-5-2 {
+._1dx7u82-3-6-0 {
   width: 100%;
   overflow: hidden;
   transform-origin: center;
 }
-._1dx7u84-3-5-2 {
+._1dx7u84-3-6-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-@container _ssu5rt0-3-5-2 (max-width: 289px) {
-  ._1dx7u83-3-5-2 {
+@container _ssu5rt0-3-6-0 (max-width: 289px) {
+  ._1dx7u83-3-6-0 {
     flex-direction: column;
     width: 100%;
   }

package/filters/filter-field/suggestions/SuggestionTips.sty.js

@@ -26,8 +26,8 @@ __export(SuggestionTips_css_exports, {
 module.exports = __toCommonJS(SuggestionTips_css_exports);
 var import_SuggestionsOverlay_css_ts_vanilla = require("./SuggestionsOverlay.css");
 var import_SuggestionTips_css_ts_vanilla = require("./SuggestionTips.css");
-var docsLink = "_1dx7u84-3-5-2";
-var suggestionTips = "_1dx7u80-3-5-2";
-var suggestionTipsContent = "_1dx7u83-3-5-2";
-var suggestionTipsWrapper = "_1dx7u82-3-5-2";
-var suggstionTipsEllipsis = "_1dx7u81-3-5-2";
+var docsLink = "_1dx7u84-3-6-0";
+var suggestionTips = "_1dx7u80-3-6-0";
+var suggestionTipsContent = "_1dx7u83-3-6-0";
+var suggestionTipsWrapper = "_1dx7u82-3-6-0";
+var suggstionTipsEllipsis = "_1dx7u81-3-6-0";

package/filters/filter-field/suggestions/Suggestions.js

@@ -162,7 +162,7 @@ function SuggestionContent(props) {
       import_CSSHighlight.CSSHighlight,
       {
         term: term ?? "",
-        selector: `.${suggestionStyles.value}:not(:has(mark))`,
+        selector: `.${suggestionStyles.value}:not(:has(mark)), .${suggestionStyles.matchableSuggestionDetails}:not(:has(mark))`,
         highlightName: "filterfield-suggestions-highlight",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",

package/filters/filter-field/suggestions/SuggestionsOverlay.css

@@ -1,23 +1,23 @@
-._ssu5rt1-3-5-2 {
+._ssu5rt1-3-6-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
   container-type: inline-size;
-  container-name: _ssu5rt0-3-5-2;
+  container-name: _ssu5rt0-3-6-0;
   transform-origin: top;
 }
-._ssu5rt2-3-5-2 {
+._ssu5rt2-3-6-0 {
   box-sizing: border-box;
   padding: 0;
 }
-._ssu5rt2-3-5-2._ssu5rt2-3-5-2 {
-  --_1igzksy0-3-5-2: var(--dt-borders-radius-surface-subdued, 9px);
+._ssu5rt2-3-6-0._ssu5rt2-3-6-0 {
+  --_1igzksy0-3-6-0: var(--dt-borders-radius-surface-subdued, 9px);
 }
-._ssu5rt3-3-5-2 {
+._ssu5rt3-3-6-0 {
   overflow: hidden;
   height: 100%;
 }
-._ssu5rt4-3-5-2 {
+._ssu5rt4-3-6-0 {
   padding: var(--dt-spacings-size-4, 4px);
   height: 100%;
   max-height: 101vh;