@dynatrace/strato-components 3.13.2 → 3.14.0

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

@@ -1,85 +1,85 @@
-._1i883gj4-3-13-2 {
-  --_1i883gj0-3-13-2: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-13-2: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-13-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj3-3-13-2: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj4-3-14-0 {
+  --_1i883gj0-3-14-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-14-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-14-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj3-3-14-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1i883gj5-3-13-2 {
+._1i883gj5-3-14-0 {
   cursor: default;
 }
-._1i883gj6-3-13-2 {
-  --_1i883gj0-3-13-2: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-13-2: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj2-3-13-2: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj3-3-13-2: var(--dt-colors-background-field-critical-accent, #c62239);
+._1i883gj6-3-14-0 {
+  --_1i883gj0-3-14-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-14-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj2-3-14-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj3-3-14-0: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._1i883gj7-3-13-2 {
-  --_1i883gj0-3-13-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-13-2: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj2-3-13-2: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+._1i883gj7-3-14-0 {
+  --_1i883gj0-3-14-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-14-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj2-3-14-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
   cursor: not-allowed;
 }
-._1i883gj9-3-13-2 {
+._1i883gj9-3-14-0 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gjb-3-13-2 {
+._1i883gjb-3-14-0 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-13-2);
+  color: var(--_1i883gj1-3-14-0);
   white-space-collapse: preserve;
 }
-._1i883gjc-3-13-2 {
+._1i883gjc-3-14-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);
 }
-._r47o0w0-3-13-2 ._r47o0w1-3-13-2 {
-  color: var(--_1i883gj0-3-13-2);
+._r47o0w0-3-14-0 ._r47o0w1-3-14-0 {
+  color: var(--_1i883gj0-3-14-0);
 }
-._r47o0w0-3-13-2 ._r47o0w1-3-13-2::before {
-  color: var(--_1i883gj1-3-13-2);
+._r47o0w0-3-14-0 ._r47o0w1-3-14-0::before {
+  color: var(--_1i883gj1-3-14-0);
 }
-._r47o0w0-3-13-2 ._r47o0w1-3-13-2:focus {
-  background-color: var(--_1i883gj3-3-13-2);
-  color: var(--_1i883gj2-3-13-2);
+._r47o0w0-3-14-0 ._r47o0w1-3-14-0:focus {
+  background-color: var(--_1i883gj3-3-14-0);
+  color: var(--_1i883gj2-3-14-0);
 }
-._r47o0w0-3-13-2 ._r47o0w1-3-13-2:focus::before {
-  color: var(--_1i883gj2-3-13-2);
+._r47o0w0-3-14-0 ._r47o0w1-3-14-0:focus::before {
+  color: var(--_1i883gj2-3-14-0);
 }
-._r47o0w0-3-13-2 *::selection {
+._r47o0w0-3-14-0 *::selection {
   background-color: transparent;
 }
-._r47o0w0-3-13-2 ._r47o0w1-3-13-2:focus::selection, ._r47o0w0-3-13-2 ._r47o0w1-3-13-2:focus *::selection {
+._r47o0w0-3-14-0 ._r47o0w1-3-14-0:focus::selection, ._r47o0w0-3-14-0 ._r47o0w1-3-14-0:focus *::selection {
   background-color: transparent;
-  color: var(--_1i883gj2-3-13-2);
+  color: var(--_1i883gj2-3-14-0);
 }
-._r47o0w0-3-13-2 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-13-2[data-drag-selected]::before {
-  background-color: var(--_1i883gj3-3-13-2);
-  color: var(--_1i883gj2-3-13-2);
+._r47o0w0-3-14-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-14-0[data-drag-selected]::before {
+  background-color: var(--_1i883gj3-3-14-0);
+  color: var(--_1i883gj2-3-14-0);
 }
-._r47o0w0-3-13-2 [data-drag-selected]::selection, ._r47o0w0-3-13-2 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+._r47o0w0-3-14-0 [data-drag-selected]::selection, ._r47o0w0-3-14-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-13-2:focus {
+[data-shift-selection=true] ._r47o0w1-3-14-0:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-13-2);
+  color: var(--_1i883gj0-3-14-0);
   caret-color: auto;
 }
-[data-shift-selection=true] ._r47o0w1-3-13-2:focus::before {
-  color: var(--_1i883gj1-3-13-2);
+[data-shift-selection=true] ._r47o0w1-3-14-0:focus::before {
+  color: var(--_1i883gj1-3-14-0);
 }
-._1i883gjd-3-13-2 {
+._1i883gjd-3-14-0 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjd-3-13-2:is(button._1i883gjd-3-13-2._1i883gjd-3-13-2) {
+._1i883gjd-3-14-0:is(button._1i883gjd-3-14-0._1i883gjd-3-14-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-13-2 ._1i883gjd-3-13-2._1i883gjd-3-13-2._1i883gjd-3-13-2 {
+._1jgl8s50-3-14-0 ._1i883gjd-3-14-0._1i883gjd-3-14-0._1i883gjd-3-14-0 {
   position: absolute;
   margin: var(--dt-spacings-size-0, 0);
   z-index: 0;

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

@@ -7,6 +7,7 @@ import {
   useRef,
   useState
 } from "react";
+import { useIntl } from "react-intl";
 import { DateTimePickerRoot } from "./DateTimePickerRoot.js";
 import { useCallbackRef } from "../../core/hooks/useCallbackRef.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
@@ -28,6 +29,7 @@ import {
   GRAIL_MIN_DATE
 } from "../forms-core/time/date-time.js";
 function useSyncPropsAndState(store, memoedValue, isControlled, precision, formatString, required, formFieldMessagesDispatch, dateTimePickerRef) {
+  const intl = useIntl();
   useEffect(() => {
     isControlled && store.setState((state) => {
       if (memoedValue?.absoluteDate === "") {
@@ -35,6 +37,7 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
       }
       const error = validate(memoedValue ?? null, state.min, state.max, {
         formMessageDispatch: formFieldMessagesDispatch,
+        intl,
         formerError: state.calendarError,
         precision: state.precision,
         showError: false,
@@ -66,6 +69,7 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
     });
   }, [
     formFieldMessagesDispatch,
+    intl,
     isControlled,
     memoedValue,
     store,
@@ -79,6 +83,7 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
       );
       const error = validate(value, state.min, state.max, {
         formMessageDispatch: formFieldMessagesDispatch,
+        intl,
         formerError: state.dateTimePickerError,
         precision,
         showError: false,
@@ -105,6 +110,7 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
     store,
     required,
     formFieldMessagesDispatch,
+    intl,
     dateTimePickerRef
   ]);
 }
@@ -123,6 +129,7 @@ const DateTimePicker = forwardRef(
     "aria-disabled": propAriaDisabled,
     // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
+    onValidityChange,
     type,
     ...remainingProps
   }, forwardedRef) => {
@@ -152,6 +159,7 @@ const DateTimePicker = forwardRef(
       controlState
     });
     const { required, messageDispatch: formFieldMessagesDispatch } = formControl;
+    const intl = useIntl();
     const { formatString } = useDateTimeMessages({ precision });
     const [initialState] = useState(() => {
       const _value = isControlled ? memoedValue : memoedDefaultValue;
@@ -165,6 +173,7 @@ const DateTimePicker = forwardRef(
       );
       const error = validate(value, min, max, {
         formMessageDispatch: formFieldMessagesDispatch,
+        intl,
         precision,
         showError: false,
         checkOrder: true,
@@ -196,7 +205,8 @@ const DateTimePicker = forwardRef(
         getDateTimePickerActions(
           formFieldMessagesDispatch,
           onChangeProp,
-          isControlled
+          isControlled,
+          intl
         )
       )
     );
@@ -218,6 +228,7 @@ const DateTimePicker = forwardRef(
         (state, min2, max2) => {
           const error = validate(state.dateTimePickerValue, min2, max2, {
             formMessageDispatch: formFieldMessagesDispatch,
+            intl,
             formerError: state.calendarError,
             precision: state.precision,
             showError: false,
@@ -229,7 +240,7 @@ const DateTimePicker = forwardRef(
           });
           return { calendarError: error, dateTimePickerError: error };
         },
-        [formFieldMessagesDispatch]
+        [formFieldMessagesDispatch, intl]
       )
     );
     const mergedRef = useMergeRefs([dateTimePickerRef, forwardedRef]);
@@ -239,7 +250,8 @@ const DateTimePicker = forwardRef(
         ...remainingProps,
         ref: mergedRef,
         formControl,
-        type
+        type,
+        onValidityChange: controlState ? void 0 : onValidityChange
       }
     ) });
   }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePicker.tsx"],
-  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimePickerRoot } from './DateTimePickerRoot.js';\nimport type { DateTimePickerProps } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimePickerActions } from '../../core/time/timeframeStore/actions/dateTimePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimePickerValueStates,\n  DateTimePickerValueStoreActions,\n} from '../../core/time/timeframeStore/dateTimePicker.types.js';\nimport { DateTimePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { TimeValue } from '../../core/types/time.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { toCalendarValue } from '../../forms/forms-core/time/helpers.js';\nimport {\n  removePrecisionFromTimeValue,\n  getTimeValue,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport type { DateTimeInputRef } from '../date-time-range-picker/types.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n  TimeRangePickerRef,\n} from '../shared-types.js';\n\ntype DateTimePickerStore = StoreApi<\n  DateTimePickerValueStates & DateTimePickerValueStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimePickerStore,\n  memoedValue: TimeValue | null | undefined,\n  isControlled: boolean,\n  precision: Precision,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimePickerRef: RefObject<FormControlWithOverlayRef<HTMLSpanElement> | null>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        // In case of an invalid interim state the onChange can emit a string that\n        // is not a valid time value yet. Don't overwrite internal state in that case,\n        // so users can continue editing.\n        if (memoedValue?.absoluteDate === '') {\n          return state;\n        }\n\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          formerError: state.calendarError,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          ref: dateTimePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'single',\n          required: required,\n        });\n\n        const value = removePrecisionFromTimeValue(\n          memoedValue ?? null,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'single',\n          state.min,\n          state.max,\n          state.precision,\n        );\n\n        return {\n          ...state,\n          dateTimePickerValue: value,\n          calendarValue: toCalendarValue(value, state.precision),\n          calendarError: error,\n          dateTimePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    dateTimePickerRef,\n  ]);\n\n  // Sync precision, formatString, and required into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeValue(\n        state.dateTimePickerValue,\n        precision,\n      );\n\n      const error = validate(value, state.min, state.max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        formerError: state.dateTimePickerError,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      return {\n        ...state,\n        formatString,\n        precision,\n        dateTimePickerValue: value,\n        calendarValue: toCalendarValue(value, precision),\n        required,\n        calendarError: error,\n        dateTimePickerError: error,\n      };\n    });\n  }, [\n    formatString,\n    precision,\n    store,\n    required,\n    formFieldMessagesDispatch,\n    dateTimePickerRef,\n  ]);\n}\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 * @public\n */\nexport const DateTimePicker = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision: propPrecision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      type,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n    const precision = type === 'date' ? 'day' : propPrecision;\n\n    const memoedValue = useMemo(\n      () => getTimeValue(propValue, precision) ?? null,\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => getTimeValue(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax, precision);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeInputRef = useRef<DateTimeInputRef>(null);\n    const dateTimePickerRef =\n      useRef<FormControlWithOverlayRef<HTMLSpanElement>>(null);\n\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const [initialState] = useState<DateTimePickerValueStates>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = _value ?? null;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'single',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      // The DateTimePicker can handle partial timeValues but the calendar can't\n      // so we need to adjust the calendar value accordingly\n      const calendarValue = toCalendarValue(value, precision);\n\n      return {\n        calendarValue,\n        dateTimePickerValue: value,\n        min,\n        max,\n        precision,\n        formatString,\n        calendarRef,\n        dateTimeInputRef,\n        dateTimePickerRef,\n        calendarError: error,\n        dateTimePickerError: error,\n        timeOffset,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimePickerValueStates,\n        DateTimePickerValueStoreActions\n      >(\n        initialState,\n        getDateTimePickerActions(\n          formFieldMessagesDispatch,\n          onChangeProp,\n          isControlled,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimePickerValueStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimePickerValue, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs([dateTimePickerRef, forwardedRef]);\n\n    return (\n      <DateTimePickerStoreProvider store={store}>\n        <DateTimePickerRoot\n          {...remainingProps}\n          ref={mergedRef}\n          formControl={formControl}\n          type={type}\n        />\n      </DateTimePickerStoreProvider>\n    );\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimePickerRoot } from './DateTimePickerRoot.js';\nimport type { DateTimePickerProps } from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimePickerActions } from '../../core/time/timeframeStore/actions/dateTimePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimePickerValueStates,\n  DateTimePickerValueStoreActions,\n} from '../../core/time/timeframeStore/dateTimePicker.types.js';\nimport { DateTimePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { TimeValue } from '../../core/types/time.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { toCalendarValue } from '../../forms/forms-core/time/helpers.js';\nimport {\n  removePrecisionFromTimeValue,\n  getTimeValue,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport type { DateTimeInputRef } from '../date-time-range-picker/types.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport type {\n  FormControlRef,\n  FormControlWithOverlayRef,\n  TimeRangePickerRef,\n} from '../shared-types.js';\n\ntype DateTimePickerStore = StoreApi<\n  DateTimePickerValueStates & DateTimePickerValueStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: DateTimePickerStore,\n  memoedValue: TimeValue | null | undefined,\n  isControlled: boolean,\n  precision: Precision,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimePickerRef: RefObject<FormControlWithOverlayRef<HTMLSpanElement> | null>,\n) {\n  const intl = useIntl();\n\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        // In case of an invalid interim state the onChange can emit a string that\n        // is not a valid time value yet. Don't overwrite internal state in that case,\n        // so users can continue editing.\n        if (memoedValue?.absoluteDate === '') {\n          return state;\n        }\n\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          intl,\n          formerError: state.calendarError,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          ref: dateTimePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'single',\n          required: required,\n        });\n\n        const value = removePrecisionFromTimeValue(\n          memoedValue ?? null,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'single',\n          state.min,\n          state.max,\n          state.precision,\n        );\n\n        return {\n          ...state,\n          dateTimePickerValue: value,\n          calendarValue: toCalendarValue(value, state.precision),\n          calendarError: error,\n          dateTimePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    intl,\n    isControlled,\n    memoedValue,\n    store,\n    dateTimePickerRef,\n  ]);\n\n  // Sync precision, formatString, and required into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeValue(\n        state.dateTimePickerValue,\n        precision,\n      );\n\n      const error = validate(value, state.min, state.max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        intl,\n        formerError: state.dateTimePickerError,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      return {\n        ...state,\n        formatString,\n        precision,\n        dateTimePickerValue: value,\n        calendarValue: toCalendarValue(value, precision),\n        required,\n        calendarError: error,\n        dateTimePickerError: error,\n      };\n    });\n  }, [\n    formatString,\n    precision,\n    store,\n    required,\n    formFieldMessagesDispatch,\n    intl,\n    dateTimePickerRef,\n  ]);\n}\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 * @public\n */\nexport const DateTimePicker = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  DateTimePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision: propPrecision = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState,\n      onValidityChange,\n      type,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n    const precision = type === 'date' ? 'day' : propPrecision;\n\n    const memoedValue = useMemo(\n      () => getTimeValue(propValue, precision) ?? null,\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => getTimeValue(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // oxlint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax, precision);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeInputRef = useRef<DateTimeInputRef>(null);\n    const dateTimePickerRef =\n      useRef<FormControlWithOverlayRef<HTMLSpanElement>>(null);\n\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const intl = useIntl();\n    const { formatString } = useDateTimeMessages({ precision });\n    const [initialState] = useState<DateTimePickerValueStates>(() => {\n      const _value = isControlled ? memoedValue : memoedDefaultValue;\n      const value = _value ?? null;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'single',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        intl,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'single',\n        required,\n      });\n\n      // The DateTimePicker can handle partial timeValues but the calendar can't\n      // so we need to adjust the calendar value accordingly\n      const calendarValue = toCalendarValue(value, precision);\n\n      return {\n        calendarValue,\n        dateTimePickerValue: value,\n        min,\n        max,\n        precision,\n        formatString,\n        calendarRef,\n        dateTimeInputRef,\n        dateTimePickerRef,\n        calendarError: error,\n        dateTimePickerError: error,\n        timeOffset,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimePickerValueStates,\n        DateTimePickerValueStoreActions\n      >(\n        initialState,\n        getDateTimePickerActions(\n          formFieldMessagesDispatch,\n          onChangeProp,\n          isControlled,\n          intl,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimePickerValueStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimePickerValue, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            intl,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimePickerError: error };\n        },\n        [formFieldMessagesDispatch, intl],\n      ),\n    );\n\n    const mergedRef = useMergeRefs([dateTimePickerRef, forwardedRef]);\n\n    return (\n      <DateTimePickerStoreProvider store={store}>\n        <DateTimePickerRoot\n          {...remainingProps}\n          ref={mergedRef}\n          formControl={formControl}\n          type={type}\n          onValidityChange={controlState ? undefined : onValidityChange}\n        />\n      </DateTimePickerStoreProvider>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }

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 = "_1i883gjd-3-13-2";
-var dateSelector = "_1i883gjc-3-13-2";
-var dateTimePicker = _7a468({ defaultClassName: "_1i883gj4-3-13-2", variantClassNames: { readOnly: { true: "_1i883gj5-3-13-2" }, showError: { true: "_1i883gj6-3-13-2" }, disabled: { true: "_1i883gj7-3-13-2" }, type: { date: "_1i883gj8-3-13-2", time: "_1i883gj9-3-13-2", datetime: "_1i883gja-3-13-2" } }, defaultVariants: {}, compoundVariants: [] });
-var spinButtonGroup = "_1i883gjb-3-13-2 _da9a8v0-3-13-2 _da9a8v2-3-13-2 _da9a8v3-3-13-2 _da9a8vb-3-13-2";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-13-2)";
-var spinButtonSelectionColorVar = "var(--_1i883gj2-3-13-2)";
+var clearIconButton = "_1i883gjd-3-14-0";
+var dateSelector = "_1i883gjc-3-14-0";
+var dateTimePicker = _7a468({ defaultClassName: "_1i883gj4-3-14-0", variantClassNames: { readOnly: { true: "_1i883gj5-3-14-0" }, showError: { true: "_1i883gj6-3-14-0" }, disabled: { true: "_1i883gj7-3-14-0" }, type: { date: "_1i883gj8-3-14-0", time: "_1i883gj9-3-14-0", datetime: "_1i883gja-3-14-0" } }, defaultVariants: {}, compoundVariants: [] });
+var spinButtonGroup = "_1i883gjb-3-14-0 _da9a8v0-3-14-0 _da9a8v2-3-14-0 _da9a8v3-3-14-0 _da9a8vb-3-14-0";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-14-0)";
+var spinButtonSelectionColorVar = "var(--_1i883gj2-3-14-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 = '_1i883gjd-3-13-2';\nexport var dateSelector = '_1i883gjc-3-13-2';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj4-3-13-2',variantClassNames:{readOnly:{true:'_1i883gj5-3-13-2'},showError:{true:'_1i883gj6-3-13-2'},disabled:{true:'_1i883gj7-3-13-2'},type:{date:'_1i883gj8-3-13-2',time:'_1i883gj9-3-13-2',datetime:'_1i883gja-3-13-2'}},defaultVariants:{},compoundVariants:[]});\nexport var spinButtonGroup = '_1i883gjb-3-13-2 _da9a8v0-3-13-2 _da9a8v2-3-13-2 _da9a8v3-3-13-2 _da9a8vb-3-13-2';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj3-3-13-2)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj2-3-13-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 = '_1i883gjd-3-14-0';\nexport var dateSelector = '_1i883gjc-3-14-0';\nexport var dateTimePicker = _7a468({defaultClassName:'_1i883gj4-3-14-0',variantClassNames:{readOnly:{true:'_1i883gj5-3-14-0'},showError:{true:'_1i883gj6-3-14-0'},disabled:{true:'_1i883gj7-3-14-0'},type:{date:'_1i883gj8-3-14-0',time:'_1i883gj9-3-14-0',datetime:'_1i883gja-3-14-0'}},defaultVariants:{},compoundVariants:[]});\nexport var spinButtonGroup = '_1i883gjb-3-14-0 _da9a8v0-3-14-0 _da9a8v2-3-14-0 _da9a8v3-3-14-0 _da9a8vb-3-14-0';\nexport var spinButtonSelectionBackgroundColorVar = 'var(--_1i883gj3-3-14-0)';\nexport var spinButtonSelectionColorVar = 'var(--_1i883gj2-3-14-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,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,mBAAkB,GAAE,WAAU,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,MAAK,EAAC,MAAK,oBAAmB,MAAK,oBAAmB,UAAS,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACzT,IAAI,kBAAkB;AACtB,IAAI,wCAAwC;AAC5C,IAAI,8BAA8B;",
   "names": []
 }

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

@@ -36,6 +36,7 @@ import { useSelectionInteractionHandlers } from "../date-time-range-picker/useSe
 import { useInternalFormRegistration } from "../form/hooks/useInternalFormRegistration.js";
 import { InternalBaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
 import { useMinMaxLogger } from "../forms-core/hooks/useMinMaxLogger.js";
+import { getCustomMessageIds } from "../forms-core/state/formfield-messages-selectors.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { useContainerFocus } from "../hooks/useContainerFocus.js";
 import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
@@ -94,8 +95,8 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
   useMinMaxLogger(min, max, "DateTimePicker");
   const ownerId = useId();
   const touchedContainerRef = useRef(null);
-  const customMessagesRef = useRef(messageState.customMessages);
-  customMessagesRef.current = messageState.customMessages;
+  const customMessageIdsRef = useRef([]);
+  customMessageIdsRef.current = getCustomMessageIds(messageState);
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
   const ariaLabelingProps = useAriaLabelingProps(remainingProps);
   const showDateSelector = type !== "time";
@@ -120,10 +121,6 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
   const _emitValidationState = useValidationStateEmitter(
     (state) => formValidityChangeRef.current?.(state)
   );
-  const emitValidationState = useCustomMessageEmitter(
-    _emitValidationState,
-    () => buildValidationState("manual", dateTimePickerError)
-  );
   const buildValidationState = useCallback(
     (trigger, key) => {
       if (key === void 0) {
@@ -145,6 +142,10 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
     },
     [intl, value, min, max, precision, formatString, id]
   );
+  const emitValidationState = useCustomMessageEmitter(
+    _emitValidationState,
+    () => buildValidationState("manual", dateTimePickerError)
+  );
   const { containerClassName, ...containerFocusProps } = useContainerFocus({
     onFocus,
     onBlur,
@@ -183,13 +184,13 @@ const DateTimePickerRoot = forwardRef((props, forwardedRef) => {
     if (dateTimePickerError) {
       formFieldDispatch?.({
         type: FormFieldMessagesAction.REMOVEMESSAGE,
-        payload: { id: dateTimePickerError, messageType: "formcontrol" }
+        payload: { id: dateTimePickerError, source: "strato" }
       });
     }
-    for (const msg of customMessagesRef.current) {
+    for (const id2 of customMessageIdsRef.current) {
       formFieldDispatch?.({
         type: FormFieldMessagesAction.REMOVEMESSAGE,
-        payload: { id: msg.id, messageType: "custom" }
+        payload: { id: id2 }
       });
     }
   }, [formFieldDispatch, dateTimePickerError]);

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  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 { useId } from '../../core/hooks/useId.js';\nimport type { TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  getValidityStateKeyForTimeError,\n} from '../../core/time/validation.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 type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { UseFormControlReturnType } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\nimport {\n  type ValidationState,\n  type ValidationTrigger,\n} from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../validation/validation-builders.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  Omit<\n    DateTimePickerProps,\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n  }\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    placeholder,\n    name,\n    _form,\n    _messageTarget,\n    type = 'datetime',\n    formControl,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    ...remainingProps\n  } = props;\n  const {\n    id,\n    disabled,\n    required,\n    ariaDisabled,\n    readOnly = false,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageState,\n    messageDispatch: formFieldDispatch,\n  } = formControl;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const min = useDateTimePickerStore((state) => state.min);\n  const max = useDateTimePickerStore((state) => state.max);\n  const precision = useDateTimePickerStore((state) => state.precision);\n  const formatString = useDateTimePickerStore((state) => state.formatString);\n  const value = useDateTimePickerStore((state) => state.dateTimePickerValue);\n  const dateTimePickerError = useDateTimePickerStore(\n    (state) => state.dateTimePickerError,\n  );\n\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 ownerId = useId();\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const customMessagesRef = useRef(messageState.customMessages);\n  customMessagesRef.current = messageState.customMessages;\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  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => buildValidationState('manual', dateTimePickerError),\n  );\n\n  const buildValidationState = useCallback(\n    (\n      trigger: ValidationTrigger,\n      key: TimeErrorKey | undefined,\n    ): ValidationState => {\n      if (key === undefined) {\n        return { status: 'done', trigger, errors: [] };\n      }\n\n      const keyInstance = getValidityStateKeyForTimeError(key);\n\n      return getValidationState(\n        keyInstance,\n        trigger,\n        formatTimeValidationMessage(key, intl, {\n          value,\n          min,\n          max,\n          precision,\n          expectedFormat: formatString,\n        }),\n        id || undefined,\n      );\n    },\n    [intl, value, min, max, precision, formatString, id],\n  );\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId: ownerId,\n    emitValidationState,\n    getBlurValidationState: () =>\n      buildValidationState('blur', dateTimePickerError),\n  });\n\n  const validateField = useCallback(\n    async ({\n      reveal,\n      trigger,\n    }: ValidateFieldOptions): Promise<ValidationState> => {\n      if (reveal) {\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      return emitValidationState(\n        buildValidationState(trigger, dateTimePickerError),\n      );\n    },\n    [\n      formFieldDispatch,\n      emitValidationState,\n      buildValidationState,\n      dateTimePickerError,\n    ],\n  );\n\n  const resetValidation = useCallback(() => {\n    formFieldDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: false, resetShowError: true },\n    });\n\n    if (dateTimePickerError) {\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: dateTimePickerError, messageType: 'formcontrol' },\n      });\n    }\n    for (const msg of customMessagesRef.current) {\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: msg.id, messageType: 'custom' },\n      });\n    }\n  }, [formFieldDispatch, dateTimePickerError]);\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value,\n    focus: () => dateInputRef.current?.inputRef?.focus(),\n    validateField,\n    resetValidation,\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\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        emitValidationState(\n          buildValidationState('manual', dateTimePickerError),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const state = buildValidationState('manual', dateTimePickerError);\n        return emitValidationState(state);\n      },\n    }),\n    [\n      formFieldDispatch,\n      dateInputRef,\n      emitValidationState,\n      buildValidationState,\n      dateTimePickerError,\n    ],\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  useEffect(() => {\n    emitValidationState(buildValidationState('change', dateTimePickerError));\n  }, [value, emitValidationState, buildValidationState, dateTimePickerError]);\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={clsx(containerClassName, consumerClassName)}\n      style={consumerStyle}\n      {...containerFocusProps}\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          onInput={() => {\n            // true if the user typed an expression, or partially filled any ISO spin button\n            setHasInputContent(\n              !!dateInputRef.current?.expressionInputRef?.textContent ||\n                Array.from(\n                  dateInputRef.current?.spinButtonHandlers?.values() ?? [],\n                ).some((h) => h?.element.current?.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            form={_form}\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            inputProps={inputProps}\n            onPasteComplete={() => {\n              requestAnimationFrame(() => {\n                dateInputRef.current?.focusLast();\n              });\n            }}\n          />\n          {!readOnly &&\n            !disabledOrAriaDisabled &&\n            ((value !== null && value.value !== '') || hasInputContent) && (\n              <Button\n                onClick={() => {\n                  // Focus before state updates so the button blurs with relatedTarget =\n                  // expressionInputRef (inside boundary) rather than null (which would\n                  // fire a spurious onBlur when the button unmounts after the clear).\n                  dateInputRef.current?.expressionInputRef?.focus();\n\n                  if (\n                    dateInputRef.current?.expressionInputRef &&\n                    dateInputRef.current.expressionInputRef.textContent !== ''\n                  ) {\n                    dateInputRef.current.expressionInputRef.textContent = '';\n                  } else {\n                    setValue(null);\n                  }\n                  setHasInputContent(false);\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            overlayOwnerId={ownerId}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={showError ? '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": []
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\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 { useId } from '../../core/hooks/useId.js';\nimport type { TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  getValidityStateKeyForTimeError,\n} from '../../core/time/validation.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 type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { UseFormControlReturnType } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { getCustomMessageIds } from '../forms-core/state/formfield-messages-selectors.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\nimport {\n  type ValidationState,\n  type ValidationTrigger,\n} from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../validation/validation-builders.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  Omit<\n    DateTimePickerProps,\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n  }\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    placeholder,\n    name,\n    _form,\n    _messageTarget,\n    type = 'datetime',\n    formControl,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    ...remainingProps\n  } = props;\n  const {\n    id,\n    disabled,\n    required,\n    ariaDisabled,\n    readOnly = false,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageState,\n    messageDispatch: formFieldDispatch,\n  } = formControl;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n\n  const min = useDateTimePickerStore((state) => state.min);\n  const max = useDateTimePickerStore((state) => state.max);\n  const precision = useDateTimePickerStore((state) => state.precision);\n  const formatString = useDateTimePickerStore((state) => state.formatString);\n  const value = useDateTimePickerStore((state) => state.dateTimePickerValue);\n  const dateTimePickerError = useDateTimePickerStore(\n    (state) => state.dateTimePickerError,\n  );\n\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 ownerId = useId();\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const customMessageIdsRef = useRef<string[]>([]);\n  customMessageIdsRef.current = getCustomMessageIds(messageState);\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  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const buildValidationState = useCallback(\n    (\n      trigger: ValidationTrigger,\n      key: TimeErrorKey | undefined,\n    ): ValidationState => {\n      if (key === undefined) {\n        return { status: 'done', trigger, errors: [] };\n      }\n\n      const keyInstance = getValidityStateKeyForTimeError(key);\n\n      return getValidationState(\n        keyInstance,\n        trigger,\n        formatTimeValidationMessage(key, intl, {\n          value,\n          min,\n          max,\n          precision,\n          expectedFormat: formatString,\n        }),\n        id || undefined,\n      );\n    },\n    [intl, value, min, max, precision, formatString, id],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => buildValidationState('manual', dateTimePickerError),\n  );\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId: ownerId,\n    emitValidationState,\n    getBlurValidationState: () =>\n      buildValidationState('blur', dateTimePickerError),\n  });\n\n  const validateField = useCallback(\n    async ({\n      reveal,\n      trigger,\n    }: ValidateFieldOptions): Promise<ValidationState> => {\n      if (reveal) {\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      return emitValidationState(\n        buildValidationState(trigger, dateTimePickerError),\n      );\n    },\n    [\n      formFieldDispatch,\n      emitValidationState,\n      buildValidationState,\n      dateTimePickerError,\n    ],\n  );\n\n  const resetValidation = useCallback(() => {\n    formFieldDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: false, resetShowError: true },\n    });\n\n    if (dateTimePickerError) {\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: dateTimePickerError, source: 'strato' },\n      });\n    }\n    for (const id of customMessageIdsRef.current) {\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id },\n      });\n    }\n  }, [formFieldDispatch, dateTimePickerError]);\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value,\n    focus: () => dateInputRef.current?.inputRef?.focus(),\n    validateField,\n    resetValidation,\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\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        emitValidationState(\n          buildValidationState('manual', dateTimePickerError),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const state = buildValidationState('manual', dateTimePickerError);\n        return emitValidationState(state);\n      },\n    }),\n    [\n      formFieldDispatch,\n      dateInputRef,\n      emitValidationState,\n      buildValidationState,\n      dateTimePickerError,\n    ],\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  useEffect(() => {\n    emitValidationState(buildValidationState('change', dateTimePickerError));\n  }, [value, emitValidationState, buildValidationState, dateTimePickerError]);\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={clsx(containerClassName, consumerClassName)}\n      style={consumerStyle}\n      {...containerFocusProps}\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          onInput={() => {\n            // true if the user typed an expression, or partially filled any ISO spin button\n            setHasInputContent(\n              !!dateInputRef.current?.expressionInputRef?.textContent ||\n                Array.from(\n                  dateInputRef.current?.spinButtonHandlers?.values() ?? [],\n                ).some((h) => h?.element.current?.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            form={_form}\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            inputProps={inputProps}\n            onPasteComplete={() => {\n              requestAnimationFrame(() => {\n                dateInputRef.current?.focusLast();\n              });\n            }}\n          />\n          {!readOnly &&\n            !disabledOrAriaDisabled &&\n            ((value !== null && value.value !== '') || hasInputContent) && (\n              <Button\n                onClick={() => {\n                  // Focus before state updates so the button blurs with relatedTarget =\n                  // expressionInputRef (inside boundary) rather than null (which would\n                  // fire a spurious onBlur when the button unmounts after the clear).\n                  dateInputRef.current?.expressionInputRef?.focus();\n\n                  if (\n                    dateInputRef.current?.expressionInputRef &&\n                    dateInputRef.current.expressionInputRef.textContent !== ''\n                  ) {\n                    dateInputRef.current.expressionInputRef.textContent = '';\n                  } else {\n                    setValue(null);\n                  }\n                  setHasInputContent(false);\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            overlayOwnerId={ownerId}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={showError ? '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": ["id"]
 }

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

@@ -1,4 +1,4 @@
-._1uftu980-3-13-2 {
+._1uftu980-3-14-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

@@ -82,8 +82,8 @@ const DateRangeSelector = forwardRef((props, forwardedRef) => {
     () => ({
       dispatch: noop,
       state: {
-        customMessages: [],
-        formControlMessages: [],
+        errors: [],
+        hints: [],
         isDisabled: disabled,
         showError: error
       }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useMemo, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    overlayOwnerId,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const clearCalendarValue = useDateTimeRangePickerStore(\n    (state) => state.clearCalendarValue,\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) {\n        clearCalendarValue?.();\n      }\n      setOpen(isOpen);\n    },\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  // with the visual refresh enabled, only pure error state should receive critical coloring\n  const isCritical = useVisualRefreshEnabled()\n    ? error && !disabled && !readOnly\n    : error;\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName)}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={isCritical ? 'critical' : 'neutral'}\n        disabled={disabled || readOnly}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-children-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        overlayContainerProps={{\n          'data-dt-owner': overlayOwnerId,\n        }}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useMemo, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    overlayOwnerId,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const clearCalendarValue = useDateTimeRangePickerStore(\n    (state) => state.clearCalendarValue,\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) {\n        clearCalendarValue?.();\n      }\n      setOpen(isOpen);\n    },\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        errors: [],\n        hints: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  // with the visual refresh enabled, only pure error state should receive critical coloring\n  const isCritical = useVisualRefreshEnabled()\n    ? error && !disabled && !readOnly\n    : error;\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName)}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={isCritical ? 'critical' : 'neutral'}\n        disabled={disabled || readOnly}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-children-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        overlayContainerProps={{\n          'data-dt-owner': overlayOwnerId,\n        }}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }