@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/forms/date-time-picker/DateTimePicker.css

@@ -1,121 +1,121 @@
-._1i883gj7-3-5-2 {
-  --_1i883gj0-3-5-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-5-2: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-5-2: var(--_1i883gj0-3-5-2);
-  --_1i883gj3-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1i883gj4-3-5-2: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-  --_1i883gj5-3-5-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-5-2: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj7-3-7-0 {
+  --_1i883gj0-3-7-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-7-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-7-0: var(--_1i883gj0-3-7-0);
+  --_1i883gj3-3-7-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1i883gj4-3-7-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  --_1i883gj5-3-7-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj6-3-7-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1jgl8s50-3-5-2 ._1i883gj7-3-5-2 {
-  --_1i883gj3-3-5-2: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-7-0 ._1i883gj7-3-7-0 {
+  --_1i883gj3-3-7-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1i883gj8-3-5-2 {
-  --_1i883gj5-3-5-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-5-2: var(--dt-colors-background-field-neutral-accent, #5b5c81);
-  --_1i883gj2-3-5-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-5-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-5-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1i883gj8-3-7-0 {
+  --_1i883gj5-3-7-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj6-3-7-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+  --_1i883gj2-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._1jgl8s50-3-5-2 ._1i883gj8-3-5-2 {
-  --_1i883gj3-3-5-2: var(--dt-colors-background-surface-default, #fff);
-  --_1i883gj4-3-5-2: var(--dt-colors-background-surface-default, #fff);
-}
-._1i883gj9-3-5-2 {
-  --_1i883gj0-3-5-2: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-5-2: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj3-3-5-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1i883gj4-3-5-2: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
-  --_1i883gj5-3-5-2: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj6-3-5-2: var(--dt-colors-background-field-critical-accent, #c62239);
-}
-._1jgl8s50-3-5-2 ._1i883gj9-3-5-2 {
-  --_1i883gj3-3-5-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._1i883gja-3-5-2 {
-  --_1i883gj0-3-5-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-5-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-5-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-5-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj5-3-5-2: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
-  --_1i883gj6-3-5-2: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1jgl8s50-3-7-0 ._1i883gj8-3-7-0 {
+  --_1i883gj3-3-7-0: var(--dt-colors-background-surface-default, #fff);
+  --_1i883gj4-3-7-0: var(--dt-colors-background-surface-default, #fff);
+}
+._1i883gj9-3-7-0 {
+  --_1i883gj0-3-7-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-7-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj3-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1i883gj4-3-7-0: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+  --_1i883gj5-3-7-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj6-3-7-0: var(--dt-colors-background-field-critical-accent, #c62239);
+}
+._1jgl8s50-3-7-0 ._1i883gj9-3-7-0 {
+  --_1i883gj3-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._1i883gja-3-7-0 {
+  --_1i883gj0-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj5-3-7-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+  --_1i883gj6-3-7-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: not-allowed;
 }
-._1i883gjc-3-5-2 {
+._1i883gjc-3-7-0 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gje-3-5-2 {
-  --_1i883gj2-3-5-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-5-2: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1i883gj4-3-5-2: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+._1i883gje-3-7-0 {
+  --_1i883gj2-3-7-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-7-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_1i883gj4-3-7-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-5-2 ._1i883gje-3-5-2 {
-  --_1i883gj3-3-5-2: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-7-0 ._1i883gje-3-7-0 {
+  --_1i883gj3-3-7-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1i883gjf-3-5-2 {
+._1i883gjf-3-7-0 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-5-2);
+  color: var(--_1i883gj1-3-7-0);
   white-space-collapse: preserve;
 }
-._1i883gjg-3-5-2 {
+._1i883gjg-3-7-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   border-radius: 0;
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
-  color: var(--_1i883gj2-3-5-2);
-  background-color: var(--_1i883gj3-3-5-2);
+  color: var(--_1i883gj2-3-7-0);
+  background-color: var(--_1i883gj3-3-7-0);
 }
-._1i883gjg-3-5-2:hover {
-  background-color: var(--_1i883gj4-3-5-2);
+._1i883gjg-3-7-0:hover {
+  background-color: var(--_1i883gj4-3-7-0);
 }
-._r47o0w0-3-5-2 ._r47o0w1-3-5-2 {
-  color: var(--_1i883gj0-3-5-2);
+._r47o0w0-3-7-0 ._r47o0w1-3-7-0 {
+  color: var(--_1i883gj0-3-7-0);
 }
-._r47o0w0-3-5-2 ._r47o0w1-3-5-2::before {
-  color: var(--_1i883gj1-3-5-2);
+._r47o0w0-3-7-0 ._r47o0w1-3-7-0::before {
+  color: var(--_1i883gj1-3-7-0);
 }
-._r47o0w0-3-5-2 ._r47o0w1-3-5-2:focus {
-  background-color: var(--_1i883gj6-3-5-2);
-  color: var(--_1i883gj5-3-5-2);
+._r47o0w0-3-7-0 ._r47o0w1-3-7-0:focus {
+  background-color: var(--_1i883gj6-3-7-0);
+  color: var(--_1i883gj5-3-7-0);
 }
-._r47o0w0-3-5-2 ._r47o0w1-3-5-2:focus::before {
-  color: var(--_1i883gj5-3-5-2);
+._r47o0w0-3-7-0 ._r47o0w1-3-7-0:focus::before {
+  color: var(--_1i883gj5-3-7-0);
 }
-._r47o0w0-3-5-2 *::selection {
+._r47o0w0-3-7-0 *::selection {
   background-color: transparent;
 }
-._r47o0w0-3-5-2 ._r47o0w1-3-5-2:focus::selection, ._r47o0w0-3-5-2 ._r47o0w1-3-5-2:focus *::selection {
+._r47o0w0-3-7-0 ._r47o0w1-3-7-0:focus::selection, ._r47o0w0-3-7-0 ._r47o0w1-3-7-0:focus *::selection {
   background-color: transparent;
-  color: var(--_1i883gj5-3-5-2);
+  color: var(--_1i883gj5-3-7-0);
 }
-._r47o0w0-3-5-2 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-5-2[data-drag-selected]::before {
-  background-color: var(--_1i883gj6-3-5-2);
-  color: var(--_1i883gj5-3-5-2);
+._r47o0w0-3-7-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-7-0[data-drag-selected]::before {
+  background-color: var(--_1i883gj6-3-7-0);
+  color: var(--_1i883gj5-3-7-0);
 }
-._r47o0w0-3-5-2 [data-drag-selected]::selection, ._r47o0w0-3-5-2 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+._r47o0w0-3-7-0 [data-drag-selected]::selection, ._r47o0w0-3-7-0 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
   background-color: transparent;
 }
-[data-shift-selection=true] ._r47o0w1-3-5-2:focus {
+[data-shift-selection=true] ._r47o0w1-3-7-0:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-5-2);
+  color: var(--_1i883gj0-3-7-0);
   caret-color: auto;
 }
-[data-shift-selection=true] ._r47o0w1-3-5-2:focus::before {
-  color: var(--_1i883gj1-3-5-2);
+[data-shift-selection=true] ._r47o0w1-3-7-0:focus::before {
+  color: var(--_1i883gj1-3-7-0);
 }
-._1i883gjh-3-5-2 {
+._1i883gjh-3-7-0 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjh-3-5-2:is(button._1i883gjh-3-5-2._1i883gjh-3-5-2) {
+._1i883gjh-3-7-0:is(button._1i883gjh-3-7-0._1i883gjh-3-7-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-5-2 ._1i883gjh-3-5-2._1i883gjh-3-5-2._1i883gjh-3-5-2 {
+._1jgl8s50-3-7-0 ._1i883gjh-3-7-0._1i883gjh-3-7-0._1i883gjh-3-7-0 {
   position: absolute;
   margin: var(--dt-spacings-size-0, 0);
   z-index: 0;

package/esm/forms/date-time-picker/DateTimePicker.sty.js

@@ -3,12 +3,12 @@ import "../../styles/textStyle.css";
 import "../spin-buttons/SpinButton.css";
 import "./DateTimePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var clearIconButton = "_1i883gjh-3-5-2";
-var dateSelector = "_1i883gjg-3-5-2";
-var dateTimePicker = _7a468({ defaultClassName: "_1i883gj7-3-5-2", variantClassNames: { readOnly: { true: "_1i883gj8-3-5-2" }, showError: { true: "_1i883gj9-3-5-2" }, disabled: { true: "_1i883gja-3-5-2" }, type: { date: "_1i883gjb-3-5-2", time: "_1i883gjc-3-5-2", datetime: "_1i883gjd-3-5-2" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-5-2"]] });
-var spinButtonGroup = "_1i883gjf-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v3-3-5-2 _da9a8vb-3-5-2";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-5-2)";
-var spinButtonSelectionColorVar = "var(--_1i883gj5-3-5-2)";
+var clearIconButton = "_1i883gjh-3-7-0";
+var dateSelector = "_1i883gjg-3-7-0";
+var dateTimePicker = _7a468({ defaultClassName: "_1i883gj7-3-7-0", variantClassNames: { readOnly: { true: "_1i883gj8-3-7-0" }, showError: { true: "_1i883gj9-3-7-0" }, disabled: { true: "_1i883gja-3-7-0" }, type: { date: "_1i883gjb-3-7-0", time: "_1i883gjc-3-7-0", datetime: "_1i883gjd-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-7-0"]] });
+var spinButtonGroup = "_1i883gjf-3-7-0 _da9a8v0-3-7-0 _da9a8v2-3-7-0 _da9a8v3-3-7-0 _da9a8vb-3-7-0";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-7-0)";
+var spinButtonSelectionColorVar = "var(--_1i883gj5-3-7-0)";
 export {
   clearIconButton,
   dateSelector,

package/esm/forms/date-time-picker/DateTimePicker.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjh-3-5-2';\nexport var dateSelector = '_1i883gjg-3-5-2';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj7-3-5-2',variantClassNames:{readOnly:{true:'_1i883gj8-3-5-2'},showError:{true:'_1i883gj9-3-5-2'},disabled:{true:'_1i883gja-3-5-2'},type:{date:'_1i883gjb-3-5-2',time:'_1i883gjc-3-5-2',datetime:'_1i883gjd-3-5-2'}},defaultVariants:{},compoundVariants:[[{readOnly:true,showError:true},'_1i883gje-3-5-2']]});\nexport var spinButtonGroup = '_1i883gjf-3-5-2 _da9a8v0-3-5-2 _da9a8v2-3-5-2 _da9a8v3-3-5-2 _da9a8vb-3-5-2';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj6-3-5-2)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj5-3-5-2)';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport './DateTimePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var clearIconButton = '_1i883gjh-3-7-0';\nexport var dateSelector = '_1i883gjg-3-7-0';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj7-3-7-0',variantClassNames:{readOnly:{true:'_1i883gj8-3-7-0'},showError:{true:'_1i883gj9-3-7-0'},disabled:{true:'_1i883gja-3-7-0'},type:{date:'_1i883gjb-3-7-0',time:'_1i883gjc-3-7-0',datetime:'_1i883gjd-3-7-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,showError:true},'_1i883gje-3-7-0']]});\nexport var spinButtonGroup = '_1i883gjf-3-7-0 _da9a8v0-3-7-0 _da9a8v2-3-7-0 _da9a8v3-3-7-0 _da9a8vb-3-7-0';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj6-3-7-0)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj5-3-7-0)';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB;AACtB,IAAI,eAAe;AACnB,IAAI,iBAAiB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,MAAK,EAAC,MAAK,mBAAkB,MAAK,mBAAkB,UAAS,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,WAAU,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACpW,IAAI,kBAAkB;AACtB,IAAI,wCAAwC;AAC5C,IAAI,8BAA8B;",
   "names": []
 }

package/esm/forms/date-time-picker/DateTimePickerRoot.js

@@ -12,11 +12,12 @@ import { useIntl } from "react-intl";
 import { XmarkIcon } from "@dynatrace/strato-icons";
 import { DateSelector } from "./DateSelector.js";
 import * as styles from "./DateTimePicker.sty.js";
+import { focusDateTimeInput } from "./utils/focusDateTimeInput.js";
 import { Button } from "../../buttons/button/Button.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { useDateTimePickerStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js";
@@ -24,16 +25,16 @@ import { InputGroup } from "../../layouts/input-group/InputGroup.js";
 import { fieldTokens } from "../../styles/field.sty.js";
 import { DateTimeInput } from "../date-time-range-picker/DateTimeInput.js";
 import { dateTimeRange } from "../date-time-range-picker/DateTimeRangePicker.sty.js";
+import { isExpressionTriggerKey } from "../date-time-range-picker/expression-trigger-helpers.js";
+import { isContentModifyingKey } from "../date-time-range-picker/helpers.js";
+import { onTimeframeCopyCapture } from "../date-time-range-picker/selection-copy-helpers.js";
+import { useSelectionInteractionHandlers } from "../date-time-range-picker/useSelectionInteractionHandlers.js";
 import { InternalBaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useMinMaxLogger } from "../forms-core/hooks/useMinMaxLogger.js";
 import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { useInputHint } from "../hooks/useInputHint.js";
-import { focusDateTimeInput } from "./utils/focusDateTimeInput.js";
-import { isExpressionTriggerKey } from "../date-time-range-picker/expression-trigger-helpers.js";
-import { onTimeframeCopyCapture } from "../date-time-range-picker/selection-copy-helpers.js";
-import { useSelectionInteractionHandlers } from "../date-time-range-picker/useSelectionInteractionHandlers.js";
 const COMPONENT_NAME = "DateTimePicker";
 const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
   const {
@@ -139,7 +140,12 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
       dateInputRef.current.expressionInputRef.textContent = "";
     }
   }, [value, dateInputRef]);
-  const { onMouseDown, onKeyDown: handleSelectionKeyDown } = useSelectionInteractionHandlers(
+  const {
+    onMouseDown,
+    onKeyDown: handleSelectionKeyDown,
+    onCutCapture,
+    onContextMenu
+  } = useSelectionInteractionHandlers(
     touchedContainerRef,
     useCallback(() => {
       focusDateTimeInput(null, dateInputRef);
@@ -173,6 +179,9 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
         event.stopPropagation();
         return;
       }
+      if (isContentModifyingKey(event)) {
+        dateInputRef.current?.clearPasteUndo();
+      }
       handleSelectionKeyDown(event);
     },
     [disabled, readOnly, handleSelectionKeyDown, dateInputRef]
@@ -237,6 +246,8 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
                     }
                   },
                   onCopyCapture: onTimeframeCopyCapture,
+                  onCutCapture,
+                  onContextMenu,
                   children: [
                     /* @__PURE__ */ jsx(
                       DateTimeInput,

package/esm/forms/date-time-picker/DateTimePickerRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePickerRoot.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  FocusEventHandler,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldTokens } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRange } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { isExpressionTriggerKey } from '../date-time-range-picker/expression-trigger-helpers.js';\nimport { onTimeframeCopyCapture } from '../date-time-range-picker/selection-copy-helpers.js';\nimport { useSelectionInteractionHandlers } from '../date-time-range-picker/useSelectionInteractionHandlers.js';\n\nconst COMPONENT_NAME = 'DateTimePicker';\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @internal\n */\nexport const DateTimePickerRoot = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    readOnly = false,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    placeholder,\n    name,\n    type = 'datetime',\n    controlState,\n    ...remainingProps\n  }: DateTimePickerProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const min = useDateTimePickerStore((state) => state.min);\n  const max = useDateTimePickerStore((state) => state.max);\n  const value = useDateTimePickerStore((state) => state.dateTimePickerValue);\n  const setValue = useDateTimePickerStore(\n    (state) => state.setDateTimePickerValue,\n  );\n  const dateInputRef = useDateTimePickerStore(\n    (state) => state.dateTimeInputRef,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  const [hasInputContent, setHasInputContent] = useState(false);\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'DateTimePicker');\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const { state: formFieldState, dispatch: formFieldDispatch } =\n    useFormFieldMessagesContext();\n  const { showError: showFormFieldError } = formFieldState;\n\n  // Backwards compatibility for controlState.\n  const [hasFormControlError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { hintProps } = useInputHint({\n    hint,\n    hasError: hasFormControlError,\n  });\n\n  const showError = hasFormControlError || showFormFieldError;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n  // No need to show the calendar widget if only a time value can be entered.\n  const showDateSelector = type !== 'time';\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n    color: showError ? 'critical' : 'neutral',\n    disabled,\n  });\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'Datepicker calendar trigger',\n    id: 'Uuc6xAAPyctyHamM',\n    description: 'Text shown for the datetimepicker calendar trigger.',\n  });\n  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time',\n    id: '5i26Rr1LLz0OIGNJ',\n    description: 'Aria label for the DateTimePicker clear button.',\n  });\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef<HTMLSpanElement> => ({\n      element: rootRef.current,\n      inputRef: dateInputRef.current?.inputRef,\n      triggerRef: dateInputRef.current?.inputRef,\n      open: () => dateSelectorRef.current?.open(),\n      close: () => dateSelectorRef.current?.close(),\n      focus() {\n        dateInputRef.current?.inputRef?.focus();\n      },\n      validate() {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formFieldDispatch, dateInputRef],\n  );\n\n  // mark the component as touched, if the touchedRef container is losing the focus\n  const onBlurTouched: FocusEventHandler = useCallback(\n    (e) => {\n      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [formFieldDispatch],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      value === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== '' &&\n      dateInputRef.current.element?.getAttribute('data-valuetype') !==\n        'expression'\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [value, dateInputRef]);\n\n  const { onMouseDown, onKeyDown: handleSelectionKeyDown } =\n    useSelectionInteractionHandlers(\n      touchedContainerRef,\n      useCallback(() => {\n        focusDateTimeInput(null, dateInputRef);\n      }, [dateInputRef]),\n      dateInputRef,\n    );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      const isIso =\n        dateInputRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      if (isExpressionTriggerKey(event) && isIso) {\n        dateInputRef.current?.setExpressionValue(event.key);\n        requestAnimationFrame(() => {\n          const expressionInputRef = dateInputRef.current?.expressionInputRef;\n          if (expressionInputRef) {\n            expressionInputRef.focus();\n            const selection = window.getSelection();\n            if (selection) {\n              const range = document.createRange();\n              range.selectNodeContents(expressionInputRef);\n              range.collapse(false);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          }\n        });\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [disabled, readOnly, handleSelectionKeyDown, dateInputRef],\n  );\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={rootRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <InputGroup\n        className={clsx(\n          styles.dateTimePicker({\n            type,\n            disabled: disabledOrAriaDisabled,\n            showError,\n            readOnly,\n          }),\n        )}\n        style={{ gridAutoColumns: '1fr auto' }}\n      >\n        <div\n          ref={touchedContainerRef}\n          className={clsx(\n            fieldTokens({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRange({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onBlur={onBlurTouched}\n          onInput={() => {\n            setHasInputContent(\n              !!dateInputRef.current?.expressionInputRef?.textContent,\n            );\n          }}\n          onMouseDown={onMouseDown}\n          onKeyDown={onKeyDown}\n          onFocus={(e: FocusEvent) => {\n            // Forward the focus only if it is coming from outside this component.\n            // Focus the first spin button with textContent; otherwise, focus the input.\n            if (!rootRef.current?.contains(e.relatedTarget)) {\n              focusDateTimeInput(e, dateInputRef);\n            }\n          }}\n          onCopyCapture={onTimeframeCopyCapture}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={value}\n            onChange={(newValue) => {\n              if (typeof newValue !== 'string') {\n                setValue(newValue);\n              }\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            required={required}\n            validationValueMode=\"single\"\n            controlId={id}\n            controlState={controlState}\n            onPasteComplete={() => {\n              requestAnimationFrame(() => {\n                dateInputRef.current?.focusLast();\n              });\n            }}\n          />\n          {!readOnly &&\n            !disabledOrAriaDisabled &&\n            ((value !== null && value.value !== '') || hasInputContent) && (\n              <Button\n                onFocus={() => {\n                  formFieldDispatch?.({\n                    type: FormFieldMessagesAction.SETISTOUCHED,\n                    payload: { isTouched: true },\n                  });\n                }}\n                onClick={() => {\n                  setValue(null);\n                  if (dateInputRef.current?.expressionInputRef) {\n                    dateInputRef.current.expressionInputRef.textContent = '';\n                  }\n                  setHasInputContent(false);\n                  requestAnimationFrame(() => {\n                    dateInputRef.current?.expressionInputRef?.focus();\n                  });\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    e.stopPropagation();\n                  }\n                }}\n                className={styles.clearIconButton}\n                color={showError ? 'critical' : 'neutral'}\n                size=\"condensed\"\n                aria-label={clearButtonLabel}\n              >\n                <XmarkIcon />\n              </Button>\n            )}\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            disabled={!!disabled}\n            error={showError}\n            className={clsx(styles.dateSelector, inputGroupClassName)}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={hasFormControlError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </InternalBaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  DateTimePickerRoot as typeof DateTimePickerRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  FocusEventHandler,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldTokens } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRange } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport { isExpressionTriggerKey } from '../date-time-range-picker/expression-trigger-helpers.js';\nimport { isContentModifyingKey } from '../date-time-range-picker/helpers.js';\nimport { onTimeframeCopyCapture } from '../date-time-range-picker/selection-copy-helpers.js';\nimport { useSelectionInteractionHandlers } from '../date-time-range-picker/useSelectionInteractionHandlers.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'DateTimePicker';\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @internal\n */\nexport const DateTimePickerRoot = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    readOnly = false,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    placeholder,\n    name,\n    type = 'datetime',\n    controlState,\n    ...remainingProps\n  }: DateTimePickerProps = props;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const min = useDateTimePickerStore((state) => state.min);\n  const max = useDateTimePickerStore((state) => state.max);\n  const value = useDateTimePickerStore((state) => state.dateTimePickerValue);\n  const setValue = useDateTimePickerStore(\n    (state) => state.setDateTimePickerValue,\n  );\n  const dateInputRef = useDateTimePickerStore(\n    (state) => state.dateTimeInputRef,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  const [hasInputContent, setHasInputContent] = useState(false);\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'DateTimePicker');\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const { state: formFieldState, dispatch: formFieldDispatch } =\n    useFormFieldMessagesContext();\n  const { showError: showFormFieldError } = formFieldState;\n\n  // Backwards compatibility for controlState.\n  const [hasFormControlError, hint] = useFormControlState(controlState);\n  // _useInputHint will be replaced with new validation concept. APPDEV-8298\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { hintProps } = useInputHint({\n    hint,\n    hasError: hasFormControlError,\n  });\n\n  const showError = hasFormControlError || showFormFieldError;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n  // No need to show the calendar widget if only a time value can be entered.\n  const showDateSelector = type !== 'time';\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n    color: showError ? 'critical' : 'neutral',\n    disabled,\n  });\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'Datepicker calendar trigger',\n    id: 'Uuc6xAAPyctyHamM',\n    description: 'Text shown for the datetimepicker calendar trigger.',\n  });\n  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time',\n    id: '5i26Rr1LLz0OIGNJ',\n    description: 'Aria label for the DateTimePicker clear button.',\n  });\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef<HTMLSpanElement> => ({\n      element: rootRef.current,\n      inputRef: dateInputRef.current?.inputRef,\n      triggerRef: dateInputRef.current?.inputRef,\n      open: () => dateSelectorRef.current?.open(),\n      close: () => dateSelectorRef.current?.close(),\n      focus() {\n        dateInputRef.current?.inputRef?.focus();\n      },\n      validate() {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formFieldDispatch, dateInputRef],\n  );\n\n  // mark the component as touched, if the touchedRef container is losing the focus\n  const onBlurTouched: FocusEventHandler = useCallback(\n    (e) => {\n      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [formFieldDispatch],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      value === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== '' &&\n      dateInputRef.current.element?.getAttribute('data-valuetype') !==\n        'expression'\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [value, dateInputRef]);\n\n  const {\n    onMouseDown,\n    onKeyDown: handleSelectionKeyDown,\n    onCutCapture,\n    onContextMenu,\n  } = useSelectionInteractionHandlers(\n    touchedContainerRef,\n    useCallback(() => {\n      focusDateTimeInput(null, dateInputRef);\n    }, [dateInputRef]),\n    dateInputRef,\n  );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      const isIso =\n        dateInputRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      if (isExpressionTriggerKey(event) && isIso) {\n        dateInputRef.current?.setExpressionValue(event.key);\n        requestAnimationFrame(() => {\n          const expressionInputRef = dateInputRef.current?.expressionInputRef;\n          if (expressionInputRef) {\n            expressionInputRef.focus();\n            const selection = window.getSelection();\n            if (selection) {\n              const range = document.createRange();\n              range.selectNodeContents(expressionInputRef);\n              range.collapse(false);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          }\n        });\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      if (isContentModifyingKey(event)) {\n        dateInputRef.current?.clearPasteUndo();\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [disabled, readOnly, handleSelectionKeyDown, dateInputRef],\n  );\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={rootRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <InputGroup\n        className={clsx(\n          styles.dateTimePicker({\n            type,\n            disabled: disabledOrAriaDisabled,\n            showError,\n            readOnly,\n          }),\n        )}\n        style={{ gridAutoColumns: '1fr auto' }}\n      >\n        <div\n          ref={touchedContainerRef}\n          className={clsx(\n            fieldTokens({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRange({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onBlur={onBlurTouched}\n          onInput={() => {\n            setHasInputContent(\n              !!dateInputRef.current?.expressionInputRef?.textContent,\n            );\n          }}\n          onMouseDown={onMouseDown}\n          onKeyDown={onKeyDown}\n          onFocus={(e: FocusEvent) => {\n            // Forward the focus only if it is coming from outside this component.\n            // Focus the first spin button with textContent; otherwise, focus the input.\n            if (!rootRef.current?.contains(e.relatedTarget)) {\n              focusDateTimeInput(e, dateInputRef);\n            }\n          }}\n          onCopyCapture={onTimeframeCopyCapture}\n          onCutCapture={onCutCapture}\n          onContextMenu={onContextMenu}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={value}\n            onChange={(newValue) => {\n              if (typeof newValue !== 'string') {\n                setValue(newValue);\n              }\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            required={required}\n            validationValueMode=\"single\"\n            controlId={id}\n            controlState={controlState}\n            onPasteComplete={() => {\n              requestAnimationFrame(() => {\n                dateInputRef.current?.focusLast();\n              });\n            }}\n          />\n          {!readOnly &&\n            !disabledOrAriaDisabled &&\n            ((value !== null && value.value !== '') || hasInputContent) && (\n              <Button\n                onFocus={() => {\n                  formFieldDispatch?.({\n                    type: FormFieldMessagesAction.SETISTOUCHED,\n                    payload: { isTouched: true },\n                  });\n                }}\n                onClick={() => {\n                  setValue(null);\n                  if (dateInputRef.current?.expressionInputRef) {\n                    dateInputRef.current.expressionInputRef.textContent = '';\n                  }\n                  setHasInputContent(false);\n                  requestAnimationFrame(() => {\n                    dateInputRef.current?.expressionInputRef?.focus();\n                  });\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    e.stopPropagation();\n                  }\n                }}\n                className={styles.clearIconButton}\n                color={showError ? 'critical' : 'neutral'}\n                size=\"condensed\"\n                aria-label={clearButtonLabel}\n              >\n                <XmarkIcon />\n              </Button>\n            )}\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            disabled={!!disabled}\n            error={showError}\n            className={clsx(styles.dateSelector, inputGroupClassName)}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={hasFormControlError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </InternalBaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  DateTimePickerRoot as typeof DateTimePickerRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/date-time-picker/hooks/useDateTimePicker.js

@@ -2,6 +2,8 @@ import { TZDateMini } from "@date-fns/tz";
 import { isAfter, isBefore, isValid } from "date-fns";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
+import { useDateTimeFormat } from "./useDateTimeFormat.js";
+import { useSpinButtons } from "./useSpinButtons.js";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { usePrevious } from "../../../core/hooks/usePrevious.js";
 import { useFormFieldMessagesContext } from "../../forms-core/hooks/useFormFieldMessagesContext.js";
@@ -9,8 +11,7 @@ import {
   getTimeValue,
   removePrecision
 } from "../../forms-core/time/timeParser.js";
-import { useDateTimeFormat } from "./useDateTimeFormat.js";
-import { useSpinButtons } from "./useSpinButtons.js";
+import { focusElementWithRetry } from "../utils/focusDateTimeInput.js";
 function useDateTimePicker(props) {
   const {
     type,
@@ -78,9 +79,7 @@ function useDateTimePicker(props) {
       value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),
       onChange: (newIsoString) => {
         applyDateTime(newIsoString, /* @__PURE__ */ new Set(["year", "month", "day"]));
-        requestAnimationFrame(
-          () => handlers.get("hour")?.element.current?.focus()
-        );
+        focusElementWithRetry(() => handlers.get("hour")?.element.current);
       },
       disabled: disabled || readOnly,
       error: false

package/esm/forms/date-time-picker/hooks/useDateTimePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useDateTimePicker.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isAfter, isBefore, isValid } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getTimeValue,\n  removePrecision,\n} from '../../forms-core/time/timeParser.js';\nimport type {\n  DateSelectorProps,\n  DateTimePickerProps,\n  DateTimePickerType,\n} from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport { useSpinButtons } from './useSpinButtons.js';\nimport type { TimeValue } from '../../../core/types/time.js';\n\n/**\n * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.\n */\nexport function useDateTimePicker(\n  // 'type' may be 'never', but for the hook we always want to accept it.\n  props: Omit<DateTimePickerProps, 'type'> & {\n    type?: DateTimePickerType;\n    valueType?: TimeValue['type'];\n    value: string | null;\n  },\n) {\n  const {\n    type,\n    precision,\n    min,\n    max,\n    disabled = false,\n    readOnly = false,\n    value: propValue,\n    onChange,\n    required,\n    valueType,\n  } = props;\n\n  // The spin buttons are only visible and interactive\n  // in 'iso8601' mode and should be disabled for expression input\n  const isDisabled = disabled || valueType !== 'iso8601';\n\n  const timezone = getTimezone();\n\n  // use the aria label of the datetime picker to prefix each spinbutton aria label\n  const { 'aria-label': ariaLabelPrefix } = useAriaLabelingProps(props);\n\n  const value = propValue === '' ? null : propValue;\n\n  const [isoDateTime, setIsoDateTime] = useState(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n\n  // Tracks the intended isoDateTime value synchronously, before React commits the\n  // new state. The TimeframeSelector's setDateTimeRangePickerTimeframe always updates\n  // the Zustand store synchronously inside the dateTime effect (before React commits\n  // isoDateTime). This triggers a subscriber re-render where spinButtonValue is already\n  // the new value but isoDateTime in the closure is still the old stale value. The\n  // controlled value effect would then call applyDateTime unnecessarily, resetting the\n  // spinbutton cursor to position 0 so that the next digit typed would be rejected as\n  // too long (candidate \"00020\" exceeds the 4-digit max). By updating this ref before\n  // calling setIsoDateTime, the controlled value effect always compares against the\n  // correct pending value regardless of when Zustand triggers its re-render.\n  const pendingIsoDateTimeRef = useRef(isoDateTime);\n  const { toParts, emptyParts } = useDateTimeFormat(type, precision);\n  const {\n    state: { isValid: isValidFormControl },\n  } = useFormFieldMessagesContext();\n  const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } =\n    useSpinButtons(\n      isoDateTime,\n      type,\n      precision,\n      isDisabled,\n      readOnly,\n      ariaLabelPrefix,\n      value,\n    );\n  const prevDateTime = usePrevious(dateTime);\n\n  const minDateTime = useMemo(() => {\n    const candidate =\n      min !== undefined ? new TZDateMini(min, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [min, timezone]);\n  const maxDateTime = useMemo(() => {\n    const candidate =\n      max !== undefined ? new TZDateMini(max, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [max, timezone]);\n\n  /**\n   * Callback to apply a given iso date to the currently rendered spinbuttons\n   * Accepts a pass filter to apply the iso datetime to only a subset of the spinbuttons.\n   * Returns true, if the iso date was applied successfully. False otherwise.\n   */\n  const applyDateTime = useCallback(\n    (\n      isoDateTime: string | null,\n      passFilter?: Set<Intl.DateTimeFormatPart['type']>,\n    ) => {\n      if (isoDateTime === null) {\n        updateParts(emptyParts);\n        return true;\n      }\n\n      const newDate = new TZDateMini(isoDateTime, timezone);\n\n      // Add timezone offset for type 'date' to have the correct date when there is no time information (2025-01-01Z).\n      newDate.setMinutes(\n        newDate.getMinutes() +\n          (type === 'date' ? newDate.getTimezoneOffset() : 0),\n      );\n\n      if (!isValid(newDate)) {\n        return false;\n      }\n      const newDateParts = toParts(newDate);\n      passFilter\n        ? updateParts(newDateParts.filter((p) => passFilter.has(p.type)))\n        : updateParts(newDateParts);\n\n      return true;\n    },\n    [emptyParts, timezone, toParts, type, updateParts],\n  );\n\n  const dateSelectorProps: DateSelectorProps = useMemo(\n    () => ({\n      value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),\n      onChange: (newIsoString: string) => {\n        // Only apply the date part of the iso date returned by the calendar.\n        // Don't touch the time values, but set the focus to the hour field in the next render cycle.\n        applyDateTime(newIsoString, new Set(['year', 'month', 'day']));\n        // Selecting a date in the calendar closes the overlay and restores the focus to the date picker trigger.\n        // In order to set the focus to the time spin buttons, we need to defer setting the focus.\n        requestAnimationFrame(() =>\n          handlers.get('hour')?.element.current?.focus(),\n        );\n      },\n      disabled: disabled || readOnly,\n      error: false,\n    }),\n    [isoDateTime, timezone, disabled, readOnly, applyDateTime, handlers],\n  );\n\n  // Show the error state, if the value is outside of given bounds or the date object is invalid.\n  const error = useMemo(() => {\n    if (!isValidFormControl) {\n      return true;\n    }\n\n    if (!required && isoDateTime === null) {\n      return false;\n    }\n\n    return (\n      (dateTime === null ||\n        !isValid(dateTime) ||\n        (minDateTime && isBefore(dateTime, minDateTime)) ||\n        (maxDateTime && isAfter(dateTime, maxDateTime))) ??\n      false\n    );\n  }, [\n    isValidFormControl,\n    required,\n    isoDateTime,\n    dateTime,\n    minDateTime,\n    maxDateTime,\n  ]);\n\n  // true, if none of the content parts contains any content\n  const empty = useMemo(\n    () => !parts.some((part) => part.type !== 'literal' && part.value !== ''),\n    [parts],\n  );\n\n  // If the datetime is valid, convert to an ISO8601 datetime string.\n  useEffect(() => {\n    // Don't trigger an 'onChange' on initial render or if the value didn't actually change.\n    const numericDateTime = +(dateTime || 0);\n    const numericPrevDateTime = +(prevDateTime || 0);\n    if (\n      prevDateTime === undefined ||\n      (Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime)) ||\n      numericDateTime === numericPrevDateTime\n    ) {\n      return;\n    }\n\n    // propagate null dateTime to isoDateTime\n    if (dateTime === null) {\n      pendingIsoDateTimeRef.current = null;\n      setIsoDateTime(null);\n      onChange?.(null);\n      return;\n    }\n\n    // only allow valid datetime values\n    if (!isValid(dateTime)) {\n      pendingIsoDateTimeRef.current = null;\n      setIsoDateTime(null);\n      onChange?.('Invalid Date');\n      return;\n    }\n\n    const newIsoDateTime = dateTime.toISOString();\n\n    // ignore if nothing has changed\n    if (isoDateTime === newIsoDateTime) {\n      return;\n    }\n\n    // Update the ref synchronously before calling setIsoDateTime so that any\n    // Zustand subscriber re-render triggered synchronously by the onChange chain\n    // below already sees the correct pending value in the controlled value effect.\n    pendingIsoDateTimeRef.current = newIsoDateTime;\n    setIsoDateTime(newIsoDateTime);\n    onChange?.(getTimeValue(newIsoDateTime ?? null, precision) ?? null);\n\n    // Don't run on an onChange callback update.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dateTime, prevDateTime]);\n\n  // If the controlled value has changed, apply the new value to the spinbuttons\n  // Don't combine with the above effect. This effect needs to be run in the next render cycle.\n  useEffect(() => {\n    // only apply if value is different (prevents issues while typing and prefixing with 0)\n    if (\n      removePrecision(\n        pendingIsoDateTimeRef.current ?? '',\n        type === 'date' ? 'day' : precision,\n      ) !== value\n    ) {\n      applyDateTime(\n        getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n      );\n    }\n\n    // Only run if the controlled prop value is updated.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return {\n    isoDateTime,\n    spinButtons,\n    handlers,\n    dateSelectorProps,\n    error,\n    empty,\n    applyDateTime,\n    firstSpinButtonHandler: handlers.get(parts[0]?.type),\n    dateTime,\n    toDateTime,\n    parts,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isAfter, isBefore, isValid } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport { useSpinButtons } from './useSpinButtons.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getTimeValue,\n  removePrecision,\n} from '../../forms-core/time/timeParser.js';\nimport type {\n  DateSelectorProps,\n  DateTimePickerProps,\n  DateTimePickerType,\n} from '../types.js';\nimport { focusElementWithRetry } from '../utils/focusDateTimeInput.js';\n\n/**\n * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.\n */\nexport function useDateTimePicker(\n  // 'type' may be 'never', but for the hook we always want to accept it.\n  props: Omit<DateTimePickerProps, 'type'> & {\n    type?: DateTimePickerType;\n    valueType?: TimeValue['type'];\n    value: string | null;\n  },\n) {\n  const {\n    type,\n    precision,\n    min,\n    max,\n    disabled = false,\n    readOnly = false,\n    value: propValue,\n    onChange,\n    required,\n    valueType,\n  } = props;\n\n  // The spin buttons are only visible and interactive\n  // in 'iso8601' mode and should be disabled for expression input\n  const isDisabled = disabled || valueType !== 'iso8601';\n\n  const timezone = getTimezone();\n\n  // use the aria label of the datetime picker to prefix each spinbutton aria label\n  const { 'aria-label': ariaLabelPrefix } = useAriaLabelingProps(props);\n\n  const value = propValue === '' ? null : propValue;\n\n  const [isoDateTime, setIsoDateTime] = useState(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n\n  // Tracks the intended isoDateTime value synchronously, before React commits the\n  // new state. The TimeframeSelector's setDateTimeRangePickerTimeframe always updates\n  // the Zustand store synchronously inside the dateTime effect (before React commits\n  // isoDateTime). This triggers a subscriber re-render where spinButtonValue is already\n  // the new value but isoDateTime in the closure is still the old stale value. The\n  // controlled value effect would then call applyDateTime unnecessarily, resetting the\n  // spinbutton cursor to position 0 so that the next digit typed would be rejected as\n  // too long (candidate \"00020\" exceeds the 4-digit max). By updating this ref before\n  // calling setIsoDateTime, the controlled value effect always compares against the\n  // correct pending value regardless of when Zustand triggers its re-render.\n  const pendingIsoDateTimeRef = useRef(isoDateTime);\n  const { toParts, emptyParts } = useDateTimeFormat(type, precision);\n  const {\n    state: { isValid: isValidFormControl },\n  } = useFormFieldMessagesContext();\n  const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } =\n    useSpinButtons(\n      isoDateTime,\n      type,\n      precision,\n      isDisabled,\n      readOnly,\n      ariaLabelPrefix,\n      value,\n    );\n  const prevDateTime = usePrevious(dateTime);\n\n  const minDateTime = useMemo(() => {\n    const candidate =\n      min !== undefined ? new TZDateMini(min, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [min, timezone]);\n  const maxDateTime = useMemo(() => {\n    const candidate =\n      max !== undefined ? new TZDateMini(max, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [max, timezone]);\n\n  /**\n   * Callback to apply a given iso date to the currently rendered spinbuttons\n   * Accepts a pass filter to apply the iso datetime to only a subset of the spinbuttons.\n   * Returns true, if the iso date was applied successfully. False otherwise.\n   */\n  const applyDateTime = useCallback(\n    (\n      isoDateTime: string | null,\n      passFilter?: Set<Intl.DateTimeFormatPart['type']>,\n    ) => {\n      if (isoDateTime === null) {\n        updateParts(emptyParts);\n        return true;\n      }\n\n      const newDate = new TZDateMini(isoDateTime, timezone);\n\n      // Add timezone offset for type 'date' to have the correct date when there is no time information (2025-01-01Z).\n      newDate.setMinutes(\n        newDate.getMinutes() +\n          (type === 'date' ? newDate.getTimezoneOffset() : 0),\n      );\n\n      if (!isValid(newDate)) {\n        return false;\n      }\n      const newDateParts = toParts(newDate);\n      passFilter\n        ? updateParts(newDateParts.filter((p) => passFilter.has(p.type)))\n        : updateParts(newDateParts);\n\n      return true;\n    },\n    [emptyParts, timezone, toParts, type, updateParts],\n  );\n\n  const dateSelectorProps: DateSelectorProps = useMemo(\n    () => ({\n      value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),\n      onChange: (newIsoString: string) => {\n        // Only apply the date part of the iso date returned by the calendar.\n        // Don't touch the time values, but set the focus to the hour field in the next render cycle.\n        applyDateTime(newIsoString, new Set(['year', 'month', 'day']));\n        // Selecting a date in the calendar closes the overlay and restores the focus to the date picker trigger.\n        // In order to set the focus to the time spin buttons, we need to defer setting the focus.\n        focusElementWithRetry(() => handlers.get('hour')?.element.current);\n      },\n      disabled: disabled || readOnly,\n      error: false,\n    }),\n    [isoDateTime, timezone, disabled, readOnly, applyDateTime, handlers],\n  );\n\n  // Show the error state, if the value is outside of given bounds or the date object is invalid.\n  const error = useMemo(() => {\n    if (!isValidFormControl) {\n      return true;\n    }\n\n    if (!required && isoDateTime === null) {\n      return false;\n    }\n\n    return (\n      (dateTime === null ||\n        !isValid(dateTime) ||\n        (minDateTime && isBefore(dateTime, minDateTime)) ||\n        (maxDateTime && isAfter(dateTime, maxDateTime))) ??\n      false\n    );\n  }, [\n    isValidFormControl,\n    required,\n    isoDateTime,\n    dateTime,\n    minDateTime,\n    maxDateTime,\n  ]);\n\n  // true, if none of the content parts contains any content\n  const empty = useMemo(\n    () => !parts.some((part) => part.type !== 'literal' && part.value !== ''),\n    [parts],\n  );\n\n  // If the datetime is valid, convert to an ISO8601 datetime string.\n  useEffect(() => {\n    // Don't trigger an 'onChange' on initial render or if the value didn't actually change.\n    const numericDateTime = +(dateTime || 0);\n    const numericPrevDateTime = +(prevDateTime || 0);\n    if (\n      prevDateTime === undefined ||\n      (Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime)) ||\n      numericDateTime === numericPrevDateTime\n    ) {\n      return;\n    }\n\n    // propagate null dateTime to isoDateTime\n    if (dateTime === null) {\n      pendingIsoDateTimeRef.current = null;\n      setIsoDateTime(null);\n      onChange?.(null);\n      return;\n    }\n\n    // only allow valid datetime values\n    if (!isValid(dateTime)) {\n      pendingIsoDateTimeRef.current = null;\n      setIsoDateTime(null);\n      onChange?.('Invalid Date');\n      return;\n    }\n\n    const newIsoDateTime = dateTime.toISOString();\n\n    // ignore if nothing has changed\n    if (isoDateTime === newIsoDateTime) {\n      return;\n    }\n\n    // Update the ref synchronously before calling setIsoDateTime so that any\n    // Zustand subscriber re-render triggered synchronously by the onChange chain\n    // below already sees the correct pending value in the controlled value effect.\n    pendingIsoDateTimeRef.current = newIsoDateTime;\n    setIsoDateTime(newIsoDateTime);\n    onChange?.(getTimeValue(newIsoDateTime ?? null, precision) ?? null);\n\n    // Don't run on an onChange callback update.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dateTime, prevDateTime]);\n\n  // If the controlled value has changed, apply the new value to the spinbuttons\n  // Don't combine with the above effect. This effect needs to be run in the next render cycle.\n  useEffect(() => {\n    // only apply if value is different (prevents issues while typing and prefixing with 0)\n    if (\n      removePrecision(\n        pendingIsoDateTimeRef.current ?? '',\n        type === 'date' ? 'day' : precision,\n      ) !== value\n    ) {\n      applyDateTime(\n        getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n      );\n    }\n\n    // Only run if the controlled prop value is updated.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return {\n    isoDateTime,\n    spinButtons,\n    handlers,\n    dateSelectorProps,\n    error,\n    empty,\n    applyDateTime,\n    firstSpinButtonHandler: handlers.get(parts[0]?.type),\n    dateTime,\n    toDateTime,\n    parts,\n  };\n}\n"],
+  "mappings": "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",
   "names": ["isoDateTime"]
 }

package/esm/forms/date-time-picker/utils/focusDateTimeInput.js

@@ -84,8 +84,31 @@ const focusTimeInput = (dateTimeFromRef) => {
   }
   focusDateTimeInput(null, dateTimeFromRef);
 };
+const MAX_FOCUS_ATTEMPTS = 3;
+const focusElementWithRetry = (getElement, dateTimeRef) => {
+  let attempts = 0;
+  const tryFocus = () => {
+    attempts++;
+    const element = getElement();
+    if (element) {
+      element.focus();
+      if (document.activeElement === element) {
+        return;
+      }
+    }
+    if (attempts < MAX_FOCUS_ATTEMPTS) {
+      requestAnimationFrame(tryFocus);
+      return;
+    }
+    if (dateTimeRef) {
+      focusDateTimeInput(null, dateTimeRef);
+    }
+  };
+  requestAnimationFrame(tryFocus);
+};
 export {
   focusDateTimeInput,
+  focusElementWithRetry,
   focusTimeInput
 };
 //# sourceMappingURL=focusDateTimeInput.js.map

package/esm/forms/date-time-picker/utils/focusDateTimeInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/utils/focusDateTimeInput.ts"],
-  "sourcesContent": ["import {\n  type RefObject,\n  type FocusEvent as ReactFocusEvent,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport { type DateTimeInputRef } from '../../date-time-range-picker/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\n\n/*\n * Handles the focus event within 'DateTimeInput' components.\n * Moving the focus to the `DateTimeInput` focuses the 'to input' or the first empty spin button.\n * If everything is empty focus the 'from input'.\n * If the target element is one of the spin buttons or expression, the focus is not redirected.\n * @internal\n */\nexport const focusDateTimeInput = (\n  event: ReactFocusEvent | ReactMouseEvent | null,\n  refFrom: RefObject<DateTimeInputRef | null>,\n  refTo?: RefObject<DateTimeInputRef | null>,\n) => {\n  const spinButtonHandlersTo = refTo?.current?.spinButtonHandlers;\n  const spinButtonHandlersFrom = refFrom?.current?.spinButtonHandlers;\n\n  /** Check if the target element is one of the spin buttons or expression. */\n  const isTargetValid = (target: EventTarget | undefined) => {\n    const spinButtonsFrom = Array.from(\n      spinButtonHandlersTo?.values() || [],\n    ).map((handler) => handler?.element.current);\n    const spinButtonsTo = Array.from(\n      spinButtonHandlersFrom?.values() || [],\n    ).map((handler) => handler?.element.current);\n\n    const allSpinButtons = [\n      ...spinButtonsFrom,\n      ...spinButtonsTo,\n      ...[refTo?.current?.expressionInputRef],\n      ...[refFrom?.current?.expressionInputRef],\n    ];\n\n    return (\n      target !== undefined && allSpinButtons.includes(target as HTMLSpanElement)\n    );\n  };\n\n  /**\n   * Checks if any spin button in the provided handlers is empty (has no textContent).\n   * Returns false if all spin buttons are empty or none are empty.\n   */\n  const isAnySpinButtonEmpty = (\n    handlers:\n      | Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>\n      | undefined,\n  ): boolean => {\n    if (!handlers) {\n      return false;\n    }\n\n    let hasEmpty = false;\n    let allEmpty = true;\n\n    for (const [, handler] of handlers) {\n      const textContent = handler?.element.current?.textContent;\n      if (textContent === '') {\n        hasEmpty = true;\n      } else {\n        allEmpty = false;\n      }\n    }\n\n    return hasEmpty && !allEmpty;\n  };\n\n  /**\n   * Find the first spin button or the first empty one.\n   */\n  const findLastEntryWithTextContent = (\n    handlers:\n      | Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>\n      | undefined,\n  ) => {\n    if (!handlers) {\n      return null;\n    }\n\n    let firstSpinButtonHandler: SpinButtonHandler | null = null;\n\n    for (const [, handler] of handlers) {\n      if (!firstSpinButtonHandler) {\n        firstSpinButtonHandler = handler;\n      }\n      if (!handler?.element.current?.textContent) {\n        firstSpinButtonHandler = handler;\n        break;\n      }\n    }\n\n    return firstSpinButtonHandler;\n  };\n\n  if (isTargetValid(event?.target)) {\n    return;\n  }\n\n  const emptyToSpinButton = isAnySpinButtonEmpty(spinButtonHandlersTo);\n  const emptyFromSpinButton = isAnySpinButtonEmpty(spinButtonHandlersFrom);\n\n  const firstFromSpinButtonHandler = findLastEntryWithTextContent(\n    spinButtonHandlersFrom,\n  );\n  const firstToSpinButtonHandler =\n    findLastEntryWithTextContent(spinButtonHandlersTo);\n\n  // Focus the 'to spin buttons', when they have at least one empty.\n  if (emptyToSpinButton && !emptyFromSpinButton) {\n    const firstToSpinButtonHandler =\n      findLastEntryWithTextContent(spinButtonHandlersTo);\n    if (firstToSpinButtonHandler) {\n      firstToSpinButtonHandler?.element.current?.focus();\n      return;\n    }\n  }\n\n  // Focus the 'from spin buttons' when they have at least one empty or when 'to input' is filled.\n  if (\n    emptyFromSpinButton ||\n    (firstFromSpinButtonHandler?.element.current?.textContent !== '' &&\n      (refTo?.current?.expressionInputRef?.textContent !== '' ||\n        firstToSpinButtonHandler?.element.current?.textContent !== ''))\n  ) {\n    if (firstFromSpinButtonHandler) {\n      firstFromSpinButtonHandler?.element.current?.focus();\n      return;\n    }\n  }\n\n  // Focus the 'to expression input' when 'from expression input' is filled and 'to input is empty'.\n  if (\n    refFrom?.current?.expressionInputRef?.textContent !== '' &&\n    refTo?.current?.expressionInputRef?.textContent === '' &&\n    firstToSpinButtonHandler?.element.current?.textContent === ''\n  ) {\n    refTo?.current?.expressionInputRef?.focus?.();\n    return;\n  }\n\n  // Focus the 'from expression input'.\n  refFrom?.current?.expressionInputRef?.focus();\n};\n\n/**\n * Attempts to move the focus to the \"hour\" spin button of the \"from\" input.\n * The hour spin button is only foucsable if the value is an absolute timeframe (ISO 8601)\n * and not an expression. If focus is not possible, falls back to {@link focusDateTimeInput}.\n * @param dateTimeFromRef - the ref of the \"from\" DateTimeInput component\n * @internal\n */\nexport const focusTimeInput = (\n  dateTimeFromRef: RefObject<DateTimeInputRef | null>,\n): void => {\n  const hourElement =\n    dateTimeFromRef.current?.spinButtonHandlers.get('hour')?.element.current;\n  if (hourElement) {\n    hourElement.focus();\n    return;\n  }\n  focusDateTimeInput(null, dateTimeFromRef);\n};\n"],
-  "mappings": "AAgBO,MAAM,qBAAqB,CAChC,OACA,SACA,UACG;AACH,QAAM,uBAAuB,OAAO,SAAS;AAC7C,QAAM,yBAAyB,SAAS,SAAS;AAGjD,QAAM,gBAAgB,CAAC,WAAoC;AACzD,UAAM,kBAAkB,MAAM;AAAA,MAC5B,sBAAsB,OAAO,KAAK,CAAC;AAAA,IACrC,EAAE,IAAI,CAAC,YAAY,SAAS,QAAQ,OAAO;AAC3C,UAAM,gBAAgB,MAAM;AAAA,MAC1B,wBAAwB,OAAO,KAAK,CAAC;AAAA,IACvC,EAAE,IAAI,CAAC,YAAY,SAAS,QAAQ,OAAO;AAE3C,UAAM,iBAAiB;AAAA,MACrB,GAAG;AAAA,MACH,GAAG;AAAA,MACH,GAAG,CAAC,OAAO,SAAS,kBAAkB;AAAA,MACtC,GAAG,CAAC,SAAS,SAAS,kBAAkB;AAAA,IAC1C;AAEA,WACE,WAAW,UAAa,eAAe,SAAS,MAAyB;AAAA,EAE7E;AAMA,QAAM,uBAAuB,CAC3B,aAGY;AACZ,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,QAAI,WAAW;AACf,QAAI,WAAW;AAEf,eAAW,CAAC,EAAE,OAAO,KAAK,UAAU;AAClC,YAAM,cAAc,SAAS,QAAQ,SAAS;AAC9C,UAAI,gBAAgB,IAAI;AACtB,mBAAW;AAAA,MACb,OAAO;AACL,mBAAW;AAAA,MACb;AAAA,IACF;AAEA,WAAO,YAAY,CAAC;AAAA,EACtB;AAKA,QAAM,+BAA+B,CACnC,aAGG;AACH,QAAI,CAAC,UAAU;AACb,aAAO;AAAA,IACT;AAEA,QAAI,yBAAmD;AAEvD,eAAW,CAAC,EAAE,OAAO,KAAK,UAAU;AAClC,UAAI,CAAC,wBAAwB;AAC3B,iCAAyB;AAAA,MAC3B;AACA,UAAI,CAAC,SAAS,QAAQ,SAAS,aAAa;AAC1C,iCAAyB;AACzB;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT;AAEA,MAAI,cAAc,OAAO,MAAM,GAAG;AAChC;AAAA,EACF;AAEA,QAAM,oBAAoB,qBAAqB,oBAAoB;AACnE,QAAM,sBAAsB,qBAAqB,sBAAsB;AAEvE,QAAM,6BAA6B;AAAA,IACjC;AAAA,EACF;AACA,QAAM,2BACJ,6BAA6B,oBAAoB;AAGnD,MAAI,qBAAqB,CAAC,qBAAqB;AAC7C,UAAMA,4BACJ,6BAA6B,oBAAoB;AACnD,QAAIA,2BAA0B;AAC5B,MAAAA,2BAA0B,QAAQ,SAAS,MAAM;AACjD;AAAA,IACF;AAAA,EACF;AAGA,MACE,uBACC,4BAA4B,QAAQ,SAAS,gBAAgB,OAC3D,OAAO,SAAS,oBAAoB,gBAAgB,MACnD,0BAA0B,QAAQ,SAAS,gBAAgB,KAC/D;AACA,QAAI,4BAA4B;AAC9B,kCAA4B,QAAQ,SAAS,MAAM;AACnD;AAAA,IACF;AAAA,EACF;AAGA,MACE,SAAS,SAAS,oBAAoB,gBAAgB,MACtD,OAAO,SAAS,oBAAoB,gBAAgB,MACpD,0BAA0B,QAAQ,SAAS,gBAAgB,IAC3D;AACA,WAAO,SAAS,oBAAoB,QAAQ;AAC5C;AAAA,EACF;AAGA,WAAS,SAAS,oBAAoB,MAAM;AAC9C;AASO,MAAM,iBAAiB,CAC5B,oBACS;AACT,QAAM,cACJ,gBAAgB,SAAS,mBAAmB,IAAI,MAAM,GAAG,QAAQ;AACnE,MAAI,aAAa;AACf,gBAAY,MAAM;AAClB;AAAA,EACF;AACA,qBAAmB,MAAM,eAAe;AAC1C;",
+  "sourcesContent": ["import {\n  type RefObject,\n  type FocusEvent as ReactFocusEvent,\n  type MouseEvent as ReactMouseEvent,\n} from 'react';\n\nimport { type DateTimeInputRef } from '../../date-time-range-picker/types.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\n\n/*\n * Handles the focus event within 'DateTimeInput' components.\n * Moving the focus to the `DateTimeInput` focuses the 'to input' or the first empty spin button.\n * If everything is empty focus the 'from input'.\n * If the target element is one of the spin buttons or expression, the focus is not redirected.\n * @internal\n */\nexport const focusDateTimeInput = (\n  event: ReactFocusEvent | ReactMouseEvent | null,\n  refFrom: RefObject<DateTimeInputRef | null>,\n  refTo?: RefObject<DateTimeInputRef | null>,\n) => {\n  const spinButtonHandlersTo = refTo?.current?.spinButtonHandlers;\n  const spinButtonHandlersFrom = refFrom?.current?.spinButtonHandlers;\n\n  /** Check if the target element is one of the spin buttons or expression. */\n  const isTargetValid = (target: EventTarget | undefined) => {\n    const spinButtonsFrom = Array.from(\n      spinButtonHandlersTo?.values() || [],\n    ).map((handler) => handler?.element.current);\n    const spinButtonsTo = Array.from(\n      spinButtonHandlersFrom?.values() || [],\n    ).map((handler) => handler?.element.current);\n\n    const allSpinButtons = [\n      ...spinButtonsFrom,\n      ...spinButtonsTo,\n      ...[refTo?.current?.expressionInputRef],\n      ...[refFrom?.current?.expressionInputRef],\n    ];\n\n    return (\n      target !== undefined && allSpinButtons.includes(target as HTMLSpanElement)\n    );\n  };\n\n  /**\n   * Checks if any spin button in the provided handlers is empty (has no textContent).\n   * Returns false if all spin buttons are empty or none are empty.\n   */\n  const isAnySpinButtonEmpty = (\n    handlers:\n      | Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>\n      | undefined,\n  ): boolean => {\n    if (!handlers) {\n      return false;\n    }\n\n    let hasEmpty = false;\n    let allEmpty = true;\n\n    for (const [, handler] of handlers) {\n      const textContent = handler?.element.current?.textContent;\n      if (textContent === '') {\n        hasEmpty = true;\n      } else {\n        allEmpty = false;\n      }\n    }\n\n    return hasEmpty && !allEmpty;\n  };\n\n  /**\n   * Find the first spin button or the first empty one.\n   */\n  const findLastEntryWithTextContent = (\n    handlers:\n      | Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>\n      | undefined,\n  ) => {\n    if (!handlers) {\n      return null;\n    }\n\n    let firstSpinButtonHandler: SpinButtonHandler | null = null;\n\n    for (const [, handler] of handlers) {\n      if (!firstSpinButtonHandler) {\n        firstSpinButtonHandler = handler;\n      }\n      if (!handler?.element.current?.textContent) {\n        firstSpinButtonHandler = handler;\n        break;\n      }\n    }\n\n    return firstSpinButtonHandler;\n  };\n\n  if (isTargetValid(event?.target)) {\n    return;\n  }\n\n  const emptyToSpinButton = isAnySpinButtonEmpty(spinButtonHandlersTo);\n  const emptyFromSpinButton = isAnySpinButtonEmpty(spinButtonHandlersFrom);\n\n  const firstFromSpinButtonHandler = findLastEntryWithTextContent(\n    spinButtonHandlersFrom,\n  );\n  const firstToSpinButtonHandler =\n    findLastEntryWithTextContent(spinButtonHandlersTo);\n\n  // Focus the 'to spin buttons', when they have at least one empty.\n  if (emptyToSpinButton && !emptyFromSpinButton) {\n    const firstToSpinButtonHandler =\n      findLastEntryWithTextContent(spinButtonHandlersTo);\n    if (firstToSpinButtonHandler) {\n      firstToSpinButtonHandler?.element.current?.focus();\n      return;\n    }\n  }\n\n  // Focus the 'from spin buttons' when they have at least one empty or when 'to input' is filled.\n  if (\n    emptyFromSpinButton ||\n    (firstFromSpinButtonHandler?.element.current?.textContent !== '' &&\n      (refTo?.current?.expressionInputRef?.textContent !== '' ||\n        firstToSpinButtonHandler?.element.current?.textContent !== ''))\n  ) {\n    if (firstFromSpinButtonHandler) {\n      firstFromSpinButtonHandler?.element.current?.focus();\n      return;\n    }\n  }\n\n  // Focus the 'to expression input' when 'from expression input' is filled and 'to input is empty'.\n  if (\n    refFrom?.current?.expressionInputRef?.textContent !== '' &&\n    refTo?.current?.expressionInputRef?.textContent === '' &&\n    firstToSpinButtonHandler?.element.current?.textContent === ''\n  ) {\n    refTo?.current?.expressionInputRef?.focus?.();\n    return;\n  }\n\n  // Focus the 'from expression input'.\n  refFrom?.current?.expressionInputRef?.focus();\n};\n\n/**\n * Attempts to move the focus to the \"hour\" spin button of the \"from\" input.\n * The hour spin button is only foucsable if the value is an absolute timeframe (ISO 8601)\n * and not an expression. If focus is not possible, falls back to {@link focusDateTimeInput}.\n * @param dateTimeFromRef - the ref of the \"from\" DateTimeInput component\n * @internal\n */\nexport const focusTimeInput = (\n  dateTimeFromRef: RefObject<DateTimeInputRef | null>,\n): void => {\n  const hourElement =\n    dateTimeFromRef.current?.spinButtonHandlers.get('hour')?.element.current;\n  if (hourElement) {\n    hourElement.focus();\n    return;\n  }\n  focusDateTimeInput(null, dateTimeFromRef);\n};\n\nconst MAX_FOCUS_ATTEMPTS = 3;\n\n/**\n * Repeatedly attempts to focus an element using requestAnimationFrame until\n * focus succeeds or max attempts are reached. This handles race conditions\n * where popover close animations restore focus to the trigger element.\n * @param getElement - getter that returns the element to focus\n * @param dateTimeRef - optional ref to fall back to via {@link focusDateTimeInput} if all attempts fail\n * @internal\n */\nexport const focusElementWithRetry = (\n  getElement: () => HTMLElement | null | undefined,\n  dateTimeRef?: RefObject<DateTimeInputRef | null>,\n): void => {\n  let attempts = 0;\n\n  const tryFocus = (): void => {\n    attempts++;\n    const element = getElement();\n\n    if (element) {\n      element.focus();\n      if (document.activeElement === element) {\n        return;\n      }\n    }\n\n    if (attempts < MAX_FOCUS_ATTEMPTS) {\n      requestAnimationFrame(tryFocus);\n      return;\n    }\n\n    if (dateTimeRef) {\n      focusDateTimeInput(null, dateTimeRef);\n    }\n  };\n\n  requestAnimationFrame(tryFocus);\n};\n"],
+  "mappings": "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",
   "names": ["firstToSpinButtonHandler"]
 }

package/esm/forms/date-time-range-picker/DateRangeSelector.css

@@ -1,4 +1,4 @@
-._1uftu980-3-5-2 {
+._1uftu980-3-7-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;

package/esm/forms/date-time-range-picker/DateRangeSelector.js

@@ -6,8 +6,8 @@ import { useIntl } from "react-intl";
 import { CalendarIcon } from "@dynatrace/strato-icons";
 import * as styles from "./DateRangeSelector.sty.js";
 import { Button } from "../../buttons/button/Button.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
-import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { useDateTimeRangePickerStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
 import { isVisualRefreshEnabled } from "../../core/utils/is-visual-refresh-enabled.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";