@dynatrace/strato-components 3.6.0 → 3.7.1

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

@@ -1,49 +1,49 @@
-._1vlwkc20-3-6-0 {
+._1vlwkc20-3-7-1 {
   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;
   padding-inline: var(--dt-spacings-size-12, 12px);
   padding-block: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
-  box-shadow: var(--_bx32h4-3-6-0);
+  box-shadow: var(--_bx32h4-3-7-1);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-6-0);
-  background: var(--_bx32h3-3-6-0);
+  color: var(--_bx32h0-3-7-1);
+  background: var(--_bx32h3-3-7-1);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-6-0._1vlwkc20-3-6-0 {
+._1vlwkc20-3-7-1._1vlwkc20-3-7-1 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-6-0:has(._1i883gjh-3-6-0) {
+._1vlwkc20-3-7-1:has(._1i883gjh-3-7-1) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-6-0:has(._1i883gjh-3-6-0:hover) {
-  --_bx32h3-3-6-0: var(--_bx32h2-3-6-0);
+._1vlwkc20-3-7-1:has(._1i883gjh-3-7-1:hover) {
+  --_bx32h3-3-7-1: var(--_bx32h2-3-7-1);
 }
-._1vlwkc20-3-6-0:has(._1i883gjh-3-6-0:focus-visible) {
-  box-shadow: var(--_bx32h4-3-6-0, none);
+._1vlwkc20-3-7-1:has(._1i883gjh-3-7-1:focus-visible) {
+  box-shadow: var(--_bx32h4-3-7-1, none);
 }
-._1jgl8s50-3-6-0 ._1vlwkc20-3-6-0, ._1jgl8s50-3-6-0 ._1vlwkc20-3-6-0:hover, ._1jgl8s50-3-6-0 ._1vlwkc20-3-6-0:active {
-  --_bx32h3-3-6-0: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-7-1 ._1vlwkc20-3-7-1, ._1jgl8s50-3-7-1 ._1vlwkc20-3-7-1:hover, ._1jgl8s50-3-7-1 ._1vlwkc20-3-7-1:active {
+  --_bx32h3-3-7-1: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-6-0 {
+._1vlwkc22-3-7-1 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-6-0 {
-  --_bx32h3-3-6-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-7-1 {
+  --_bx32h3-3-7-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-6-0 ._1vlwkc23-3-6-0, ._1jgl8s50-3-6-0 ._1vlwkc23-3-6-0:hover, ._1jgl8s50-3-6-0 ._1vlwkc23-3-6-0:active {
-  --_bx32h4-3-6-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-1 ._1vlwkc23-3-7-1, ._1jgl8s50-3-7-1 ._1vlwkc23-3-7-1:hover, ._1jgl8s50-3-7-1 ._1vlwkc23-3-7-1:active {
+  --_bx32h4-3-7-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc24-3-6-0 {
-  --_bx32h3-3-6-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1vlwkc24-3-7-1 {
+  --_bx32h3-3-7-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-6-0 ._1vlwkc24-3-6-0, ._1jgl8s50-3-6-0 ._1vlwkc24-3-6-0:hover, ._1jgl8s50-3-6-0 ._1vlwkc24-3-6-0:active {
-  --_bx32h4-3-6-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-7-1 ._1vlwkc24-3-7-1, ._1jgl8s50-3-7-1 ._1vlwkc24-3-7-1:hover, ._1jgl8s50-3-7-1 ._1vlwkc24-3-7-1:active {
+  --_bx32h4-3-7-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc25-3-6-0 {
+._1vlwkc25-3-7-1 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -51,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-6-0._1vlwkc25-3-6-0 {
+._1vlwkc25-3-7-1._1vlwkc25-3-7-1 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-6-0::-webkit-scrollbar {
+._1vlwkc25-3-7-1::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-6-0._1vlwkc26-3-6-0 {
+._1vlwkc26-3-7-1._1vlwkc26-3-7-1 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-6-0 {
+._1vlwkc27-3-7-1 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-6-0::selection {
+._1vlwkc27-3-7-1::selection {
   background: transparent;
 }

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

@@ -168,7 +168,11 @@ const DateTimeRangePicker = forwardRef(
     const [store] = useState(
       () => createTimeframeStore(
         initialState,
-        getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp)
+        getDateTimeRangePickerActions(
+          isControlled,
+          formFieldMessagesDispatch,
+          onChangeProp
+        )
       )
     );
     useSyncPropsAndState(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.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 { DateTimeRangePickerRoot } from './DateTimeRangePickerRoot.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} 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 { getDateTimeRangePickerActions } from '../../core/time/timeframeStore/actions/dateTimeRangePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../../core/time/timeframeStore/dateTimeRangePicker.types.js';\nimport { DateTimeRangePickerStoreProvider } 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 { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../forms-core/time/timeParser.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype DateTimeRangePickerStore = StoreApi<\n  DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions\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: DateTimeRangePickerStore,\n  memoedValue: {\n    from: TimeValue | null;\n    to: TimeValue | null;\n  } | null,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimeRangePickerRef: RefObject<DateTimeRangePickerRef>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          formerError: state.calendarError,\n          ref: dateTimeRangePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'dateTimePicker',\n          required: state.required,\n        });\n\n        const value = removePrecisionFromTimeFrame(\n          memoedValue,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'range',\n          state.min,\n          state.max,\n          precision,\n        );\n\n        return {\n          ...state,\n          dateTimeRangePickerTimeframe: value,\n          calendarValue: value,\n          calendarError: error,\n          dateTimeRangePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    precision,\n    dateTimeRangePickerRef,\n  ]);\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeFrame(\n        state.dateTimeRangePickerTimeframe,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        dateTimeRangePickerTimeframe: value,\n        calendarValue: value,\n        required,\n      };\n    });\n  }, [precision, formatString, store, required]);\n}\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\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 = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      onBlur,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-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);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled,\n        propReadOnly,\n      });\n\n    const [initialState] = useState<DateTimeRangePickerTimeframeStates>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\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: dateTimeRangePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      });\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        timeOffset,\n        formatString,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimeRangePickerTimeframeStates,\n        DateTimeRangePickerTimeframeStoreActions\n      >(\n        initialState,\n        getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimeRangePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimeRangePickerTimeframeStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimeRangePickerTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimeRangePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'dateTimePicker',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimeRangePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<DateTimeRangePickerRef>([\n      dateTimeRangePickerRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <DateTimeRangePickerStoreProvider store={store}>\n        <DateTimeRangePickerRoot\n          {...remainingProps}\n          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          onBlur={(event) => {\n            onBlur?.(event);\n\n            if (!event.target.contains(document.activeElement)) {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n            }\n          }}\n        />\n      </DateTimeRangePickerStoreProvider>\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 type { StoreApi } from 'zustand';\n\nimport { DateTimeRangePickerRoot } from './DateTimeRangePickerRoot.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} 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 { getDateTimeRangePickerActions } from '../../core/time/timeframeStore/actions/dateTimeRangePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../../core/time/timeframeStore/dateTimeRangePicker.types.js';\nimport { DateTimeRangePickerStoreProvider } 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 { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../forms-core/time/timeParser.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype DateTimeRangePickerStore = StoreApi<\n  DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions\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: DateTimeRangePickerStore,\n  memoedValue: {\n    from: TimeValue | null;\n    to: TimeValue | null;\n  } | null,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimeRangePickerRef: RefObject<DateTimeRangePickerRef>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          formerError: state.calendarError,\n          ref: dateTimeRangePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'dateTimePicker',\n          required: state.required,\n        });\n\n        const value = removePrecisionFromTimeFrame(\n          memoedValue,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'range',\n          state.min,\n          state.max,\n          precision,\n        );\n\n        return {\n          ...state,\n          dateTimeRangePickerTimeframe: value,\n          calendarValue: value,\n          calendarError: error,\n          dateTimeRangePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    precision,\n    dateTimeRangePickerRef,\n  ]);\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeFrame(\n        state.dateTimeRangePickerTimeframe,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        dateTimeRangePickerTimeframe: value,\n        calendarValue: value,\n        required,\n      };\n    });\n  }, [precision, formatString, store, required]);\n}\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\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 = 'minutes',\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      'aria-disabled': propAriaDisabled,\n      onBlur,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, precision),\n      /** We're ignoring updates to defaultValue as it only considers the initial state. */\n      // eslint-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);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const { disabled, required, id, ariaDisabled, readOnly } =\n      useSyncedFormControlProps({\n        propDisabled,\n        propRequired,\n        propId,\n        propAriaDisabled,\n        propReadOnly,\n      });\n\n    const [initialState] = useState<DateTimeRangePickerTimeframeStates>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\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: dateTimeRangePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      });\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        timeOffset,\n        formatString,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimeRangePickerTimeframeStates,\n        DateTimeRangePickerTimeframeStoreActions\n      >(\n        initialState,\n        getDateTimeRangePickerActions(\n          isControlled,\n          formFieldMessagesDispatch,\n          onChangeProp,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimeRangePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimeRangePickerTimeframeStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimeRangePickerTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimeRangePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'dateTimePicker',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimeRangePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<DateTimeRangePickerRef>([\n      dateTimeRangePickerRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <DateTimeRangePickerStoreProvider store={store}>\n        <DateTimeRangePickerRoot\n          {...remainingProps}\n          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n          required={required}\n          readOnly={readOnly}\n          onBlur={(event) => {\n            onBlur?.(event);\n\n            if (!event.target.contains(document.activeElement)) {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n            }\n          }}\n        />\n      </DateTimeRangePickerStoreProvider>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -5,10 +5,10 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dateTimeInput = "_1vlwkc26-3-6-0";
-var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-6-0", variantClassNames: { showError: { true: "_1vlwkc21-3-6-0" }, disabled: { true: "_1vlwkc22-3-6-0" }, readOnly: { true: "_1vlwkc23-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-6-0"]] });
-var scrollContainer = "_1vlwkc25-3-6-0";
-var timeframeSeparator = "_1vlwkc27-3-6-0";
+var dateTimeInput = "_1vlwkc26-3-7-1";
+var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-7-1", variantClassNames: { showError: { true: "_1vlwkc21-3-7-1" }, disabled: { true: "_1vlwkc22-3-7-1" }, readOnly: { true: "_1vlwkc23-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-7-1"]] });
+var scrollContainer = "_1vlwkc25-3-7-1";
+var timeframeSeparator = "_1vlwkc27-3-7-1";
 export {
   dateTimeInput,
   dateTimeRange,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-6-0';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-6-0',variantClassNames:{showError:{true:'_1vlwkc21-3-6-0'},disabled:{true:'_1vlwkc22-3-6-0'},readOnly:{true:'_1vlwkc23-3-6-0'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-6-0']]});\nexport var scrollContainer = '_1vlwkc25-3-6-0';\nexport var timeframeSeparator = '_1vlwkc27-3-6-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-7-1';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-7-1',variantClassNames:{showError:{true:'_1vlwkc21-3-7-1'},disabled:{true:'_1vlwkc22-3-7-1'},readOnly:{true:'_1vlwkc23-3-7-1'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-7-1']]});\nexport var scrollContainer = '_1vlwkc25-3-7-1';\nexport var timeframeSeparator = '_1vlwkc27-3-7-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB;AACpB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACnR,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;",
   "names": []
 }

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

@@ -23,7 +23,7 @@ import { useSelectionInteractionHandlers } from "./useSelectionInteractionHandle
 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/styles/useFocusRing.js";
+import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useDateTimeRangePickerStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
 import { validate } from "../../core/time/validation.js";
 import { Flex } from "../../layouts/flex/Flex.js";
@@ -213,7 +213,12 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     }),
     [showError]
   );
-  const { onMouseDown, onKeyDown: handleSelectionKeyDown } = useSelectionInteractionHandlers(
+  const {
+    onMouseDown,
+    onKeyDown: handleSelectionKeyDown,
+    onContextMenu,
+    onCutCapture
+  } = useSelectionInteractionHandlers(
     touchedContainerRef,
     useCallback(() => {
       focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);
@@ -380,6 +385,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
               })
             ),
             onCopyCapture: onTimeframeCopyCapture,
+            onCutCapture,
             onPasteCapture,
             onBlur: (event) => {
               requestAnimationFrame(() => {
@@ -393,6 +399,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
             },
             tabIndex: disabled ? void 0 : 0,
             onMouseDown,
+            onContextMenu,
             onKeyDownCapture: (e) => {
               onUndoPasteKeyDown(e);
             },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePickerRoot.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateRangeSelector } from './DateRangeSelector.js';\nimport { DateTimeInput } from './DateTimeInput.js';\nimport * as styles from './DateTimeRangePicker.sty.js';\nimport { isExpressionTriggerKey } from './expression-trigger-helpers.js';\nimport { useDateTimeRangePicker } from './hooks/useDateTimeRangePicker.js';\nimport { onTimeframeCopyCapture } from './selection-copy-helpers.js';\nimport {\n  peekPreRestoreEndpoints,\n  type SelectionEndpoints,\n} from './selection-helpers.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { DateRangeSelectorRef, DateTimeInputRef } from './types.js';\nimport { useSelectionInteractionHandlers } from './useSelectionInteractionHandlers.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/styles/useFocusRing.js';\nimport { TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } 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 { textStyle } from '../../styles/textStyle.sty.js';\nimport {\n  clearIconButton,\n  dateTimePicker,\n} from '../date-time-picker/DateTimePicker.sty.js';\nimport { focusDateTimeInput } from '../date-time-picker/utils/focusDateTimeInput.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { SpinButtonHandler } from '../spin-buttons/spin-button-group/types.js';\n\n/**\n * Returns true if a given DateTimeInput element contains the active (focused)\n * element *or* the window selection intersects it.\n *\n * The focus-based check covers the common case where a single spin button is\n * focused \u2013 including empty (placeholder) spin buttons whose `selectAll()` is\n * a no-op and therefore leave the window selection collapsed.\n *\n * The selection-based check covers cross-input scenarios such as Ctrl+A or\n * drag-select spanning both \"from\" and \"to\" inputs.\n */\nfunction isInputInSelectionOrFocused(\n  ref: RefObject<DateTimeInputRef | null>,\n  preRestoreEndpoints?: SelectionEndpoints,\n): boolean {\n  const element = ref.current?.element;\n  if (!element) {\n    return false;\n  }\n\n  if (element.contains(document.activeElement)) {\n    return true;\n  }\n\n  const selection = window.getSelection();\n  if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {\n    if (selection.getRangeAt(0).intersectsNode(element)) {\n      return true;\n    }\n  }\n\n  // Safari clips the live selection to the active CE host after contenteditable\n  // is re-attached in the keydown capture phase. Fall back to the pre-restore\n  // endpoints stashed by deferContentEditableRestore, which still span both inputs.\n  return (\n    !!preRestoreEndpoints &&\n    (element.contains(preRestoreEndpoints.anchorNode) ||\n      element.contains(preRestoreEndpoints.focusNode))\n  );\n}\n\nfunction focusExpressionInputAtEnd(\n  ref: RefObject<DateTimeInputRef | null>,\n): void {\n  const expressionElement = ref.current?.expressionInputRef;\n  if (!expressionElement) {\n    return;\n  }\n\n  expressionElement.focus();\n\n  const selection = window.getSelection();\n  if (!selection) {\n    return;\n  }\n\n  const range = document.createRange();\n  range.selectNodeContents(expressionElement);\n  range.collapse(false);\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n\nfunction getOffsetWithinElement(\n  element: HTMLElement,\n  container: Node,\n  offset: number,\n): number {\n  const range = document.createRange();\n  range.selectNodeContents(element);\n  range.setEnd(container, offset);\n  return range.toString().length;\n}\n\n/**@internal */\nexport const DateTimeRangePickerRoot = forwardRef<\n  DateTimeRangePickerRef,\n  Omit<DateTimeRangePickerProps, 'value' | 'defaultValue' | 'onChange'>\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    readOnly = false,\n    name,\n    style: consumerStyle,\n    className: consumerClassName,\n    required: propRequired,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    placeholder: placeholderProp,\n    onBlur,\n    ...remainingProps\n  }: Omit<\n    DateTimeRangePickerProps,\n    'value' | 'defaultValue' | 'onChange'\n  > = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const ariaProps = useAriaLabelingProps(props);\n  const COMPONENT_NAME = 'DateTimeRangePicker';\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n  const dateTimeToRef = useRef<DateTimeInputRef>(null);\n  const dateRangeSelectorRef = useRef<DateRangeSelectorRef>(null);\n\n  const [hasInputContent, setHasInputContent] = useState(false);\n\n  const setValue = useDateTimeRangePickerStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n  const value = useDateTimeRangePickerStore(\n    (state) => state.dateTimeRangePickerTimeframe,\n  );\n  const dateTimeFromRef = useDateTimeRangePickerStore(\n    (state) => state.dateTimeFromRef,\n  );\n  const precision = useDateTimeRangePickerStore((state) => state.precision);\n  const min = useDateTimeRangePickerStore((state) => state.min);\n  const max = useDateTimeRangePickerStore((state) => state.max);\n  const formatString = useDateTimeRangePickerStore(\n    (state) => state.formatString,\n  );\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 { placeholder, onPasteCapture, onUndoPasteKeyDown } =\n    useDateTimeRangePicker({\n      placeholder: placeholderProp,\n      readOnly,\n      dateTimeFromRef,\n      dateTimeToRef,\n    });\n\n  const intl = useIntl();\n\n  const {\n    state: { showError },\n    dispatch: formMessageDispatch,\n  } = useFormFieldMessagesContext();\n\n  // Track the last error key returned by the imperative validate() so we can\n  // pass it as `formerError` on the next call and clean up stale messages.\n  const lastValidationErrorRef = useRef<TimeErrorKey | undefined>();\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): DateTimeRangePickerRef => ({\n      element: rootRef.current,\n      inputRef: {\n        from: dateTimeFromRef.current?.inputRef,\n        to: dateTimeToRef.current?.inputRef,\n      },\n      open: () => dateRangeSelectorRef.current?.open(),\n      close: () => dateRangeSelectorRef.current?.close(),\n      focus: () => dateTimeFromRef.current?.focus?.(),\n      getCurrentValue: () => ({\n        from: value?.from ?? null,\n        to: value?.to ?? null,\n      }),\n      validate() {\n        lastValidationErrorRef.current = validate(value, min, max, {\n          formMessageDispatch,\n          formerError: lastValidationErrorRef.current,\n          precision,\n          showError: true,\n          checkOrder: true,\n          ref: rootRef,\n          expectedFormat: formatString,\n          valueMode: 'dateTimePicker',\n          required,\n        });\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [\n      value,\n      min,\n      max,\n      formMessageDispatch,\n      precision,\n      formatString,\n      required,\n      dateTimeFromRef,\n    ],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n    isMinimal: false,\n    disabled,\n    color: showError ? 'critical' : 'neutral',\n  });\n\n  const dateTimeFromLabel = intl.formatMessage({\n    defaultMessage: 'DateTime from',\n    id: 'fMy6q/KKOqbvCA3H',\n    description:\n      'Textbox to enter a relative or absolute timeframe from value.',\n  });\n\n  const dateTimeToLabel = intl.formatMessage({\n    defaultMessage: 'DateTime to',\n    id: 'uuhhc3nEZptwtV2E',\n    description: 'Textbox to enter a relative or absolute timeframe to value.',\n  });\n  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time range',\n    id: 'zX4r/Y8gJL1C8+5e',\n    description: 'Aria label for the DateTimeRangePicker clear button.',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        showError,\n      },\n    }),\n    [showError],\n  );\n\n  const { onMouseDown, onKeyDown: handleSelectionKeyDown } =\n    useSelectionInteractionHandlers(\n      touchedContainerRef,\n      useCallback(() => {\n        focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n      }, [dateTimeFromRef]),\n      dateTimeFromRef,\n      dateTimeToRef,\n    );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      // Safari: Reads the stash set by deferContentEditableRestore\n      const preRestoreEndpoints = peekPreRestoreEndpoints(\n        event.currentTarget as HTMLElement,\n      );\n\n      const fromInputIsIso =\n        dateTimeFromRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n      const toInputIsIso =\n        dateTimeToRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      const bothInSelection =\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints);\n\n      // When both inputs are selected, allow expression trigger keys to switch the entire range to expression mode.\n      if (bothInSelection && isExpressionTriggerKey(event)) {\n        setValue(null);\n        if (dateTimeToRef.current?.expressionInputRef) {\n          dateTimeToRef.current.expressionInputRef.textContent = '';\n        }\n      }\n\n      const switchFromToExpression =\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        fromInputIsIso;\n      const switchToToExpression =\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) &&\n        toInputIsIso;\n      if (\n        isExpressionTriggerKey(event) &&\n        (switchFromToExpression || switchToToExpression)\n      ) {\n        const char = event.key;\n\n        // The primary input receives the character and focus.\n        // When both are selected, 'from' receives the character and focus.\n        const primaryRef = switchFromToExpression\n          ? dateTimeFromRef\n          : dateTimeToRef;\n\n        primaryRef.current?.setExpressionValue(char);\n\n        requestAnimationFrame(() => {\n          focusExpressionInputAtEnd(primaryRef);\n        });\n\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n      // Handle regular character input when both inputs are selected\n      if (\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) &&\n        !fromInputIsIso &&\n        !toInputIsIso &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey &&\n        !event.altKey\n      ) {\n        const char = event.key;\n        const fromExpressionElement =\n          dateTimeFromRef.current?.expressionInputRef;\n        const toExpressionElement = dateTimeToRef.current?.expressionInputRef;\n        const selection = window.getSelection();\n\n        if (\n          fromExpressionElement &&\n          toExpressionElement &&\n          selection &&\n          selection.rangeCount > 0 &&\n          !selection.isCollapsed\n        ) {\n          const range = selection.getRangeAt(0);\n          const fromValue = fromExpressionElement.textContent ?? '';\n          const toValue = toExpressionElement.textContent ?? '';\n\n          const fromStart = fromExpressionElement.contains(range.startContainer)\n            ? getOffsetWithinElement(\n                fromExpressionElement,\n                range.startContainer,\n                range.startOffset,\n              )\n            : 0;\n          const toEnd = toExpressionElement.contains(range.endContainer)\n            ? getOffsetWithinElement(\n                toExpressionElement,\n                range.endContainer,\n                range.endOffset,\n              )\n            : toValue.length;\n\n          dateTimeFromRef.current?.setExpressionValue(\n            `${fromValue.slice(0, fromStart)}${char}`,\n          );\n          dateTimeToRef.current?.setExpressionValue(toValue.slice(toEnd));\n\n          requestAnimationFrame(() => {\n            focusExpressionInputAtEnd(dateTimeFromRef);\n          });\n\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n\n        // Replace the selected expression in \"from\" and keep \"to\" unchanged.\n        dateTimeFromRef.current?.setExpressionValue(char);\n\n        requestAnimationFrame(() => {\n          focusExpressionInputAtEnd(dateTimeFromRef);\n        });\n\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [\n      disabled,\n      readOnly,\n      handleSelectionKeyDown,\n      dateTimeFromRef,\n      dateTimeToRef,\n      setValue,\n    ],\n  );\n\n  // Move from the last \"from\" segment to the first \"to\" segment.\n  const handleFromTrailingEdge = useCallback(() => {\n    dateTimeToRef.current?.focus?.();\n  }, []);\n\n  // Move from the first \"to\" segment to the last \"from\" segment.\n  const handleToLeadingEdge = useCallback(() => {\n    dateTimeFromRef.current?.focusLast();\n  }, [dateTimeFromRef]);\n\n  // Carry trailing overflow from \"from\" into the first \"to\" segment.\n  const handleFromTrailingOverflow = useCallback(\n    (overflowChar: string) => {\n      const handlers = Array.from(\n        dateTimeToRef.current?.spinButtonHandlers?.values() ?? [],\n      ).filter((h): h is SpinButtonHandler => h !== null && h !== undefined);\n\n      const firstHandler = handlers[0];\n      if (!firstHandler) {\n        return;\n      }\n\n      if (value?.to?.type === 'expression' || value?.to === null) {\n        dateTimeToRef.current?.setExpressionValue(overflowChar);\n        requestAnimationFrame(() => {\n          const exprEl = dateTimeToRef.current?.expressionInputRef;\n          if (exprEl) {\n            // Focus first so that expressionOnFocusHandler fires and selects all,\n            // then immediately collapse the selection to the end so the cursor\n            // lands after the overflow character instead of selecting everything.\n            exprEl.focus();\n            const sel = window.getSelection();\n            if (sel) {\n              const range = document.createRange();\n              range.selectNodeContents(exprEl);\n              range.collapse(false);\n              sel.removeAllRanges();\n              sel.addRange(range);\n            }\n          }\n        });\n        return;\n      }\n\n      if (firstHandler.type === 'number') {\n        firstHandler.applyText(overflowChar, true);\n        firstHandler.element.current?.focus();\n        firstHandler.setSelection({ start: 0, end: 0, rtl: true });\n      }\n    },\n    [value?.to],\n  );\n\n  return (\n    <Flex\n      ref={rootRef}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      style={consumerStyle}\n      className={consumerClassName}\n      {...ariaProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n        <InputGroup style={{ gridTemplateColumns: '1fr auto' }}>\n          <Flex\n            ref={touchedContainerRef}\n            className={clsx(\n              inputGroupClassName,\n              dateTimePicker({\n                readOnly,\n                showError,\n                disabled,\n                type: 'datetime',\n              }),\n              textStyle({ textStyle: 'base' }),\n              fieldTokens({\n                color: showError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'emphasized',\n              }),\n              focusClassName,\n              styles.dateTimeRange({\n                showError,\n                disabled: disabledOrAriaDisabled,\n                readOnly: readOnly,\n              }),\n            )}\n            onCopyCapture={onTimeframeCopyCapture}\n            onPasteCapture={onPasteCapture}\n            onBlur={(event) => {\n              // onFocus synchronously redirects focus from the container to a spin button,\n              // causing a spurious onBlur; rAF defers the call until focus has settled.\n              requestAnimationFrame(() => {\n                onBlur?.(event);\n              });\n            }}\n            onInput={() => {\n              setHasInputContent(\n                !!dateTimeFromRef.current?.expressionInputRef?.textContent ||\n                  !!dateTimeToRef.current?.expressionInputRef?.textContent,\n              );\n            }}\n            tabIndex={disabled ? undefined : 0}\n            onMouseDown={onMouseDown}\n            onKeyDownCapture={(e) => {\n              // Handles undo for from and to inputs with Ctrl+Z.\n              // Uses capture phase so it fires before the input-level undo handler.\n              onUndoPasteKeyDown(e);\n            }}\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\n              if (!rootRef.current?.contains(e.relatedTarget)) {\n                focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n          >\n            <span className={styles.scrollContainer}>\n              <DateTimeInput\n                ref={dateTimeFromRef}\n                className={styles.dateTimeInput}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder.from}\n                name={name === undefined ? undefined : `${name}-from`}\n                // Maintains its own state to separate single and range value manipulations\n                value={value === null ? null : value.from}\n                onChange={(newValue) => {\n                  if (typeof newValue !== 'string') {\n                    setValue({ from: newValue ?? null });\n                  }\n                }}\n                aria-label={dateTimeFromLabel}\n                aria-disabled={ariaDisabled}\n                required={required}\n                controlId={id}\n                onTrailingEdge={handleFromTrailingEdge}\n                onTrailingOverflow={handleFromTrailingOverflow}\n                partialTimeAnchorDate={value?.to?.absoluteDate || undefined}\n                onPasteComplete={() => {\n                  dateTimeToRef.current?.focus?.();\n                }}\n              />\n\n              <span className={styles.timeframeSeparator}>\u2192</span>\n              <DateTimeInput\n                ref={dateTimeToRef}\n                className={styles.dateTimeInput}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder.to}\n                name={name === undefined ? undefined : `${name}-to`}\n                // Maintains its own state to separate single and range value manipulations\n                value={value === null ? null : value.to}\n                onChange={(newValue) => {\n                  if (typeof newValue !== 'string') {\n                    setValue({ to: newValue ?? null });\n                  }\n                }}\n                aria-label={dateTimeToLabel}\n                aria-disabled={ariaDisabled}\n                required={required}\n                onLeadingEdge={handleToLeadingEdge}\n                dateOnlyPasteAnchor=\"endOfDay\"\n                partialTimeAnchorDate={value?.from?.absoluteDate || undefined}\n                onPasteComplete={() => {\n                  requestAnimationFrame(() => {\n                    dateTimeToRef.current?.focusLast();\n                  });\n                }}\n              />\n            </span>\n            {!readOnly &&\n              !disabledOrAriaDisabled &&\n              ((value &&\n                (value.from?.value !== '' || value.to?.value !== '')) ||\n                hasInputContent) && (\n                <Button\n                  onFocus={() => {\n                    formMessageDispatch?.({\n                      type: FormFieldMessagesAction.SETISTOUCHED,\n                      payload: { isTouched: true },\n                    });\n                  }}\n                  onClick={() => {\n                    setValue(null);\n                    if (dateTimeFromRef.current?.expressionInputRef) {\n                      dateTimeFromRef.current.expressionInputRef.textContent =\n                        '';\n                    }\n                    if (dateTimeToRef.current?.expressionInputRef) {\n                      dateTimeToRef.current.expressionInputRef.textContent = '';\n                    }\n                    setHasInputContent(false);\n                    requestAnimationFrame(() => {\n                      dateTimeFromRef.current?.expressionInputRef?.focus();\n                    });\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.stopPropagation();\n                    }\n                  }}\n                  className={clearIconButton}\n                  color={showError ? 'critical' : 'neutral'}\n                  size=\"condensed\"\n                  aria-label={clearButtonLabel}\n                >\n                  <XmarkIcon />\n                </Button>\n              )}\n          </Flex>\n          <DateRangeSelector\n            ref={dateRangeSelectorRef}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            error={showError}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type RefObject,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateRangeSelector } from './DateRangeSelector.js';\nimport { DateTimeInput } from './DateTimeInput.js';\nimport * as styles from './DateTimeRangePicker.sty.js';\nimport { isExpressionTriggerKey } from './expression-trigger-helpers.js';\nimport { useDateTimeRangePicker } from './hooks/useDateTimeRangePicker.js';\nimport { onTimeframeCopyCapture } from './selection-copy-helpers.js';\nimport {\n  peekPreRestoreEndpoints,\n  type SelectionEndpoints,\n} from './selection-helpers.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { DateRangeSelectorRef, DateTimeInputRef } from './types.js';\nimport { useSelectionInteractionHandlers } from './useSelectionInteractionHandlers.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 { TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } 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 { textStyle } from '../../styles/textStyle.sty.js';\nimport {\n  clearIconButton,\n  dateTimePicker,\n} from '../date-time-picker/DateTimePicker.sty.js';\nimport { focusDateTimeInput } from '../date-time-picker/utils/focusDateTimeInput.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { SpinButtonHandler } from '../spin-buttons/spin-button-group/types.js';\n\n/**\n * Returns true if a given DateTimeInput element contains the active (focused)\n * element *or* the window selection intersects it.\n *\n * The focus-based check covers the common case where a single spin button is\n * focused \u2013 including empty (placeholder) spin buttons whose `selectAll()` is\n * a no-op and therefore leave the window selection collapsed.\n *\n * The selection-based check covers cross-input scenarios such as Ctrl+A or\n * drag-select spanning both \"from\" and \"to\" inputs.\n */\nfunction isInputInSelectionOrFocused(\n  ref: RefObject<DateTimeInputRef | null>,\n  preRestoreEndpoints?: SelectionEndpoints,\n): boolean {\n  const element = ref.current?.element;\n  if (!element) {\n    return false;\n  }\n\n  if (element.contains(document.activeElement)) {\n    return true;\n  }\n\n  const selection = window.getSelection();\n  if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {\n    if (selection.getRangeAt(0).intersectsNode(element)) {\n      return true;\n    }\n  }\n\n  // Safari clips the live selection to the active CE host after contenteditable\n  // is re-attached in the keydown capture phase. Fall back to the pre-restore\n  // endpoints stashed by deferContentEditableRestore, which still span both inputs.\n  return (\n    !!preRestoreEndpoints &&\n    (element.contains(preRestoreEndpoints.anchorNode) ||\n      element.contains(preRestoreEndpoints.focusNode))\n  );\n}\n\nfunction focusExpressionInputAtEnd(\n  ref: RefObject<DateTimeInputRef | null>,\n): void {\n  const expressionElement = ref.current?.expressionInputRef;\n  if (!expressionElement) {\n    return;\n  }\n\n  expressionElement.focus();\n\n  const selection = window.getSelection();\n  if (!selection) {\n    return;\n  }\n\n  const range = document.createRange();\n  range.selectNodeContents(expressionElement);\n  range.collapse(false);\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n\nfunction getOffsetWithinElement(\n  element: HTMLElement,\n  container: Node,\n  offset: number,\n): number {\n  const range = document.createRange();\n  range.selectNodeContents(element);\n  range.setEnd(container, offset);\n  return range.toString().length;\n}\n\n/**@internal */\nexport const DateTimeRangePickerRoot = forwardRef<\n  DateTimeRangePickerRef,\n  Omit<DateTimeRangePickerProps, 'value' | 'defaultValue' | 'onChange'>\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    readOnly = false,\n    name,\n    style: consumerStyle,\n    className: consumerClassName,\n    required: propRequired,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    placeholder: placeholderProp,\n    onBlur,\n    ...remainingProps\n  }: Omit<\n    DateTimeRangePickerProps,\n    'value' | 'defaultValue' | 'onChange'\n  > = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const ariaProps = useAriaLabelingProps(props);\n  const COMPONENT_NAME = 'DateTimeRangePicker';\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n  const dateTimeToRef = useRef<DateTimeInputRef>(null);\n  const dateRangeSelectorRef = useRef<DateRangeSelectorRef>(null);\n\n  const [hasInputContent, setHasInputContent] = useState(false);\n\n  const setValue = useDateTimeRangePickerStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n  const value = useDateTimeRangePickerStore(\n    (state) => state.dateTimeRangePickerTimeframe,\n  );\n  const dateTimeFromRef = useDateTimeRangePickerStore(\n    (state) => state.dateTimeFromRef,\n  );\n  const precision = useDateTimeRangePickerStore((state) => state.precision);\n  const min = useDateTimeRangePickerStore((state) => state.min);\n  const max = useDateTimeRangePickerStore((state) => state.max);\n  const formatString = useDateTimeRangePickerStore(\n    (state) => state.formatString,\n  );\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 { placeholder, onPasteCapture, onUndoPasteKeyDown } =\n    useDateTimeRangePicker({\n      placeholder: placeholderProp,\n      readOnly,\n      dateTimeFromRef,\n      dateTimeToRef,\n    });\n\n  const intl = useIntl();\n\n  const {\n    state: { showError },\n    dispatch: formMessageDispatch,\n  } = useFormFieldMessagesContext();\n\n  // Track the last error key returned by the imperative validate() so we can\n  // pass it as `formerError` on the next call and clean up stale messages.\n  const lastValidationErrorRef = useRef<TimeErrorKey | undefined>();\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): DateTimeRangePickerRef => ({\n      element: rootRef.current,\n      inputRef: {\n        from: dateTimeFromRef.current?.inputRef,\n        to: dateTimeToRef.current?.inputRef,\n      },\n      open: () => dateRangeSelectorRef.current?.open(),\n      close: () => dateRangeSelectorRef.current?.close(),\n      focus: () => dateTimeFromRef.current?.focus?.(),\n      getCurrentValue: () => ({\n        from: value?.from ?? null,\n        to: value?.to ?? null,\n      }),\n      validate() {\n        lastValidationErrorRef.current = validate(value, min, max, {\n          formMessageDispatch,\n          formerError: lastValidationErrorRef.current,\n          precision,\n          showError: true,\n          checkOrder: true,\n          ref: rootRef,\n          expectedFormat: formatString,\n          valueMode: 'dateTimePicker',\n          required,\n        });\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [\n      value,\n      min,\n      max,\n      formMessageDispatch,\n      precision,\n      formatString,\n      required,\n      dateTimeFromRef,\n    ],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n    isMinimal: false,\n    disabled,\n    color: showError ? 'critical' : 'neutral',\n  });\n\n  const dateTimeFromLabel = intl.formatMessage({\n    defaultMessage: 'DateTime from',\n    id: 'fMy6q/KKOqbvCA3H',\n    description:\n      'Textbox to enter a relative or absolute timeframe from value.',\n  });\n\n  const dateTimeToLabel = intl.formatMessage({\n    defaultMessage: 'DateTime to',\n    id: 'uuhhc3nEZptwtV2E',\n    description: 'Textbox to enter a relative or absolute timeframe to value.',\n  });\n  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time range',\n    id: 'zX4r/Y8gJL1C8+5e',\n    description: 'Aria label for the DateTimeRangePicker clear button.',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        showError,\n      },\n    }),\n    [showError],\n  );\n\n  const {\n    onMouseDown,\n    onKeyDown: handleSelectionKeyDown,\n    onContextMenu,\n    onCutCapture,\n  } = useSelectionInteractionHandlers(\n    touchedContainerRef,\n    useCallback(() => {\n      focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n    }, [dateTimeFromRef]),\n    dateTimeFromRef,\n    dateTimeToRef,\n  );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      // Safari: Reads the stash set by deferContentEditableRestore\n      const preRestoreEndpoints = peekPreRestoreEndpoints(\n        event.currentTarget as HTMLElement,\n      );\n\n      const fromInputIsIso =\n        dateTimeFromRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n      const toInputIsIso =\n        dateTimeToRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      const bothInSelection =\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints);\n\n      // When both inputs are selected, allow expression trigger keys to switch the entire range to expression mode.\n      if (bothInSelection && isExpressionTriggerKey(event)) {\n        setValue(null);\n        if (dateTimeToRef.current?.expressionInputRef) {\n          dateTimeToRef.current.expressionInputRef.textContent = '';\n        }\n      }\n\n      const switchFromToExpression =\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        fromInputIsIso;\n      const switchToToExpression =\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) &&\n        toInputIsIso;\n      if (\n        isExpressionTriggerKey(event) &&\n        (switchFromToExpression || switchToToExpression)\n      ) {\n        const char = event.key;\n\n        // The primary input receives the character and focus.\n        // When both are selected, 'from' receives the character and focus.\n        const primaryRef = switchFromToExpression\n          ? dateTimeFromRef\n          : dateTimeToRef;\n\n        primaryRef.current?.setExpressionValue(char);\n\n        requestAnimationFrame(() => {\n          focusExpressionInputAtEnd(primaryRef);\n        });\n\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n      // Handle regular character input when both inputs are selected\n      if (\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) &&\n        !fromInputIsIso &&\n        !toInputIsIso &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey &&\n        !event.altKey\n      ) {\n        const char = event.key;\n        const fromExpressionElement =\n          dateTimeFromRef.current?.expressionInputRef;\n        const toExpressionElement = dateTimeToRef.current?.expressionInputRef;\n        const selection = window.getSelection();\n\n        if (\n          fromExpressionElement &&\n          toExpressionElement &&\n          selection &&\n          selection.rangeCount > 0 &&\n          !selection.isCollapsed\n        ) {\n          const range = selection.getRangeAt(0);\n          const fromValue = fromExpressionElement.textContent ?? '';\n          const toValue = toExpressionElement.textContent ?? '';\n\n          const fromStart = fromExpressionElement.contains(range.startContainer)\n            ? getOffsetWithinElement(\n                fromExpressionElement,\n                range.startContainer,\n                range.startOffset,\n              )\n            : 0;\n          const toEnd = toExpressionElement.contains(range.endContainer)\n            ? getOffsetWithinElement(\n                toExpressionElement,\n                range.endContainer,\n                range.endOffset,\n              )\n            : toValue.length;\n\n          dateTimeFromRef.current?.setExpressionValue(\n            `${fromValue.slice(0, fromStart)}${char}`,\n          );\n          dateTimeToRef.current?.setExpressionValue(toValue.slice(toEnd));\n\n          requestAnimationFrame(() => {\n            focusExpressionInputAtEnd(dateTimeFromRef);\n          });\n\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n\n        // Replace the selected expression in \"from\" and keep \"to\" unchanged.\n        dateTimeFromRef.current?.setExpressionValue(char);\n\n        requestAnimationFrame(() => {\n          focusExpressionInputAtEnd(dateTimeFromRef);\n        });\n\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [\n      disabled,\n      readOnly,\n      handleSelectionKeyDown,\n      dateTimeFromRef,\n      dateTimeToRef,\n      setValue,\n    ],\n  );\n\n  // Move from the last \"from\" segment to the first \"to\" segment.\n  const handleFromTrailingEdge = useCallback(() => {\n    dateTimeToRef.current?.focus?.();\n  }, []);\n\n  // Move from the first \"to\" segment to the last \"from\" segment.\n  const handleToLeadingEdge = useCallback(() => {\n    dateTimeFromRef.current?.focusLast();\n  }, [dateTimeFromRef]);\n\n  // Carry trailing overflow from \"from\" into the first \"to\" segment.\n  const handleFromTrailingOverflow = useCallback(\n    (overflowChar: string) => {\n      const handlers = Array.from(\n        dateTimeToRef.current?.spinButtonHandlers?.values() ?? [],\n      ).filter((h): h is SpinButtonHandler => h !== null && h !== undefined);\n\n      const firstHandler = handlers[0];\n      if (!firstHandler) {\n        return;\n      }\n\n      if (value?.to?.type === 'expression' || value?.to === null) {\n        dateTimeToRef.current?.setExpressionValue(overflowChar);\n        requestAnimationFrame(() => {\n          const exprEl = dateTimeToRef.current?.expressionInputRef;\n          if (exprEl) {\n            // Focus first so that expressionOnFocusHandler fires and selects all,\n            // then immediately collapse the selection to the end so the cursor\n            // lands after the overflow character instead of selecting everything.\n            exprEl.focus();\n            const sel = window.getSelection();\n            if (sel) {\n              const range = document.createRange();\n              range.selectNodeContents(exprEl);\n              range.collapse(false);\n              sel.removeAllRanges();\n              sel.addRange(range);\n            }\n          }\n        });\n        return;\n      }\n\n      if (firstHandler.type === 'number') {\n        firstHandler.applyText(overflowChar, true);\n        firstHandler.element.current?.focus();\n        firstHandler.setSelection({ start: 0, end: 0, rtl: true });\n      }\n    },\n    [value?.to],\n  );\n\n  return (\n    <Flex\n      ref={rootRef}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      style={consumerStyle}\n      className={consumerClassName}\n      {...ariaProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n        <InputGroup style={{ gridTemplateColumns: '1fr auto' }}>\n          <Flex\n            ref={touchedContainerRef}\n            className={clsx(\n              inputGroupClassName,\n              dateTimePicker({\n                readOnly,\n                showError,\n                disabled,\n                type: 'datetime',\n              }),\n              textStyle({ textStyle: 'base' }),\n              fieldTokens({\n                color: showError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'emphasized',\n              }),\n              focusClassName,\n              styles.dateTimeRange({\n                showError,\n                disabled: disabledOrAriaDisabled,\n                readOnly: readOnly,\n              }),\n            )}\n            onCopyCapture={onTimeframeCopyCapture}\n            onCutCapture={onCutCapture}\n            onPasteCapture={onPasteCapture}\n            onBlur={(event) => {\n              // onFocus synchronously redirects focus from the container to a spin button,\n              // causing a spurious onBlur; rAF defers the call until focus has settled.\n              requestAnimationFrame(() => {\n                onBlur?.(event);\n              });\n            }}\n            onInput={() => {\n              setHasInputContent(\n                !!dateTimeFromRef.current?.expressionInputRef?.textContent ||\n                  !!dateTimeToRef.current?.expressionInputRef?.textContent,\n              );\n            }}\n            tabIndex={disabled ? undefined : 0}\n            onMouseDown={onMouseDown}\n            onContextMenu={onContextMenu}\n            onKeyDownCapture={(e) => {\n              // Handles undo for from and to inputs with Ctrl+Z.\n              // Uses capture phase so it fires before the input-level undo handler.\n              onUndoPasteKeyDown(e);\n            }}\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\n              if (!rootRef.current?.contains(e.relatedTarget)) {\n                focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n          >\n            <span className={styles.scrollContainer}>\n              <DateTimeInput\n                ref={dateTimeFromRef}\n                className={styles.dateTimeInput}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder.from}\n                name={name === undefined ? undefined : `${name}-from`}\n                // Maintains its own state to separate single and range value manipulations\n                value={value === null ? null : value.from}\n                onChange={(newValue) => {\n                  if (typeof newValue !== 'string') {\n                    setValue({ from: newValue ?? null });\n                  }\n                }}\n                aria-label={dateTimeFromLabel}\n                aria-disabled={ariaDisabled}\n                required={required}\n                controlId={id}\n                onTrailingEdge={handleFromTrailingEdge}\n                onTrailingOverflow={handleFromTrailingOverflow}\n                partialTimeAnchorDate={value?.to?.absoluteDate || undefined}\n                onPasteComplete={() => {\n                  dateTimeToRef.current?.focus?.();\n                }}\n              />\n\n              <span className={styles.timeframeSeparator}>\u2192</span>\n              <DateTimeInput\n                ref={dateTimeToRef}\n                className={styles.dateTimeInput}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder.to}\n                name={name === undefined ? undefined : `${name}-to`}\n                // Maintains its own state to separate single and range value manipulations\n                value={value === null ? null : value.to}\n                onChange={(newValue) => {\n                  if (typeof newValue !== 'string') {\n                    setValue({ to: newValue ?? null });\n                  }\n                }}\n                aria-label={dateTimeToLabel}\n                aria-disabled={ariaDisabled}\n                required={required}\n                onLeadingEdge={handleToLeadingEdge}\n                dateOnlyPasteAnchor=\"endOfDay\"\n                partialTimeAnchorDate={value?.from?.absoluteDate || undefined}\n                onPasteComplete={() => {\n                  requestAnimationFrame(() => {\n                    dateTimeToRef.current?.focusLast();\n                  });\n                }}\n              />\n            </span>\n            {!readOnly &&\n              !disabledOrAriaDisabled &&\n              ((value &&\n                (value.from?.value !== '' || value.to?.value !== '')) ||\n                hasInputContent) && (\n                <Button\n                  onFocus={() => {\n                    formMessageDispatch?.({\n                      type: FormFieldMessagesAction.SETISTOUCHED,\n                      payload: { isTouched: true },\n                    });\n                  }}\n                  onClick={() => {\n                    setValue(null);\n                    if (dateTimeFromRef.current?.expressionInputRef) {\n                      dateTimeFromRef.current.expressionInputRef.textContent =\n                        '';\n                    }\n                    if (dateTimeToRef.current?.expressionInputRef) {\n                      dateTimeToRef.current.expressionInputRef.textContent = '';\n                    }\n                    setHasInputContent(false);\n                    requestAnimationFrame(() => {\n                      dateTimeFromRef.current?.expressionInputRef?.focus();\n                    });\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.stopPropagation();\n                    }\n                  }}\n                  className={clearIconButton}\n                  color={showError ? 'critical' : 'neutral'}\n                  size=\"condensed\"\n                  aria-label={clearButtonLabel}\n                >\n                  <XmarkIcon />\n                </Button>\n              )}\n          </Flex>\n          <DateRangeSelector\n            ref={dateRangeSelectorRef}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            error={showError}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,6 +1,7 @@
 import { TZDateMini } from "@date-fns/tz";
 import { endOfDay, startOfDay } from "date-fns";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
+import * as styles from "./DateTimeInput.sty.js";
 import {
   getDayPeriodValues,
   getSafeRegionalFormat
@@ -372,8 +373,21 @@ function partialDateTimeToISO(date, time) {
   }
   return { iso: fallback.toISOString(), partsToUpdate };
 }
+function checkIfValueTypeAlignment(textNode) {
+  const closestDateTimeInput = textNode.parentElement?.closest(
+    `.${styles.dateTimeInput}`
+  );
+  const currentValueType = closestDateTimeInput?.getAttribute("data-valuetype");
+  const closestValueTypeElement = textNode.parentElement?.closest("[data-valuetype]");
+  if (closestDateTimeInput === closestValueTypeElement) {
+    return true;
+  }
+  const nodeValueType = closestValueTypeElement?.getAttribute("data-valuetype");
+  return nodeValueType === currentValueType;
+}
 export {
   captureUndoSnapshot,
+  checkIfValueTypeAlignment,
   isContentModifyingKey,
   normalizeISOInput,
   parseDateOnlyToISO,