@dynatrace/strato-components 3.0.1 → 3.1.0

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelector.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { 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 { ChevronDownSmallIcon } from '@dynatrace/strato-icons';\n\nimport { InternalTimeframeSelectorContext } from './contexts/InternalTimeframeSelectorContext.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport {\n  _isTimeframeSelectorCustomTriggerElement,\n  CustomTrigger,\n  type TimeframeSelectorCustomTriggerProps,\n} from './CustomTrigger.js';\nimport { DisplayValue } from './DisplayValue.js';\nimport { PresetItem } from './Item.js';\nimport { Presets } from './Presets.js';\nimport { StepperButton } from './StepperButton.js';\nimport {\n  timeframeSelectorSuffixCSS,\n  timeframeSelectorSuffixOpenCSS,\n  timeframeSelectorTriggerReadOnlyCSS,\n} from './TimeframeSelector.sty.js';\nimport type {\n  _TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { TimeframeSelectorOverlay } from './TimeframeSelectorOverlay.js';\nimport { TimeframeSelectorTooltip } from './TimeframeSelectorTooltip.js';\nimport {\n  _isTimeframeSelectorTriggerElement,\n  Trigger,\n  type TimeframeSelectorTriggerProps,\n} from './Trigger.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport { isTimeframeWithFromAndTo } from './utils/timeframe-selection.js';\nimport { Button } from '../../buttons/button/Button.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      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  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    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      'aria-disabled': ariaDisabled,\n      ...ariaFormProps,\n      ...(readOnly ? {} : overlayTriggerProps),\n      'data-dt-component': COMPONENT_NAME,\n    }),\n    [\n      disabled,\n      handleOnBlur,\n      triggerButtonRef,\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 ?? (\n                  <Button\n                    {...triggerProps}\n                    variant=\"emphasized\"\n                    id={id}\n                    color={showError ? 'critical' : 'neutral'}\n                    className={\n                      readOnly ? timeframeSelectorTriggerReadOnlyCSS : undefined\n                    }\n                    textAlign=\"start\"\n                  >\n                    {displayValue}\n                    <Button.Suffix>\n                      <ChevronDownSmallIcon\n                        className={clsx(\n                          timeframeSelectorSuffixCSS,\n                          overlayState.isOpen && timeframeSelectorSuffixOpenCSS,\n                        )}\n                      />\n                    </Button.Suffix>\n                  </Button>\n                )}\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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",
+  "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"]
 }

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

@@ -1,24 +1,6 @@
 import "./TimeframeSelector.css";
-var customTimeframeSelectorWrapperCSS = "_1sqhmjg6-3-0-1";
-var timeframeSelectorDisplayValuePartsCSS = "_1sqhmjg3-3-0-1";
-var timeframeSelectorFieldsetCSS = "_1sqhmjg9-3-0-1";
-var timeframeSelectorHintCSS = "_1sqhmjg8-3-0-1";
-var timeframeSelectorHintIconCSS = "_1sqhmjg4-3-0-1";
-var timeframeSelectorOverlayCSS = "_1sqhmjg7-3-0-1";
-var timeframeSelectorOverlayRootCSS = "_1sqhmjg5-3-0-1";
-var timeframeSelectorSuffixCSS = "_1sqhmjg1-3-0-1";
-var timeframeSelectorSuffixOpenCSS = "_1sqhmjg2-3-0-1";
-var timeframeSelectorTriggerReadOnlyCSS = "_1sqhmjg0-3-0-1";
+var displayValueParts = "_1sqhmjg0-3-1-0";
 export {
-  customTimeframeSelectorWrapperCSS,
-  timeframeSelectorDisplayValuePartsCSS,
-  timeframeSelectorFieldsetCSS,
-  timeframeSelectorHintCSS,
-  timeframeSelectorHintIconCSS,
-  timeframeSelectorOverlayCSS,
-  timeframeSelectorOverlayRootCSS,
-  timeframeSelectorSuffixCSS,
-  timeframeSelectorSuffixOpenCSS,
-  timeframeSelectorTriggerReadOnlyCSS
+  displayValueParts
 };
 //# sourceMappingURL=TimeframeSelector.sty.js.map

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 customTimeframeSelectorWrapperCSS = '_1sqhmjg6-3-0-1';\nexport var timeframeSelectorDisplayValuePartsCSS = '_1sqhmjg3-3-0-1';\nexport var timeframeSelectorFieldsetCSS = '_1sqhmjg9-3-0-1';\nexport var timeframeSelectorHintCSS = '_1sqhmjg8-3-0-1';\nexport var timeframeSelectorHintIconCSS = '_1sqhmjg4-3-0-1';\nexport var timeframeSelectorOverlayCSS = '_1sqhmjg7-3-0-1';\nexport var timeframeSelectorOverlayRootCSS = '_1sqhmjg5-3-0-1';\nexport var timeframeSelectorSuffixCSS = '_1sqhmjg1-3-0-1';\nexport var timeframeSelectorSuffixOpenCSS = '_1sqhmjg2-3-0-1';\nexport var timeframeSelectorTriggerReadOnlyCSS = '_1sqhmjg0-3-0-1';"],
-  "mappings": "AAAA,OAAO;AACA,IAAI,oCAAoC;AACxC,IAAI,wCAAwC;AAC5C,IAAI,+BAA+B;AACnC,IAAI,2BAA2B;AAC/B,IAAI,+BAA+B;AACnC,IAAI,8BAA8B;AAClC,IAAI,kCAAkC;AACtC,IAAI,6BAA6B;AACjC,IAAI,iCAAiC;AACrC,IAAI,sCAAsC;",
+  "sourcesContent": ["import './TimeframeSelector.css';\nexport var displayValueParts = '_1sqhmjg0-3-1-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,oBAAoB;",
   "names": []
 }

package/esm/filters/timeframe-selector/{TimeframeSelectorTooltip.js → components/TimeframeSelectorTooltip.js}

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
-import { useTooltipMessages } from "./hooks/useTooltipMessages.js";
-import { Flex } from "../../layouts/flex/Flex.js";
-import { Tooltip } from "../../overlays/tooltip/Tooltip.js";
-import { Text } from "../../typography/text/Text.js";
+import { Flex } from "../../../layouts/flex/Flex.js";
+import { Tooltip } from "../../../overlays/tooltip/Tooltip.js";
+import { Text } from "../../../typography/text/Text.js";
+import { useTooltipMessages } from "../hooks/useTooltipMessages.js";
 const TimeframeSelectorTooltip = (props) => {
   const {
     value,

package/esm/filters/timeframe-selector/components/TimeframeSelectorTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/filters/timeframe-selector/components/TimeframeSelectorTooltip.tsx"],
+  "sourcesContent": ["import { type ReactElement, useCallback, useState, type JSX } from 'react';\nimport type { RequireAtLeastOne } from 'type-fest';\n\nimport type { FormControlBaseProps } from '../../../core/types/form-control-props.js';\nimport type { Timeframe } from '../../../core/types/time.js';\nimport { Flex } from '../../../layouts/flex/Flex.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../typography/text/Text.js';\nimport { useTooltipMessages } from '../hooks/useTooltipMessages.js';\n\n//#region Typings\ninterface TimeframeSelectorTooltipProps extends FormControlBaseProps {\n  /** Single child of the tooltip considered to trigger the tooltip element. */\n  children: ReactElement;\n  /** The value of the timeframe selector, containing the 'from' and 'to' timeframe details. */\n  value:\n    | RequireAtLeastOne<{ from: string; to: string }>\n    | RequireAtLeastOne<Timeframe>\n    | null;\n  /** Displayed Value at the trigger. */\n  displayValue: string | JSX.Element;\n  /** The precision of the time shown in the tooltip .*/\n  precision: 'minutes' | 'seconds' | 'milliseconds';\n}\n//#endregion\n\n/**\n * TimeframeSelectorTooltip component to show the displayValue, start, end and duration in a tooltip.\n * @internal\n */\nexport const TimeframeSelectorTooltip = (\n  props: TimeframeSelectorTooltipProps,\n) => {\n  const {\n    value,\n    disabled,\n    displayValue,\n    children,\n    precision,\n  }: TimeframeSelectorTooltipProps = props;\n\n  const [tooltipTimeValues, setTooltipTimeValues] = useState({\n    tooltipFormattedTimeValueStart: '',\n    tooltipFormattedTimeValueEnd: '',\n  });\n\n  const {\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    timeframeDuration,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value, precision);\n\n  const onOpenTooltip = useCallback(\n    async (open: boolean) => {\n      if (open) {\n        setTooltipTimeValues({\n          tooltipFormattedTimeValueStart,\n          tooltipFormattedTimeValueEnd,\n        });\n      }\n    },\n    [tooltipFormattedTimeValueEnd, tooltipFormattedTimeValueStart],\n  );\n\n  return (\n    <Tooltip\n      text={\n        <Flex flexDirection=\"column\" gap={4}>\n          <Flex gap={0} flexDirection=\"column\">\n            {\n              // displayValue is a string when a preset item name is used.\n              (typeof displayValue === 'string' || !isAbsoluteTimeframe) && (\n                <Text textStyle=\"small-emphasized\">{displayValue}</Text>\n              )\n            }\n            <Text textStyle=\"small\">\n              {tooltipTimeValues.tooltipFormattedTimeValueStart}\n            </Text>\n            <Text textStyle=\"small\">\n              {tooltipTimeValues.tooltipFormattedTimeValueEnd}\n            </Text>\n          </Flex>\n          <Flex gap={0} flexDirection=\"column\">\n            <Text textStyle=\"small\">{timeframeDuration}</Text>\n          </Flex>\n        </Flex>\n      }\n      disabled={disabled || isInvalid}\n      onOpenChange={onOpenTooltip}\n    >\n      {children}\n    </Tooltip>\n  );\n};\n\n(\n  TimeframeSelectorTooltip as typeof TimeframeSelectorTooltip & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorTooltip';\n"],
+  "mappings": "AAsEU,SAIM,KAJN;AAtEV,SAA4B,aAAa,gBAA0B;AAKnE,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,0BAA0B;AAsB5B,MAAM,2BAA2B,CACtC,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAmC;AAEnC,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAS;AAAA,IACzD,gCAAgC;AAAA,IAChC,8BAA8B;AAAA,EAChC,CAAC;AAED,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,OAAO,SAAS;AAEvC,QAAM,gBAAgB;AAAA,IACpB,OAAO,SAAkB;AACvB,UAAI,MAAM;AACR,6BAAqB;AAAA,UACnB;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA,CAAC,8BAA8B,8BAA8B;AAAA,EAC/D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MACE,qBAAC,QAAK,eAAc,UAAS,KAAK,GAChC;AAAA,6BAAC;AAAA,UAAK,KAAK;AAAA,UAAG,eAAc;AAAA;AAAA,UAGvB;AAAA,oBAAO,iBAAiB,YAAY,CAAC,wBACpC,oBAAC,QAAK,WAAU,oBAAoB,wBAAa;AAAA,YAGrD,oBAAC,QAAK,WAAU,SACb,4BAAkB,gCACrB;AAAA,YACA,oBAAC,QAAK,WAAU,SACb,4BAAkB,8BACrB;AAAA;AAAA,SACF;AAAA,QACA,oBAAC,QAAK,KAAK,GAAG,eAAc,UAC1B,8BAAC,QAAK,WAAU,SAAS,6BAAkB,GAC7C;AAAA,SACF;AAAA,MAEF,UAAU,YAAY;AAAA,MACtB,cAAc;AAAA,MAEb;AAAA;AAAA,EACH;AAEJ;AAGE,yBAGA,cAAc;",
+  "names": []
+}

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

@@ -0,0 +1,31 @@
+._at2xro0-3-1-0 {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  gap: var(--dt-spacings-size-4, 4px);
+  margin: var(--dt-spacings-size-0, 0);
+  padding: var(--dt-spacings-size-0, 0);
+  border: var(--dt-spacings-size-0, 0);
+}
+._at2xro1-3-1-0 {
+  display: flex;
+  gap: var(--dt-spacings-size-4, 4px);
+  padding-top: var(--dt-spacings-size-8, 8px);
+  padding-bottom: var(--dt-spacings-size-8, 8px);
+  padding-left: var(--dt-spacings-size-12, 12px);
+  padding-right: var(--dt-spacings-size-12, 12px);
+  box-sizing: border-box;
+  width: 100%;
+  flex-direction: column;
+}
+._at2xro2-3-1-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-1-0 {
+    flex-direction: row;
+  }
+}

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

@@ -0,0 +1,251 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import { useIntl } from "react-intl";
+import BreakpointsJS from "@dynatrace/strato-design-tokens/breakpoints-js";
+import * as customTimeframeSelectorStyles from "./CustomTimeframeSelector.sty.js";
+import { Button } from "../../../../buttons/button/Button.js";
+import { useId } from "../../../../core/hooks/useId.js";
+import { DateTimeRangePicker } from "../../../../forms/date-time-range-picker/DateTimeRangePicker.js";
+import { FormFieldMessages } from "../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js";
+import { Label } from "../../../../forms/forms-core/components/label/Label.js";
+import { _FormFieldContext as FormFieldContext } from "../../../../forms/forms-core/contexts/FormFieldContext.js";
+import { FormFieldMessageContext } from "../../../../forms/forms-core/contexts/FormFieldMessageContext.js";
+import { useFormFieldContext } from "../../../../forms/forms-core/hooks/useFormFieldContext.js";
+import {
+  FormFieldMessagesAction,
+  formFieldMessagesReducer
+} from "../../../../forms/forms-core/state/formfield-messages-state-reducer.js";
+import {
+  filterOutGrailLimit,
+  sortTimeframeValues
+} from "../../../../forms/forms-core/time/helpers.js";
+import {
+  getOutsideRangeMessage,
+  parseValue
+} from "../../../../forms/forms-core/time/timeParser.js";
+import { Flex } from "../../../../layouts/flex/Flex.js";
+import { useBreakpoint } from "../../../../layouts/hooks/useBreakpoint.js";
+import { InputGroup } from "../../../../layouts/input-group/InputGroup.js";
+import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
+import { useInternalTimeframeSelectorContext } from "../../hooks/useInternalTimeframeSelectorContext.js";
+import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
+import { saveRecentTimeframe } from "../../utils/presets-helpers.js";
+import { isOutsideRange } from "../../utils/timeframe-selection.js";
+const CustomTimeframeSelector = () => {
+  const ref = useRef(null);
+  const intl = useIntl();
+  const { details, onChange } = useTimeframeSelectorContext();
+  const { min, max, showError, precision, required } = useInternalTimeframeSelectorContext();
+  const rootRef = useRef(null);
+  const dateTimeRangePickerId = useId();
+  const hintId = useId();
+  const labelId = useId();
+  const { from, to } = parseValue(details);
+  const [timeframe, setTimeframe] = useState(
+    from && to ? {
+      from,
+      to
+    } : null
+  );
+  const { required: contextRequired } = useFormFieldContext();
+  const callback = useCallback(
+    (state2, action) => formFieldMessagesReducer(state2, action),
+    [dateTimeRangePickerId]
+  );
+  const [state, dispatch] = useReducer(callback, {
+    customMessages: [],
+    formControlMessages: [],
+    showError: false,
+    isTouched: false
+  });
+  const handleApply = useCallback(() => {
+    if (!state.isValid) {
+      return;
+    }
+    const currentValue = ref.current?.getCurrentValue();
+    const refFrom = currentValue?.from?.value;
+    const refTo = currentValue?.to?.value;
+    let currentTimeframe = timeframe;
+    const onlyFromIsEmpty = !refFrom && !!refTo && refTo !== "now()";
+    const onlyToIsEmpty = !refTo && !!refFrom && refFrom !== "now()";
+    if (onlyFromIsEmpty || onlyToIsEmpty) {
+      const from3 = ref.current?.inputRef.from?.value || "now()";
+      const to3 = ref.current?.inputRef.to?.value || "now()";
+      const parsedTimeframe = parseValue({ from: from3, to: to3 }, false, precision);
+      if (parsedTimeframe.from && parsedTimeframe.to) {
+        if (isOutsideRange(
+          {
+            from: parsedTimeframe.from.value,
+            to: parsedTimeframe.to.value
+          },
+          min,
+          max
+        )) {
+          return;
+        }
+        const sortedTimeframe = sortTimeframeValues({
+          from: parsedTimeframe.from,
+          to: parsedTimeframe.to
+        });
+        if (sortedTimeframe.from && sortedTimeframe.to) {
+          currentTimeframe = {
+            from: sortedTimeframe.from,
+            to: sortedTimeframe.to
+          };
+        }
+      }
+    }
+    const { from: from2, to: to2 } = currentTimeframe ? parseValue(currentTimeframe, false, precision) : { from: null, to: null };
+    if (from2 && to2) {
+      const timeframe2 = { from: from2, to: to2 };
+      onChange(timeframe2);
+      saveRecentTimeframe(timeframe2);
+      return;
+    }
+    if (!required && !contextRequired) {
+      onChange(null);
+    }
+  }, [
+    timeframe,
+    state.isValid,
+    precision,
+    required,
+    contextRequired,
+    min,
+    max,
+    onChange
+  ]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key !== "Enter" || // Checks if the event target is a child of the DateTimeRangePicker root element ref.
+      !ref.current?.element?.contains(e.target)) {
+        return;
+      }
+      ref.current?.validate();
+      handleApply();
+    },
+    [handleApply]
+  );
+  const isScreenLargerThanMobile = useBreakpoint(
+    `(min-width: ${BreakpointsJS.Max.Mobile}px)`,
+    true
+  );
+  useEffect(() => {
+    if (showError) {
+      ref.current?.validate();
+    }
+  }, [showError]);
+  useEffect(() => {
+    const timeframe2 = { from: from?.value, to: to?.value };
+    const tempMin = filterOutGrailLimit(timeframe2, min);
+    const tempMax = filterOutGrailLimit(timeframe2, max);
+    if (!tempMin && !tempMax) {
+      dispatch({
+        type: FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: {
+          id: hintId,
+          messageType: "formcontrol"
+        }
+      });
+      return;
+    }
+    dispatch({
+      type: FormFieldMessagesAction.ADDMESSAGE,
+      payload: {
+        id: hintId,
+        variant: "hint",
+        message: getOutsideRangeMessage(intl, tempMin, tempMax, precision),
+        messageType: "formcontrol",
+        validityStateKey: "customError"
+      }
+    });
+  }, [min, max, dispatch, intl, precision, hintId, from?.value, to?.value]);
+  const messageContextValue = useMemo(
+    () => ({
+      dispatch,
+      state
+    }),
+    [dispatch, state]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: rootRef, className: customTimeframeSelectorStyles.overlayRoot, children: /* @__PURE__ */ jsxs(FormFieldMessageContext.Provider, { value: messageContextValue, children: [
+    /* @__PURE__ */ jsxs(Flex, { className: customTimeframeSelectorStyles.wrapper, children: [
+      /* @__PURE__ */ jsx("div", { onKeyDown: handleKeyDown, children: /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: {}, children: /* @__PURE__ */ jsxs(
+        "fieldset",
+        {
+          className: customTimeframeSelectorStyles.fieldset,
+          "aria-labelledby": labelId,
+          children: [
+            /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: dateTimeRangePickerId,
+                required: required || contextRequired,
+                id: labelId,
+                children: intl.formatMessage(
+                  TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs(InputGroup, { style: { gridAutoColumns: "1fr auto" }, children: [
+              /* @__PURE__ */ jsx(
+                DateTimeRangePicker,
+                {
+                  ref,
+                  id: dateTimeRangePickerId,
+                  required: required || contextRequired,
+                  min,
+                  max,
+                  precision,
+                  value: timeframe,
+                  onChange: setTimeframe,
+                  style: { gridTemplateColumns: "1fr auto" }
+                }
+              ),
+              isScreenLargerThanMobile && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  color: "primary",
+                  variant: "accent",
+                  type: "submit",
+                  onClick: handleApply,
+                  style: {
+                    alignSelf: "end",
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0
+                  },
+                  children: intl.formatMessage(
+                    TIMEFRAME_SELECTOR_MESSAGES.applyButton
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx(FormFieldMessages, {})
+    ] }),
+    !isScreenLargerThanMobile && /* @__PURE__ */ jsx(
+      Button,
+      {
+        color: "primary",
+        variant: "accent",
+        type: "submit",
+        style: { alignSelf: "end" },
+        onClick: handleApply,
+        children: intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.applyButton)
+      }
+    )
+  ] }) });
+};
+CustomTimeframeSelector["displayName"] = "CustomTimeframeSelector";
+export {
+  CustomTimeframeSelector
+};
+//# sourceMappingURL=CustomTimeframeSelector.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.tsx"],
+  "sourcesContent": ["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport BreakpointsJS from '@dynatrace/strato-design-tokens/breakpoints-js';\n\nimport * as customTimeframeSelectorStyles from './CustomTimeframeSelector.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DateTimeRangePicker } from '../../../../forms/date-time-range-picker/DateTimeRangePicker.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from '../../../../forms/date-time-range-picker/types.js';\nimport { FormFieldMessages } from '../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js';\nimport { Label } from '../../../../forms/forms-core/components/label/Label.js';\nimport { _FormFieldContext as FormFieldContext } from '../../../../forms/forms-core/contexts/FormFieldContext.js';\nimport { FormFieldMessageContext } from '../../../../forms/forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../../../forms/forms-core/hooks/useFormFieldContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  filterOutGrailLimit,\n  sortTimeframeValues,\n} from '../../../../forms/forms-core/time/helpers.js';\nimport {\n  getOutsideRangeMessage,\n  parseValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport type { FormFieldMessageContextState } from '../../../../forms/forms-core/types/formfield-messages.types.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { useBreakpoint } from '../../../../layouts/hooks/useBreakpoint.js';\nimport { InputGroup } from '../../../../layouts/input-group/InputGroup.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { useInternalTimeframeSelectorContext } from '../../hooks/useInternalTimeframeSelectorContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { saveRecentTimeframe } from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n/**\n * Custom Timeframe Selector component used inside the overlay.\n */\nexport const CustomTimeframeSelector = () => {\n  const ref = useRef<DateTimeRangePickerRef | null>(null);\n  const intl = useIntl();\n  const { details, onChange } = useTimeframeSelectorContext();\n  const { min, max, showError, precision, required } =\n    useInternalTimeframeSelectorContext();\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const dateTimeRangePickerId = useId();\n\n  const hintId = useId();\n\n  const labelId = useId();\n\n  const { from, to } = parseValue(details);\n  const [timeframe, setTimeframe] = useState<DateTimeRangePickerProps['value']>(\n    from && to\n      ? {\n          from,\n          to,\n        }\n      : null,\n  );\n\n  const { required: contextRequired } = useFormFieldContext();\n\n  const callback = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [dateTimeRangePickerId],\n  );\n\n  const [state, dispatch] = useReducer(callback, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: false,\n    isTouched: false,\n  });\n\n  /** Handle form submission. */\n  const handleApply = useCallback(() => {\n    if (!state.isValid) {\n      return;\n    }\n\n    const currentValue = ref.current?.getCurrentValue();\n    const refFrom = currentValue?.from?.value;\n    const refTo = currentValue?.to?.value;\n\n    let currentTimeframe = timeframe;\n\n    const onlyFromIsEmpty = !refFrom && !!refTo && refTo !== 'now()';\n    const onlyToIsEmpty = !refTo && !!refFrom && refFrom !== 'now()';\n\n    if (onlyFromIsEmpty || onlyToIsEmpty) {\n      // If one of the fields is empty, fill it with 'Now'\n      const from = ref.current?.inputRef.from?.value || 'now()';\n      const to = ref.current?.inputRef.to?.value || 'now()';\n      const parsedTimeframe = parseValue({ from, to }, false, precision);\n\n      if (parsedTimeframe.from && parsedTimeframe.to) {\n        // Exit if the parsed timeframe is out of bounds\n        if (\n          isOutsideRange(\n            {\n              from: parsedTimeframe.from.value,\n              to: parsedTimeframe.to.value,\n            },\n            min,\n            max,\n          )\n        ) {\n          return;\n        }\n\n        const sortedTimeframe = sortTimeframeValues({\n          from: parsedTimeframe.from,\n          to: parsedTimeframe.to,\n        });\n\n        if (sortedTimeframe.from && sortedTimeframe.to) {\n          currentTimeframe = {\n            from: sortedTimeframe.from,\n            to: sortedTimeframe.to,\n          };\n        }\n      }\n    }\n\n    /** parse date-picker inputs to have latest expression values on form submission */\n    const { from, to } = currentTimeframe\n      ? parseValue(currentTimeframe, false, precision)\n      : { from: null, to: null };\n\n    if (from && to) {\n      const timeframe = { from, to };\n      onChange(timeframe);\n      saveRecentTimeframe(timeframe);\n      return;\n    }\n\n    if (!required && !contextRequired) {\n      onChange(null);\n    }\n  }, [\n    timeframe,\n    state.isValid,\n    precision,\n    required,\n    contextRequired,\n    min,\n    max,\n    onChange,\n  ]);\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (\n        e.key !== 'Enter' ||\n        // Checks if the event target is a child of the DateTimeRangePicker root element ref.\n        !ref.current?.element?.contains(e.target as HTMLElement)\n      ) {\n        return;\n      }\n\n      ref.current?.validate();\n      handleApply();\n    },\n    [handleApply],\n  );\n\n  const isScreenLargerThanMobile = useBreakpoint(\n    `(min-width: ${BreakpointsJS.Max.Mobile}px)`,\n    true,\n  );\n\n  // We want to initially show errors once the overlay is opened.\n  useEffect(() => {\n    if (showError) {\n      ref.current?.validate();\n    }\n  }, [showError]);\n\n  useEffect(() => {\n    const timeframe = { from: from?.value, to: to?.value };\n    // The default min or max is set according to the Grail min or max and shouldn't show in the info message, so we treat it as if it is never set.\n    const tempMin = filterOutGrailLimit(timeframe, min);\n    const tempMax = filterOutGrailLimit(timeframe, max);\n\n    if (!tempMin && !tempMax) {\n      dispatch({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: hintId,\n          messageType: 'formcontrol',\n        },\n      });\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.ADDMESSAGE,\n      payload: {\n        id: hintId,\n        variant: 'hint',\n        message: getOutsideRangeMessage(intl, tempMin, tempMax, precision),\n        messageType: 'formcontrol',\n        validityStateKey: 'customError',\n      },\n    });\n  }, [min, max, dispatch, intl, precision, hintId, from?.value, to?.value]);\n\n  const messageContextValue = useMemo(\n    () => ({\n      dispatch,\n      state,\n    }),\n    [dispatch, state],\n  );\n\n  return (\n    <div ref={rootRef} className={customTimeframeSelectorStyles.overlayRoot}>\n      <FormFieldMessageContext.Provider value={messageContextValue}>\n        <Flex className={customTimeframeSelectorStyles.wrapper}>\n          <div onKeyDown={handleKeyDown}>\n            {/* The context needs to be cleared so that the controlId doesn't get updated;\n          otherwise, the TimeframeSelector trigger would get the dateTimeRangePickerId\n          and clicking on the FormField label wouldn't focus it */}\n            {\n              // TODO: check if we can remove htmlFor here and pass in the controlId to the context\n            }\n            <FormFieldContext.Provider value={{}}>\n              <fieldset\n                className={customTimeframeSelectorStyles.fieldset}\n                aria-labelledby={labelId}\n              >\n                <Label\n                  htmlFor={dateTimeRangePickerId}\n                  required={required || contextRequired}\n                  id={labelId}\n                >\n                  {intl.formatMessage(\n                    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n                  )}\n                </Label>\n                <InputGroup style={{ gridAutoColumns: '1fr auto' }}>\n                  <DateTimeRangePicker\n                    ref={ref}\n                    id={dateTimeRangePickerId}\n                    required={required || contextRequired}\n                    min={min}\n                    max={max}\n                    precision={precision}\n                    value={timeframe}\n                    onChange={setTimeframe}\n                    style={{ gridTemplateColumns: '1fr auto' }}\n                  />\n                  {isScreenLargerThanMobile && (\n                    <Button\n                      color=\"primary\"\n                      variant=\"accent\"\n                      type=\"submit\"\n                      onClick={handleApply}\n                      style={{\n                        alignSelf: 'end',\n                        borderTopLeftRadius: 0,\n                        borderBottomLeftRadius: 0,\n                      }}\n                    >\n                      {intl.formatMessage(\n                        TIMEFRAME_SELECTOR_MESSAGES.applyButton,\n                      )}\n                    </Button>\n                  )}\n                </InputGroup>\n              </fieldset>\n            </FormFieldContext.Provider>\n          </div>\n          <FormFieldMessages />\n        </Flex>\n        {!isScreenLargerThanMobile && (\n          <Button\n            color=\"primary\"\n            variant=\"accent\"\n            type=\"submit\"\n            style={{ alignSelf: 'end' }}\n            onClick={handleApply}\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.applyButton)}\n          </Button>\n        )}\n      </FormFieldMessageContext.Provider>\n    </div>\n  );\n};\n\nCustomTimeframeSelector['displayName'] = 'CustomTimeframeSelector';\n"],
+  "mappings": "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",
+  "names": ["state", "from", "to", "timeframe"]
+}

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

@@ -0,0 +1,10 @@
+import "./CustomTimeframeSelector.css";
+var fieldset = "_at2xro0-3-1-0";
+var overlayRoot = "_at2xro1-3-1-0";
+var wrapper = "_at2xro2-3-1-0";
+export {
+  fieldset,
+  overlayRoot,
+  wrapper
+};
+//# sourceMappingURL=CustomTimeframeSelector.sty.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/filters/timeframe-selector/components/custom-timeframe-selector/CustomTimeframeSelector.css.ts"],
+  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-1-0';\nexport var overlayRoot = '_at2xro1-3-1-0';\nexport var wrapper = '_at2xro2-3-1-0';"],
+  "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,UAAU;",
+  "names": []
+}

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css

@@ -0,0 +1,28 @@
+._14xc6b0-3-1-0 {
+  background: var(--dt-colors-background-surface-default, #fff);
+  box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+  border-radius: var(--dt-borders-radius-surface-subdued, 9px);
+  z-index: var(--dt-elevations-overlay, 20);
+  overflow-y: auto;
+  box-sizing: border-box;
+  align-items: flex-start;
+  min-height: 0;
+  max-width: 100vw;
+}
+._14xc6b1-3-1-0 {
+  overflow-y: auto;
+  overflow-x: hidden;
+  width: 100%;
+}
+._14xc6b2-3-1-0 {
+  box-sizing: border-box;
+  min-width: 0;
+  width: 100%;
+  padding: var(--dt-spacings-size-6, 6px);
+}
+._14xc6b3-3-1-0 {
+  overflow-wrap: break-word;
+  font-size: var(--dt-typography-text-small-default-size, 12px);
+  line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}