@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var useShowMore_exports = {};
 __export(useShowMore_exports, {
@@ -32,15 +22,14 @@ __export(useShowMore_exports, {
 });
 module.exports = __toCommonJS(useShowMore_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_useId = require("../../../core/hooks/useId.js");
+var import_getVirtualFocusStyles = require("../../../core/styles/getVirtualFocusStyles.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_messages = require("../messages.js");
 var import_useFilterFieldContext = require("./useFilterFieldContext.js");
-var styles = __toESM(require("../suggestions/RecentPinnedSuggestionItem.sty.js"));
 var import_get_next_suggestion = require("../utils/get-next-suggestion.js");
 function useShowMore(props) {
   const { items, primaryCount, sliceFn: _propSliceFn } = props;
@@ -83,16 +72,9 @@ function useShowMore(props) {
       "data-strato-filter-field-virtual-focus-type": "button",
       "data-dt-name": "ShowMoreLess",
       "data-dt-properties": `state:${isExpanded ? "less" : "more"}`,
-      className: (0, import_clsx.default)(styles.showMoreButton, {
-        "virtual-focus": id === focusedListItem?.id
-      }),
+      className: (0, import_getVirtualFocusStyles.getVirtualFocusStyles)(id === focusedListItem?.id).className,
       width: "full",
       textAlign: "start",
-      style: {
-        transitionTimingFunction: "none",
-        transitionDuration: "0s",
-        transition: "none"
-      },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { gap: 2, as: "span", paddingLeft: 4, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_react_intl.FormattedMessage,

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

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

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

@@ -1,4 +1,2 @@
 export declare const recentSuggestion: string;
-export declare const pinButton: string;
 export declare const suggestionPin: string;
-export declare const showMoreButton: string;

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

@@ -17,17 +17,15 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var RecentPinnedSuggestionItem_css_exports = {};
 __export(RecentPinnedSuggestionItem_css_exports, {
-  pinButton: () => pinButton,
   recentSuggestion: () => recentSuggestion,
-  showMoreButton: () => showMoreButton,
   suggestionPin: () => suggestionPin
 });
 module.exports = __toCommonJS(RecentPinnedSuggestionItem_css_exports);
 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 import_SuggestionDetails_css_ts_vanilla = require("./SuggestionDetails.css");
 var import_RecentPinnedSuggestionItem_css_ts_vanilla = require("./RecentPinnedSuggestionItem.css");
-var pinButton = "_vt0w9g1-3-4-0";
-var recentSuggestion = "_vt0w9g0-3-4-0";
-var showMoreButton = "_vt0w9g3-3-4-0";
-var suggestionPin = "_vt0w9g2-3-4-0";
+var recentSuggestion = "_vt0w9g0-3-5-0";
+var suggestionPin = "_vt0w9g1-3-5-0";

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

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

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

@@ -43,6 +43,7 @@ var import_Chip = require("../../../content/chip/Chip.js");
 var import_useId = require("../../../core/hooks/useId.js");
 var import_useMergeRefs = require("../../../core/hooks/useMergeRefs.js");
 var import_useSlots = require("../../../core/hooks/useSlots.js");
+var import_getVirtualFocusStyles = require("../../../core/styles/getVirtualFocusStyles.js");
 var import_can_receive_default_text_format = require("../../../core/utils/can-receive-default-text-format.js");
 var import_Flex = require("../../../layouts/flex/Flex.js");
 var import_Grid = require("../../../layouts/grid/Grid.js");
@@ -307,9 +308,7 @@ const Suggestion = (0, import_react2.forwardRef)((props, forwardedRef) => {
                 rowGap: 0,
                 className: (0, import_clsx.default)(
                   styles.suggestionContent,
-                  {
-                    "virtual-focus": isFocused
-                  },
+                  (0, import_getVirtualFocusStyles.getVirtualFocusStyles)(!!isFocused).className,
                   id === "strato-filterfield-suggestion-pasted-content" ? styles.pastingSuggestion : {}
                 ),
                 paddingLeft: icon ? 8 : 12,

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

@@ -35,19 +35,21 @@ __export(Suggestion_css_exports, {
 });
 module.exports = __toCommonJS(Suggestion_css_exports);
 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-4-0";
-var icon = "_1smjoa10-3-4-0";
-var pastingSuggestion = "_1smjoa1e-3-4-0";
-var searchSuggestion = "_1smjoa1c-3-4-0";
-var statementSuggestionValue = "_1smjoa1d-3-4-0";
-var suggestion = "_1smjoa13-3-4-0";
-var suggestionContent = "_1smjoa14-3-4-0";
-var suggestionText = "_1smjoa15-3-4-0";
-var suggestionsEmptyState = "_1smjoa16-3-4-0";
-var suggestionsJSONPathHint = "_1smjoa17-3-4-0";
-var suggestionsLoading = "_1smjoa18-3-4-0";
-var tooltipWrapper = "_1smjoa1a-3-4-0";
-var truncateWithinMark = "_1smjoa19-3-4-0";
-var value = "_1smjoa11-3-4-0";
-var virtualizedSuggestion = "_1smjoa12-3-4-0";
+var defaultSuggestion = "_1smjoa1b-3-5-0";
+var icon = "_1smjoa10-3-5-0";
+var pastingSuggestion = "_1smjoa1e-3-5-0";
+var searchSuggestion = "_1smjoa1c-3-5-0";
+var statementSuggestionValue = "_1smjoa1d-3-5-0";
+var suggestion = "_1smjoa13-3-5-0";
+var suggestionContent = "_1smjoa14-3-5-0";
+var suggestionText = "_1smjoa15-3-5-0";
+var suggestionsEmptyState = "_1smjoa16-3-5-0";
+var suggestionsJSONPathHint = "_1smjoa17-3-5-0";
+var suggestionsLoading = "_1smjoa18-3-5-0";
+var tooltipWrapper = "_1smjoa1a-3-5-0";
+var truncateWithinMark = "_1smjoa19-3-5-0";
+var value = "_1smjoa11-3-5-0";
+var virtualizedSuggestion = "_1smjoa12-3-5-0";

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

@@ -1,7 +1,7 @@
-._tn2lgm0-3-4-0 {
+._tn2lgm0-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   min-width: 0;
 }
-._tn2lgm1-3-4-0 {
+._tn2lgm1-3-5-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-4-0";
-var suggestionDetailsText = "_tn2lgm1-3-4-0";
+var suggestionDetails = "_tn2lgm0-3-5-0";
+var suggestionDetailsText = "_tn2lgm1-3-5-0";

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

@@ -1,4 +1,4 @@
-._1smjoa12-3-4-0:not(:first-child) > ._5cheea1-3-4-0::before {
+._1smjoa12-3-5-0:not(:first-child) > ._5cheea1-3-5-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-4-0 {
+._5cheea2-3-5-0 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
   height: fit-content;
 }
-._5cheea2-3-4-0:not(:first-child)::before,
-    ._5cheea0-3-4-0:not(:first-child) ._5cheea2-3-4-0::before,
-    ._ssu5rt2-3-4-0:not(._5cheea0-3-4-0) ._1smjoa12-3-4-0:has(._5cheea2-3-4-0):not(:first-child) ._5cheea2-3-4-0::before,
-    ._ssu5rt2-3-4-0:not(._5cheea0-3-4-0) ._1smjoa12-3-4-0:has(._5cheea2-3-4-0):has(+ ._1smjoa12-3-4-0 > :not(._5cheea2-3-4-0)) ._5cheea2-3-4-0::after
+._5cheea2-3-5-0:not(:first-child)::before,
+    ._5cheea0-3-5-0:not(:first-child) ._5cheea2-3-5-0::before,
+    ._ssu5rt2-3-5-0:not(._5cheea0-3-5-0) ._1smjoa12-3-5-0:has(._5cheea2-3-5-0):not(:first-child) ._5cheea2-3-5-0::before,
+    ._ssu5rt2-3-5-0:not(._5cheea0-3-5-0) ._1smjoa12-3-5-0:has(._5cheea2-3-5-0):has(+ ._1smjoa12-3-5-0 > :not(._5cheea2-3-5-0)) ._5cheea2-3-5-0::after
    {
   content: "";
   position: relative;

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

@@ -23,8 +23,10 @@ __export(SuggestionGroup_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionGroup_css_exports);
 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 import_SuggestionGroup_css_ts_vanilla = require("./SuggestionGroup.css");
-var builtInSuggestionsContainer = "_5cheea0-3-4-0";
-var groupHeaderSeparator = "_5cheea1-3-4-0";
-var suggestionGroup = "_5cheea2-3-4-0";
+var builtInSuggestionsContainer = "_5cheea0-3-5-0";
+var groupHeaderSeparator = "_5cheea1-3-5-0";
+var suggestionGroup = "_5cheea2-3-5-0";

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

@@ -1,4 +1,4 @@
-._1mfalko0-3-4-0 {
+._1mfalko0-3-5-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-4-0";
+var suggestionGroupLabel = "_1mfalko0-3-5-0";

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

@@ -37,6 +37,8 @@ var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_strato_icons = require("@dynatrace/strato-icons");
 var import_Button = require("../../../buttons/button/Button.js");
+var import_getVirtualFocusStyles = require("../../../core/styles/getVirtualFocusStyles.js");
+var import_virtualFocus_css = require("../../../core/styles/virtualFocus.sty.js");
 var import_Tooltip = require("../../../overlays/tooltip/Tooltip.js");
 var import_FilterFieldContext = require("../contexts/FilterFieldContext.js");
 var import_usePinnedFilters = require("../hooks/recent-and-pinned/usePinnedFilters.js");
@@ -96,7 +98,7 @@ function SuggestionPin(props) {
     const classListObserver = new MutationObserver((entries) => {
       for (const entry of entries) {
         if (entry.target === buttonRef.current && entry.target instanceof HTMLElement) {
-          if (entry.target.classList.contains("virtual-focus")) {
+          if (entry.target.classList.contains(import_virtualFocus_css.virtualFocus.neutral)) {
             setTooltipOpen(true);
           } else {
             setTooltipOpen(false);
@@ -142,9 +144,10 @@ function SuggestionPin(props) {
           "aria-label": ariaDisabled ? disabledTooltip : pinUnpinLabel,
           "aria-disabled": ariaDisabledProps || ariaDisabled,
           color: showError ? "critical" : "neutral",
-          className: (0, import_clsx.default)(className, {
-            "virtual-focus": focusedListItem?.id === id
-          }),
+          className: (0, import_clsx.default)(
+            className,
+            (0, import_getVirtualFocusStyles.getVirtualFocusStyles)(focusedListItem?.id === id).className
+          ),
           onPointerDown: (event) => {
             event.preventDefault();
             event.stopPropagation();

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

@@ -1,22 +1,22 @@
-._1dx7u80-3-4-0 {
-  --_1igzksy0-3-4-0: var(--dt-borders-radius-surface-subdued, 9px);
+._1dx7u80-3-5-0 {
+  --_1igzksy0-3-5-0: var(--dt-borders-radius-surface-subdued, 9px);
 }
-._1dx7u81-3-4-0 {
+._1dx7u81-3-5-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   flex: 1;
 }
-._1dx7u82-3-4-0 {
+._1dx7u82-3-5-0 {
   width: 100%;
   overflow: hidden;
   transform-origin: center;
 }
-._1dx7u84-3-4-0 {
+._1dx7u84-3-5-0 {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-@container _ssu5rt0-3-4-0 (max-width: 289px) {
-  ._1dx7u83-3-4-0 {
+@container _ssu5rt0-3-5-0 (max-width: 289px) {
+  ._1dx7u83-3-5-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-4-0";
-var suggestionTips = "_1dx7u80-3-4-0";
-var suggestionTipsContent = "_1dx7u83-3-4-0";
-var suggestionTipsWrapper = "_1dx7u82-3-4-0";
-var suggstionTipsEllipsis = "_1dx7u81-3-4-0";
+var docsLink = "_1dx7u84-3-5-0";
+var suggestionTips = "_1dx7u80-3-5-0";
+var suggestionTipsContent = "_1dx7u83-3-5-0";
+var suggestionTipsWrapper = "_1dx7u82-3-5-0";
+var suggstionTipsEllipsis = "_1dx7u81-3-5-0";

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

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

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

@@ -25,8 +25,8 @@ __export(SuggestionsOverlay_css_exports, {
 });
 module.exports = __toCommonJS(SuggestionsOverlay_css_exports);
 var import_SuggestionsOverlay_css_ts_vanilla = require("./SuggestionsOverlay.css");
-var suggestionsOverlay = "_ssu5rt2-3-4-0";
-var suggestionsOverlayWrapper = "_ssu5rt1-3-4-0";
-var suggestionsOverlayWrapperContainer = "_ssu5rt0-3-4-0";
-var suggestionsScrollContainer = "_ssu5rt4-3-4-0";
-var suggestionsScrollContainerWrapper = "_ssu5rt3-3-4-0";
+var suggestionsOverlay = "_ssu5rt2-3-5-0";
+var suggestionsOverlayWrapper = "_ssu5rt1-3-5-0";
+var suggestionsOverlayWrapperContainer = "_ssu5rt0-3-5-0";
+var suggestionsScrollContainer = "_ssu5rt4-3-5-0";
+var suggestionsScrollContainerWrapper = "_ssu5rt3-3-5-0";

package/filters/filter-field/utils/suggestions-utils/key-suggestions.js

@@ -106,7 +106,9 @@ function getKeySuggestions(internalValidatorMap, suggestionTypes = [], customTyp
       keySuggestion = {
         value: key,
         icon: getIconForValueType("Any"),
-        suggestionType: "validatorMap"
+        suggestionType: "validatorMap",
+        displayValue,
+        details
       };
     } else {
       keySuggestion = {

package/filters/segment-selector/SegmentSelector.css

@@ -1,22 +1,22 @@
-._11m6jkl0-3-4-0 {
+._11m6jkl0-3-5-0 {
   all: unset;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-8, 8px);
 }
-._11m6jkl1-3-4-0 {
+._11m6jkl1-3-5-0 {
   all: unset;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._11m6jkl2-3-4-0 {
+._11m6jkl2-3-5-0 {
   max-height: 100px;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._11m6jkl3-3-4-0 > div {
+._11m6jkl3-3-5-0 > div {
   padding-right: var(--dt-spacings-size-0, 0);
 }

package/filters/segment-selector/SegmentSelector.sty.js

@@ -24,7 +24,7 @@ __export(SegmentSelector_css_exports, {
 });
 module.exports = __toCommonJS(SegmentSelector_css_exports);
 var import_SegmentSelector_css_ts_vanilla = require("./SegmentSelector.css");
-var overwriteTooltipElementPadding = "_11m6jkl3-3-4-0";
-var segmentSelectorList = "_11m6jkl0-3-4-0";
-var segmentSelectorListItem = "_11m6jkl1-3-4-0";
-var tooltipMaxHeight = "_11m6jkl2-3-4-0";
+var overwriteTooltipElementPadding = "_11m6jkl3-3-5-0";
+var segmentSelectorList = "_11m6jkl0-3-5-0";
+var segmentSelectorListItem = "_11m6jkl1-3-5-0";
+var tooltipMaxHeight = "_11m6jkl2-3-5-0";

package/filters/segment-selector/parts/EmptySegments.css

@@ -1,4 +1,4 @@
-._awal5d0-3-4-0._awal5d0-3-4-0 {
+._awal5d0-3-5-0._awal5d0-3-5-0 {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);

package/filters/segment-selector/parts/EmptySegments.sty.js

@@ -21,4 +21,4 @@ __export(EmptySegments_css_exports, {
 });
 module.exports = __toCommonJS(EmptySegments_css_exports);
 var import_EmptySegments_css_ts_vanilla = require("./EmptySegments.css");
-var AppLinkButtonCSS = "_awal5d0-3-4-0";
+var AppLinkButtonCSS = "_awal5d0-3-5-0";

package/filters/segment-selector/parts/Overlay.css

@@ -1,10 +1,10 @@
-._bqi6d90-3-4-0 {
+._bqi6d90-3-5-0 {
   height: 15px;
   align-self: center;
   margin-right: var(--dt-spacings-size-2, 2px);
   margin-left: var(--dt-spacings-size-8, 8px);
 }
-._bqi6d91-3-4-0._bqi6d91-3-4-0 {
+._bqi6d91-3-5-0._bqi6d91-3-5-0 {
   display: flex;
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -14,24 +14,24 @@
   text-transform: var(--dt-typography-text-base-emphasized-text-transform, none);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._bqi6d92-3-4-0 {
+._bqi6d92-3-5-0 {
   max-width: 480px;
   min-width: 320px;
   box-sizing: border-box;
   overflow: hidden;
 }
-._bqi6d93-3-4-0 {
+._bqi6d93-3-5-0 {
   max-height: 396px;
   overflow: auto;
   box-sizing: border-box;
 }
-._bqi6d93-3-4-0 ._bqi6d94-3-4-0 {
+._bqi6d93-3-5-0 ._bqi6d94-3-5-0 {
   overflow: hidden;
 }
-._bqi6d95-3-4-0 {
+._bqi6d95-3-5-0 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
 }
-._bqi6d96-3-4-0._bqi6d96-3-4-0 {
+._bqi6d96-3-5-0._bqi6d96-3-5-0 {
   font-family: var(--dt-typography-text-small-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-small-default-size, 12px);
   font-weight: var(--dt-typography-text-small-emphasized-weight, 500);
@@ -40,6 +40,6 @@
   text-decoration: var(--dt-typography-text-small-emphasized-text-decoration, none);
   margin-bottom: var(--dt-spacings-size-4, 4px);
 }
-._bqi6d97-3-4-0 > fieldset > div {
+._bqi6d97-3-5-0 > fieldset > div {
   gap: var(--dt-spacings-size-8, 8px);
 }