@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/filters/timeframe-selector/TimeframeSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.tsx"],
-  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\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 { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { CustomTrigger } from './components/trigger/CustomTrigger.js';\nimport { DisplayValue } from './components/trigger/DisplayValue.js';\nimport { Trigger } from './components/trigger/Trigger.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from './TimeframeSelector.types.js';\nimport { TimeframeSelectorRoot } from './TimeframeSelectorRoot.js';\nimport { saveRecentTimeframe } from './utils/presets-helpers.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 { getTimeframeSelectorActions } from '../../core/time/timeframeStore/actions/timeframeSelector.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  TimeframeSelectorState,\n  TimeframeSelectorStoreActions,\n} from '../../core/time/timeframeStore/timeframeSelector.types.js';\nimport { TimeframeSelectorStoreProvider } 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 Timeframe, type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../../forms/calendar/utils/helpers.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerRef,\n} from '../../forms/date-time-range-picker/types.js';\nimport { useFormControl } from '../../forms/forms-core/hooks/useFormControl.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../../forms/forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type {\n  FormControlRef,\n  TimeRangePickerRef,\n} from '../../forms/shared-types.js';\n\nconst STEPPER_DEBOUNCE_MS = 300;\n\ntype TimeframeSelectorStore = StoreApi<\n  TimeframeSelectorState & TimeframeSelectorStoreActions\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: TimeframeSelectorStore,\n  memoedValue:\n    | { from: TimeValue | null; to: TimeValue | null }\n    | null\n    | undefined,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef | null>,\n  debouncedOnChangeRef: RefObject<ReturnType<typeof debounce>>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          debouncedOnChangeRef?.current?.cancel();\n          const error = validate(memoedValue ?? null, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n            formerError: state.timeframeSelectorError,\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            timeframeSelectorTimeframe: value,\n            calendarValue: value,\n            dateTimeRangePickerTimeframe: value,\n            referenceTimeframe: null,\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n            timeOffset,\n            required,\n          };\n        });\n    },\n    // timeframeSelectorRef and debouncedOnChangeRef are stable refs \u2014 no need to include in deps\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessagesDispatch,\n      formatString,\n      isControlled,\n      memoedValue,\n      precision,\n      required,\n      store,\n    ],\n  );\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const preciseValue = isControlled\n        ? memoedValue\n        : state.timeframeSelectorTimeframe;\n      const value = removePrecisionFromTimeFrame(preciseValue, precision);\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        timeframeSelectorTimeframe: value,\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n      };\n    });\n  }, [precision, formatString, store, isControlled, memoedValue]);\n}\n\nconst _TimeframeSelector = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\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      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      precision = 'minutes',\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      // 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);\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    const timeframeSelectorRef = useRef<TimeRangePickerRef>(null);\n\n    const { formatString } = useDateTimeMessages({ precision });\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 debouncedOnChangeRef = useRef(\n      debounce((timeframe: Timeframe | null) => {\n        onChangeProp?.(timeframe);\n        if (timeframe) {\n          saveRecentTimeframe(timeframe);\n        }\n      }, STEPPER_DEBOUNCE_MS),\n    );\n\n    // Cancel the debounced call on unmount.\n    useEffect(() => {\n      const debouncedOnChange = debouncedOnChangeRef.current;\n      return () => debouncedOnChange.cancel();\n    }, []);\n\n    const [initialState] = useState<TimeframeSelectorState>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        timeframeSelectorTimeframe: value,\n        referenceTimeframe: null,\n        min,\n        max,\n        precision,\n        isFullDay: false,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        timeframeSelectorRef,\n        required,\n        timeframeSelectorError: error,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        previousTimeframe: null,\n        timeOffset,\n        formatString,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        TimeframeSelectorState,\n        TimeframeSelectorStoreActions\n      >(\n        initialState,\n        getTimeframeSelectorActions(\n          isControlled,\n          timeframeSelectorRef,\n          formFieldMessagesDispatch,\n          onChangeProp,\n          debouncedOnChangeRef,\n          TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      timeframeSelectorRef,\n      debouncedOnChangeRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: TimeframeSelectorState,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.timeframeSelectorTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.timeframeSelectorError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: state.formatString,\n            valueMode: 'timeframeSelector',\n            required: state.required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          return {\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n          };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<TimeRangePickerRef>([\n      timeframeSelectorRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <TimeframeSelectorStoreProvider store={store}>\n        <TimeframeSelectorRoot\n          {...remainingProps}\n          formControl={formControl}\n          ref={mergedRef}\n        />\n      </TimeframeSelectorStoreProvider>\n    );\n  },\n);\n\n(\n  _TimeframeSelector as typeof _TimeframeSelector & { displayName: string }\n).displayName = 'TimeframeSelector';\n\n/**\n * Use the `TimeframeSelector` to let users filter data by time, choosing from preset timeframes or entering a custom start and end time.\n * @public\n */\nexport const TimeframeSelector = Object.assign(_TimeframeSelector, {\n  Trigger,\n  DisplayValue,\n  CustomTrigger,\n  Presets,\n  PresetItem,\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\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 { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { CustomTrigger } from './components/trigger/CustomTrigger.js';\nimport { DisplayValue } from './components/trigger/DisplayValue.js';\nimport { Trigger } from './components/trigger/Trigger.js';\nimport { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from './TimeframeSelector.types.js';\nimport { TimeframeSelectorRoot } from './TimeframeSelectorRoot.js';\nimport { saveRecentTimeframe } from './utils/presets-helpers.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 { getTimeframeSelectorActions } from '../../core/time/timeframeStore/actions/timeframeSelector.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  TimeframeSelectorState,\n  TimeframeSelectorStoreActions,\n} from '../../core/time/timeframeStore/timeframeSelector.types.js';\nimport { TimeframeSelectorStoreProvider } 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 Timeframe, type TimeValue } from '../../core/types/time.js';\nimport { getTimeOffsetFromInitialValue } from '../../forms/calendar/utils/helpers.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerRef,\n} from '../../forms/date-time-range-picker/types.js';\nimport { useFormControl } from '../../forms/forms-core/hooks/useFormControl.js';\nimport type { FormFieldMessagesReducerAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../../forms/forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type {\n  FormControlRef,\n  TimeRangePickerRef,\n} from '../../forms/shared-types.js';\n\nconst STEPPER_DEBOUNCE_MS = 300;\n\ntype TimeframeSelectorStore = StoreApi<\n  TimeframeSelectorState & TimeframeSelectorStoreActions\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: TimeframeSelectorStore,\n  memoedValue:\n    | { from: TimeValue | null; to: TimeValue | null }\n    | null\n    | undefined,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef | null>,\n  debouncedOnChangeRef: RefObject<ReturnType<typeof debounce>>,\n) {\n  const intl = useIntl();\n\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          debouncedOnChangeRef?.current?.cancel();\n          const error = validate(memoedValue ?? null, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            intl,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n            formerError: state.timeframeSelectorError,\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            timeframeSelectorTimeframe: value,\n            calendarValue: value,\n            dateTimeRangePickerTimeframe: value,\n            referenceTimeframe: null,\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n            timeOffset,\n            required,\n          };\n        });\n    },\n    // timeframeSelectorRef and debouncedOnChangeRef are stable refs \u2014 no need to include in deps\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessagesDispatch,\n      formatString,\n      isControlled,\n      memoedValue,\n      precision,\n      required,\n      store,\n    ],\n  );\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const preciseValue = isControlled\n        ? memoedValue\n        : state.timeframeSelectorTimeframe;\n      const value = removePrecisionFromTimeFrame(preciseValue, precision);\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        timeframeSelectorTimeframe: value,\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n      };\n    });\n  }, [precision, formatString, store, isControlled, memoedValue]);\n}\n\nconst _TimeframeSelector = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\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      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      precision = 'minutes',\n      onValidityChange,\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      // 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);\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    const timeframeSelectorRef = useRef<TimeRangePickerRef>(null);\n\n    const intl = useIntl();\n    const { formatString } = useDateTimeMessages({ precision });\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 debouncedOnChangeRef = useRef(\n      debounce((timeframe: Timeframe | null) => {\n        onChangeProp?.(timeframe);\n        if (timeframe) {\n          saveRecentTimeframe(timeframe);\n        }\n      }, STEPPER_DEBOUNCE_MS),\n    );\n\n    // Cancel the debounced call on unmount.\n    useEffect(() => {\n      const debouncedOnChange = debouncedOnChangeRef.current;\n      return () => debouncedOnChange.cancel();\n    }, []);\n\n    const [initialState] = useState<TimeframeSelectorState>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        intl,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        timeframeSelectorTimeframe: value,\n        referenceTimeframe: null,\n        min,\n        max,\n        precision,\n        isFullDay: false,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        timeframeSelectorRef,\n        required,\n        timeframeSelectorError: error,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        previousTimeframe: null,\n        timeOffset,\n        formatString,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        TimeframeSelectorState,\n        TimeframeSelectorStoreActions\n      >(\n        initialState,\n        getTimeframeSelectorActions(\n          isControlled,\n          timeframeSelectorRef,\n          formFieldMessagesDispatch,\n          onChangeProp,\n          debouncedOnChangeRef,\n          TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          intl,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      timeframeSelectorRef,\n      debouncedOnChangeRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: TimeframeSelectorState,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.timeframeSelectorTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            intl,\n            formerError: state.timeframeSelectorError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: state.formatString,\n            valueMode: 'timeframeSelector',\n            required: state.required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          return {\n            timeframeSelectorError: error,\n            calendarError: error,\n            dateTimeRangePickerError: error,\n          };\n        },\n        [formFieldMessagesDispatch, intl],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<TimeRangePickerRef>([\n      timeframeSelectorRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <TimeframeSelectorStoreProvider store={store}>\n        <TimeframeSelectorRoot\n          {...remainingProps}\n          formControl={formControl}\n          onValidityChange={controlState ? undefined : onValidityChange}\n          ref={mergedRef}\n        />\n      </TimeframeSelectorStoreProvider>\n    );\n  },\n);\n\n(\n  _TimeframeSelector as typeof _TimeframeSelector & { displayName: string }\n).displayName = 'TimeframeSelector';\n\n/**\n * Use the `TimeframeSelector` to let users filter data by time, choosing from preset timeframes or entering a custom start and end time.\n * @public\n */\nexport const TimeframeSelector = Object.assign(_TimeframeSelector, {\n  Trigger,\n  DisplayValue,\n  CustomTrigger,\n  Presets,\n  PresetItem,\n});\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }

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

@@ -1,6 +1,6 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-13-2";
-var root = "_1sqhmjg1-3-13-2";
+var displayValueParts = "_1sqhmjg0-3-14-0";
+var root = "_1sqhmjg1-3-14-0";
 export {
   displayValueParts,
   root

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.css.ts"],
-  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-13-2';\nexport var root = '_1sqhmjg1-3-13-2';"],
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-14-0';\nexport var root = '_1sqhmjg1-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;AACxB,IAAI,OAAO;",
   "names": []
 }

package/esm/filters/timeframe-selector/TimeframeSelectorRoot.js

@@ -49,6 +49,7 @@ import { InternalBaseItem as BaseItem } from "../../forms/forms-core/components/
 import { useFormFieldContext } from "../../forms/forms-core/hooks/useFormFieldContext.js";
 import { useFormFieldValidationAriaProps } from "../../forms/forms-core/hooks/useFormFieldValidation.js";
 import { useMinMaxLogger } from "../../forms/forms-core/hooks/useMinMaxLogger.js";
+import { getCustomMessageIds } from "../../forms/forms-core/state/formfield-messages-selectors.js";
 import { FormFieldMessagesAction } from "../../forms/forms-core/state/formfield-messages-state-reducer.js";
 import {
   parseValue,
@@ -164,6 +165,22 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
   const _emitValidationState = useValidationStateEmitter(
     (state) => formValidityChangeRef.current?.(state)
   );
+  const getValidationMessage = useCallback(
+    (errorKey) => {
+      if (!errorKey) {
+        return void 0;
+      }
+      return formatTimeValidationMessage(errorKey, intl, {
+        value,
+        min,
+        max,
+        precision,
+        expectedFormat: formatString,
+        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES
+      });
+    },
+    [intl, value, min, max, precision, formatString]
+  );
   const emitValidationState = useCustomMessageEmitter(
     _emitValidationState,
     () => {
@@ -184,22 +201,6 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
       );
     }
   );
-  const getValidationMessage = useCallback(
-    (errorKey) => {
-      if (!errorKey) {
-        return void 0;
-      }
-      return formatTimeValidationMessage(errorKey, intl, {
-        value,
-        min,
-        max,
-        precision,
-        expectedFormat: formatString,
-        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES
-      });
-    },
-    [intl, value, min, max, precision, formatString]
-  );
   const onOpenChange = useCallback(
     (isOpen) => {
       if (!isOpen) {
@@ -361,14 +362,15 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
         type: FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
           id: triggerErrorId,
-          messageType: "formcontrol",
-          controlId: inputId
+          source: "strato"
         }
       });
-      for (const msg of formFieldMessagesState.customMessages) {
+      for (const customMessageId of getCustomMessageIds(
+        formFieldMessagesState
+      )) {
         formFieldMessagesDispatch?.({
           type: FormFieldMessagesAction.REMOVEMESSAGE,
-          payload: { id: msg.id, messageType: "custom" }
+          payload: { id: customMessageId }
         });
       }
     }
@@ -392,6 +394,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
         });
         const errorKey = validate(value, min, max, {
           formMessageDispatch: formFieldMessagesDispatch,
+          intl,
           precision,
           showError: false,
           checkOrder: true,
@@ -418,6 +421,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
         });
         const errorKey = validate(value, min, max, {
           formMessageDispatch: formFieldMessagesDispatch,
+          intl,
           precision,
           showError: false,
           checkOrder: true,
@@ -438,6 +442,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
     }),
     [
       formFieldMessagesDispatch,
+      intl,
       emitValidationState,
       getValidationMessage,
       overlayState.close,
@@ -453,8 +458,7 @@ const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
         type: FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
           id: triggerErrorId,
-          messageType: "formcontrol",
-          controlId: inputId
+          source: "strato"
         }
       });
     }

package/esm/filters/timeframe-selector/TimeframeSelectorRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelectorRoot.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { TimeframeSelectorOverlay } from './components/overlay/TimeframeSelectorOverlay.js';\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { StepperButton } from './components/stepper/StepperButton.js';\nimport { TimeframeSelectorTooltip } from './components/TimeframeSelectorTooltip.js';\nimport {\n  isTimeframeSelectorCustomTriggerElement,\n  type TimeframeSelectorCustomTriggerProps,\n} from './components/trigger/CustomTrigger.js';\nimport {\n  isTimeframeSelectorTriggerElement,\n  Trigger,\n  type TimeframeSelectorTriggerProps,\n} from './components/trigger/Trigger.js';\nimport {\n  TIMEFRAMESELECTOR_ERROR_MESSAGES,\n  TIMEFRAME_SELECTOR_MESSAGES,\n} from './constants/timeframeSelectorMessages.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport * as styles from './TimeframeSelector.sty.js';\nimport type {\n  TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport { getTimeframePresets } from './utils/presets-helpers.js';\nimport {\n  TIMEFRAME_PRESETS_QUERY_KEY,\n  timeframeQueryClient,\n} from './utils/TimeframePresetsClient.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision, TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  validate,\n} from '../../core/time/validation.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport type { ValidateFieldOptions } from '../../forms/form/form.types.js';\nimport { useInternalFormRegistration } from '../../forms/form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { UseFormControlReturnType } from '../../forms/forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../../forms/forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldValidationAriaProps } from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../../forms/forms-core/hooks/useMinMaxLogger.js';\nimport { FormFieldMessagesAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  parseValue,\n  removePrecision,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { useContainerFocus } from '../../forms/hooks/useContainerFocus.js';\nimport type { TimeRangePickerRef } from '../../forms/shared-types.js';\nimport {\n  ValidityStateKey,\n  type ValidationState,\n} from '../../forms/validation/types.js';\nimport { useCustomMessageEmitter } from '../../forms/validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../../forms/validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../../forms/validation/validation-builders.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'TimeframeSelector';\n\n//#region Typings\ntype TimeframeSelectorSlotsAndPresetItemsMap = {\n  trigger: ReactElement<TimeframeSelectorTriggerProps> | null;\n  customTrigger: ReactElement<TimeframeSelectorCustomTriggerProps> | null;\n  presets: ReactNode;\n  presetItemsDisplayValuesMap: Map<string, ReactNode | undefined>;\n};\n//#endregion\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getItemSlots(children: ReactNode, precision?: Precision) {\n  const presetItemsDisplayValuesMap = new Map();\n  const slots: TimeframeSelectorSlotsAndPresetItemsMap = {\n    trigger: null,\n    customTrigger: null,\n    presets: null,\n    presetItemsDisplayValuesMap,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, Presets)) {\n      slots.presets = child;\n      for (const childItem of Children.toArray(child.props.children)) {\n        if (isSlot(childItem, PresetItem)) {\n          slots.presetItemsDisplayValuesMap.set(\n            `${removePrecision(\n              childItem.props.value.from,\n              precision,\n            )} ${removePrecision(childItem.props.value.to, precision)}`,\n            childItem.props.children,\n          );\n        }\n      }\n    } else if (isTimeframeSelectorCustomTriggerElement(child)) {\n      slots.customTrigger = child;\n    } else if (isTimeframeSelectorTriggerElement(child)) {\n      slots.trigger = child;\n    } else {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      devLog('The used child is not supported by the TimeframeSelector.');\n    }\n  }\n\n  return slots;\n}\n\n/** @internal */\nexport const TimeframeSelectorRoot = forwardRef<\n  TimeRangePickerRef,\n  Omit<\n    TimeframeSelectorProps,\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n  }\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const { formFieldLabelId } = useFormFieldContext();\n  const {\n    value: propValue,\n    defaultValue,\n    // oxlint-disable-next-line typescript/no-deprecated\n    clearable = false,\n    children,\n    onChange,\n    onFocus,\n    onBlur,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    name,\n    _form,\n    _messageTarget,\n    stepper = true,\n    onValidityChange,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    formControl,\n    ...remainingProps\n  } = props;\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly = false,\n    hint,\n    hintProps,\n    showError,\n    messageState: formFieldMessagesState,\n    messageDispatch: formFieldMessagesDispatch,\n  } = formControl;\n  const value = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorTimeframe,\n  );\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min);\n  const max = useTimeframeSelectorStore((state) => state.max);\n  const formatString = useTimeframeSelectorStore((state) => state.formatString);\n  const timeframeSelectorRef = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorRef,\n  );\n  const setDateTimeRangePickerTimeframe = useTimeframeSelectorStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n\n  const placeholder = intl.formatMessage({\n    defaultMessage: 'Select timeframe',\n    id: 'W+rTy8UuFKDho3mc',\n    description: 'Placeholder shown for the timeframe selector.',\n  });\n\n  const defaultTriggerLabel = intl.formatMessage(\n    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n  );\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'TimeframeSelector');\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    () => {\n      const errorKey = validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      return getValidationState(\n        errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n        'manual',\n        getValidationMessage(errorKey),\n        [inputId],\n      );\n    },\n  );\n\n  const getValidationMessage = useCallback(\n    (errorKey: TimeErrorKey | undefined): string | undefined => {\n      if (!errorKey) {\n        return undefined;\n      }\n      return formatTimeValidationMessage(errorKey, intl, {\n        value,\n        min,\n        max,\n        precision,\n        expectedFormat: formatString,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n    },\n    [intl, value, min, max, precision, formatString],\n  );\n\n  /** Handle overlay on open change. */\n  const onOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        setDateTimeRangePickerTimeframe(value);\n\n        if (!formFieldMessagesState.isTouched) {\n          const errorKey = validate(value, min, max, {\n            precision,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          emitValidationState(\n            getValidationState(\n              errorKey !== undefined\n                ? new ValidityStateKey(errorKey)\n                : undefined,\n              'blur',\n              getValidationMessage(errorKey),\n              [inputId],\n            ),\n          );\n        }\n      }\n    },\n    [\n      emitValidationState,\n      formFieldMessagesDispatch,\n      formFieldMessagesState.isTouched,\n      formatString,\n      max,\n      min,\n      precision,\n      required,\n      setDateTimeRangePickerTimeframe,\n      timeframeSelectorRef,\n      value,\n    ],\n  );\n\n  const {\n    targetRef,\n    overlayRef,\n    triggerRef,\n    overlayProps,\n    overlayState,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    offset: 4,\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    heightStrategy: 'maxViewport',\n    disabled,\n    onOpenChange,\n  });\n\n  // Prefetch timeframe presets on mount so opening the overlay can use cached data immediately.\n  useEffect(() => {\n    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {\n      return;\n    }\n\n    timeframeQueryClient\n      .prefetchQuery({\n        queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n        queryFn: getTimeframePresets,\n      })\n      .catch(() => undefined);\n  }, []);\n\n  const details = useMemo((): TimeframeValueDetails | null => {\n    const { from, to } = parseValue(value);\n    return from && to ? { from, to } : null;\n  }, [value]);\n\n  const { customTrigger, trigger, presets, presetItemsDisplayValuesMap } =\n    useMemo(() => getItemSlots(children, precision), [children, precision]);\n\n  const presetItemName = presetItemsDisplayValuesMap.get(\n    `${details?.from?.value} ${details?.to?.value}`,\n  );\n\n  const {\n    displayValue,\n    isInvalid: displayValueError,\n    hint: displayValueHint,\n  } = getTimeframeDisplayValueProps(\n    value,\n    intl,\n    placeholder,\n    precision,\n    presetItemName,\n    required,\n    min?.value,\n    max?.value,\n  );\n\n  const triggerErrorId = useId();\n  const inputId = useId();\n  const overlayOwnerId = useId();\n\n  // We need to create a ref to give access to the trigger in our imperative handle.\n  const imperativeTriggerRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fromInputRef = useRef<HTMLInputElement>(null);\n  const toInputRef = useRef<HTMLInputElement>(null);\n  const ariaLabelingProps = {\n    'aria-label':\n      ariaLabelProp ??\n      (!ariaLabelledByProp && !formFieldLabelId\n        ? defaultTriggerLabel\n        : undefined),\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  };\n  const ariaFormProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  const validateField = useCallback(\n    ({ reveal, trigger }: ValidateFieldOptions): ValidationState => {\n      if (reveal) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const errorKey = validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      return emitValidationState(\n        getValidationState(\n          errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n          trigger,\n          getValidationMessage(errorKey),\n          [inputId],\n        ),\n      );\n    },\n    [\n      formFieldMessagesDispatch,\n      emitValidationState,\n      value,\n      min,\n      max,\n      precision,\n      timeframeSelectorRef,\n      formatString,\n      required,\n      getValidationMessage,\n      inputId,\n    ],\n  );\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value,\n    focus: () => imperativeTriggerRef.current?.focus(),\n    validateField: (options) => Promise.resolve(validateField(options)),\n    resetValidation: () => {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false },\n      });\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n      for (const msg of formFieldMessagesState.customMessages) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: { id: msg.id, messageType: 'custom' },\n        });\n      }\n    },\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\n\n  useImperativeHandle(\n    forwardedRef,\n    (): TimeRangePickerRef => ({\n      element: containerRef.current,\n      triggerRef: imperativeTriggerRef.current,\n      inputRef: { from: fromInputRef.current, to: toInputRef.current },\n      open: overlayState.open,\n      close: overlayState.close,\n      focus() {\n        imperativeTriggerRef.current?.focus?.();\n      },\n      validate() {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        const errorKey = validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n\n        emitValidationState(\n          getValidationState(\n            errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n            'manual',\n            getValidationMessage(errorKey),\n            [inputId],\n          ),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        const errorKey = validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n\n        const state = getValidationState(\n          errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n          'manual',\n          getValidationMessage(errorKey),\n          [inputId],\n        );\n        return emitValidationState(state);\n      },\n    }),\n    [\n      formFieldMessagesDispatch,\n      emitValidationState,\n      getValidationMessage,\n      overlayState.close,\n      overlayState.open,\n    ],\n  );\n\n  useEffect(() => {\n    if (overlayState.isOpen) {\n      return;\n    }\n\n    if (!displayValueError && triggerErrorId) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n    }\n  }, [\n    displayValueError,\n    displayValueHint,\n    overlayState.isOpen,\n    triggerErrorId,\n    formFieldMessagesDispatch,\n    inputId,\n  ]);\n\n  // Surface the validation state on every value change (automatic `change`\n  // trigger) so `onValidityChange` stays in sync as the timeframe is edited, not just\n  // on blur or manual validation. The error key is computed without dispatching\n  // messages \u2014 the displayed error is already driven by the value pipeline.\n  useEffect(() => {\n    const errorKey = validate(value, min, max, {\n      precision,\n      checkOrder: true,\n      ref: timeframeSelectorRef,\n      expectedFormat: formatString,\n      valueMode: 'timeframeSelector',\n      required,\n      errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n    });\n    emitValidationState(\n      getValidationState(\n        errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n        'change',\n        getValidationMessage(errorKey),\n        [inputId],\n      ),\n    );\n  }, [\n    value,\n    min,\n    max,\n    precision,\n    formatString,\n    required,\n    timeframeSelectorRef,\n    emitValidationState,\n    getValidationMessage,\n  ]);\n\n  const triggerButtonRef = useMergeRefs([\n    targetRef,\n    triggerRef,\n    imperativeTriggerRef,\n  ]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      fromInputRef.current?.reportValidity();\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      if (!formFieldMessagesState.isTouched) {\n        const errorKey = validate(value, min, max, {\n          precision,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n        emitValidationState(\n          getValidationState(\n            errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n            'blur',\n            getValidationMessage(errorKey),\n            [inputId],\n          ),\n        );\n      }\n    }\n  }, [\n    overlayState.isOpen,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.isTouched,\n    emitValidationState,\n    getValidationMessage,\n    value,\n    min,\n    max,\n    precision,\n    timeframeSelectorRef,\n    formatString,\n    required,\n  ]);\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId,\n    // When the overlay is open, autoFocus moves focus into the portal. The browser\n    // fires a blur on the trigger with relatedTarget=null (the portal is outside the\n    // container DOM). Suppress that blur so hasFocusRef stays true and focus\n    // returning to the trigger on close does not re-fire onFocus.\n    shouldSuppressBlur: () => overlayState.isOpen,\n  });\n\n  const triggerProps = useMemo(\n    () => ({\n      disabled,\n      onBlur: handleOnBlur,\n      ref: triggerButtonRef,\n      id,\n      'aria-disabled': ariaDisabled,\n      ...ariaFormProps,\n      ...(readOnly ? {} : overlayTriggerProps),\n      'data-dt-component': COMPONENT_NAME,\n    }),\n    [\n      disabled,\n      handleOnBlur,\n      triggerButtonRef,\n      id,\n      ariaDisabled,\n      ariaFormProps,\n      readOnly,\n      overlayTriggerProps,\n    ],\n  );\n\n  const timeframeSelectorContextValue = useMemo(\n    () => ({\n      details,\n      displayValue,\n      triggerProps,\n      hint: displayValueHint,\n      readOnly,\n      showError,\n      disabled,\n    }),\n    [\n      disabled,\n      details,\n      readOnly,\n      displayValue,\n      triggerProps,\n      displayValueHint,\n      showError,\n    ],\n  );\n\n  return (\n    <TimeframeSelectorContext.Provider value={timeframeSelectorContextValue}>\n      <Flex\n        gap={4}\n        flexDirection=\"column\"\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={containerRef}\n        className={clsx(consumerClassName, containerClassName, styles.root)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component=\"TimeframeSelector\"\n        {...containerFocusProps}\n      >\n        <VisuallyHidden>\n          <input\n            id={inputId}\n            type=\"text\"\n            ref={fromInputRef}\n            name={name && `${name}-from`}\n            form={_form}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.from.value ?? ''}\n            onInvalid={(event) => {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n\n              // Prevents the browser validation pop up.\n              event.preventDefault();\n            }}\n            onChange={() => {\n              /** noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n          <input\n            type=\"text\"\n            ref={toInputRef}\n            name={name && `${name}-to`}\n            form={_form}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.to.value ?? ''}\n            onInvalid={(event) => event.preventDefault()}\n            onChange={() => {\n              /**noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n        </VisuallyHidden>\n        <InputGroup style={{ gridAutoColumns: '1fr max-content max-content' }}>\n          <TimeframeSelectorTooltip\n            displayValue={displayValue}\n            value={value}\n            disabled={disabled}\n          >\n            {customTrigger ?? trigger ?? <Trigger />}\n          </TimeframeSelectorTooltip>\n          {stepper && (\n            <>\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"backward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"forward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n            </>\n          )}\n        </InputGroup>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabled || !!ariaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n        {overlayState.isOpen && (\n          <TimeframeSelectorOverlay\n            ref={overlayRef}\n            overlayProps={overlayProps}\n            overlayClose={overlayState.close}\n            overlayOwnerId={overlayOwnerId}\n            // oxlint-disable-next-line typescript/no-deprecated\n            clearable={clearable}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            {presets}\n          </TimeframeSelectorOverlay>\n        )}\n      </Flex>\n    </TimeframeSelectorContext.Provider>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { TimeframeSelectorOverlay } from './components/overlay/TimeframeSelectorOverlay.js';\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { StepperButton } from './components/stepper/StepperButton.js';\nimport { TimeframeSelectorTooltip } from './components/TimeframeSelectorTooltip.js';\nimport {\n  isTimeframeSelectorCustomTriggerElement,\n  type TimeframeSelectorCustomTriggerProps,\n} from './components/trigger/CustomTrigger.js';\nimport {\n  isTimeframeSelectorTriggerElement,\n  Trigger,\n  type TimeframeSelectorTriggerProps,\n} from './components/trigger/Trigger.js';\nimport {\n  TIMEFRAMESELECTOR_ERROR_MESSAGES,\n  TIMEFRAME_SELECTOR_MESSAGES,\n} from './constants/timeframeSelectorMessages.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport * as styles from './TimeframeSelector.sty.js';\nimport type {\n  TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport { getTimeframePresets } from './utils/presets-helpers.js';\nimport {\n  TIMEFRAME_PRESETS_QUERY_KEY,\n  timeframeQueryClient,\n} from './utils/TimeframePresetsClient.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision, TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  validate,\n} from '../../core/time/validation.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport type { ValidateFieldOptions } from '../../forms/form/form.types.js';\nimport { useInternalFormRegistration } from '../../forms/form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { UseFormControlReturnType } from '../../forms/forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../../forms/forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldValidationAriaProps } from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../../forms/forms-core/hooks/useMinMaxLogger.js';\nimport { getCustomMessageIds } from '../../forms/forms-core/state/formfield-messages-selectors.js';\nimport { FormFieldMessagesAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  parseValue,\n  removePrecision,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { useContainerFocus } from '../../forms/hooks/useContainerFocus.js';\nimport type { TimeRangePickerRef } from '../../forms/shared-types.js';\nimport {\n  ValidityStateKey,\n  type ValidationState,\n} from '../../forms/validation/types.js';\nimport { useCustomMessageEmitter } from '../../forms/validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../../forms/validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../../forms/validation/validation-builders.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'TimeframeSelector';\n\n//#region Typings\ntype TimeframeSelectorSlotsAndPresetItemsMap = {\n  trigger: ReactElement<TimeframeSelectorTriggerProps> | null;\n  customTrigger: ReactElement<TimeframeSelectorCustomTriggerProps> | null;\n  presets: ReactNode;\n  presetItemsDisplayValuesMap: Map<string, ReactNode | undefined>;\n};\n//#endregion\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getItemSlots(children: ReactNode, precision?: Precision) {\n  const presetItemsDisplayValuesMap = new Map();\n  const slots: TimeframeSelectorSlotsAndPresetItemsMap = {\n    trigger: null,\n    customTrigger: null,\n    presets: null,\n    presetItemsDisplayValuesMap,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, Presets)) {\n      slots.presets = child;\n      for (const childItem of Children.toArray(child.props.children)) {\n        if (isSlot(childItem, PresetItem)) {\n          slots.presetItemsDisplayValuesMap.set(\n            `${removePrecision(\n              childItem.props.value.from,\n              precision,\n            )} ${removePrecision(childItem.props.value.to, precision)}`,\n            childItem.props.children,\n          );\n        }\n      }\n    } else if (isTimeframeSelectorCustomTriggerElement(child)) {\n      slots.customTrigger = child;\n    } else if (isTimeframeSelectorTriggerElement(child)) {\n      slots.trigger = child;\n    } else {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      devLog('The used child is not supported by the TimeframeSelector.');\n    }\n  }\n\n  return slots;\n}\n\n/** @internal */\nexport const TimeframeSelectorRoot = forwardRef<\n  TimeRangePickerRef,\n  Omit<\n    TimeframeSelectorProps,\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n  }\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const { formFieldLabelId } = useFormFieldContext();\n  const {\n    value: propValue,\n    defaultValue,\n    // oxlint-disable-next-line typescript/no-deprecated\n    clearable = false,\n    children,\n    onChange,\n    onFocus,\n    onBlur,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    name,\n    _form,\n    _messageTarget,\n    stepper = true,\n    onValidityChange,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    formControl,\n    ...remainingProps\n  } = props;\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly = false,\n    hint,\n    hintProps,\n    showError,\n    messageState: formFieldMessagesState,\n    messageDispatch: formFieldMessagesDispatch,\n  } = formControl;\n  const value = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorTimeframe,\n  );\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min);\n  const max = useTimeframeSelectorStore((state) => state.max);\n  const formatString = useTimeframeSelectorStore((state) => state.formatString);\n  const timeframeSelectorRef = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorRef,\n  );\n  const setDateTimeRangePickerTimeframe = useTimeframeSelectorStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n\n  const placeholder = intl.formatMessage({\n    defaultMessage: 'Select timeframe',\n    id: 'W+rTy8UuFKDho3mc',\n    description: 'Placeholder shown for the timeframe selector.',\n  });\n\n  const defaultTriggerLabel = intl.formatMessage(\n    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n  );\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'TimeframeSelector');\n\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const getValidationMessage = useCallback(\n    (errorKey: TimeErrorKey | undefined): string | undefined => {\n      if (!errorKey) {\n        return undefined;\n      }\n      return formatTimeValidationMessage(errorKey, intl, {\n        value,\n        min,\n        max,\n        precision,\n        expectedFormat: formatString,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n    },\n    [intl, value, min, max, precision, formatString],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => {\n      const errorKey = validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      return getValidationState(\n        errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n        'manual',\n        getValidationMessage(errorKey),\n        [inputId],\n      );\n    },\n  );\n\n  /** Handle overlay on open change. */\n  const onOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        setDateTimeRangePickerTimeframe(value);\n\n        if (!formFieldMessagesState.isTouched) {\n          const errorKey = validate(value, min, max, {\n            precision,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          emitValidationState(\n            getValidationState(\n              errorKey !== undefined\n                ? new ValidityStateKey(errorKey)\n                : undefined,\n              'blur',\n              getValidationMessage(errorKey),\n              [inputId],\n            ),\n          );\n        }\n      }\n    },\n    [\n      emitValidationState,\n      formFieldMessagesDispatch,\n      formFieldMessagesState.isTouched,\n      formatString,\n      max,\n      min,\n      precision,\n      required,\n      setDateTimeRangePickerTimeframe,\n      timeframeSelectorRef,\n      value,\n    ],\n  );\n\n  const {\n    targetRef,\n    overlayRef,\n    triggerRef,\n    overlayProps,\n    overlayState,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    offset: 4,\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    heightStrategy: 'maxViewport',\n    disabled,\n    onOpenChange,\n  });\n\n  // Prefetch timeframe presets on mount so opening the overlay can use cached data immediately.\n  useEffect(() => {\n    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {\n      return;\n    }\n\n    timeframeQueryClient\n      .prefetchQuery({\n        queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n        queryFn: getTimeframePresets,\n      })\n      .catch(() => undefined);\n  }, []);\n\n  const details = useMemo((): TimeframeValueDetails | null => {\n    const { from, to } = parseValue(value);\n    return from && to ? { from, to } : null;\n  }, [value]);\n\n  const { customTrigger, trigger, presets, presetItemsDisplayValuesMap } =\n    useMemo(() => getItemSlots(children, precision), [children, precision]);\n\n  const presetItemName = presetItemsDisplayValuesMap.get(\n    `${details?.from?.value} ${details?.to?.value}`,\n  );\n\n  const {\n    displayValue,\n    isInvalid: displayValueError,\n    hint: displayValueHint,\n  } = getTimeframeDisplayValueProps(\n    value,\n    intl,\n    placeholder,\n    precision,\n    presetItemName,\n    required,\n    min?.value,\n    max?.value,\n  );\n\n  const triggerErrorId = useId();\n  const inputId = useId();\n  const overlayOwnerId = useId();\n\n  // We need to create a ref to give access to the trigger in our imperative handle.\n  const imperativeTriggerRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fromInputRef = useRef<HTMLInputElement>(null);\n  const toInputRef = useRef<HTMLInputElement>(null);\n  const ariaLabelingProps = {\n    'aria-label':\n      ariaLabelProp ??\n      (!ariaLabelledByProp && !formFieldLabelId\n        ? defaultTriggerLabel\n        : undefined),\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  };\n  const ariaFormProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  const validateField = useCallback(\n    ({ reveal, trigger }: ValidateFieldOptions): ValidationState => {\n      if (reveal) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const errorKey = validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      return emitValidationState(\n        getValidationState(\n          errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n          trigger,\n          getValidationMessage(errorKey),\n          [inputId],\n        ),\n      );\n    },\n    [\n      formFieldMessagesDispatch,\n      emitValidationState,\n      value,\n      min,\n      max,\n      precision,\n      timeframeSelectorRef,\n      formatString,\n      required,\n      getValidationMessage,\n      inputId,\n    ],\n  );\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value,\n    focus: () => imperativeTriggerRef.current?.focus(),\n    validateField: (options) => Promise.resolve(validateField(options)),\n    resetValidation: () => {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false },\n      });\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          source: 'strato',\n        },\n      });\n      for (const customMessageId of getCustomMessageIds(\n        formFieldMessagesState,\n      )) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: { id: customMessageId },\n        });\n      }\n    },\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\n\n  useImperativeHandle(\n    forwardedRef,\n    (): TimeRangePickerRef => ({\n      element: containerRef.current,\n      triggerRef: imperativeTriggerRef.current,\n      inputRef: { from: fromInputRef.current, to: toInputRef.current },\n      open: overlayState.open,\n      close: overlayState.close,\n      focus() {\n        imperativeTriggerRef.current?.focus?.();\n      },\n      validate() {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        const errorKey = validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          intl,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n\n        emitValidationState(\n          getValidationState(\n            errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n            'manual',\n            getValidationMessage(errorKey),\n            [inputId],\n          ),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        const errorKey = validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          intl,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n\n        const state = getValidationState(\n          errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n          'manual',\n          getValidationMessage(errorKey),\n          [inputId],\n        );\n        return emitValidationState(state);\n      },\n    }),\n    [\n      formFieldMessagesDispatch,\n      intl,\n      emitValidationState,\n      getValidationMessage,\n      overlayState.close,\n      overlayState.open,\n    ],\n  );\n\n  useEffect(() => {\n    if (overlayState.isOpen) {\n      return;\n    }\n\n    if (!displayValueError && triggerErrorId) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          source: 'strato',\n        },\n      });\n    }\n  }, [\n    displayValueError,\n    displayValueHint,\n    overlayState.isOpen,\n    triggerErrorId,\n    formFieldMessagesDispatch,\n    inputId,\n  ]);\n\n  // Surface the validation state on every value change (automatic `change`\n  // trigger) so `onValidityChange` stays in sync as the timeframe is edited, not just\n  // on blur or manual validation. The error key is computed without dispatching\n  // messages \u2014 the displayed error is already driven by the value pipeline.\n  useEffect(() => {\n    const errorKey = validate(value, min, max, {\n      precision,\n      checkOrder: true,\n      ref: timeframeSelectorRef,\n      expectedFormat: formatString,\n      valueMode: 'timeframeSelector',\n      required,\n      errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n    });\n    emitValidationState(\n      getValidationState(\n        errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n        'change',\n        getValidationMessage(errorKey),\n        [inputId],\n      ),\n    );\n  }, [\n    value,\n    min,\n    max,\n    precision,\n    formatString,\n    required,\n    timeframeSelectorRef,\n    emitValidationState,\n    getValidationMessage,\n  ]);\n\n  const triggerButtonRef = useMergeRefs([\n    targetRef,\n    triggerRef,\n    imperativeTriggerRef,\n  ]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      fromInputRef.current?.reportValidity();\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      if (!formFieldMessagesState.isTouched) {\n        const errorKey = validate(value, min, max, {\n          precision,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n        emitValidationState(\n          getValidationState(\n            errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n            'blur',\n            getValidationMessage(errorKey),\n            [inputId],\n          ),\n        );\n      }\n    }\n  }, [\n    overlayState.isOpen,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.isTouched,\n    emitValidationState,\n    getValidationMessage,\n    value,\n    min,\n    max,\n    precision,\n    timeframeSelectorRef,\n    formatString,\n    required,\n  ]);\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId,\n    // When the overlay is open, autoFocus moves focus into the portal. The browser\n    // fires a blur on the trigger with relatedTarget=null (the portal is outside the\n    // container DOM). Suppress that blur so hasFocusRef stays true and focus\n    // returning to the trigger on close does not re-fire onFocus.\n    shouldSuppressBlur: () => overlayState.isOpen,\n  });\n\n  const triggerProps = useMemo(\n    () => ({\n      disabled,\n      onBlur: handleOnBlur,\n      ref: triggerButtonRef,\n      id,\n      'aria-disabled': ariaDisabled,\n      ...ariaFormProps,\n      ...(readOnly ? {} : overlayTriggerProps),\n      'data-dt-component': COMPONENT_NAME,\n    }),\n    [\n      disabled,\n      handleOnBlur,\n      triggerButtonRef,\n      id,\n      ariaDisabled,\n      ariaFormProps,\n      readOnly,\n      overlayTriggerProps,\n    ],\n  );\n\n  const timeframeSelectorContextValue = useMemo(\n    () => ({\n      details,\n      displayValue,\n      triggerProps,\n      hint: displayValueHint,\n      readOnly,\n      showError,\n      disabled,\n    }),\n    [\n      disabled,\n      details,\n      readOnly,\n      displayValue,\n      triggerProps,\n      displayValueHint,\n      showError,\n    ],\n  );\n\n  return (\n    <TimeframeSelectorContext.Provider value={timeframeSelectorContextValue}>\n      <Flex\n        gap={4}\n        flexDirection=\"column\"\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={containerRef}\n        className={clsx(consumerClassName, containerClassName, styles.root)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component=\"TimeframeSelector\"\n        {...containerFocusProps}\n      >\n        <VisuallyHidden>\n          <input\n            id={inputId}\n            type=\"text\"\n            ref={fromInputRef}\n            name={name && `${name}-from`}\n            form={_form}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.from.value ?? ''}\n            onInvalid={(event) => {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n\n              // Prevents the browser validation pop up.\n              event.preventDefault();\n            }}\n            onChange={() => {\n              /** noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n          <input\n            type=\"text\"\n            ref={toInputRef}\n            name={name && `${name}-to`}\n            form={_form}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.to.value ?? ''}\n            onInvalid={(event) => event.preventDefault()}\n            onChange={() => {\n              /**noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n        </VisuallyHidden>\n        <InputGroup style={{ gridAutoColumns: '1fr max-content max-content' }}>\n          <TimeframeSelectorTooltip\n            displayValue={displayValue}\n            value={value}\n            disabled={disabled}\n          >\n            {customTrigger ?? trigger ?? <Trigger />}\n          </TimeframeSelectorTooltip>\n          {stepper && (\n            <>\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"backward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"forward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n            </>\n          )}\n        </InputGroup>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabled || !!ariaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n        {overlayState.isOpen && (\n          <TimeframeSelectorOverlay\n            ref={overlayRef}\n            overlayProps={overlayProps}\n            overlayClose={overlayState.close}\n            overlayOwnerId={overlayOwnerId}\n            // oxlint-disable-next-line typescript/no-deprecated\n            clearable={clearable}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            {presets}\n          </TimeframeSelectorOverlay>\n        )}\n      </Flex>\n    </TimeframeSelectorContext.Provider>\n  );\n});\n"],
+  "mappings": "AAssBQ,SAsDI,UArDF,KADF;AAtsBR,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,eAAe;AAExB,SAAS,gCAAgC;AACzC,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAC9B,SAAS,gCAAgC;AACzC;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,gCAAgC;AACzC,YAAY,YAAY;AAKxB,SAAS,qCAAqC;AAC9C,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,sBAAsB;AAC/B,SAAS,aAAa;AACtB,SAAS,oBAAoB;AAE7B,SAAS,iCAAiC;AAC1C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,cAAc;AACvB,SAAS,cAAc;AAEvB,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB,gBAAgB;AAE7C,SAAS,2BAA2B;AACpC,SAAS,uCAAuC;AAChD,SAAS,uBAAuB;AAChC,SAAS,2BAA2B;AACpC,SAAS,+BAA+B;AACxC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,yBAAyB;AAElC;AAAA,EACE;AAAA,OAEK;AACP,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AACnC,SAAS,YAAY;AACrB,SAAS,kBAAkB;AAC3B,SAAS,6BAA6B;AAEtC,MAAM,iBAAiB;AAYvB,SAAS,aAAa,UAAqB,WAAuB;AAChE,QAAM,8BAA8B,oBAAI,IAAI;AAC5C,QAAM,QAAiD;AAAA,IACrD,SAAS;AAAA,IACT,eAAe;AAAA,IACf,SAAS;AAAA,IACT;AAAA,EACF;AAEA,aAAW,SAAS,SAAS,QAAQ,QAAQ,GAAG;AAC9C,QAAI,OAAO,OAAO,OAAO,GAAG;AAC1B,YAAM,UAAU;AAChB,iBAAW,aAAa,SAAS,QAAQ,MAAM,MAAM,QAAQ,GAAG;AAC9D,YAAI,OAAO,WAAW,UAAU,GAAG;AACjC,gBAAM,4BAA4B;AAAA,YAChC,GAAG;AAAA,cACD,UAAU,MAAM,MAAM;AAAA,cACtB;AAAA,YACF,CAAC,IAAI,gBAAgB,UAAU,MAAM,MAAM,IAAI,SAAS,CAAC;AAAA,YACzD,UAAU,MAAM;AAAA,UAClB;AAAA,QACF;AAAA,MACF;AAAA,IACF,WAAW,wCAAwC,KAAK,GAAG;AACzD,YAAM,gBAAgB;AAAA,IACxB,WAAW,kCAAkC,KAAK,GAAG;AACnD,YAAM,UAAU;AAAA,IAClB,OAAO;AAEL,aAAO,2DAA2D;AAAA,IACpE;AAAA,EACF;AAEA,SAAO;AACT;AAGO,MAAM,wBAAwB,WAanC,CAAC,OAAO,iBAAiB;AACzB,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,iBAAiB,IAAI,oBAAoB;AACjD,QAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA;AAAA,IAEA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,iBAAiB;AAAA,EACnB,IAAI;AACJ,QAAM,QAAQ;AAAA,IACZ,CAAC,UAAU,MAAM;AAAA,EACnB;AACA,QAAM,YAAY,0BAA0B,CAAC,UAAU,MAAM,SAAS;AACtE,QAAM,MAAM,0BAA0B,CAAC,UAAU,MAAM,GAAG;AAC1D,QAAM,MAAM,0BAA0B,CAAC,UAAU,MAAM,GAAG;AAC1D,QAAM,eAAe,0BAA0B,CAAC,UAAU,MAAM,YAAY;AAC5E,QAAM,uBAAuB;AAAA,IAC3B,CAAC,UAAU,MAAM;AAAA,EACnB;AACA,QAAM,kCAAkC;AAAA,IACtC,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,cAAc,KAAK,cAAc;AAAA,IACrC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,sBAAsB,KAAK;AAAA,IAC/B,4BAA4B;AAAA,EAC9B;AAGA,kBAAgB,KAAK,KAAK,mBAAmB;AAE7C,QAAM,wBAAwB,OAE5B,MAAS;AACX,QAAM,uBAAuB;AAAA,IAA0B,CAAC,UACtD,sBAAsB,UAAU,KAAK;AAAA,EACvC;AACA,QAAM,uBAAuB;AAAA,IAC3B,CAAC,aAA2D;AAC1D,UAAI,CAAC,UAAU;AACb,eAAO;AAAA,MACT;AACA,aAAO,4BAA4B,UAAU,MAAM;AAAA,QACjD;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,eAAe;AAAA,MACjB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,MAAM,OAAO,KAAK,KAAK,WAAW,YAAY;AAAA,EACjD;AAEA,QAAM,sBAAsB;AAAA,IAC1B;AAAA,IACA,MAAM;AACJ,YAAM,WAAW,SAAS,OAAO,KAAK,KAAK;AAAA,QACzC;AAAA,QACA,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,gBAAgB;AAAA,QAChB,WAAW;AAAA,QACX;AAAA,QACA,eAAe;AAAA,MACjB,CAAC;AACD,aAAO;AAAA,QACL,aAAa,SAAY,IAAI,iBAAiB,QAAQ,IAAI;AAAA,QAC1D;AAAA,QACA,qBAAqB,QAAQ;AAAA,QAC7B,CAAC,OAAO;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAGA,QAAM,eAAe;AAAA,IACnB,CAAC,WAAoB;AACnB,UAAI,CAAC,QAAQ;AACX,oCAA4B;AAAA,UAC1B,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AACD,wCAAgC,KAAK;AAErC,YAAI,CAAC,uBAAuB,WAAW;AACrC,gBAAM,WAAW,SAAS,OAAO,KAAK,KAAK;AAAA,YACzC;AAAA,YACA,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,gBAAgB;AAAA,YAChB,WAAW;AAAA,YACX;AAAA,YACA,eAAe;AAAA,UACjB,CAAC;AACD;AAAA,YACE;AAAA,cACE,aAAa,SACT,IAAI,iBAAiB,QAAQ,IAC7B;AAAA,cACJ;AAAA,cACA,qBAAqB,QAAQ;AAAA,cAC7B,CAAC,OAAO;AAAA,YACV;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA,uBAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAAA,IACxB,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,oBAAoB,CAAC,cAAc,aAAa,SAAS;AAAA,IACzD,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,EACF,CAAC;AAGD,YAAU,MAAM;AACd,QAAI,qBAAqB,aAAa,2BAA2B,GAAG;AAClE;AAAA,IACF;AAEA,yBACG,cAAc;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,IACX,CAAC,EACA,MAAM,MAAM,MAAS;AAAA,EAC1B,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,QAAQ,MAAoC;AAC1D,UAAM,EAAE,MAAM,GAAG,IAAI,WAAW,KAAK;AACrC,WAAO,QAAQ,KAAK,EAAE,MAAM,GAAG,IAAI;AAAA,EACrC,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,EAAE,eAAe,SAAS,SAAS,4BAA4B,IACnE,QAAQ,MAAM,aAAa,UAAU,SAAS,GAAG,CAAC,UAAU,SAAS,CAAC;AAExE,QAAM,iBAAiB,4BAA4B;AAAA,IACjD,GAAG,SAAS,MAAM,KAAK,IAAI,SAAS,IAAI,KAAK;AAAA,EAC/C;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,MAAM;AAAA,EACR,IAAI;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAEA,QAAM,iBAAiB,MAAM;AAC7B,QAAM,UAAU,MAAM;AACtB,QAAM,iBAAiB,MAAM;AAG7B,QAAM,uBAAuB,OAA0B,IAAI;AAC3D,QAAM,eAAe,OAAuB,IAAI;AAChD,QAAM,eAAe,OAAyB,IAAI;AAClD,QAAM,aAAa,OAAyB,IAAI;AAChD,QAAM,oBAAoB;AAAA,IACxB,cACE,kBACC,CAAC,sBAAsB,CAAC,mBACrB,sBACA;AAAA,IACN,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,EAClB;AACA,QAAM,gBAAgB,gCAAgC,iBAAiB;AAEvE,QAAM,gBAAgB;AAAA,IACpB,CAAC,EAAE,QAAQ,SAAAA,SAAQ,MAA6C;AAC9D,UAAI,QAAQ;AACV,oCAA4B;AAAA,UAC1B,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AAAA,MACH;AACA,YAAM,WAAW,SAAS,OAAO,KAAK,KAAK;AAAA,QACzC;AAAA,QACA,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,gBAAgB;AAAA,QAChB,WAAW;AAAA,QACX;AAAA,QACA,eAAe;AAAA,MACjB,CAAC;AACD,aAAO;AAAA,QACL;AAAA,UACE,aAAa,SAAY,IAAI,iBAAiB,QAAQ,IAAI;AAAA,UAC1DA;AAAA,UACA,qBAAqB,QAAQ;AAAA,UAC7B,CAAC,OAAO;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,mBAAmB,4BAA4B;AAAA,IACnD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,IACf;AAAA,IACA,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM,qBAAqB,SAAS,MAAM;AAAA,IACjD,eAAe,CAAC,YAAY,QAAQ,QAAQ,cAAc,OAAO,CAAC;AAAA,IAClE,iBAAiB,MAAM;AACrB,kCAA4B;AAAA,QAC1B,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,WAAW,MAAM;AAAA,MAC9B,CAAC;AACD,kCAA4B;AAAA,QAC1B,MAAM,wBAAwB;AAAA,QAC9B,SAAS;AAAA,UACP,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AACD,iBAAW,mBAAmB;AAAA,QAC5B;AAAA,MACF,GAAG;AACD,oCAA4B;AAAA,UAC1B,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,IAAI,gBAAgB;AAAA,QACjC,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,CAAC;AACD,wBAAsB,UAAU,iBAAiB;AAEjD;AAAA,IACE;AAAA,IACA,OAA2B;AAAA,MACzB,SAAS,aAAa;AAAA,MACtB,YAAY,qBAAqB;AAAA,MACjC,UAAU,EAAE,MAAM,aAAa,SAAS,IAAI,WAAW,QAAQ;AAAA,MAC/D,MAAM,aAAa;AAAA,MACnB,OAAO,aAAa;AAAA,MACpB,QAAQ;AACN,6BAAqB,SAAS,QAAQ;AAAA,MACxC;AAAA,MACA,WAAW;AACT,oCAA4B;AAAA,UAC1B,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AAED,cAAM,WAAW,SAAS,OAAO,KAAK,KAAK;AAAA,UACzC,qBAAqB;AAAA,UACrB;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX;AAAA,UACA,eAAe;AAAA,QACjB,CAAC;AAED;AAAA,UACE;AAAA,YACE,aAAa,SAAY,IAAI,iBAAiB,QAAQ,IAAI;AAAA,YAC1D;AAAA,YACA,qBAAqB,QAAQ;AAAA,YAC7B,CAAC,OAAO;AAAA,UACV;AAAA,QACF;AAAA,MACF;AAAA;AAAA,MAEA,eAAe,YAAY;AACzB,oCAA4B;AAAA,UAC1B,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AAED,cAAM,WAAW,SAAS,OAAO,KAAK,KAAK;AAAA,UACzC,qBAAqB;AAAA,UACrB;AAAA,UACA;AAAA,UACA,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX;AAAA,UACA,eAAe;AAAA,QACjB,CAAC;AAED,cAAM,QAAQ;AAAA,UACZ,aAAa,SAAY,IAAI,iBAAiB,QAAQ,IAAI;AAAA,UAC1D;AAAA,UACA,qBAAqB,QAAQ;AAAA,UAC7B,CAAC,OAAO;AAAA,QACV;AACA,eAAO,oBAAoB,KAAK;AAAA,MAClC;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,aAAa;AAAA,IACf;AAAA,EACF;AAEA,YAAU,MAAM;AACd,QAAI,aAAa,QAAQ;AACvB;AAAA,IACF;AAEA,QAAI,CAAC,qBAAqB,gBAAgB;AACxC,kCAA4B;AAAA,QAC1B,MAAM,wBAAwB;AAAA,QAC9B,SAAS;AAAA,UACP,IAAI;AAAA,UACJ,QAAQ;AAAA,QACV;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAMD,YAAU,MAAM;AACd,UAAM,WAAW,SAAS,OAAO,KAAK,KAAK;AAAA,MACzC;AAAA,MACA,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX;AAAA,MACA,eAAe;AAAA,IACjB,CAAC;AACD;AAAA,MACE;AAAA,QACE,aAAa,SAAY,IAAI,iBAAiB,QAAQ,IAAI;AAAA,QAC1D;AAAA,QACA,qBAAqB,QAAQ;AAAA,QAC7B,CAAC,OAAO;AAAA,MACV;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAmB,aAAa;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,YAAY,MAAM;AACrC,QAAI,CAAC,aAAa,QAAQ;AACxB,mBAAa,SAAS,eAAe;AACrC,kCAA4B;AAAA,QAC1B,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,MAC7B,CAAC;AAED,UAAI,CAAC,uBAAuB,WAAW;AACrC,cAAM,WAAW,SAAS,OAAO,KAAK,KAAK;AAAA,UACzC;AAAA,UACA,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX;AAAA,UACA,eAAe;AAAA,QACjB,CAAC;AACD;AAAA,UACE;AAAA,YACE,aAAa,SAAY,IAAI,iBAAiB,QAAQ,IAAI;AAAA,YAC1D;AAAA,YACA,qBAAqB,QAAQ;AAAA,YAC7B,CAAC,OAAO;AAAA,UACV;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF,GAAG;AAAA,IACD,aAAa;AAAA,IACb;AAAA,IACA,uBAAuB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,EAAE,oBAAoB,GAAG,oBAAoB,IAAI,kBAAkB;AAAA,IACvE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAoB,MAAM,aAAa;AAAA,EACzC,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA,QAAQ;AAAA,MACR,KAAK;AAAA,MACL;AAAA,MACA,iBAAiB;AAAA,MACjB,GAAG;AAAA,MACH,GAAI,WAAW,CAAC,IAAI;AAAA,MACpB,qBAAqB;AAAA,IACvB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,gCAAgC;AAAA,IACpC,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,yBAAyB,UAAzB,EAAkC,OAAO,+BACxC;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAc;AAAA,MACd,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,KAAK;AAAA,MACL,WAAW,KAAK,mBAAmB,oBAAoB,OAAO,IAAI;AAAA,MAClE,OAAO;AAAA,MACN,GAAG;AAAA,MACJ,qBAAkB;AAAA,MACjB,GAAG;AAAA,MAEJ;AAAA,6BAAC,kBACC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM,QAAQ,GAAG,IAAI;AAAA,cACrB,MAAM;AAAA,cACN,eAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO,SAAS,KAAK,SAAS;AAAA,cAC9B,WAAW,CAAC,UAAU;AACpB,4CAA4B;AAAA,kBAC1B,MAAM,wBAAwB;AAAA,kBAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,gBAC7B,CAAC;AAGD,sBAAM,eAAe;AAAA,cACvB;AAAA,cACA,UAAU,MAAM;AAAA,cAEhB;AAAA,cACA,UAAU;AAAA,cACT,GAAG;AAAA;AAAA,UACN;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM,QAAQ,GAAG,IAAI;AAAA,cACrB,MAAM;AAAA,cACN,eAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA;AAAA,cACA,OAAO,SAAS,GAAG,SAAS;AAAA,cAC5B,WAAW,CAAC,UAAU,MAAM,eAAe;AAAA,cAC3C,UAAU,MAAM;AAAA,cAEhB;AAAA,cACA,UAAU;AAAA,cACT,GAAG;AAAA;AAAA,UACN;AAAA,WACF;AAAA,QACA,qBAAC,cAAW,OAAO,EAAE,iBAAiB,8BAA8B,GAClE;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEC,2BAAiB,WAAW,oBAAC,WAAQ;AAAA;AAAA,UACxC;AAAA,UACC,WACC,iCACE;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,YAAY;AAAA,gBACtB,WAAU;AAAA,gBACV,iBAAe;AAAA,gBACf,QAAQ;AAAA;AAAA,YACV;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU,YAAY;AAAA,gBACtB,WAAU;AAAA,gBACV,iBAAe;AAAA,gBACf,QAAQ;AAAA;AAAA,YACV;AAAA,aACF;AAAA,WAEJ;AAAA,QACC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,YAAY,UAAU;AAAA,YAC/B,UAAU,YAAY,CAAC,CAAC;AAAA,YACvB,GAAG;AAAA,YAEH;AAAA;AAAA,QACH;AAAA,QAED,aAAa,UACZ;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,cAAc,aAAa;AAAA,YAC3B;AAAA,YAEA;AAAA,YACA,mBAAiB;AAAA,YACjB,oBAAkB;AAAA,YAEjB;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ,GACF;AAEJ,CAAC;",
   "names": ["trigger"]
 }

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

@@ -1,4 +1,4 @@
-._at2xro0-3-13-2 {
+._at2xro0-3-14-0 {
   display: flex;
   flex-direction: column;
   flex: 1;
@@ -7,7 +7,7 @@
   padding: var(--dt-spacings-size-0, 0);
   border: var(--dt-spacings-size-0, 0);
 }
-._at2xro1-3-13-2 {
+._at2xro1-3-14-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   padding-top: var(--dt-spacings-size-8, 8px);
@@ -18,14 +18,14 @@
   width: 100%;
   flex-direction: column;
 }
-._at2xro2-3-13-2 {
+._at2xro2-3-14-0 {
   flex-direction: column;
   flex: 1;
   min-width: var(--dt-spacings-size-0, 0);
   gap: var(--dt-spacings-size-4, 4px);
 }
 @media screen and (min-width: 640px) {
-  ._at2xro1-3-13-2 {
+  ._at2xro1-3-14-0 {
     flex-direction: row;
   }
 }

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

@@ -33,6 +33,10 @@ import {
   getFromToValues,
   parseValue
 } from "../../../../forms/forms-core/time/timeParser.js";
+import {
+  NativeValidityStateKeys,
+  ValidationError
+} from "../../../../forms/validation/types.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { useBreakpoint } from "../../../../layouts/hooks/useBreakpoint.js";
 import { InputGroup } from "../../../../layouts/input-group/InputGroup.js";
@@ -107,8 +111,8 @@ const CustomTimeframeSelector = () => {
     []
   );
   const [state, dispatch] = useReducer(callback, {
-    customMessages: [],
-    formControlMessages: [],
+    errors: [],
+    hints: [],
     showError,
     isTouched: showError
   });
@@ -119,6 +123,7 @@ const CustomTimeframeSelector = () => {
   useEffect(() => {
     previousErrorRef.current = validate(value, min, max, {
       formMessageDispatch: dispatch,
+      intl,
       formerError: previousErrorRef.current,
       precision,
       showError,
@@ -131,31 +136,41 @@ const CustomTimeframeSelector = () => {
     });
     if (!nowInserted && !required && !contextRequired) {
       if (!from && to?.value === "now()") {
+        dispatch({
+          type: FormFieldMessagesAction.REMOVEMESSAGE,
+          payload: { id: hintId, source: "strato" }
+        });
         dispatch({
           type: FormFieldMessagesAction.ADDMESSAGE,
           payload: {
             id: hintId,
-            variant: "error",
-            message: intl.formatMessage(
-              TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom
-            ),
-            messageType: "formcontrol",
-            validityStateKey: "customError"
+            error: new ValidationError(
+              intl.formatMessage(TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom),
+              {
+                source: "strato",
+                validityStateKey: NativeValidityStateKeys.customError
+              }
+            )
           }
         });
         return;
       }
       if (!to && from?.value === "now()") {
+        dispatch({
+          type: FormFieldMessagesAction.REMOVEMESSAGE,
+          payload: { id: hintId, source: "strato" }
+        });
         dispatch({
           type: FormFieldMessagesAction.ADDMESSAGE,
           payload: {
             id: hintId,
-            variant: "error",
-            message: intl.formatMessage(
-              TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo
-            ),
-            messageType: "formcontrol",
-            validityStateKey: "customError"
+            error: new ValidationError(
+              intl.formatMessage(TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo),
+              {
+                source: "strato",
+                validityStateKey: NativeValidityStateKeys.customError
+              }
+            )
           }
         });
         return;
@@ -164,7 +179,7 @@ const CustomTimeframeSelector = () => {
         type: FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
           id: hintId,
-          messageType: "formcontrol"
+          source: "strato"
         }
       });
     }
@@ -280,31 +295,43 @@ const CustomTimeframeSelector = () => {
     if (!timeBoundaryMessageData) {
       if (!nowInserted && !required && !contextRequired) {
         if (!from && to?.value === "now()") {
+          dispatch({
+            type: FormFieldMessagesAction.REMOVEMESSAGE,
+            payload: { id: hintId, source: "strato" }
+          });
           dispatch({
             type: FormFieldMessagesAction.ADDMESSAGE,
             payload: {
               id: hintId,
-              variant: "error",
-              message: intl.formatMessage(
-                TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom
-              ),
-              messageType: "formcontrol",
-              validityStateKey: "customError"
+              error: new ValidationError(
+                intl.formatMessage(
+                  TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom
+                ),
+                {
+                  source: "strato",
+                  validityStateKey: NativeValidityStateKeys.customError
+                }
+              )
             }
           });
           return;
         }
         if (!to && from?.value === "now()") {
+          dispatch({
+            type: FormFieldMessagesAction.REMOVEMESSAGE,
+            payload: { id: hintId, source: "strato" }
+          });
           dispatch({
             type: FormFieldMessagesAction.ADDMESSAGE,
             payload: {
               id: hintId,
-              variant: "error",
-              message: intl.formatMessage(
-                TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo
-              ),
-              messageType: "formcontrol",
-              validityStateKey: "customError"
+              error: new ValidationError(
+                intl.formatMessage(TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo),
+                {
+                  source: "strato",
+                  validityStateKey: NativeValidityStateKeys.customError
+                }
+              )
             }
           });
           return;
@@ -314,22 +341,24 @@ const CustomTimeframeSelector = () => {
         type: FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
           id: hintId,
-          messageType: "formcontrol"
+          source: "strato"
         }
       });
       return;
     }
+    dispatch({
+      type: FormFieldMessagesAction.REMOVEMESSAGE,
+      payload: { id: hintId, source: "strato" }
+    });
     dispatch({
       type: FormFieldMessagesAction.ADDMESSAGE,
       payload: {
         id: hintId,
-        variant: "hint",
-        message: intl.formatMessage(
+        hint: intl.formatMessage(
           TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],
           timeBoundaryMessageData.values
         ),
-        messageType: "formcontrol",
-        validityStateKey: "customError"
+        source: "strato"
       }
     });
   }, [