@dynatrace/strato-components 3.5.0 → 3.6.0

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.css

@@ -1,27 +1,27 @@
-._1oehqvw3-3-5-0 {
+._1oehqvw3-3-6-0 {
   all: unset;
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw4-3-5-0 {
+._1oehqvw4-3-6-0 {
   all: unset;
   display: block;
 }
-._1oehqvw5-3-5-0._1oehqvw5-3-5-0 {
-  color: var(--_1oehqvw2-3-5-0);
+._1oehqvw5-3-6-0._1oehqvw5-3-6-0 {
+  color: var(--_1oehqvw2-3-6-0);
 }
-._1oehqvw6-3-5-0 {
+._1oehqvw6-3-6-0 {
   align-items: center;
   display: inline-block;
   text-wrap: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._1oehqvw7-3-5-0._1oehqvw7-3-5-0 {
+._1oehqvw7-3-6-0._1oehqvw7-3-6-0 {
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   padding-bottom: var(--dt-spacings-size-4, 4px);
 }
-._1oehqvw8-3-5-0::before {
+._1oehqvw8-3-6-0::before {
   content: " ";
   position: absolute;
   display: block;
@@ -32,50 +32,50 @@
   left: 0px;
   transform: translate(4px);
 }
-._1oehqvw9-3-5-0 {
-  --_1oehqvw0-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1oehqvw1-3-5-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
-  --_1oehqvw2-3-5-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+._1oehqvw9-3-6-0 {
+  --_1oehqvw0-3-6-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1oehqvw1-3-6-0: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
+  --_1oehqvw2-3-6-0: var(--dt-colors-text-neutral-subdued, #595a7d);
   grid-template-columns: 1fr max-content;
 }
-._1jgl8s50-3-5-0 ._1oehqvw9-3-5-0._1oehqvw9-3-5-0._1oehqvw9-3-5-0 {
+._1jgl8s50-3-6-0 ._1oehqvw9-3-6-0._1oehqvw9-3-6-0._1oehqvw9-3-6-0 {
   gap: 1px;
 }
-._1jgl8s50-3-5-0 ._1oehqvw9-3-5-0 {
-  --_1oehqvw0-3-5-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+._1jgl8s50-3-6-0 ._1oehqvw9-3-6-0 {
+  --_1oehqvw0-3-6-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1oehqvwa-3-5-0 {
-  --_1oehqvw0-3-5-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1oehqvw1-3-5-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
-  --_1oehqvw2-3-5-0: var(--dt-colors-text-primary-default, #464cce);
+._1oehqvwa-3-6-0 {
+  --_1oehqvw0-3-6-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1oehqvw1-3-6-0: var(--dt-colors-background-field-primary-emphasized-hover, #d5dbf6);
+  --_1oehqvw2-3-6-0: var(--dt-colors-text-primary-default, #464cce);
 }
-._1jgl8s50-3-5-0 ._1oehqvwa-3-5-0 {
-  --_1oehqvw0-3-5-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+._1jgl8s50-3-6-0 ._1oehqvwa-3-6-0 {
+  --_1oehqvw0-3-6-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
 }
-._1oehqvwb-3-5-0:hover._1oehqvwb-3-5-0:hover, ._1oehqvwb-3-5-0:focus-visible._1oehqvwb-3-5-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-5-0);
+._1oehqvwb-3-6-0:hover._1oehqvwb-3-6-0:hover, ._1oehqvwb-3-6-0:focus-visible._1oehqvwb-3-6-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-6-0);
 }
-._1oehqvwc-3-5-0._1oehqvwc-3-5-0 {
+._1oehqvwc-3-6-0._1oehqvwc-3-6-0 {
   opacity: 0;
-  background-color: var(--_1oehqvw0-3-5-0);
+  background-color: var(--_1oehqvw0-3-6-0);
 }
-._1oehqvwc-3-5-0:hover._1oehqvwc-3-5-0:hover, ._1oehqvwc-3-5-0:focus-visible._1oehqvwc-3-5-0:focus-visible {
-  background-color: var(--_1oehqvw1-3-5-0);
+._1oehqvwc-3-6-0:hover._1oehqvwc-3-6-0:hover, ._1oehqvwc-3-6-0:focus-visible._1oehqvwc-3-6-0:focus-visible {
+  background-color: var(--_1oehqvw1-3-6-0);
 }
-._1oehqvwc-3-5-0:disabled, ._1oehqvwc-3-5-0:disabled:hover._1oehqvwc-3-5-0:disabled:hover {
+._1oehqvwc-3-6-0:disabled, ._1oehqvwc-3-6-0:disabled:hover._1oehqvwc-3-6-0:disabled:hover {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: not-allowed;
 }
-._1jgl8s50-3-5-0 ._1oehqvwc-3-5-0._1oehqvwc-3-5-0._1oehqvwc-3-5-0 {
+._1jgl8s50-3-6-0 ._1oehqvwc-3-6-0._1oehqvwc-3-6-0._1oehqvwc-3-6-0 {
   margin-left: var(--dt-spacings-size-0, 0);
 }
-._1oehqvw9-3-5-0:has(button:focus-visible) ._1oehqvwc-3-5-0, ._1oehqvw9-3-5-0:hover ._1oehqvwc-3-5-0 {
+._1oehqvw9-3-6-0:has(button:focus-visible) ._1oehqvwc-3-6-0, ._1oehqvw9-3-6-0:hover ._1oehqvwc-3-6-0 {
   opacity: 1;
 }
-._1oehqvw9-3-5-0:has(._1oehqvwc-3-5-0:focus-visible) ._1oehqvwb-3-5-0, ._1oehqvw9-3-5-0:hover ._1oehqvwb-3-5-0:not(:hover) {
-  background-color: var(--_1oehqvw0-3-5-0);
+._1oehqvw9-3-6-0:has(._1oehqvwc-3-6-0:focus-visible) ._1oehqvwb-3-6-0, ._1oehqvw9-3-6-0:hover ._1oehqvwb-3-6-0:not(:hover) {
+  background-color: var(--_1oehqvw0-3-6-0);
 }
-._1oehqvw9-3-5-0 button, ._1oehqvw9-3-5-0:hover button {
+._1oehqvw9-3-6-0 button, ._1oehqvw9-3-6-0:hover button {
   transition-timing-function: unset;
   transition-duration: 0s;
   transition: none;

package/filters/segment-selector/parts/segmentsPresets/SegmentsPresets.sty.js

@@ -31,13 +31,13 @@ __export(SegmentsPresets_css_exports, {
 module.exports = __toCommonJS(SegmentsPresets_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_SegmentsPresets_css_ts_vanilla = require("./SegmentsPresets.css");
-var and = "_1oehqvw5-3-5-0";
-var buttonLabel = "_1oehqvw6-3-5-0";
-var inputGroup = "_1oehqvw9-3-5-0";
-var inputGroupSelected = "_1oehqvwa-3-5-0";
-var list = "_1oehqvw3-3-5-0";
-var listItem = "_1oehqvw4-3-5-0";
-var presetButton = "_1oehqvwb-3-5-0";
-var sectionHeadline = "_1oehqvw7-3-5-0";
-var selectionMark = "_1oehqvw8-3-5-0";
-var suffixButton = "_1oehqvwc-3-5-0";
+var and = "_1oehqvw5-3-6-0";
+var buttonLabel = "_1oehqvw6-3-6-0";
+var inputGroup = "_1oehqvw9-3-6-0";
+var inputGroupSelected = "_1oehqvwa-3-6-0";
+var list = "_1oehqvw3-3-6-0";
+var listItem = "_1oehqvw4-3-6-0";
+var presetButton = "_1oehqvwb-3-6-0";
+var sectionHeadline = "_1oehqvw7-3-6-0";
+var selectionMark = "_1oehqvw8-3-6-0";
+var suffixButton = "_1oehqvwc-3-6-0";

package/filters/segment-selector/parts/selectionBar/SegmentSelect.css

@@ -1,83 +1,83 @@
-._1fuxi5m0-3-5-0 {
+._1fuxi5m0-3-6-0 {
   grid-area: segment;
 }
-._1jgl8s50-3-5-0 ._1fuxi5m0-3-5-0 {
+._1jgl8s50-3-6-0 ._1fuxi5m0-3-6-0 {
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-5-0 ._1fuxi5m0-3-5-0:hover, ._1jgl8s50-3-5-0 ._1fuxi5m0-3-5-0:active, ._1jgl8s50-3-5-0 ._1fuxi5m0-3-5-0:focus-within {
+._1jgl8s50-3-6-0 ._1fuxi5m0-3-6-0:hover, ._1jgl8s50-3-6-0 ._1fuxi5m0-3-6-0:active, ._1jgl8s50-3-6-0 ._1fuxi5m0-3-6-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m2-3-5-0._1fuxi5m2-3-5-0 {
+._1fuxi5m2-3-6-0._1fuxi5m2-3-6-0 {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._1fuxi5m3-3-5-0 {
+._1fuxi5m3-3-6-0 {
   grid-area: variables;
 }
-._1jgl8s50-3-5-0 ._1fuxi5m3-3-5-0 {
+._1jgl8s50-3-6-0 ._1fuxi5m3-3-6-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-5-0 ._1fuxi5m3-3-5-0:hover, ._1jgl8s50-3-5-0 ._1fuxi5m3-3-5-0:active, ._1jgl8s50-3-5-0 ._1fuxi5m3-3-5-0:focus-within {
+._1jgl8s50-3-6-0 ._1fuxi5m3-3-6-0:hover, ._1jgl8s50-3-6-0 ._1fuxi5m3-3-6-0:active, ._1jgl8s50-3-6-0 ._1fuxi5m3-3-6-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m4-3-5-0 {
+._1fuxi5m4-3-6-0 {
   width: 100%;
   border-top-left-radius: 0;
 }
-._1fuxi5m5-3-5-0 {
+._1fuxi5m5-3-6-0 {
   grid-area: clear;
   grid-row-start: 1;
 }
-._1fuxi5m5-3-5-0._1fuxi5m5-3-5-0 {
+._1fuxi5m5-3-6-0._1fuxi5m5-3-6-0 {
   height: 100%;
   border-radius: 0 var(--dt-borders-radius-field-default, 6px) var(--dt-borders-radius-field-default, 6px) 0;
 }
-._1jgl8s50-3-5-0 ._1fuxi5m5-3-5-0 {
+._1jgl8s50-3-6-0 ._1fuxi5m5-3-6-0 {
   margin-left: -1px;
   position: relative;
   z-index: 0;
 }
-._1jgl8s50-3-5-0 ._1fuxi5m5-3-5-0:hover, ._1jgl8s50-3-5-0 ._1fuxi5m5-3-5-0:active, ._1jgl8s50-3-5-0 ._1fuxi5m5-3-5-0:focus-within {
+._1jgl8s50-3-6-0 ._1fuxi5m5-3-6-0:hover, ._1jgl8s50-3-6-0 ._1fuxi5m5-3-6-0:active, ._1jgl8s50-3-6-0 ._1fuxi5m5-3-6-0:focus-within {
   z-index: 1;
 }
-._1fuxi5m6-3-5-0 {
+._1fuxi5m6-3-6-0 {
   gap: var(--dt-spacings-size-2, 2px);
   width: 100%;
   grid-template-columns: 40% auto max-content;
 }
-._1jgl8s50-3-5-0 ._1fuxi5m6-3-5-0 {
+._1jgl8s50-3-6-0 ._1fuxi5m6-3-6-0 {
   gap: var(--dt-spacings-size-0, 0);
 }
-._1fuxi5m7-3-5-0 {
+._1fuxi5m7-3-6-0 {
   grid-template-areas: "segment variables clear";
 }
-._1fuxi5m8-3-5-0 {
+._1fuxi5m8-3-6-0 {
   grid-template-areas: "segment variables";
   grid-template-columns: 40% auto;
 }
-._1fuxi5m9-3-5-0 {
+._1fuxi5m9-3-6-0 {
   grid-template-areas: "segment segment clear";
 }
-._1fuxi5ma-3-5-0 {
+._1fuxi5ma-3-6-0 {
   grid-template-areas: "segment segment";
 }
 @media screen and (max-width: 640px) {
-  ._1fuxi5m1-3-5-0 {
+  ._1fuxi5m1-3-6-0 {
     border-bottom-left-radius: 0;
   }
-  ._1jgl8s50-3-5-0 ._1fuxi5m3-3-5-0 {
+  ._1jgl8s50-3-6-0 ._1fuxi5m3-3-6-0 {
     margin-left: 0;
     margin-top: -1px;
   }
-  ._1fuxi5m7-3-5-0 {
+  ._1fuxi5m7-3-6-0 {
     grid-template-areas: "segment segment clear" "variables variables clear";
   }
 }
 @media screen and (min-width: 641px) {
-  ._1fuxi5m4-3-5-0 {
+  ._1fuxi5m4-3-6-0 {
     border-bottom-left-radius: 0;
   }
 }

package/filters/segment-selector/parts/selectionBar/SegmentSelect.js

@@ -42,6 +42,9 @@ var import_Text = require("../../../../typography/text/Text.js");
 var import_SegmentsCache = require("../../contexts/SegmentsCache/SegmentsCache.js");
 var import_SegmentsUIContext = require("../../contexts/SegmentsUI/SegmentsUIContext.js");
 var import_segmentMessages = require("../../segmentMessages.js");
+function getSafeSegmentName(segment, fallback) {
+  return segment?.name && segment.name !== "" ? segment.name : fallback;
+}
 const SegmentSelect = (0, import_react.forwardRef)((props, forwardedRef) => {
   const {
     availableSegments,
@@ -108,6 +111,7 @@ const SegmentSelect = (0, import_react.forwardRef)((props, forwardedRef) => {
           });
         }
       },
+      "data-dt-name": "segment-select",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Select.Select.Trigger,
@@ -132,8 +136,8 @@ const SegmentSelect = (0, import_react.forwardRef)((props, forwardedRef) => {
             import_Select.Select.Option,
             {
               value: id,
-              textValue: cachedSegment?.segment.name ?? id,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { children: cachedSegment?.segment.name ?? id })
+              textValue: getSafeSegmentName(cachedSegment?.segment, id),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { children: getSafeSegmentName(cachedSegment?.segment, id) })
             },
             id
           ),
@@ -141,8 +145,8 @@ const SegmentSelect = (0, import_react.forwardRef)((props, forwardedRef) => {
             import_Select.Select.Option,
             {
               value: segmentOption.id,
-              textValue: segmentOption.name,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { children: segmentOption.name })
+              textValue: getSafeSegmentName(segmentOption, segmentOption.id),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { children: getSafeSegmentName(segmentOption, segmentOption.id) })
             },
             segmentOption.id
           ))

package/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.js

@@ -29,10 +29,10 @@ module.exports = __toCommonJS(SegmentSelect_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../../core/components/app-root/AppRoot.css");
 var import_SegmentSelect_css_ts_vanilla = require("./SegmentSelect.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearButtonCSS = "_1fuxi5m5-3-5-0";
-var noBorderRadiusRight = "_1fuxi5m2-3-5-0";
-var segmentsSelectCSS = "_1fuxi5m0-3-5-0";
-var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m6-3-5-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-5-0", "full-readonly": "_1fuxi5m8-3-5-0", "no-variables": "_1fuxi5m9-3-5-0", "no-variables-readonly": "_1fuxi5ma-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
-var segmentsSelectTriggerCSS = "_1fuxi5m1-3-5-0";
-var variablesSelectCSS = "_1fuxi5m3-3-5-0";
-var variablesSelectTriggerCSS = "_1fuxi5m4-3-5-0";
+var clearButtonCSS = "_1fuxi5m5-3-6-0";
+var noBorderRadiusRight = "_1fuxi5m2-3-6-0";
+var segmentsSelectCSS = "_1fuxi5m0-3-6-0";
+var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m6-3-6-0", variantClassNames: { layout: { full: "_1fuxi5m7-3-6-0", "full-readonly": "_1fuxi5m8-3-6-0", "no-variables": "_1fuxi5m9-3-6-0", "no-variables-readonly": "_1fuxi5ma-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var segmentsSelectTriggerCSS = "_1fuxi5m1-3-6-0";
+var variablesSelectCSS = "_1fuxi5m3-3-6-0";
+var variablesSelectTriggerCSS = "_1fuxi5m4-3-6-0";

package/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.css

@@ -1,3 +1,3 @@
-._1e5el1o0-3-5-0 {
+._1e5el1o0-3-6-0 {
   max-width: 400px;
 }

package/filters/segment-selector/parts/selectionBar/SegmentSelectorTrigger.sty.js

@@ -21,4 +21,4 @@ __export(SegmentSelectorTrigger_css_exports, {
 });
 module.exports = __toCommonJS(SegmentSelectorTrigger_css_exports);
 var import_SegmentSelectorTrigger_css_ts_vanilla = require("./SegmentSelectorTrigger.css");
-var trigger = "_1e5el1o0-3-5-0";
+var trigger = "_1e5el1o0-3-6-0";

package/filters/segment-selector/parts/selectionBar/ValueSelect.js

@@ -49,7 +49,7 @@ var import_TextEllipsis = require("../../../../typography/text-ellipsis/TextElli
 var import_SegmentsUIContext = require("../../contexts/SegmentsUI/SegmentsUIContext.js");
 var import_segmentMessages = require("../../segmentMessages.js");
 var import_utils = require("../../utils.js");
-var import_sendSegmentManagementAddOnIntent = require("../sendSegmentManagementAddOnIntent.js");
+var import_segmentManagementHref = require("../segmentManagementHref.js");
 const dtClientContext = JSON.stringify({
   source: "SegmentSelector",
   package: "@dynatrace/strato-components"
@@ -148,7 +148,7 @@ const ValueSelect = (props) => {
       clearable: false,
       onOpenChange: (isOpen) => {
         if (query.length > 0 && isOpen) {
-          forceRefetch();
+          forceRefetch().catch(() => void 0);
         }
       },
       value: variables,
@@ -192,6 +192,7 @@ const ValueSelect = (props) => {
           );
         }
       },
+      "data-dt-name": "segment-variable-select",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Select.Select.Trigger,
@@ -211,12 +212,20 @@ const ValueSelect = (props) => {
             showSelectedOptionsFirst: true,
             width: "trigger",
             children: [
-              !data && variables?.map((variable) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Select.Select.Option, { value: variable, children: (0, import_utils.getReadableValue)(variable, intl) }, variable)),
+              !data && variables?.map((variable) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_Select.Select.Option,
+                {
+                  value: variable,
+                  textValue: (0, import_utils.getReadableValue)(variable, intl) ?? void 0,
+                  children: (0, import_utils.getReadableValue)(variable, intl)
+                },
+                variable
+              )),
               unavailableVariables?.map((unlistedVariable) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_Select.Select.Option,
                 {
                   value: unlistedVariable,
-                  textValue: unlistedVariable ?? void 0,
+                  textValue: (0, import_utils.getReadableValue)(unlistedVariable, intl) ?? void 0,
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                     import_Grid.Grid,
                     {
@@ -243,10 +252,18 @@ const ValueSelect = (props) => {
                 },
                 unlistedVariable
               )),
-              availableVariables?.map((variable) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Select.Select.Option, { value: variable, children: [
-                " ",
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { children: (0, import_utils.getReadableValue)(variable, intl) })
-              ] }, variable)),
+              availableVariables?.map((variable) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_Select.Select.Option,
+                {
+                  value: variable,
+                  textValue: (0, import_utils.getReadableValue)(variable, intl) ?? void 0,
+                  children: [
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { children: (0, import_utils.getReadableValue)(variable, intl) })
+                  ]
+                },
+                variable
+              )),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Select.Select.EmptyState, { children: data?.records.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_react_intl.FormattedMessage,
                 {
@@ -261,14 +278,22 @@ const ValueSelect = (props) => {
                   id: "72DlIwYKB9UTEzlA",
                   description: "Empty state message if no variables for the segment are available.",
                   values: {
-                    link: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Link.Link, { onClick: import_sendSegmentManagementAddOnIntent.sendManagementAddOnIntent, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      import_react_intl.FormattedMessage,
+                    link: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_Link.Link,
                       {
-                        defaultMessage: "settings",
-                        id: "u55UYpLvXi//xGEn",
-                        description: "Link text to segments app in empty state message if no variables for the segment are available."
+                        href: (0, import_segmentManagementHref.getSegmentHref)(segment.segment.id),
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          import_react_intl.FormattedMessage,
+                          {
+                            defaultMessage: "settings",
+                            id: "u55UYpLvXi//xGEn",
+                            description: "Link text to segments app in empty state message if no variables for the segment are available."
+                          }
+                        )
                       }
-                    ) })
+                    )
                   }
                 }
               ) })

package/filters/timeframe-selector/TimeframeSelector.css

@@ -1,4 +1,8 @@
-._1sqhmjg0-3-5-0 {
+._1sqhmjg0-3-6-0 {
   min-width: 0;
   box-sizing: border-box;
+}
+._1sqhmjg1-3-6-0 {
+  display: inline-flex;
+  align-self: start;
 }

package/filters/timeframe-selector/TimeframeSelector.js

@@ -32,14 +32,13 @@ var import_timeframeSelectorMessages = require("./constants/timeframeSelectorMes
 var import_TimeframeSelectorRoot = require("./TimeframeSelectorRoot.js");
 var import_useCallbackRef = require("../../core/hooks/useCallbackRef.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
-var import_helpers = require("../../core/time/helpers.js");
 var import_timeframeSelector = require("../../core/time/timeframeStore/actions/timeframeSelector.js");
 var import_createTimeframeStore = require("../../core/time/timeframeStore/createTimeframeStore.js");
 var import_timeframeStoreProvider = require("../../core/time/timeframeStore/timeframeStoreProvider.js");
 var import_useDateTimeMessages = require("../../core/time/useDateTimeMessages.js");
 var import_useMinMax = require("../../core/time/useMinMax.js");
 var import_validation = require("../../core/time/validation.js");
-var import_helpers2 = require("../../forms/calendar/utils/helpers.js");
+var import_helpers = require("../../forms/calendar/utils/helpers.js");
 var import_useFormFieldMessagesContext = require("../../forms/forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useSyncedFormControlProps = require("../../forms/forms-core/hooks/useSyncedFormControlProps.js");
 var import_date_time = require("../../forms/forms-core/time/date-time.js");
@@ -61,12 +60,11 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
           errorMessages: import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES,
           formerError: state.timeframeSelectorError
         });
-        const valueWithPrecision = (0, import_timeParser.removePrecisionFromTimeFrame)(
+        const value = (0, import_timeParser.removePrecisionFromTimeFrame)(
           memoedValue,
           state.precision
         );
-        const value = (0, import_helpers.isFullTimeframe)(valueWithPrecision) ? valueWithPrecision : null;
-        const timeOffset = (0, import_helpers2.getTimeOffsetFromInitialValue)(
+        const timeOffset = (0, import_helpers.getTimeOffsetFromInitialValue)(
           value,
           "range",
           state.min,
@@ -101,11 +99,7 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
   (0, import_react.useEffect)(() => {
     store.setState((state) => {
       const preciseValue = isControlled ? memoedValue : state.timeframeSelectorTimeframe;
-      const valueWithPrecision = (0, import_timeParser.removePrecisionFromTimeFrame)(
-        preciseValue,
-        precision
-      );
-      const value = (0, import_helpers.isFullTimeframe)(valueWithPrecision) ? valueWithPrecision : null;
+      const value = (0, import_timeParser.removePrecisionFromTimeFrame)(preciseValue, precision);
       return {
         ...state,
         precision,
@@ -168,8 +162,7 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
       return () => debouncedOnChange.cancel();
     }, []);
     const [initialState] = (0, import_react.useState)(() => {
-      const _value = isControlled ? memoedValue : memoedDefaultValue;
-      const value = (0, import_helpers.isFullTimeframe)(_value) ? _value : null;
+      const value = isControlled ? memoedValue : memoedDefaultValue;
       const error = (0, import_validation.validate)(value, min, max, {
         formMessageDispatch: formFieldMessagesDispatch,
         precision,
@@ -181,7 +174,7 @@ const _TimeframeSelector = (0, import_react.forwardRef)(
         required,
         errorMessages: import_timeframeSelectorMessages.TIMEFRAMESELECTOR_ERROR_MESSAGES
       });
-      const timeOffset = (0, import_helpers2.getTimeOffsetFromInitialValue)(
+      const timeOffset = (0, import_helpers.getTimeOffsetFromInitialValue)(
         value,
         "range",
         min,

package/filters/timeframe-selector/TimeframeSelector.sty.d.ts

@@ -1 +1,2 @@
 export declare const displayValueParts: string;
+export declare const root: string;

package/filters/timeframe-selector/TimeframeSelector.sty.js

@@ -17,8 +17,10 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TimeframeSelector_css_exports = {};
 __export(TimeframeSelector_css_exports, {
-  displayValueParts: () => displayValueParts
+  displayValueParts: () => displayValueParts,
+  root: () => root
 });
 module.exports = __toCommonJS(TimeframeSelector_css_exports);
 var import_TimeframeSelector_css_ts_vanilla = require("./TimeframeSelector.css");
-var displayValueParts = "_1sqhmjg0-3-5-0";
+var displayValueParts = "_1sqhmjg0-3-6-0";
+var root = "_1sqhmjg1-3-6-0";

package/filters/timeframe-selector/TimeframeSelectorRoot.js

@@ -1,6 +1,8 @@
+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)
@@ -14,6 +16,14 @@ 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 TimeframeSelectorRoot_exports = {};
 __export(TimeframeSelectorRoot_exports, {
@@ -21,6 +31,7 @@ __export(TimeframeSelectorRoot_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelectorRoot_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_TimeframeSelectorOverlay = require("./components/overlay/TimeframeSelectorOverlay.js");
@@ -32,6 +43,7 @@ var import_CustomTrigger = require("./components/trigger/CustomTrigger.js");
 var import_Trigger = require("./components/trigger/Trigger.js");
 var import_timeframeSelectorMessages = require("./constants/timeframeSelectorMessages.js");
 var import_TimeframeSelectorContext = require("./contexts/TimeframeSelectorContext.js");
+var styles = __toESM(require("./TimeframeSelector.sty.js"));
 var import_getTimeframeDisplayValueProps = require("./utils/getTimeframeDisplayValueProps.js");
 var import_presets_helpers = require("./utils/presets-helpers.js");
 var import_TimeframePresetsClient = require("./utils/TimeframePresetsClient.js");
@@ -168,7 +180,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
     import_TimeframePresetsClient.timeframeQueryClient.prefetchQuery({
       queryKey: import_TimeframePresetsClient.TIMEFRAME_PRESETS_QUERY_KEY,
       queryFn: import_presets_helpers.getTimeframePresets
-    });
+    }).catch(() => void 0);
   }, []);
   const details = (0, import_react.useMemo)(() => {
     const { from, to } = (0, import_timeParser.parseValue)(value);
@@ -324,7 +336,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       ref: containerRef,
-      className: consumerClassName,
+      className: (0, import_clsx.default)(consumerClassName, styles.root),
       style: consumerStyle,
       ...remainingProps,
       "data-dt-component": "TimeframeSelector",
@@ -374,7 +386,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_InputGroup.InputGroup, { style: { gridAutoColumns: "auto max-content max-content" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_InputGroup.InputGroup, { style: { gridAutoColumns: "1fr max-content max-content" }, children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_TimeframeSelectorTooltip.TimeframeSelectorTooltip,
             {

package/filters/timeframe-selector/components/TimeframeSelectorTooltip.d.ts

@@ -1,11 +1,11 @@
 import { type ReactElement, type JSX } from 'react';
+import type { TimeframeSelectorState } from '../../../core/time/timeframeStore/timeframeSelector.types.js';
 import type { FormControlBaseProps } from '../../../core/types/form-control-props.js';
-import type { Timeframe } from '../../../core/types/time.js';
 interface TimeframeSelectorTooltipProps extends FormControlBaseProps {
     /** Single child of the tooltip considered to trigger the tooltip element. */
     children: ReactElement;
     /** The value of the timeframe selector, containing the 'from' and 'to' timeframe details. */
-    value: Timeframe | null;
+    value: TimeframeSelectorState['timeframeSelectorTimeframe'];
     /** Displayed Value at the trigger. */
     displayValue: string | JSX.Element;
 }

package/filters/timeframe-selector/components/TimeframeSelectorTooltip.js

@@ -45,7 +45,7 @@ const TimeframeSelectorTooltip = (props) => {
     isInvalid
   } = (0, import_useTooltipMessages.useTooltipMessages)(value);
   const onOpenTooltip = (0, import_react.useCallback)(
-    async (open) => {
+    (open) => {
       if (open) {
         setTooltipTimeValues({
           tooltipFormattedTimeValueStart,

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css

@@ -1,4 +1,4 @@
-._at2xro0-3-5-0 {
+._at2xro0-3-6-0 {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7,7 +7,7 @@
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
 }
-._at2xro1-3-5-0 {
+._at2xro1-3-6-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-8, 8px);
@@ -18,14 +18,14 @@
   width: 100%;
   flex-direction: column;
 }
-._at2xro2-3-5-0 {
+._at2xro2-3-6-0 {
   flex-direction: column;
   flex: 1;
   min-width: var(--dt-spacings-size-0, 0);
   gap: var(--dt-spacings-size-4, 4px);
 }
 @media screen and (min-width: 640px) {
-  ._at2xro1-3-5-0 {
+  ._at2xro1-3-6-0 {
     flex-direction: row;
   }
 }

package/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.js

@@ -155,6 +155,10 @@ const CustomTimeframeSelector = () => {
     ref
   ]);
   const handleApply = (0, import_react.useCallback)(() => {
+    dispatch({
+      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
     if (dateTimeRangePickerError) {
       return;
     }