@dynatrace/strato-components 3.5.0 → 3.6.0

package/esm/core/sdk/sdk-logger.js

@@ -14,7 +14,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.5.0"
+          version: "3.6.0"
         }
       });
     } else if (supportsLoggerV1()) {
@@ -22,7 +22,7 @@ const LOGGER_FACTORY = /* @__PURE__ */ (() => {
         context: {
           id: "@dynatrace/strato-design-system",
           // @ts-expect-error Global variable injected at package build time
-          version: "3.5.0"
+          version: "3.6.0"
         }
       });
     }

package/esm/core/styles/defaultChartValues.css

@@ -1,4 +1,4 @@
-._1rtjj3o0-3-5-0 {
+._1rtjj3o0-3-6-0 {
   line-height: normal;
   width: inherit;
 }

package/esm/core/styles/defaultChartValues.sty.js

@@ -1,5 +1,5 @@
 import "./defaultChartValues.css";
-var defaultChartSize = "_1rtjj3o0-3-5-0";
+var defaultChartSize = "_1rtjj3o0-3-6-0";
 export {
   defaultChartSize
 };

package/esm/core/styles/defaultChartValues.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/styles/defaultChartValues.css.ts"],
-  "sourcesContent": ["import './defaultChartValues.css';\nexport var defaultChartSize = '_1rtjj3o0-3-5-0';"],
+  "sourcesContent": ["import './defaultChartValues.css';\nexport var defaultChartSize = '_1rtjj3o0-3-6-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,mBAAmB;",
   "names": []
 }

package/esm/core/styles/focusRing.css

@@ -1,75 +1,75 @@
-._z2r50s3-3-5-0 {
+._z2r50s3-3-6-0 {
   outline: none;
 }
-._z2r50s3-3-5-0:focus-visible {
+._z2r50s3-3-6-0:focus-visible {
   outline: none;
 }
-._z2r50s4-3-5-0 {
+._z2r50s4-3-6-0 {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-5-0);
-  background-color: var(--_z2r50s2-3-5-0);
-}
-._z2r50s5-3-5-0._z2r50s5-3-5-0 {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-5-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-5-0);
-}
-._z2r50s6-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50s7-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50s8-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50s9-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50sa-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._z2r50sb-3-5-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-6-0);
+  background-color: var(--_z2r50s2-3-6-0);
+}
+._z2r50s5-3-6-0._z2r50s5-3-6-0 {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-6-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-6-0);
+}
+._z2r50s6-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50s7-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50s8-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50s9-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50sa-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._z2r50sb-3-6-0:focus-within {
   outline: none;
 }
-._z2r50sc-3-5-0:focus-within {
+._z2r50sc-3-6-0:focus-within {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
-  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-5-0);
-  background-color: var(--_z2r50s2-3-5-0);
-}
-._z2r50sd-3-5-0:focus-within {
-  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-5-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-5-0);
-}
-._z2r50se-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-neutral-default, #dadbe4);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-}
-._z2r50sf-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-primary-default, #d5dbf6);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-}
-._z2r50sg-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-success-default, #d3dedd);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
-}
-._z2r50sh-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-warning-default, #f9ebdb);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
-}
-._z2r50si-3-5-0 {
-  --_z2r50s0-3-5-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z2r50s1-3-5-0: var(--dt-colors-border-critical-default, #f6d6d5);
-  --_z2r50s2-3-5-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--_z2r50s0-3-6-0);
+  background-color: var(--_z2r50s2-3-6-0);
+}
+._z2r50sd-3-6-0:focus-within {
+  box-shadow: inset 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_z2r50s0-3-6-0), inset 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_z2r50s1-3-6-0);
+}
+._z2r50se-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+}
+._z2r50sf-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-primary-default, #d5dbf6);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+}
+._z2r50sg-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-success-default, #d3dedd);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-success-emphasized, #e0e7e6);
+}
+._z2r50sh-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-warning-default, #f9ebdb);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-warning-emphasized, #f9f0e5);
+}
+._z2r50si-3-6-0 {
+  --_z2r50s0-3-6-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z2r50s1-3-6-0: var(--dt-colors-border-critical-default, #f6d6d5);
+  --_z2r50s2-3-6-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }

package/esm/core/styles/focusRing.sty.js

@@ -1,7 +1,7 @@
 import "./focusRing.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var focusRing = _7a468({ defaultClassName: "_z2r50s3-3-5-0", variantClassNames: { minimal: { true: "_z2r50s4-3-5-0", false: "_z2r50s5-3-5-0" }, color: { neutral: "_z2r50s6-3-5-0", primary: "_z2r50s7-3-5-0", success: "_z2r50s8-3-5-0", warning: "_z2r50s9-3-5-0", critical: "_z2r50sa-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
-var focusRingFocusWithin = _7a468({ defaultClassName: "_z2r50sb-3-5-0", variantClassNames: { minimal: { true: "_z2r50sc-3-5-0", false: "_z2r50sd-3-5-0" }, color: { neutral: "_z2r50se-3-5-0", primary: "_z2r50sf-3-5-0", success: "_z2r50sg-3-5-0", warning: "_z2r50sh-3-5-0", critical: "_z2r50si-3-5-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRing = _7a468({ defaultClassName: "_z2r50s3-3-6-0", variantClassNames: { minimal: { true: "_z2r50s4-3-6-0", false: "_z2r50s5-3-6-0" }, color: { neutral: "_z2r50s6-3-6-0", primary: "_z2r50s7-3-6-0", success: "_z2r50s8-3-6-0", warning: "_z2r50s9-3-6-0", critical: "_z2r50sa-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
+var focusRingFocusWithin = _7a468({ defaultClassName: "_z2r50sb-3-6-0", variantClassNames: { minimal: { true: "_z2r50sc-3-6-0", false: "_z2r50sd-3-6-0" }, color: { neutral: "_z2r50se-3-6-0", primary: "_z2r50sf-3-6-0", success: "_z2r50sg-3-6-0", warning: "_z2r50sh-3-6-0", critical: "_z2r50si-3-6-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   focusRing,
   focusRingFocusWithin

package/esm/core/styles/focusRing.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/styles/focusRing.css.ts"],
-  "sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRing = _7a468({defaultClassName:'_z2r50s3-3-5-0',variantClassNames:{minimal:{true:'_z2r50s4-3-5-0',false:'_z2r50s5-3-5-0'},color:{neutral:'_z2r50s6-3-5-0',primary:'_z2r50s7-3-5-0',success:'_z2r50s8-3-5-0',warning:'_z2r50s9-3-5-0',critical:'_z2r50sa-3-5-0'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithin = _7a468({defaultClassName:'_z2r50sb-3-5-0',variantClassNames:{minimal:{true:'_z2r50sc-3-5-0',false:'_z2r50sd-3-5-0'},color:{neutral:'_z2r50se-3-5-0',primary:'_z2r50sf-3-5-0',success:'_z2r50sg-3-5-0',warning:'_z2r50sh-3-5-0',critical:'_z2r50si-3-5-0'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './focusRing.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRing = _7a468({defaultClassName:'_z2r50s3-3-6-0',variantClassNames:{minimal:{true:'_z2r50s4-3-6-0',false:'_z2r50s5-3-6-0'},color:{neutral:'_z2r50s6-3-6-0',primary:'_z2r50s7-3-6-0',success:'_z2r50s8-3-6-0',warning:'_z2r50s9-3-6-0',critical:'_z2r50sa-3-6-0'}},defaultVariants:{},compoundVariants:[]});\nexport var focusRingFocusWithin = _7a468({defaultClassName:'_z2r50sb-3-6-0',variantClassNames:{minimal:{true:'_z2r50sc-3-6-0',false:'_z2r50sd-3-6-0'},color:{neutral:'_z2r50se-3-6-0',primary:'_z2r50sf-3-6-0',success:'_z2r50sg-3-6-0',warning:'_z2r50sh-3-6-0',critical:'_z2r50si-3-6-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,YAAY,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,OAAM,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAClT,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,OAAM,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/core/styles/focusRingStatic.css

@@ -1,50 +1,49 @@
-._z0fq9b4-3-5-0 {
+._z0fq9b4-3-6-0 {
   outline: none;
-  box-shadow: none;
 }
-._z0fq9b5-3-5-0 {
-  --_z0fq9b3-3-5-0: var(--dt-borders-width-default, 1px);
-  --_z0fq9b2-3-5-0: 0 0 0 var(--_z0fq9b3-3-5-0) var(--_z0fq9b0-3-5-0) inset;
+._z0fq9b5-3-6-0 {
+  --_z0fq9b3-3-6-0: var(--dt-borders-width-default, 1px);
+  --_z0fq9b2-3-6-0: 0 0 0 var(--_z0fq9b3-3-6-0) var(--_z0fq9b0-3-6-0) inset;
 }
-._z0fq9b6-3-5-0 {
-  --_z0fq9b3-3-5-0: var(--dt-borders-width-emphasized, 2px);
-  --_z0fq9b2-3-5-0: 0 0 0 var(--_z0fq9b3-3-5-0) var(--_z0fq9b0-3-5-0) inset, 0 0 0 calc(var(--_z0fq9b3-3-5-0) + 1px) var(--_z0fq9b1-3-5-0) inset;
+._z0fq9b6-3-6-0 {
+  --_z0fq9b3-3-6-0: var(--dt-borders-width-emphasized, 2px);
+  --_z0fq9b2-3-6-0: 0 0 0 var(--_z0fq9b3-3-6-0) var(--_z0fq9b0-3-6-0) inset, 0 0 0 calc(var(--_z0fq9b3-3-6-0) + 1px) var(--_z0fq9b1-3-6-0) inset;
 }
-._z0fq9b7-3-5-0 {
-  --_z0fq9b2-3-5-0: none;
+._z0fq9b7-3-6-0 {
+  --_z0fq9b2-3-6-0: none;
 }
-._z0fq9b8-3-5-0._z0fq9b8-3-5-0 {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9b8-3-6-0._z0fq9b8-3-6-0 {
+  box-shadow: var(--_z0fq9b2-3-6-0);
 }
-._z0fq9b9-3-5-0:focus-visible {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9b9-3-6-0:focus-visible {
+  box-shadow: var(--_z0fq9b2-3-6-0);
 }
-._z0fq9ba-3-5-0:focus-within {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9ba-3-6-0:focus-within {
+  box-shadow: var(--_z0fq9b2-3-6-0);
 }
-._z0fq9bb-3-5-0:has(:focus-visible) {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9bb-3-6-0:has(:focus-visible) {
+  box-shadow: var(--_z0fq9b2-3-6-0);
 }
-._z0fq9bc-3-5-0:focus {
-  box-shadow: var(--_z0fq9b2-3-5-0);
+._z0fq9bc-3-6-0:focus {
+  box-shadow: var(--_z0fq9b2-3-6-0);
 }
-._z0fq9bd-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-neutral-default, #dadbe4);
+._z0fq9bd-3-6-0 {
+  --_z0fq9b0-3-6-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z0fq9b1-3-6-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._z0fq9be-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-primary-accent, #464cce);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-primary-default, #d5dbf6);
+._z0fq9be-3-6-0 {
+  --_z0fq9b0-3-6-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z0fq9b1-3-6-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._z0fq9bf-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-success-accent, #2d6761);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-success-default, #d3dedd);
+._z0fq9bf-3-6-0 {
+  --_z0fq9b0-3-6-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z0fq9b1-3-6-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._z0fq9bg-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-warning-accent, #855400);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-warning-default, #f9ebdb);
+._z0fq9bg-3-6-0 {
+  --_z0fq9b0-3-6-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z0fq9b1-3-6-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._z0fq9bh-3-5-0 {
-  --_z0fq9b0-3-5-0: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z0fq9b1-3-5-0: var(--dt-colors-border-critical-default, #f6d6d5);
+._z0fq9bh-3-6-0 {
+  --_z0fq9b0-3-6-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z0fq9b1-3-6-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }

package/esm/core/styles/focusRingStatic.sty.js

@@ -1,6 +1,6 @@
 import "./focusRingStatic.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var focusRingStatic = _7a468({ defaultClassName: "_z0fq9b4-3-5-0", variantClassNames: { minimal: { true: "_z0fq9b5-3-5-0", false: "_z0fq9b6-3-5-0" }, disabled: { true: "_z0fq9b7-3-5-0" }, when: { always: "_z0fq9b8-3-5-0", "focus-visible": "_z0fq9b9-3-5-0", "focus-within": "_z0fq9ba-3-5-0", "focus-within-visible": "_z0fq9bb-3-5-0", focus: "_z0fq9bc-3-5-0" }, color: { neutral: "_z0fq9bd-3-5-0", primary: "_z0fq9be-3-5-0", success: "_z0fq9bf-3-5-0", warning: "_z0fq9bg-3-5-0", critical: "_z0fq9bh-3-5-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });
+var focusRingStatic = _7a468({ defaultClassName: "_z0fq9b4-3-6-0", variantClassNames: { minimal: { true: "_z0fq9b5-3-6-0", false: "_z0fq9b6-3-6-0" }, disabled: { true: "_z0fq9b7-3-6-0" }, when: { always: "_z0fq9b8-3-6-0", "focus-visible": "_z0fq9b9-3-6-0", "focus-within": "_z0fq9ba-3-6-0", "focus-within-visible": "_z0fq9bb-3-6-0", focus: "_z0fq9bc-3-6-0" }, color: { neutral: "_z0fq9bd-3-6-0", primary: "_z0fq9be-3-6-0", success: "_z0fq9bf-3-6-0", warning: "_z0fq9bg-3-6-0", critical: "_z0fq9bh-3-6-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });
 export {
   focusRingStatic
 };

package/esm/core/styles/focusRingStatic.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/styles/focusRingStatic.css.ts"],
-  "sourcesContent": ["import './focusRingStatic.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingStatic = _7a468({defaultClassName:'_z0fq9b4-3-5-0',variantClassNames:{minimal:{true:'_z0fq9b5-3-5-0',false:'_z0fq9b6-3-5-0'},disabled:{true:'_z0fq9b7-3-5-0'},when:{always:'_z0fq9b8-3-5-0','focus-visible':'_z0fq9b9-3-5-0','focus-within':'_z0fq9ba-3-5-0','focus-within-visible':'_z0fq9bb-3-5-0',focus:'_z0fq9bc-3-5-0'},color:{neutral:'_z0fq9bd-3-5-0',primary:'_z0fq9be-3-5-0',success:'_z0fq9bf-3-5-0',warning:'_z0fq9bg-3-5-0',critical:'_z0fq9bh-3-5-0'}},defaultVariants:{color:'neutral',minimal:false,when:'focus',disabled:false},compoundVariants:[]});"],
+  "sourcesContent": ["import './focusRingStatic.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var focusRingStatic = _7a468({defaultClassName:'_z0fq9b4-3-6-0',variantClassNames:{minimal:{true:'_z0fq9b5-3-6-0',false:'_z0fq9b6-3-6-0'},disabled:{true:'_z0fq9b7-3-6-0'},when:{always:'_z0fq9b8-3-6-0','focus-visible':'_z0fq9b9-3-6-0','focus-within':'_z0fq9ba-3-6-0','focus-within-visible':'_z0fq9bb-3-6-0',focus:'_z0fq9bc-3-6-0'},color:{neutral:'_z0fq9bd-3-6-0',primary:'_z0fq9be-3-6-0',success:'_z0fq9bf-3-6-0',warning:'_z0fq9bg-3-6-0',critical:'_z0fq9bh-3-6-0'}},defaultVariants:{color:'neutral',minimal:false,when:'focus',disabled:false},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,MAAK,EAAC,QAAO,kBAAiB,iBAAgB,kBAAiB,gBAAe,kBAAiB,wBAAuB,kBAAiB,OAAM,iBAAgB,GAAE,OAAM,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,OAAM,WAAU,SAAQ,OAAM,MAAK,SAAQ,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/core/styles/virtualFocus.css

@@ -1,10 +1,10 @@
-._9mvxlq0-3-5-0 {
+._9mvxlq0-3-6-0 {
   transition: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._9mvxlq1-3-5-0 {
+._9mvxlq1-3-6-0 {
   transition: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-primary-accent, #464cce);

package/esm/core/styles/virtualFocus.sty.js

@@ -1,5 +1,5 @@
 import "./virtualFocus.css";
-var virtualFocus = { neutral: "_9mvxlq0-3-5-0", primary: "_9mvxlq1-3-5-0" };
+var virtualFocus = { neutral: "_9mvxlq0-3-6-0", primary: "_9mvxlq1-3-6-0" };
 export {
   virtualFocus
 };

package/esm/core/styles/virtualFocus.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/core/styles/virtualFocus.css.ts"],
-  "sourcesContent": ["import './virtualFocus.css';\nexport var virtualFocus = {neutral:'_9mvxlq0-3-5-0',primary:'_9mvxlq1-3-5-0'};"],
+  "sourcesContent": ["import './virtualFocus.css';\nexport var virtualFocus = {neutral:'_9mvxlq0-3-6-0',primary:'_9mvxlq1-3-6-0'};"],
   "mappings": "AAAA,OAAO;AACA,IAAI,eAAe,EAAC,SAAQ,kBAAiB,SAAQ,iBAAgB;",
   "names": []
 }

package/esm/core/time/timeframeStore/actions/dateTimePicker.js

@@ -1,4 +1,4 @@
-import { focusTimeInput } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
+import { focusElementWithRetry } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
 import {
   getTimeValueFromSimpleValue,
   toCalendarValue
@@ -31,11 +31,10 @@ function getDateTimePickerActions(formFieldMessagesDispatch, onChangeProp, isCon
             required: state.required
           });
           state.dateTimePickerRef?.current?.close();
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              focusTimeInput(state.dateTimeInputRef);
-            });
-          });
+          focusElementWithRetry(
+            () => state.dateTimeInputRef.current?.spinButtonHandlers.get("hour")?.element.current,
+            state.dateTimeInputRef
+          );
           const calendarTimeValue = toCalendarValue(
             newTimeValue,
             state.precision

package/esm/core/time/timeframeStore/actions/dateTimePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/core/time/timeframeStore/actions/dateTimePicker.ts"],
-  "sourcesContent": ["import type { Dispatch } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { focusTimeInput } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  getTimeValueFromSimpleValue,\n  toCalendarValue,\n} from '../../../../forms/forms-core/time/helpers.js';\nimport { getTimeValue } from '../../../../forms/forms-core/time/timeParser.js';\nimport { type TimeValue } from '../../../types/time.js';\nimport { validate } from '../../validation.js';\nimport type {\n  DateTimePickerValueStore,\n  DateTimePickerValueStoreActions,\n} from '../dateTimePicker.types.js';\n\n/**\n * Creates actions for the DateTimePicker store using the slice action handlers.\n *  @internal\n */\nexport function getDateTimePickerActions(\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: TimeValue | null | '') => void) | undefined,\n  isControlled?: boolean,\n) {\n  const actions = (\n    set: StoreApi<DateTimePickerValueStore>['setState'],\n  ): DateTimePickerValueStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          const newTimeValue =\n            getTimeValueFromSimpleValue(\n              inputValue,\n              state.timeOffset,\n              undefined,\n              undefined,\n              state.min,\n              state.max,\n              state.precision,\n            ) ?? null;\n\n          const calendarError = validate(newTimeValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.dateTimePickerError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: state.dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n            required: state.required,\n          });\n\n          state.dateTimePickerRef?.current?.close();\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              focusTimeInput(state.dateTimeInputRef);\n            });\n          });\n\n          const calendarTimeValue = toCalendarValue(\n            newTimeValue,\n            state.precision,\n          );\n          return {\n            calendarValue: calendarTimeValue,\n            dateTimePickerValue: newTimeValue,\n            dateTimePickerError: calendarError,\n            calendarError,\n          };\n        });\n      },\n      setDateTimePickerValue: (value) => {\n        return set((state) => {\n          const newValue = getTimeValue(value, state.precision) ?? null;\n\n          // we would expect a timevalue but as it isn't a complete value then parser returns null.\n          const isPartialValue = newValue?.absoluteDate === '';\n\n          // In case of interrim values we want to validate and show errors but not update the calendar value.\n          // To still inform about the error state it triggers the onChange with an empty string.\n          if (isPartialValue) {\n            const errorKey = validate(newValue, state.min, state.max, {\n              formMessageDispatch: formFieldMessagesDispatch,\n              formerError: state.dateTimePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'single',\n            });\n\n            onChangeProp?.('');\n\n            return {\n              calendarError: errorKey,\n              dateTimePickerError: errorKey,\n            };\n          }\n\n          onChangeProp?.(newValue);\n\n          const calendarTimeValue = toCalendarValue(newValue, state.precision);\n\n          if (isControlled) {\n            return { calendarValue: calendarTimeValue };\n          }\n\n          const dateTimePickerError = validate(newValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.dateTimePickerError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: false,\n            ref: state.dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n          });\n\n          return {\n            dateTimePickerValue: newValue,\n            calendarValue: calendarTimeValue,\n            calendarError: dateTimePickerError,\n            dateTimePickerError,\n          };\n        });\n      },\n    };\n  };\n\n  return actions;\n}\n"],
-  "mappings": "AAGA,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB;AAUlB,SAAS,yBACd,2BACA,cACA,cACA;AACA,QAAM,UAAU,CACd,QACoC;AACpC,WAAO;AAAA,MACL,kBAAkB,CAAC,eAAe;AAChC,YAAI,CAAC,UAAU;AACb,gBAAM,eACJ;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM;AAAA,UACR,KAAK;AAEP,gBAAM,gBAAgB,SAAS,cAAc,MAAM,KAAK,MAAM,KAAK;AAAA,YACjE,qBAAqB;AAAA,YACrB,aAAa,MAAM;AAAA,YACnB,WAAW,MAAM;AAAA,YACjB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK,MAAM;AAAA,YACX,gBAAgB,MAAM;AAAA,YACtB,WAAW;AAAA,YACX,UAAU,MAAM;AAAA,UAClB,CAAC;AAED,gBAAM,mBAAmB,SAAS,MAAM;AACxC,gCAAsB,MAAM;AAC1B,kCAAsB,MAAM;AAC1B,6BAAe,MAAM,gBAAgB;AAAA,YACvC,CAAC;AAAA,UACH,CAAC;AAED,gBAAM,oBAAoB;AAAA,YACxB;AAAA,YACA,MAAM;AAAA,UACR;AACA,iBAAO;AAAA,YACL,eAAe;AAAA,YACf,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,wBAAwB,CAAC,UAAU;AACjC,eAAO,IAAI,CAAC,UAAU;AACpB,gBAAM,WAAW,aAAa,OAAO,MAAM,SAAS,KAAK;AAGzD,gBAAM,iBAAiB,UAAU,iBAAiB;AAIlD,cAAI,gBAAgB;AAClB,kBAAM,WAAW,SAAS,UAAU,MAAM,KAAK,MAAM,KAAK;AAAA,cACxD,qBAAqB;AAAA,cACrB,aAAa,MAAM;AAAA,cACnB,WAAW,MAAM;AAAA,cACjB,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,KAAK,MAAM;AAAA,cACX,gBAAgB,MAAM;AAAA,cACtB,WAAW;AAAA,YACb,CAAC;AAED,2BAAe,EAAE;AAEjB,mBAAO;AAAA,cACL,eAAe;AAAA,cACf,qBAAqB;AAAA,YACvB;AAAA,UACF;AAEA,yBAAe,QAAQ;AAEvB,gBAAM,oBAAoB,gBAAgB,UAAU,MAAM,SAAS;AAEnE,cAAI,cAAc;AAChB,mBAAO,EAAE,eAAe,kBAAkB;AAAA,UAC5C;AAEA,gBAAM,sBAAsB,SAAS,UAAU,MAAM,KAAK,MAAM,KAAK;AAAA,YACnE,qBAAqB;AAAA,YACrB,aAAa,MAAM;AAAA,YACnB,WAAW,MAAM;AAAA,YACjB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK,MAAM;AAAA,YACX,gBAAgB,MAAM;AAAA,YACtB,WAAW;AAAA,UACb,CAAC;AAED,iBAAO;AAAA,YACL,qBAAqB;AAAA,YACrB,eAAe;AAAA,YACf,eAAe;AAAA,YACf;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import type { Dispatch } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { focusElementWithRetry } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  getTimeValueFromSimpleValue,\n  toCalendarValue,\n} from '../../../../forms/forms-core/time/helpers.js';\nimport { getTimeValue } from '../../../../forms/forms-core/time/timeParser.js';\nimport { type TimeValue } from '../../../types/time.js';\nimport { validate } from '../../validation.js';\nimport type {\n  DateTimePickerValueStore,\n  DateTimePickerValueStoreActions,\n} from '../dateTimePicker.types.js';\n\n/**\n * Creates actions for the DateTimePicker store using the slice action handlers.\n *  @internal\n */\nexport function getDateTimePickerActions(\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: TimeValue | null | '') => void) | undefined,\n  isControlled?: boolean,\n) {\n  const actions = (\n    set: StoreApi<DateTimePickerValueStore>['setState'],\n  ): DateTimePickerValueStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          const newTimeValue =\n            getTimeValueFromSimpleValue(\n              inputValue,\n              state.timeOffset,\n              undefined,\n              undefined,\n              state.min,\n              state.max,\n              state.precision,\n            ) ?? null;\n\n          const calendarError = validate(newTimeValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.dateTimePickerError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: state.dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n            required: state.required,\n          });\n\n          state.dateTimePickerRef?.current?.close();\n          focusElementWithRetry(\n            () =>\n              state.dateTimeInputRef.current?.spinButtonHandlers.get('hour')\n                ?.element.current,\n            state.dateTimeInputRef,\n          );\n\n          const calendarTimeValue = toCalendarValue(\n            newTimeValue,\n            state.precision,\n          );\n          return {\n            calendarValue: calendarTimeValue,\n            dateTimePickerValue: newTimeValue,\n            dateTimePickerError: calendarError,\n            calendarError,\n          };\n        });\n      },\n      setDateTimePickerValue: (value) => {\n        return set((state) => {\n          const newValue = getTimeValue(value, state.precision) ?? null;\n\n          // we would expect a timevalue but as it isn't a complete value then parser returns null.\n          const isPartialValue = newValue?.absoluteDate === '';\n\n          // In case of interrim values we want to validate and show errors but not update the calendar value.\n          // To still inform about the error state it triggers the onChange with an empty string.\n          if (isPartialValue) {\n            const errorKey = validate(newValue, state.min, state.max, {\n              formMessageDispatch: formFieldMessagesDispatch,\n              formerError: state.dateTimePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'single',\n            });\n\n            onChangeProp?.('');\n\n            return {\n              calendarError: errorKey,\n              dateTimePickerError: errorKey,\n            };\n          }\n\n          onChangeProp?.(newValue);\n\n          const calendarTimeValue = toCalendarValue(newValue, state.precision);\n\n          if (isControlled) {\n            return { calendarValue: calendarTimeValue };\n          }\n\n          const dateTimePickerError = validate(newValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.dateTimePickerError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: false,\n            ref: state.dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n          });\n\n          return {\n            dateTimePickerValue: newValue,\n            calendarValue: calendarTimeValue,\n            calendarError: dateTimePickerError,\n            dateTimePickerError,\n          };\n        });\n      },\n    };\n  };\n\n  return actions;\n}\n"],
+  "mappings": "AAGA,SAAS,6BAA6B;AAEtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB;AAUlB,SAAS,yBACd,2BACA,cACA,cACA;AACA,QAAM,UAAU,CACd,QACoC;AACpC,WAAO;AAAA,MACL,kBAAkB,CAAC,eAAe;AAChC,YAAI,CAAC,UAAU;AACb,gBAAM,eACJ;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM;AAAA,UACR,KAAK;AAEP,gBAAM,gBAAgB,SAAS,cAAc,MAAM,KAAK,MAAM,KAAK;AAAA,YACjE,qBAAqB;AAAA,YACrB,aAAa,MAAM;AAAA,YACnB,WAAW,MAAM;AAAA,YACjB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK,MAAM;AAAA,YACX,gBAAgB,MAAM;AAAA,YACtB,WAAW;AAAA,YACX,UAAU,MAAM;AAAA,UAClB,CAAC;AAED,gBAAM,mBAAmB,SAAS,MAAM;AACxC;AAAA,YACE,MACE,MAAM,iBAAiB,SAAS,mBAAmB,IAAI,MAAM,GACzD,QAAQ;AAAA,YACd,MAAM;AAAA,UACR;AAEA,gBAAM,oBAAoB;AAAA,YACxB;AAAA,YACA,MAAM;AAAA,UACR;AACA,iBAAO;AAAA,YACL,eAAe;AAAA,YACf,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,wBAAwB,CAAC,UAAU;AACjC,eAAO,IAAI,CAAC,UAAU;AACpB,gBAAM,WAAW,aAAa,OAAO,MAAM,SAAS,KAAK;AAGzD,gBAAM,iBAAiB,UAAU,iBAAiB;AAIlD,cAAI,gBAAgB;AAClB,kBAAM,WAAW,SAAS,UAAU,MAAM,KAAK,MAAM,KAAK;AAAA,cACxD,qBAAqB;AAAA,cACrB,aAAa,MAAM;AAAA,cACnB,WAAW,MAAM;AAAA,cACjB,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,KAAK,MAAM;AAAA,cACX,gBAAgB,MAAM;AAAA,cACtB,WAAW;AAAA,YACb,CAAC;AAED,2BAAe,EAAE;AAEjB,mBAAO;AAAA,cACL,eAAe;AAAA,cACf,qBAAqB;AAAA,YACvB;AAAA,UACF;AAEA,yBAAe,QAAQ;AAEvB,gBAAM,oBAAoB,gBAAgB,UAAU,MAAM,SAAS;AAEnE,cAAI,cAAc;AAChB,mBAAO,EAAE,eAAe,kBAAkB;AAAA,UAC5C;AAEA,gBAAM,sBAAsB,SAAS,UAAU,MAAM,KAAK,MAAM,KAAK;AAAA,YACnE,qBAAqB;AAAA,YACrB,aAAa,MAAM;AAAA,YACnB,WAAW,MAAM;AAAA,YACjB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK,MAAM;AAAA,YACX,gBAAgB,MAAM;AAAA,YACtB,WAAW;AAAA,UACb,CAAC;AAED,iBAAO;AAAA,YACL,qBAAqB;AAAA,YACrB,eAAe;AAAA,YACf,eAAe;AAAA,YACf;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/core/time/timeframeStore/actions/dateTimeRangePicker.js

@@ -1,5 +1,5 @@
 import { getTimeframeFromCalendarSelection } from "./calendar.js";
-import { focusTimeInput } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
+import { focusElementWithRetry } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
 import { removePrecisionFromTimeFrame } from "../../../../forms/forms-core/time/timeParser.js";
 import {
   isFullTimeframe,
@@ -18,12 +18,10 @@ function getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp)
           );
           if (isFullTimeframe(calendarTimeframe)) {
             state.dateTimeRangePickerRef?.current?.close();
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                state.dateTimeRangePickerRef?.current?.focus?.();
-                focusTimeInput(state.dateTimeFromRef);
-              });
-            });
+            focusElementWithRetry(
+              () => state.dateTimeFromRef.current?.spinButtonHandlers.get("hour")?.element.current,
+              state.dateTimeFromRef
+            );
             onChangeProp?.(calendarTimeframe);
             return {
               calendarValue: calendarTimeframe,

package/esm/core/time/timeframeStore/actions/dateTimeRangePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/core/time/timeframeStore/actions/dateTimeRangePicker.ts"],
-  "sourcesContent": ["import type { Dispatch } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { getTimeframeFromCalendarSelection } from './calendar.js';\nimport { focusTimeInput } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { removePrecisionFromTimeFrame } from '../../../../forms/forms-core/time/timeParser.js';\nimport { type Timeframe } from '../../../types/time.js';\nimport {\n  isFullTimeframe,\n  isTimeValue,\n  mergeRangeValue,\n} from '../../helpers.js';\nimport { validate } from '../../validation.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../dateTimeRangePicker.types.js';\n\n/**\n * Creates actions for the DateTimeRangePicker store using the slice action handlers.\n *  @internal\n */\nexport function getDateTimeRangePickerActions(\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: Timeframe | null) => void) | undefined,\n) {\n  const actions = (\n    set: StoreApi<\n      DateTimeRangePickerTimeframeStates &\n        DateTimeRangePickerTimeframeStoreActions\n    >['setState'],\n  ): DateTimeRangePickerTimeframeStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          const calendarTimeframe = getTimeframeFromCalendarSelection(\n            inputValue,\n            state,\n          );\n\n          if (isFullTimeframe(calendarTimeframe)) {\n            state.dateTimeRangePickerRef?.current?.close();\n            requestAnimationFrame(() => {\n              requestAnimationFrame(() => {\n                state.dateTimeRangePickerRef?.current?.focus?.();\n                focusTimeInput(state.dateTimeFromRef);\n              });\n            });\n            onChangeProp?.(calendarTimeframe);\n\n            return {\n              calendarValue: calendarTimeframe,\n              dateTimeRangePickerTimeframe: calendarTimeframe,\n            };\n          }\n\n          return { calendarValue: calendarTimeframe };\n        });\n      },\n      setDateTimeRangePickerTimeframe: (value) => {\n        return set((state) => {\n          // Full clear: null resets both fields to null\n          if (value === null) {\n            onChangeProp?.(null);\n            return {\n              dateTimeRangePickerTimeframe: null,\n              calendarValue: null,\n            };\n          }\n\n          const merged = mergeRangeValue(\n            state.dateTimeRangePickerTimeframe,\n            value,\n          );\n\n          const timeframeWithPrecision =\n            removePrecisionFromTimeFrame(merged, state.precision) ?? null;\n\n          if (\n            timeframeWithPrecision?.from === null &&\n            timeframeWithPrecision?.to === null\n          ) {\n            onChangeProp?.(null);\n          }\n\n          isFullTimeframe(timeframeWithPrecision) &&\n            onChangeProp?.(timeframeWithPrecision);\n\n          const isPartialFrom =\n            isTimeValue(merged.from) && merged.from.absoluteDate === '';\n          const isPartialTo =\n            isTimeValue(merged.to) && merged.to.absoluteDate === '';\n\n          // Partial values while editing\n          if (isPartialFrom || isPartialTo) {\n            const errorKey = validate(\n              timeframeWithPrecision,\n              state.min,\n              state.max,\n              {\n                formMessageDispatch: formFieldMessagesDispatch,\n                formerError: state.dateTimeRangePickerError,\n                precision: state.precision,\n                showError: false,\n                checkOrder: true,\n                ref: state.dateTimeRangePickerRef,\n                expectedFormat: state.formatString,\n                valueMode: 'dateTimePicker',\n                required: state.required,\n              },\n            );\n\n            const calendarValue = {\n              from: isPartialFrom ? null : timeframeWithPrecision?.from ?? null,\n              to: isPartialTo ? null : timeframeWithPrecision?.to ?? null,\n            };\n\n            return {\n              dateTimeRangePickerTimeframe: timeframeWithPrecision,\n              calendarValue,\n              calendarError: errorKey,\n              dateTimeRangePickerError: errorKey,\n            };\n          }\n\n          const dateTimeRangePickerError = validate(\n            timeframeWithPrecision,\n            state.min,\n            state.max,\n            {\n              formMessageDispatch: formFieldMessagesDispatch,\n              formerError: state.dateTimeRangePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimeRangePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'dateTimePicker',\n              required: state.required,\n            },\n          );\n\n          return {\n            dateTimeRangePickerTimeframe: timeframeWithPrecision,\n            calendarValue: timeframeWithPrecision,\n            calendarError: dateTimeRangePickerError,\n            dateTimeRangePickerError,\n          };\n        });\n      },\n      clearCalendarValue: () => {\n        set((state) => {\n          if (\n            !state.calendarValue ||\n            (state.calendarValue.from && state.calendarValue.to)\n          ) {\n            return state;\n          }\n\n          if (\n            state.dateTimeRangePickerTimeframe?.from &&\n            state.dateTimeRangePickerTimeframe?.to\n          ) {\n            return { calendarValue: state.dateTimeRangePickerTimeframe };\n          }\n\n          // in case of a partial value, we want to clear the calendar selection entirely to avoid confusion\n          return { calendarValue: null };\n        });\n      },\n    };\n  };\n\n  return actions;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Dispatch } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { getTimeframeFromCalendarSelection } from './calendar.js';\nimport { focusElementWithRetry } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { removePrecisionFromTimeFrame } from '../../../../forms/forms-core/time/timeParser.js';\nimport { type Timeframe } from '../../../types/time.js';\nimport {\n  isFullTimeframe,\n  isTimeValue,\n  mergeRangeValue,\n} from '../../helpers.js';\nimport { validate } from '../../validation.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../dateTimeRangePicker.types.js';\n\n/**\n * Creates actions for the DateTimeRangePicker store using the slice action handlers.\n *  @internal\n */\nexport function getDateTimeRangePickerActions(\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: Timeframe | null) => void) | undefined,\n) {\n  const actions = (\n    set: StoreApi<\n      DateTimeRangePickerTimeframeStates &\n        DateTimeRangePickerTimeframeStoreActions\n    >['setState'],\n  ): DateTimeRangePickerTimeframeStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          const calendarTimeframe = getTimeframeFromCalendarSelection(\n            inputValue,\n            state,\n          );\n\n          if (isFullTimeframe(calendarTimeframe)) {\n            state.dateTimeRangePickerRef?.current?.close();\n            focusElementWithRetry(\n              () =>\n                state.dateTimeFromRef.current?.spinButtonHandlers.get('hour')\n                  ?.element.current,\n              state.dateTimeFromRef,\n            );\n            onChangeProp?.(calendarTimeframe);\n\n            return {\n              calendarValue: calendarTimeframe,\n              dateTimeRangePickerTimeframe: calendarTimeframe,\n            };\n          }\n\n          return { calendarValue: calendarTimeframe };\n        });\n      },\n      setDateTimeRangePickerTimeframe: (value) => {\n        return set((state) => {\n          // Full clear: null resets both fields to null\n          if (value === null) {\n            onChangeProp?.(null);\n            return {\n              dateTimeRangePickerTimeframe: null,\n              calendarValue: null,\n            };\n          }\n\n          const merged = mergeRangeValue(\n            state.dateTimeRangePickerTimeframe,\n            value,\n          );\n\n          const timeframeWithPrecision =\n            removePrecisionFromTimeFrame(merged, state.precision) ?? null;\n\n          if (\n            timeframeWithPrecision?.from === null &&\n            timeframeWithPrecision?.to === null\n          ) {\n            onChangeProp?.(null);\n          }\n\n          isFullTimeframe(timeframeWithPrecision) &&\n            onChangeProp?.(timeframeWithPrecision);\n\n          const isPartialFrom =\n            isTimeValue(merged.from) && merged.from.absoluteDate === '';\n          const isPartialTo =\n            isTimeValue(merged.to) && merged.to.absoluteDate === '';\n\n          // Partial values while editing\n          if (isPartialFrom || isPartialTo) {\n            const errorKey = validate(\n              timeframeWithPrecision,\n              state.min,\n              state.max,\n              {\n                formMessageDispatch: formFieldMessagesDispatch,\n                formerError: state.dateTimeRangePickerError,\n                precision: state.precision,\n                showError: false,\n                checkOrder: true,\n                ref: state.dateTimeRangePickerRef,\n                expectedFormat: state.formatString,\n                valueMode: 'dateTimePicker',\n                required: state.required,\n              },\n            );\n\n            const calendarValue = {\n              from: isPartialFrom ? null : timeframeWithPrecision?.from ?? null,\n              to: isPartialTo ? null : timeframeWithPrecision?.to ?? null,\n            };\n\n            return {\n              dateTimeRangePickerTimeframe: timeframeWithPrecision,\n              calendarValue,\n              calendarError: errorKey,\n              dateTimeRangePickerError: errorKey,\n            };\n          }\n\n          const dateTimeRangePickerError = validate(\n            timeframeWithPrecision,\n            state.min,\n            state.max,\n            {\n              formMessageDispatch: formFieldMessagesDispatch,\n              formerError: state.dateTimeRangePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimeRangePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'dateTimePicker',\n              required: state.required,\n            },\n          );\n\n          return {\n            dateTimeRangePickerTimeframe: timeframeWithPrecision,\n            calendarValue: timeframeWithPrecision,\n            calendarError: dateTimeRangePickerError,\n            dateTimeRangePickerError,\n          };\n        });\n      },\n      clearCalendarValue: () => {\n        set((state) => {\n          if (\n            !state.calendarValue ||\n            (state.calendarValue.from && state.calendarValue.to)\n          ) {\n            return state;\n          }\n\n          if (\n            state.dateTimeRangePickerTimeframe?.from &&\n            state.dateTimeRangePickerTimeframe?.to\n          ) {\n            return { calendarValue: state.dateTimeRangePickerTimeframe };\n          }\n\n          // in case of a partial value, we want to clear the calendar selection entirely to avoid confusion\n          return { calendarValue: null };\n        });\n      },\n    };\n  };\n\n  return actions;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/core/time/timeframeStore/actions/timeframeSelector.js

@@ -2,7 +2,7 @@ import { TZDateMini } from "@date-fns/tz";
 import { endOfDay, startOfDay } from "date-fns";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { getTimeframeFromCalendarSelection } from "./calendar.js";
-import { focusTimeInput } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
+import { focusElementWithRetry } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
 import {
   removePrecision,
   removePrecisionFromTimeFrame
@@ -35,8 +35,8 @@ function handleTimeframeSelectorTimeframeChange(inputValue, state, isControlled,
   });
   return {
     timeframeSelectorTimeframe: value,
-    calendarValue: value,
-    dateTimeRangePickerTimeframe: value,
+    calendarValue: value ?? timeframeWithPrecision,
+    dateTimeRangePickerTimeframe: value ?? timeframeWithPrecision,
     timeframeSelectorError: error,
     calendarError: error,
     dateTimeRangePickerError: error
@@ -71,12 +71,10 @@ function getTimeframeSelectorActions(isControlled, timeframeSelectorRef, formFie
           if (isFullTimeframe(calendarValue)) {
             state.dateTimeRangePickerRef?.current?.close();
             const isFullDay = isFullDayTimeframe(calendarValue, state);
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                state.dateTimeRangePickerRef?.current?.focus?.();
-                focusTimeInput(state.dateTimeFromRef);
-              });
-            });
+            focusElementWithRetry(
+              () => state.dateTimeFromRef.current?.spinButtonHandlers.get("hour")?.element.current,
+              state.dateTimeFromRef
+            );
             return {
               calendarValue,
               dateTimeRangePickerTimeframe: calendarValue,
@@ -91,7 +89,9 @@ function getTimeframeSelectorActions(isControlled, timeframeSelectorRef, formFie
           if (value === null) {
             return {
               dateTimeRangePickerTimeframe: null,
-              calendarValue: null
+              calendarValue: null,
+              dateTimeRangePickerError: void 0,
+              calendarError: void 0
             };
           }
           const merged = mergeRangeValue(