@dynatrace/strato-components 3.4.0 → 3.5.0

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

@@ -28,11 +28,11 @@ __export(Overlay_css_exports, {
 });
 module.exports = __toCommonJS(Overlay_css_exports);
 var import_Overlay_css_ts_vanilla = require("./Overlay.css");
-var divider = "_bqi6d90-3-4-0";
-var fieldSet = "_bqi6d97-3-4-0";
-var isAnimating = "_bqi6d94-3-4-0";
-var legend = "_bqi6d96-3-4-0";
-var link = "_bqi6d95-3-4-0";
-var menuLink = "_bqi6d91-3-4-0";
-var overlayDefaultWidth = "_bqi6d92-3-4-0";
-var scrollContainer = "_bqi6d93-3-4-0";
+var divider = "_bqi6d90-3-5-0";
+var fieldSet = "_bqi6d97-3-5-0";
+var isAnimating = "_bqi6d94-3-5-0";
+var legend = "_bqi6d96-3-5-0";
+var link = "_bqi6d95-3-5-0";
+var menuLink = "_bqi6d91-3-5-0";
+var overlayDefaultWidth = "_bqi6d92-3-5-0";
+var scrollContainer = "_bqi6d93-3-5-0";

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

@@ -1,17 +1,17 @@
-._7mq3is0-3-4-0 {
+._7mq3is0-3-5-0 {
   all: unset;
   padding: 0;
   width: 100%;
   transition: height var(--dt-animations-expand-collapse-duration-fast, 250ms) var(--dt-animations-expand-collapse-easing, cubic-bezier(0.4, 0, 0.2, 1));
 }
-._7mq3is1-3-4-0 {
+._7mq3is1-3-5-0 {
   height: 0;
   opacity: 0;
 }
-._7mq3is2-3-4-0 {
+._7mq3is2-3-5-0 {
   height: auto;
   opacity: 1;
 }
-._7mq3is3-3-4-0 {
+._7mq3is3-3-5-0 {
   all: unset;
 }

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

@@ -24,7 +24,7 @@ __export(ShowMorePanel_css_exports, {
 });
 module.exports = __toCommonJS(ShowMorePanel_css_exports);
 var import_ShowMorePanel_css_ts_vanilla = require("./ShowMorePanel.css");
-var expandableWrapper = "_7mq3is0-3-4-0";
-var expandableWrapperCollapsed = "_7mq3is1-3-4-0";
-var expandableWrapperExpanded = "_7mq3is2-3-4-0";
-var list = "_7mq3is3-3-4-0";
+var expandableWrapper = "_7mq3is0-3-5-0";
+var expandableWrapperCollapsed = "_7mq3is1-3-5-0";
+var expandableWrapperExpanded = "_7mq3is2-3-5-0";
+var list = "_7mq3is3-3-5-0";

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

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

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

@@ -29,14 +29,15 @@ __export(SegmentsPresets_css_exports, {
   suffixButton: () => suffixButton
 });
 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-4-0";
-var buttonLabel = "_1oehqvw6-3-4-0";
-var inputGroup = "_1oehqvw9-3-4-0";
-var inputGroupSelected = "_1oehqvwa-3-4-0";
-var list = "_1oehqvw3-3-4-0";
-var listItem = "_1oehqvw4-3-4-0";
-var presetButton = "_1oehqvwb-3-4-0";
-var sectionHeadline = "_1oehqvw7-3-4-0";
-var selectionMark = "_1oehqvw8-3-4-0";
-var suffixButton = "_1oehqvwc-3-4-0";
+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";

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

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

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

@@ -34,7 +34,7 @@ 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_SegmentSelect_css = require("./SegmentSelect.sty.js");
+var styles = __toESM(require("./SegmentSelect.sty.js"));
 var import_useMergeRefs = require("../../../../core/hooks/useMergeRefs.js");
 var import_is_node_environment = require("../../../../core/utils/is-node-environment.js");
 var import_Select = require("../../../../forms/select/Select.js");
@@ -75,7 +75,7 @@ const SegmentSelect = (0, import_react.forwardRef)((props, forwardedRef) => {
     import_Select.Select,
     {
       ref: mergedRef,
-      style: { gridArea: "segment" },
+      className: styles.segmentsSelectCSS,
       value: id,
       id,
       required: !isPlaceholder,
@@ -114,7 +114,7 @@ const SegmentSelect = (0, import_react.forwardRef)((props, forwardedRef) => {
           {
             width: "full",
             className: (0, import_clsx.default)(triggerClassName, {
-              [import_SegmentSelect_css.segmentsSelectCSS]: cachedSegment?.segment?.variables
+              [styles.segmentsSelectTriggerCSS]: cachedSegment?.segment?.variables
             }),
             placeholder: intl.formatMessage(
               import_segmentMessages.SEGMENTSELECTOR_MESSAGES.segmentsTriggerPlaceholder

package/filters/segment-selector/parts/selectionBar/SegmentSelect.sty.d.ts

@@ -1,6 +1,8 @@
-export declare const variablesSelectCSS: string;
 export declare const segmentsSelectCSS: string;
+export declare const segmentsSelectTriggerCSS: string;
 export declare const noBorderRadiusRight: string;
+export declare const variablesSelectCSS: string;
+export declare const variablesSelectTriggerCSS: string;
 export declare const clearButtonCSS: string;
 export declare const segmentsSelectGridCSS: import("@vanilla-extract/recipes").RuntimeFn<{
     layout: {

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

@@ -21,13 +21,18 @@ __export(SegmentSelect_css_exports, {
   noBorderRadiusRight: () => noBorderRadiusRight,
   segmentsSelectCSS: () => segmentsSelectCSS,
   segmentsSelectGridCSS: () => segmentsSelectGridCSS,
-  variablesSelectCSS: () => variablesSelectCSS
+  segmentsSelectTriggerCSS: () => segmentsSelectTriggerCSS,
+  variablesSelectCSS: () => variablesSelectCSS,
+  variablesSelectTriggerCSS: () => variablesSelectTriggerCSS
 });
 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 = "_1fuxi5m3-3-4-0";
-var noBorderRadiusRight = "_1fuxi5m2-3-4-0";
-var segmentsSelectCSS = "_1fuxi5m1-3-4-0";
-var segmentsSelectGridCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1fuxi5m4-3-4-0", variantClassNames: { layout: { full: "_1fuxi5m5-3-4-0", "full-readonly": "_1fuxi5m6-3-4-0", "no-variables": "_1fuxi5m7-3-4-0", "no-variables-readonly": "_1fuxi5m8-3-4-0" } }, defaultVariants: {}, compoundVariants: [] });
-var variablesSelectCSS = "_1fuxi5m0-3-4-0";
+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";

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

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

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

@@ -37,7 +37,7 @@ var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
 var import_react_hooks = require("@dynatrace-sdk/react-hooks");
-var import_SegmentSelect_css = require("./SegmentSelect.sty.js");
+var styles = __toESM(require("./SegmentSelect.sty.js"));
 var import_StratoLoggerContext = require("../../../../core/sdk/StratoLoggerContext.js");
 var import_useFormFieldMessagesContext = require("../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js");
 var import_formfield_messages_state_reducer = require("../../../../forms/forms-core/state/formfield-messages-state-reducer.js");
@@ -142,7 +142,7 @@ const ValueSelect = (props) => {
     {
       ref: variableSelectRef,
       multiple: true,
-      style: { gridArea: "variables" },
+      className: styles.variablesSelectCSS,
       required: true,
       readOnly: readOnly || segment?.temporarilyApplied,
       clearable: false,
@@ -196,7 +196,7 @@ const ValueSelect = (props) => {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Select.Select.Trigger,
           {
-            className: (0, import_clsx.default)(import_SegmentSelect_css.variablesSelectCSS, triggerClassName),
+            className: (0, import_clsx.default)(styles.variablesSelectTriggerCSS, triggerClassName),
             placeholder: intl.formatMessage(
               import_segmentMessages.SEGMENTSELECTOR_MESSAGES.segmentsVariableTriggerPlaceholder
             ),

package/filters/timeframe-selector/TimeframeSelector.css

@@ -1,4 +1,4 @@
-._1sqhmjg0-3-4-0 {
+._1sqhmjg0-3-5-0 {
   min-width: 0;
   box-sizing: border-box;
 }

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

@@ -21,4 +21,4 @@ __export(TimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelector_css_exports);
 var import_TimeframeSelector_css_ts_vanilla = require("./TimeframeSelector.css");
-var displayValueParts = "_1sqhmjg0-3-4-0";
+var displayValueParts = "_1sqhmjg0-3-5-0";

package/filters/timeframe-selector/TimeframeSelectorRoot.js

@@ -204,11 +204,7 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
     "aria-describedby": ariaDescribedByProp,
     "aria-details": ariaDetailsProp
   };
-  const { ariaProps: ariaFormProps, onBlur } = (0, import_useFormFieldValidation.useFormFieldValidation)(
-    fromInputRef,
-    {},
-    ariaLabelingProps
-  );
+  const ariaFormProps = (0, import_useFormFieldValidation.useFormFieldValidationAriaProps)(ariaLabelingProps);
   (0, import_react.useImperativeHandle)(
     forwardedRef,
     () => ({
@@ -269,9 +265,13 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
   ]);
   const handleOnBlur = (0, import_react.useCallback)(() => {
     if (!overlayState.isOpen) {
-      onBlur();
+      fromInputRef.current?.reportValidity();
+      formFieldMessagesDispatch?.({
+        type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+        payload: { isTouched: true }
+      });
     }
-  }, [onBlur, overlayState.isOpen]);
+  }, [overlayState.isOpen, formFieldMessagesDispatch]);
   const triggerProps = (0, import_react.useMemo)(
     () => ({
       disabled,
@@ -301,9 +301,11 @@ const TimeframeSelectorRoot = (0, import_react.forwardRef)((props, forwardedRef)
       triggerProps,
       hint: displayValueHint,
       readOnly,
-      showError: formControlStateError || formFieldMessagesState.showError
+      showError: formControlStateError || formFieldMessagesState.showError,
+      disabled
     }),
     [
+      disabled,
       details,
       readOnly,
       displayValue,

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

@@ -1,4 +1,4 @@
-._at2xro0-3-4-0 {
+._at2xro0-3-5-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-4-0 {
+._at2xro1-3-5-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-4-0 {
+._at2xro2-3-5-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-4-0 {
+  ._at2xro1-3-5-0 {
     flex-direction: row;
   }
 }

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

@@ -342,7 +342,18 @@ const CustomTimeframeSelector = () => {
                   ref,
                   id: dateTimeRangePickerId,
                   required: required || contextRequired,
-                  style: { gridTemplateColumns: "1fr auto" }
+                  style: { gridTemplateColumns: "1fr auto" },
+                  onBlur: (event) => {
+                    const hasPresetItemSelected = event.relatedTarget?.getAttribute("role") === "option";
+                    const isActiveElementInside = ref.current?.element?.contains(document.activeElement);
+                    if (hasPresetItemSelected || isActiveElementInside) {
+                      return;
+                    }
+                    dispatch({
+                      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+                      payload: { isTouched: true }
+                    });
+                  }
                 }
               ),
               isScreenLargerThanMobile && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -23,6 +23,6 @@ __export(CustomTimeframeSelector_css_exports, {
 });
 module.exports = __toCommonJS(CustomTimeframeSelector_css_exports);
 var import_CustomTimeframeSelector_css_ts_vanilla = require("./CustomTimeframeSelector.css");
-var fieldset = "_at2xro0-3-4-0";
-var overlayRoot = "_at2xro1-3-4-0";
-var wrapper = "_at2xro2-3-4-0";
+var fieldset = "_at2xro0-3-5-0";
+var overlayRoot = "_at2xro1-3-5-0";
+var wrapper = "_at2xro2-3-5-0";

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css

@@ -1,4 +1,4 @@
-._14xc6b0-3-4-0 {
+._14xc6b0-3-5-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -9,18 +9,18 @@
   min-height: 0;
   max-width: 100vw;
 }
-._14xc6b1-3-4-0 {
+._14xc6b1-3-5-0 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-4-0 {
+._14xc6b2-3-5-0 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-4-0 {
+._14xc6b3-3-5-0 {
   overflow-wrap: break-word;
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);

package/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js

@@ -24,7 +24,7 @@ __export(TimeframeSelectorOverlay_css_exports, {
 });
 module.exports = __toCommonJS(TimeframeSelectorOverlay_css_exports);
 var import_TimeframeSelectorOverlay_css_ts_vanilla = require("./TimeframeSelectorOverlay.css");
-var footer = "_14xc6b2-3-4-0";
-var hint = "_14xc6b3-3-4-0";
-var scrollContainer = "_14xc6b1-3-4-0";
-var wrapper = "_14xc6b0-3-4-0";
+var footer = "_14xc6b2-3-5-0";
+var hint = "_14xc6b3-3-5-0";
+var scrollContainer = "_14xc6b1-3-5-0";
+var wrapper = "_14xc6b0-3-5-0";

package/filters/timeframe-selector/components/presets/PresetItem.js

@@ -154,7 +154,7 @@ const PresetItem = (props) => {
         }),
         consumerClassName
       ]),
-      onPointerDown: handleItemClick,
+      onClick: handleItemClick,
       onKeyDown: handleItemKeyDown,
       "data-testid": dataTestId,
       style: consumerStyle,