@dynatrace/strato-components 3.2.0 → 3.3.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  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport type { RequireAtLeastOne } from 'type-fest';\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  CustomTrigger,\n  type TimeframeSelectorCustomTriggerProps,\n} from './components/trigger/CustomTrigger.js';\nimport { DisplayValue } from './components/trigger/DisplayValue.js';\nimport {\n  isTimeframeSelectorTriggerElement,\n  Trigger,\n  type TimeframeSelectorTriggerProps,\n} from './components/trigger/Trigger.js';\nimport { InternalTimeframeSelectorContext } from './contexts/InternalTimeframeSelectorContext.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport type {\n  TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport {\n  getTimeframePresets,\n  saveRecentTimeframe,\n} from './utils/presets-helpers.js';\nimport { isTimeframeWithFromAndTo } from './utils/timeframe-selection.js';\nimport {\n  TIMEFRAME_PRESETS_QUERY_KEY,\n  timeframeQueryClient,\n} from './utils/TimeframePresetsClient.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Timeframe } from '../../core/types/time.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { SelectedOverCalendarContext } from '../../forms/date-time-range-picker/contexts/SelectedOverCalendarContext.js';\nimport { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../../forms/forms-core/hooks/useMinMaxLogger.js';\nimport { useSyncedFormControlProps } from '../../forms/forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } 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  mapToTimeframe,\n  parseValue,\n  removePrecision,\n} from '../../forms/forms-core/time/timeParser.js';\nimport type { TimeRangePickerRef } from '../../forms/shared-types.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';\nconst STEPPER_DEBOUNCE_MS = 300;\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(\n  children: ReactNode,\n  precision: 'minutes' | 'seconds' | 'milliseconds',\n) {\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\nconst _TimeframeSelector = forwardRef<\n  TimeRangePickerRef,\n  TimeframeSelectorProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const {\n    disabled: propDisabled,\n    value: propValue,\n    defaultValue: propDefaultValue,\n    clearable = false,\n    readOnly = false,\n    required: propRequired,\n    controlState,\n    onChange,\n    children,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    min = GRAIL_MIN_DATE,\n    max = GRAIL_MAX_DATE,\n    name,\n    precision = 'minutes',\n    id: propId,\n    stepper = true,\n    'aria-disabled': ariaDisabledProp,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  }: TimeframeSelectorProps = props;\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  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, COMPONENT_NAME);\n\n  const memoedValue = useMemo(\n    () => (propValue ? mapToTimeframe(propValue) : propValue),\n    [propValue],\n  );\n  const memoedDefaultValue = useMemo(\n    () =>\n      propDefaultValue ? mapToTimeframe(propDefaultValue) : propDefaultValue,\n    [propDefaultValue],\n  );\n\n  const [value, setValue] = useControllableState({\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    value: memoedValue,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    defaultValue: memoedDefaultValue,\n    onChange,\n  });\n\n  const [selectedOverCalendar, setSelectedOverCalendar] = useState<\n    boolean | undefined\n  >(false);\n  const [calendarOnChangeFlag, setCalendarOnChangeFlag] = useState<\n    boolean | undefined\n  >(false);\n  const [lastSelectedOverCalendar, setLastSelectedOverCalendar] = useState<\n    boolean | undefined\n  >(false);\n  const isSelectionAppliedRef = useRef(false);\n  // The previous timeframe is only saved when using the stepper buttons to move to min/max\n  // results in a shorter timeframe, allowing us to restore the original range.\n  const [previousTimeframe, setPreviousTimeframe] = useState<\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null\n  >();\n\n  // Optimistic timeframe value for immediate UI updates while debouncing the\n  // consumer's onChange callback. Set on every stepper click and cleared once\n  // the debounced setValue fires.\n  const [optimisticTimeframeValue, setOptimisticTimeframeValue] =\n    useState<Timeframe | null>(null);\n\n  // Store setValue in a ref so the debounced function always calls the latest\n  // version without needing to be recreated (which would discard pending calls).\n  const setValueRef = useRef(setValue);\n  useEffect(() => {\n    setValueRef.current = setValue;\n  }, [setValue]);\n\n  const debouncedSetValueRef = useRef(\n    debounce((timeframe: Timeframe) => {\n      setValueRef.current(timeframe);\n      saveRecentTimeframe(timeframe);\n      setOptimisticTimeframeValue(null);\n    }, STEPPER_DEBOUNCE_MS),\n  );\n\n  // Cancel the debounced call on unmount.\n  useEffect(() => {\n    const debouncedSetValue = debouncedSetValueRef.current;\n    return () => debouncedSetValue.cancel();\n  }, []);\n\n  // The effective value is the optimistic stepper value (for immediate UI\n  // feedback) when available, otherwise the actual controllable-state value.\n  const effectiveValue = optimisticTimeframeValue ?? value;\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n\n  const [formControlStateError, hint] = useFormControlState(controlState);\n\n  const {\n    state: { showError: messageContextError },\n    dispatch: formFieldMessagesDispatch,\n  } = useFormFieldMessagesContext();\n\n  /** Handle overlay on open change. */\n  const onOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        // save the last selectedOverCalendar when the overlay get opened.\n        setLastSelectedOverCalendar(selectedOverCalendar);\n        // when selection is not applied and the overlay is closed use the lastSelectedOverCalendar.\n        if (!isSelectionAppliedRef.current) {\n          setSelectedOverCalendar(lastSelectedOverCalendar);\n        } else {\n          // reset the is selection applied flag\n          isSelectionAppliedRef.current = false;\n          // save the last selectedOverCalendar when the selection got applied.\n          setLastSelectedOverCalendar(selectedOverCalendar);\n        }\n\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    },\n    [selectedOverCalendar, formFieldMessagesDispatch, lastSelectedOverCalendar],\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.prefetchQuery({\n      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n      queryFn: getTimeframePresets,\n    });\n  }, []);\n\n  const details = useMemo((): TimeframeValueDetails | null => {\n    const { from, to } = parseValue(effectiveValue);\n    return from && to ? { from, to } : null;\n  }, [effectiveValue]);\n\n  /** Handle value change. */\n  const handleSelectionChange = useCallback(\n    (timeframe: Timeframe | null) => {\n      // Cancel any pending debounced stepper update since the user is\n      // explicitly selecting a new timeframe via overlay/presets.\n      debouncedSetValueRef.current.cancel();\n      setOptimisticTimeframeValue(null);\n\n      if (timeframe === undefined || timeframe === null) {\n        setValue(null);\n        setPreviousTimeframe(null);\n        overlayState.close();\n        return;\n      }\n\n      if (timeframe?.from?.value && timeframe?.to?.value) {\n        isSelectionAppliedRef.current = true;\n        setValue(timeframe);\n        setPreviousTimeframe(null);\n        overlayState.close();\n      }\n    },\n    // we don't need to exclude the whole overlayState, as we only use overlayState.close\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [overlayState.close],\n  );\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    effectiveValue,\n    intl,\n    placeholder,\n    precision,\n    presetItemName,\n    required,\n    min,\n    max,\n  );\n\n  const triggerErrorId = useId();\n  const inputId = useId();\n\n  const validateTimeframe = useCallback(\n    (showError?: boolean) => {\n      if (displayValueError && displayValueHint) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.ADDMESSAGE,\n          payload: {\n            id: triggerErrorId,\n            message: displayValueHint,\n            variant: 'error',\n            validityStateKey: 'customError',\n            messageType: 'formcontrol',\n            showError,\n            controlId: inputId,\n          },\n        });\n      } else {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: {\n            id: triggerErrorId,\n            messageType: 'formcontrol',\n            controlId: inputId,\n          },\n        });\n      }\n    },\n    [\n      displayValueError,\n      displayValueHint,\n      formFieldMessagesDispatch,\n      triggerErrorId,\n      inputId,\n    ],\n  );\n\n  /** Everytime the value changes, we validate. */\n  useEffect(() => {\n    validateTimeframe();\n  }, [validateTimeframe, value]);\n\n  const handleStepperOnChange = useCallback(\n    (timeframe: Timeframe, isMinOrMax?: boolean) => {\n      if (previousTimeframe && isTimeframeWithFromAndTo(previousTimeframe)) {\n        setOptimisticTimeframeValue(previousTimeframe);\n        debouncedSetValueRef.current(previousTimeframe);\n        setPreviousTimeframe(null);\n        return;\n      }\n\n      if (isMinOrMax) {\n        // In this case, moving to the minimum or maximum value means we can't maintain the original timeframe length.\n        // Therefore, we store the previous timeframe so we can restore it when moving back in the opposite direction.\n        setPreviousTimeframe(effectiveValue);\n      }\n\n      // Immediately update the UI with the new timeframe,\n      // but debounce the consumer's onChange callback.\n      setOptimisticTimeframeValue(timeframe);\n      debouncedSetValueRef.current(timeframe);\n    },\n    [previousTimeframe, effectiveValue],\n  );\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': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  };\n  const { ariaProps: ariaFormProps, onBlur } = useFormFieldValidation(\n    fromInputRef,\n    {},\n    ariaLabelingProps,\n  );\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        validateTimeframe();\n      },\n    }),\n    [\n      formFieldMessagesDispatch,\n      overlayState.close,\n      overlayState.open,\n      validateTimeframe,\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  const triggerButtonRef = useMergeRefs([\n    targetRef,\n    triggerRef,\n    imperativeTriggerRef,\n  ]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      onBlur();\n    }\n  }, [onBlur, overlayState.isOpen]);\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      displayValueError,\n      ariaLabelProp,\n      ariaLabelledByProp,\n      ariaDescribedByProp,\n      ariaDetailsProp,\n      readOnly,\n      overlayTriggerProps,\n    ],\n  );\n\n  const showError = formControlStateError || messageContextError;\n  const timeframeSelectorContextValue = useMemo(\n    () => ({\n      details,\n      displayValue,\n      onChange: handleSelectionChange,\n      triggerProps,\n      hint: displayValueHint,\n      precision,\n    }),\n    [\n      details,\n      displayValue,\n      handleSelectionChange,\n      triggerProps,\n      displayValueHint,\n      precision,\n    ],\n  );\n\n  const internalTimeframeSelectorContextValue = useMemo(\n    () => ({\n      min,\n      max,\n      readOnly,\n      showError,\n      precision,\n      required,\n    }),\n    [min, max, readOnly, showError, precision, required],\n  );\n\n  const selectedOverCalendarContextValue = useMemo(\n    () => ({\n      selectedOverCalendar:\n        // as long the overlay is open set the lastSelectedOverCalendar\n        lastSelectedOverCalendar === true\n          ? lastSelectedOverCalendar\n          : selectedOverCalendar,\n      setSelectedOverCalendar,\n      calendarOnChangeFlag,\n      setCalendarOnChangeFlag,\n    }),\n    [calendarOnChangeFlag, lastSelectedOverCalendar, selectedOverCalendar],\n  );\n\n  return (\n    <TimeframeSelectorContext.Provider value={timeframeSelectorContextValue}>\n      <InternalTimeframeSelectorContext.Provider\n        value={internalTimeframeSelectorContextValue}\n      >\n        <SelectedOverCalendarContext.Provider\n          value={selectedOverCalendarContextValue}\n        >\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={consumerClassName}\n            style={consumerStyle}\n            {...remainingProps}\n            data-dt-component={COMPONENT_NAME}\n          >\n            <VisuallyHidden>\n              <input\n                id={inputId}\n                type=\"text\"\n                ref={fromInputRef}\n                name={name && `${name}-from`}\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                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\n              style={{ gridAutoColumns: 'auto max-content max-content' }}\n            >\n              <TimeframeSelectorTooltip\n                displayValue={displayValue}\n                value={effectiveValue}\n                disabled={disabled}\n                precision={precision}\n              >\n                {customTrigger ?? trigger ?? <Trigger />}\n              </TimeframeSelectorTooltip>\n              {stepper &&\n                effectiveValue &&\n                isTimeframeWithFromAndTo(effectiveValue) && (\n                  <>\n                    <StepperButton\n                      value={effectiveValue}\n                      disabled={disabled}\n                      direction=\"backward\"\n                      aria-disabled={ariaDisabled}\n                      onChange={handleStepperOnChange}\n                      onBlur={handleOnBlur}\n                    />\n                    <StepperButton\n                      value={effectiveValue}\n                      disabled={disabled}\n                      direction=\"forward\"\n                      aria-disabled={ariaDisabled}\n                      onChange={handleStepperOnChange}\n                      onBlur={handleOnBlur}\n                    />\n                  </>\n                )}\n            </InputGroup>\n            {controlState && hint && (\n              <BaseItem\n                variant={formControlStateError ? 'error' : 'hint'}\n                disabled={disabled || ariaDisabled}\n              >\n                {hint}\n              </BaseItem>\n            )}\n            {overlayState.isOpen && (\n              <TimeframeSelectorOverlay\n                ref={overlayRef}\n                overlayProps={overlayProps}\n                overlayClose={() => {\n                  formFieldMessagesDispatch?.({\n                    type: FormFieldMessagesAction.SETISTOUCHED,\n                    payload: { isTouched: true },\n                  });\n                  overlayState.close();\n                }}\n                clearable={clearable}\n                precision={precision}\n                onChange={handleSelectionChange}\n                data-dtrum-mask={dataDtrumMask}\n                data-dtrum-allow={dataDtrumAllow}\n              >\n                {presets}\n              </TimeframeSelectorOverlay>\n            )}\n          </Flex>\n        </SelectedOverCalendarContext.Provider>\n      </InternalTimeframeSelectorContext.Provider>\n    </TimeframeSelectorContext.Provider>\n  );\n});\n\n(\n  _TimeframeSelector as typeof _TimeframeSelector & { displayName: string }\n).displayName = COMPONENT_NAME;\n\n/**\n*`TimeframeSelector` is a filtering component that lets users choose from preset timeframes or add unique \"from\" and \"to\" time values of their own.\n\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": ["showError"]
+  "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 { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isFullTimeframe } from '../../core/time/helpers.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 { useFormFieldMessagesContext } from '../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../../forms/forms-core/hooks/useSyncedFormControlProps.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: Partial<Timeframe> | null | 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>,\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 valueWithPrecision = removePrecisionFromTimeFrame(\n            memoedValue,\n            state.precision,\n          );\n          const value = isFullTimeframe(valueWithPrecision)\n            ? valueWithPrecision\n            : null;\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            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    // eslint-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 valueWithPrecision = removePrecisionFromTimeFrame(\n        preciseValue,\n        precision,\n      );\n      const value = isFullTimeframe(valueWithPrecision)\n        ? valueWithPrecision\n        : null;\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      id: propId,\n      'aria-disabled': propAriaDisabled,\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      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [],\n    );\n\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n    const timeframeSelectorRef = useRef<TimeRangePickerRef>(null);\n\n    const { formatString } = useDateTimeMessages({ precision });\n    const { dispatch: formFieldMessagesDispatch } =\n      useFormFieldMessagesContext();\n\n    const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: propAriaDisabled,\n    });\n\n    const debouncedOnChangeRef = useRef(\n      debounce((timeframe: Timeframe | null) => {\n        onChangeProp?.(timeframe);\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      const value = isFullTimeframe(_value) ? _value : null;\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          id={id}\n          ref={mergedRef}\n          aria-disabled={ariaDisabled}\n          disabled={disabled}\n        />\n      </TimeframeSelectorStoreProvider>\n    );\n  },\n);\n\n(\n  _TimeframeSelector as typeof _TimeframeSelector & { displayName: string }\n).displayName = 'TimeframeSelector';\n\n/**\n*`TimeframeSelector` is a filtering component that lets users choose from preset timeframes or add unique \"from\" and \"to\" time values of their own.\n\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,5 +1,5 @@
 import "./TimeframeSelector.css";
-var displayValueParts = "_1sqhmjg0-3-2-0";
+var displayValueParts = "_1sqhmjg0-3-3-0";
 export {
   displayValueParts
 };

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-2-0';"],
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-3-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

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

@@ -0,0 +1,430 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Children,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef
+} from "react";
+import { useIntl } from "react-intl";
+import { TimeframeSelectorOverlay } from "./components/overlay/TimeframeSelectorOverlay.js";
+import { PresetItem } from "./components/presets/PresetItem.js";
+import { Presets } from "./components/presets/Presets.js";
+import { StepperButton } from "./components/stepper/StepperButton.js";
+import { TimeframeSelectorTooltip } from "./components/TimeframeSelectorTooltip.js";
+import {
+  isTimeframeSelectorCustomTriggerElement
+} from "./components/trigger/CustomTrigger.js";
+import {
+  isTimeframeSelectorTriggerElement,
+  Trigger
+} from "./components/trigger/Trigger.js";
+import { TIMEFRAMESELECTOR_ERROR_MESSAGES } from "./constants/timeframeSelectorMessages.js";
+import { TimeframeSelectorContext } from "./contexts/TimeframeSelectorContext.js";
+import { getTimeframeDisplayValueProps } from "./utils/getTimeframeDisplayValueProps.js";
+import { getTimeframePresets } from "./utils/presets-helpers.js";
+import {
+  TIMEFRAME_PRESETS_QUERY_KEY,
+  timeframeQueryClient
+} from "./utils/TimeframePresetsClient.js";
+import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHidden.js";
+import { useFormControlState } from "../../core/hooks/useFormControlState.js";
+import { useId } from "../../core/hooks/useId.js";
+import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { useTimeframeSelectorStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
+import { validate } from "../../core/time/validation.js";
+import { isSlot } from "../../core/utils/is-slot.js";
+import { devLog } from "../../core/utils/logging.js";
+import { InternalBaseItem as BaseItem } from "../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
+import { useFormFieldMessagesContext } from "../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
+import { useFormFieldValidation } from "../../forms/forms-core/hooks/useFormFieldValidation.js";
+import { useMinMaxLogger } from "../../forms/forms-core/hooks/useMinMaxLogger.js";
+import { FormFieldMessagesAction } from "../../forms/forms-core/state/formfield-messages-state-reducer.js";
+import {
+  parseValue,
+  removePrecision
+} from "../../forms/forms-core/time/timeParser.js";
+import { Flex } from "../../layouts/flex/Flex.js";
+import { InputGroup } from "../../layouts/input-group/InputGroup.js";
+import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
+const COMPONENT_NAME = "TimeframeSelector";
+function getItemSlots(children, precision) {
+  const presetItemsDisplayValuesMap = /* @__PURE__ */ new Map();
+  const slots = {
+    trigger: null,
+    customTrigger: null,
+    presets: null,
+    presetItemsDisplayValuesMap
+  };
+  for (const child of Children.toArray(children)) {
+    if (isSlot(child, Presets)) {
+      slots.presets = child;
+      for (const childItem of Children.toArray(child.props.children)) {
+        if (isSlot(childItem, PresetItem)) {
+          slots.presetItemsDisplayValuesMap.set(
+            `${removePrecision(
+              childItem.props.value.from,
+              precision
+            )} ${removePrecision(childItem.props.value.to, precision)}`,
+            childItem.props.children
+          );
+        }
+      }
+    } else if (isTimeframeSelectorCustomTriggerElement(child)) {
+      slots.customTrigger = child;
+    } else if (isTimeframeSelectorTriggerElement(child)) {
+      slots.trigger = child;
+    } else {
+      devLog("The used child is not supported by the TimeframeSelector.");
+    }
+  }
+  return slots;
+}
+const TimeframeSelectorRoot = forwardRef((props, forwardedRef) => {
+  const intl = useIntl();
+  const {
+    disabled,
+    value: propValue,
+    defaultValue,
+    /* eslint-disable @typescript-eslint/no-deprecated */
+    clearable = false,
+    readOnly = false,
+    controlState,
+    children,
+    onChange,
+    className: consumerClassName,
+    style: consumerStyle,
+    "data-testid": dataTestId,
+    "data-dtrum-mask": dataDtrumMask,
+    "data-dtrum-allow": dataDtrumAllow,
+    name,
+    id,
+    stepper = true,
+    "aria-disabled": ariaDisabled,
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-details": ariaDetailsProp,
+    ...remainingProps
+  } = props;
+  const value = useTimeframeSelectorStore(
+    (state) => state.timeframeSelectorTimeframe
+  );
+  const precision = useTimeframeSelectorStore((state) => state.precision);
+  const min = useTimeframeSelectorStore((state) => state.min);
+  const max = useTimeframeSelectorStore((state) => state.max);
+  const required = useTimeframeSelectorStore((state) => state.required);
+  const formatString = useTimeframeSelectorStore((state) => state.formatString);
+  const timeframeSelectorRef = useTimeframeSelectorStore(
+    (state) => state.timeframeSelectorRef
+  );
+  const setDateTimeRangePickerTimeframe = useTimeframeSelectorStore(
+    (state) => state.setDateTimeRangePickerTimeframe
+  );
+  const placeholder = intl.formatMessage({
+    defaultMessage: "Select timeframe",
+    id: "W+rTy8UuFKDho3mc",
+    description: "Placeholder shown for the timeframe selector."
+  });
+  useMinMaxLogger(min, max, "TimeframeSelector");
+  const [formControlStateError, hint] = useFormControlState(controlState);
+  const { state: formFieldMessagesState, dispatch: formFieldMessagesDispatch } = useFormFieldMessagesContext();
+  const onOpenChange = useCallback(
+    (isOpen) => {
+      if (!isOpen) {
+        formFieldMessagesDispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        setDateTimeRangePickerTimeframe(value);
+      }
+    },
+    [formFieldMessagesDispatch, setDateTimeRangePickerTimeframe, value]
+  );
+  const {
+    targetRef,
+    overlayRef,
+    triggerRef,
+    overlayProps,
+    overlayState,
+    overlayTriggerProps
+  } = useOverlayWithTrigger({
+    offset: 4,
+    placement: "bottom-start",
+    placementFallbacks: ["bottom-end", "top-start", "top-end"],
+    heightStrategy: "maxViewport",
+    disabled,
+    onOpenChange
+  });
+  useEffect(() => {
+    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {
+      return;
+    }
+    timeframeQueryClient.prefetchQuery({
+      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,
+      queryFn: getTimeframePresets
+    });
+  }, []);
+  const details = useMemo(() => {
+    const { from, to } = parseValue(value);
+    return from && to ? { from, to } : null;
+  }, [value]);
+  const { customTrigger, trigger, presets, presetItemsDisplayValuesMap } = useMemo(() => getItemSlots(children, precision), [children, precision]);
+  const presetItemName = presetItemsDisplayValuesMap.get(
+    `${details?.from?.value} ${details?.to?.value}`
+  );
+  const {
+    displayValue,
+    isInvalid: displayValueError,
+    hint: displayValueHint
+  } = getTimeframeDisplayValueProps(
+    value,
+    intl,
+    placeholder,
+    precision,
+    presetItemName,
+    required,
+    min?.value,
+    max?.value
+  );
+  const triggerErrorId = useId();
+  const inputId = useId();
+  const imperativeTriggerRef = useRef(null);
+  const containerRef = useRef(null);
+  const fromInputRef = useRef(null);
+  const toInputRef = useRef(null);
+  const ariaLabelingProps = {
+    "aria-label": ariaLabelProp,
+    "aria-labelledby": ariaLabelledByProp,
+    "aria-describedby": ariaDescribedByProp,
+    "aria-details": ariaDetailsProp
+  };
+  const { ariaProps: ariaFormProps, onBlur } = useFormFieldValidation(
+    fromInputRef,
+    {},
+    ariaLabelingProps
+  );
+  useImperativeHandle(
+    forwardedRef,
+    () => ({
+      element: containerRef.current,
+      triggerRef: imperativeTriggerRef.current,
+      inputRef: { from: fromInputRef.current, to: toInputRef.current },
+      open: overlayState.open,
+      close: overlayState.close,
+      focus() {
+        imperativeTriggerRef.current?.focus?.();
+      },
+      validate() {
+        formFieldMessagesDispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        validate(value, min, max, {
+          formMessageDispatch: formFieldMessagesDispatch,
+          precision,
+          showError: false,
+          checkOrder: true,
+          ref: timeframeSelectorRef,
+          expectedFormat: formatString,
+          valueMode: "timeframeSelector",
+          required,
+          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES
+        });
+      }
+    }),
+    [formFieldMessagesDispatch, overlayState.close, overlayState.open]
+  );
+  useEffect(() => {
+    if (overlayState.isOpen) {
+      return;
+    }
+    if (!displayValueError && triggerErrorId) {
+      formFieldMessagesDispatch?.({
+        type: FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: {
+          id: triggerErrorId,
+          messageType: "formcontrol",
+          controlId: inputId
+        }
+      });
+    }
+  }, [
+    displayValueError,
+    displayValueHint,
+    overlayState.isOpen,
+    triggerErrorId,
+    formFieldMessagesDispatch,
+    inputId
+  ]);
+  const triggerButtonRef = useMergeRefs([
+    targetRef,
+    triggerRef,
+    imperativeTriggerRef
+  ]);
+  const handleOnBlur = useCallback(() => {
+    if (!overlayState.isOpen) {
+      onBlur();
+    }
+  }, [onBlur, overlayState.isOpen]);
+  const triggerProps = useMemo(
+    () => ({
+      disabled,
+      onBlur: handleOnBlur,
+      ref: triggerButtonRef,
+      id,
+      "aria-disabled": ariaDisabled,
+      ...ariaFormProps,
+      ...readOnly ? {} : overlayTriggerProps,
+      "data-dt-component": COMPONENT_NAME
+    }),
+    [
+      disabled,
+      handleOnBlur,
+      triggerButtonRef,
+      id,
+      ariaDisabled,
+      ariaFormProps,
+      readOnly,
+      overlayTriggerProps
+    ]
+  );
+  const timeframeSelectorContextValue = useMemo(
+    () => ({
+      details,
+      displayValue,
+      triggerProps,
+      hint: displayValueHint,
+      readOnly,
+      showError: formControlStateError || formFieldMessagesState.showError
+    }),
+    [
+      details,
+      readOnly,
+      displayValue,
+      triggerProps,
+      displayValueHint,
+      formControlStateError,
+      formFieldMessagesState.showError
+    ]
+  );
+  return /* @__PURE__ */ jsx(TimeframeSelectorContext.Provider, { value: timeframeSelectorContextValue, children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      gap: 4,
+      flexDirection: "column",
+      "data-testid": dataTestId,
+      "data-dtrum-mask": dataDtrumMask,
+      "data-dtrum-allow": dataDtrumAllow,
+      ref: containerRef,
+      className: consumerClassName,
+      style: consumerStyle,
+      ...remainingProps,
+      "data-dt-component": "TimeframeSelector",
+      children: [
+        /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "text",
+              ref: fromInputRef,
+              name: name && `${name}-from`,
+              "aria-hidden": true,
+              readOnly,
+              required,
+              disabled,
+              value: details?.from.value ?? "",
+              onInvalid: (event) => {
+                formFieldMessagesDispatch?.({
+                  type: FormFieldMessagesAction.SETISTOUCHED,
+                  payload: { isTouched: true }
+                });
+                event.preventDefault();
+              },
+              onChange: () => {
+              },
+              tabIndex: -1,
+              ...ariaFormProps
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              ref: toInputRef,
+              name: name && `${name}-to`,
+              "aria-hidden": true,
+              readOnly,
+              required,
+              disabled,
+              value: details?.to.value ?? "",
+              onInvalid: (event) => event.preventDefault(),
+              onChange: () => {
+              },
+              tabIndex: -1,
+              ...ariaFormProps
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(InputGroup, { style: { gridAutoColumns: "auto max-content max-content" }, children: [
+          /* @__PURE__ */ jsx(
+            TimeframeSelectorTooltip,
+            {
+              displayValue,
+              value,
+              disabled,
+              children: customTrigger ?? trigger ?? /* @__PURE__ */ jsx(Trigger, {})
+            }
+          ),
+          stepper && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              StepperButton,
+              {
+                disabled,
+                direction: "backward",
+                "aria-disabled": ariaDisabled,
+                onBlur: handleOnBlur
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              StepperButton,
+              {
+                disabled,
+                direction: "forward",
+                "aria-disabled": ariaDisabled,
+                onBlur: handleOnBlur
+              }
+            )
+          ] })
+        ] }),
+        controlState && hint && /* @__PURE__ */ jsx(
+          BaseItem,
+          {
+            variant: formControlStateError ? "error" : "hint",
+            disabled: disabled || !!ariaDisabled,
+            children: hint
+          }
+        ),
+        overlayState.isOpen && /* @__PURE__ */ jsx(
+          TimeframeSelectorOverlay,
+          {
+            ref: overlayRef,
+            overlayProps,
+            overlayClose: overlayState.close,
+            clearable,
+            "data-dtrum-mask": dataDtrumMask,
+            "data-dtrum-allow": dataDtrumAllow,
+            children: presets
+          }
+        )
+      ]
+    }
+  ) });
+});
+export {
+  TimeframeSelectorRoot
+};
+//# sourceMappingURL=TimeframeSelectorRoot.js.map