@dynatrace/strato-components 3.12.2 → 3.13.2

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelectorRoot.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { TimeframeSelectorOverlay } from './components/overlay/TimeframeSelectorOverlay.js';\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { StepperButton } from './components/stepper/StepperButton.js';\nimport { TimeframeSelectorTooltip } from './components/TimeframeSelectorTooltip.js';\nimport {\n  isTimeframeSelectorCustomTriggerElement,\n  type TimeframeSelectorCustomTriggerProps,\n} from './components/trigger/CustomTrigger.js';\nimport {\n  isTimeframeSelectorTriggerElement,\n  Trigger,\n  type TimeframeSelectorTriggerProps,\n} from './components/trigger/Trigger.js';\nimport {\n  TIMEFRAMESELECTOR_ERROR_MESSAGES,\n  TIMEFRAME_SELECTOR_MESSAGES,\n} from './constants/timeframeSelectorMessages.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport * as styles from './TimeframeSelector.sty.js';\nimport type {\n  TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport { getTimeframePresets } from './utils/presets-helpers.js';\nimport {\n  TIMEFRAME_PRESETS_QUERY_KEY,\n  timeframeQueryClient,\n} from './utils/TimeframePresetsClient.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision, TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  validate,\n} from '../../core/time/validation.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport type { ValidateFieldOptions } from '../../forms/form/form.types.js';\nimport { useInternalFormRegistration } from '../../forms/form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { UseFormControlReturnType } from '../../forms/forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../../forms/forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldValidationAriaProps } from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../../forms/forms-core/hooks/useMinMaxLogger.js';\nimport { FormFieldMessagesAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  parseValue,\n  removePrecision,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { useContainerFocus } from '../../forms/hooks/useContainerFocus.js';\nimport type { TimeRangePickerRef } from '../../forms/shared-types.js';\nimport {\n  ValidityStateKey,\n  type ValidationState,\n} from '../../forms/validation/types.js';\nimport { useCustomMessageEmitter } from '../../forms/validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../../forms/validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../../forms/validation/validation-builders.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'TimeframeSelector';\n\n//#region Typings\ntype TimeframeSelectorSlotsAndPresetItemsMap = {\n  trigger: ReactElement<TimeframeSelectorTriggerProps> | null;\n  customTrigger: ReactElement<TimeframeSelectorCustomTriggerProps> | null;\n  presets: ReactNode;\n  presetItemsDisplayValuesMap: Map<string, ReactNode | undefined>;\n};\n//#endregion\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getItemSlots(children: ReactNode, precision?: Precision) {\n  const presetItemsDisplayValuesMap = new Map();\n  const slots: TimeframeSelectorSlotsAndPresetItemsMap = {\n    trigger: null,\n    customTrigger: null,\n    presets: null,\n    presetItemsDisplayValuesMap,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, Presets)) {\n      slots.presets = child;\n      for (const childItem of Children.toArray(child.props.children)) {\n        if (isSlot(childItem, PresetItem)) {\n          slots.presetItemsDisplayValuesMap.set(\n            `${removePrecision(\n              childItem.props.value.from,\n              precision,\n            )} ${removePrecision(childItem.props.value.to, precision)}`,\n            childItem.props.children,\n          );\n        }\n      }\n    } else if (isTimeframeSelectorCustomTriggerElement(child)) {\n      slots.customTrigger = child;\n    } else if (isTimeframeSelectorTriggerElement(child)) {\n      slots.trigger = child;\n    } else {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      devLog('The used child is not supported by the TimeframeSelector.');\n    }\n  }\n\n  return slots;\n}\n\n/** @internal */\nexport const TimeframeSelectorRoot = forwardRef<\n  TimeRangePickerRef,\n  Omit<\n    TimeframeSelectorProps,\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n  }\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const { formFieldLabelId } = useFormFieldContext();\n  const {\n    value: propValue,\n    defaultValue,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    clearable = false,\n    children,\n    onChange,\n    onFocus,\n    onBlur,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    name,\n    _form,\n    _messageTarget,\n    stepper = true,\n    onValidityChange,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    formControl,\n    ...remainingProps\n  } = props;\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly = false,\n    hint,\n    hintProps,\n    showError,\n    messageState: formFieldMessagesState,\n    messageDispatch: formFieldMessagesDispatch,\n  } = formControl;\n  const value = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorTimeframe,\n  );\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min);\n  const max = useTimeframeSelectorStore((state) => state.max);\n  const formatString = useTimeframeSelectorStore((state) => state.formatString);\n  const timeframeSelectorRef = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorRef,\n  );\n  const setDateTimeRangePickerTimeframe = useTimeframeSelectorStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n\n  const placeholder = intl.formatMessage({\n    defaultMessage: 'Select timeframe',\n    id: 'W+rTy8UuFKDho3mc',\n    description: 'Placeholder shown for the timeframe selector.',\n  });\n\n  const defaultTriggerLabel = intl.formatMessage(\n    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n  );\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'TimeframeSelector');\n\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => {\n      const errorKey = validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      return getValidationState(\n        errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n        'manual',\n        getValidationMessage(errorKey),\n        [inputId],\n      );\n    },\n  );\n\n  const getValidationMessage = useCallback(\n    (errorKey: TimeErrorKey | undefined): string | undefined => {\n      if (!errorKey) {\n        return undefined;\n      }\n      return formatTimeValidationMessage(errorKey, intl, {\n        value,\n        min,\n        max,\n        precision,\n        expectedFormat: formatString,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n    },\n    [intl, value, min, max, precision, formatString],\n  );\n\n  /** Handle overlay on open change. */\n  const onOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        setDateTimeRangePickerTimeframe(value);\n\n        if (!formFieldMessagesState.isTouched) {\n          const errorKey = validate(value, min, max, {\n            precision,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          emitValidationState(\n            getValidationState(\n              errorKey !== undefined\n                ? new ValidityStateKey(errorKey)\n                : undefined,\n              'blur',\n              getValidationMessage(errorKey),\n              [inputId],\n            ),\n          );\n        }\n      }\n    },\n    [\n      emitValidationState,\n      formFieldMessagesDispatch,\n      formFieldMessagesState.isTouched,\n      formatString,\n      max,\n      min,\n      precision,\n      required,\n      setDateTimeRangePickerTimeframe,\n      timeframeSelectorRef,\n      value,\n    ],\n  );\n\n  const {\n    targetRef,\n    overlayRef,\n    triggerRef,\n    overlayProps,\n    overlayState,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    offset: 4,\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    heightStrategy: 'maxViewport',\n    disabled,\n    onOpenChange,\n  });\n\n  // Prefetch timeframe presets on mount so opening the overlay can use cached data immediately.\n  useEffect(() => {\n    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {\n      return;\n    }\n\n    timeframeQueryClient\n      .prefetchQuery({\n        queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n        queryFn: getTimeframePresets,\n      })\n      .catch(() => undefined);\n  }, []);\n\n  const details = useMemo((): TimeframeValueDetails | null => {\n    const { from, to } = parseValue(value);\n    return from && to ? { from, to } : null;\n  }, [value]);\n\n  const { customTrigger, trigger, presets, presetItemsDisplayValuesMap } =\n    useMemo(() => getItemSlots(children, precision), [children, precision]);\n\n  const presetItemName = presetItemsDisplayValuesMap.get(\n    `${details?.from?.value} ${details?.to?.value}`,\n  );\n\n  const {\n    displayValue,\n    isInvalid: displayValueError,\n    hint: displayValueHint,\n  } = getTimeframeDisplayValueProps(\n    value,\n    intl,\n    placeholder,\n    precision,\n    presetItemName,\n    required,\n    min?.value,\n    max?.value,\n  );\n\n  const triggerErrorId = useId();\n  const inputId = useId();\n  const overlayOwnerId = useId();\n\n  // We need to create a ref to give access to the trigger in our imperative handle.\n  const imperativeTriggerRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fromInputRef = useRef<HTMLInputElement>(null);\n  const toInputRef = useRef<HTMLInputElement>(null);\n  const ariaLabelingProps = {\n    'aria-label':\n      ariaLabelProp ??\n      (!ariaLabelledByProp && !formFieldLabelId\n        ? defaultTriggerLabel\n        : undefined),\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  };\n  const ariaFormProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  const validateField = useCallback(\n    ({ reveal, trigger }: ValidateFieldOptions): ValidationState => {\n      if (reveal) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const errorKey = validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      return emitValidationState(\n        getValidationState(\n          errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n          trigger,\n          getValidationMessage(errorKey),\n          [inputId],\n        ),\n      );\n    },\n    [\n      formFieldMessagesDispatch,\n      emitValidationState,\n      value,\n      min,\n      max,\n      precision,\n      timeframeSelectorRef,\n      formatString,\n      required,\n      getValidationMessage,\n      inputId,\n    ],\n  );\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value,\n    focus: () => imperativeTriggerRef.current?.focus(),\n    validateField: (options) => Promise.resolve(validateField(options)),\n    resetValidation: () => {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false },\n      });\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n      for (const msg of formFieldMessagesState.customMessages) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: { id: msg.id, messageType: 'custom' },\n        });\n      }\n    },\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\n\n  useImperativeHandle(\n    forwardedRef,\n    (): TimeRangePickerRef => ({\n      element: containerRef.current,\n      triggerRef: imperativeTriggerRef.current,\n      inputRef: { from: fromInputRef.current, to: toInputRef.current },\n      open: overlayState.open,\n      close: overlayState.close,\n      focus() {\n        imperativeTriggerRef.current?.focus?.();\n      },\n      validate() {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        const errorKey = validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n\n        emitValidationState(\n          getValidationState(\n            errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n            'manual',\n            getValidationMessage(errorKey),\n            [inputId],\n          ),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        const errorKey = validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n\n        const state = getValidationState(\n          errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n          'manual',\n          getValidationMessage(errorKey),\n          [inputId],\n        );\n        return emitValidationState(state);\n      },\n    }),\n    [\n      formFieldMessagesDispatch,\n      emitValidationState,\n      getValidationMessage,\n      overlayState.close,\n      overlayState.open,\n    ],\n  );\n\n  useEffect(() => {\n    if (overlayState.isOpen) {\n      return;\n    }\n\n    if (!displayValueError && triggerErrorId) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n    }\n  }, [\n    displayValueError,\n    displayValueHint,\n    overlayState.isOpen,\n    triggerErrorId,\n    formFieldMessagesDispatch,\n    inputId,\n  ]);\n\n  // Surface the validation state on every value change (automatic `change`\n  // trigger) so `onValidityChange` stays in sync as the timeframe is edited, not just\n  // on blur or manual validation. The error key is computed without dispatching\n  // messages \u2014 the displayed error is already driven by the value pipeline.\n  useEffect(() => {\n    const errorKey = validate(value, min, max, {\n      precision,\n      checkOrder: true,\n      ref: timeframeSelectorRef,\n      expectedFormat: formatString,\n      valueMode: 'timeframeSelector',\n      required,\n      errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n    });\n    emitValidationState(\n      getValidationState(\n        errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n        'change',\n        getValidationMessage(errorKey),\n        [inputId],\n      ),\n    );\n  }, [\n    value,\n    min,\n    max,\n    precision,\n    formatString,\n    required,\n    timeframeSelectorRef,\n    emitValidationState,\n    getValidationMessage,\n  ]);\n\n  const triggerButtonRef = useMergeRefs([\n    targetRef,\n    triggerRef,\n    imperativeTriggerRef,\n  ]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      fromInputRef.current?.reportValidity();\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      if (!formFieldMessagesState.isTouched) {\n        const errorKey = validate(value, min, max, {\n          precision,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n        emitValidationState(\n          getValidationState(\n            errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n            'blur',\n            getValidationMessage(errorKey),\n            [inputId],\n          ),\n        );\n      }\n    }\n  }, [\n    overlayState.isOpen,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.isTouched,\n    emitValidationState,\n    getValidationMessage,\n    value,\n    min,\n    max,\n    precision,\n    timeframeSelectorRef,\n    formatString,\n    required,\n  ]);\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId,\n    // When the overlay is open, autoFocus moves focus into the portal. The browser\n    // fires a blur on the trigger with relatedTarget=null (the portal is outside the\n    // container DOM). Suppress that blur so hasFocusRef stays true and focus\n    // returning to the trigger on close does not re-fire onFocus.\n    shouldSuppressBlur: () => overlayState.isOpen,\n  });\n\n  const triggerProps = useMemo(\n    () => ({\n      disabled,\n      onBlur: handleOnBlur,\n      ref: triggerButtonRef,\n      id,\n      'aria-disabled': ariaDisabled,\n      ...ariaFormProps,\n      ...(readOnly ? {} : overlayTriggerProps),\n      'data-dt-component': COMPONENT_NAME,\n    }),\n    [\n      disabled,\n      handleOnBlur,\n      triggerButtonRef,\n      id,\n      ariaDisabled,\n      ariaFormProps,\n      readOnly,\n      overlayTriggerProps,\n    ],\n  );\n\n  const timeframeSelectorContextValue = useMemo(\n    () => ({\n      details,\n      displayValue,\n      triggerProps,\n      hint: displayValueHint,\n      readOnly,\n      showError,\n      disabled,\n    }),\n    [\n      disabled,\n      details,\n      readOnly,\n      displayValue,\n      triggerProps,\n      displayValueHint,\n      showError,\n    ],\n  );\n\n  return (\n    <TimeframeSelectorContext.Provider value={timeframeSelectorContextValue}>\n      <Flex\n        gap={4}\n        flexDirection=\"column\"\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={containerRef}\n        className={clsx(consumerClassName, containerClassName, styles.root)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component=\"TimeframeSelector\"\n        {...containerFocusProps}\n      >\n        <VisuallyHidden>\n          <input\n            id={inputId}\n            type=\"text\"\n            ref={fromInputRef}\n            name={name && `${name}-from`}\n            form={_form}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.from.value ?? ''}\n            onInvalid={(event) => {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n\n              // Prevents the browser validation pop up.\n              event.preventDefault();\n            }}\n            onChange={() => {\n              /** noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n          <input\n            type=\"text\"\n            ref={toInputRef}\n            name={name && `${name}-to`}\n            form={_form}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.to.value ?? ''}\n            onInvalid={(event) => event.preventDefault()}\n            onChange={() => {\n              /**noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n        </VisuallyHidden>\n        <InputGroup style={{ gridAutoColumns: '1fr max-content max-content' }}>\n          <TimeframeSelectorTooltip\n            displayValue={displayValue}\n            value={value}\n            disabled={disabled}\n          >\n            {customTrigger ?? trigger ?? <Trigger />}\n          </TimeframeSelectorTooltip>\n          {stepper && (\n            <>\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"backward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"forward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n            </>\n          )}\n        </InputGroup>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabled || !!ariaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n        {overlayState.isOpen && (\n          <TimeframeSelectorOverlay\n            ref={overlayRef}\n            overlayProps={overlayProps}\n            overlayClose={overlayState.close}\n            overlayOwnerId={overlayOwnerId}\n            // eslint-disable-next-line @typescript-eslint/no-deprecated\n            clearable={clearable}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            {presets}\n          </TimeframeSelectorOverlay>\n        )}\n      </Flex>\n    </TimeframeSelectorContext.Provider>\n  );\n});\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { TimeframeSelectorOverlay } from './components/overlay/TimeframeSelectorOverlay.js';\nimport { PresetItem } from './components/presets/PresetItem.js';\nimport { Presets } from './components/presets/Presets.js';\nimport { StepperButton } from './components/stepper/StepperButton.js';\nimport { TimeframeSelectorTooltip } from './components/TimeframeSelectorTooltip.js';\nimport {\n  isTimeframeSelectorCustomTriggerElement,\n  type TimeframeSelectorCustomTriggerProps,\n} from './components/trigger/CustomTrigger.js';\nimport {\n  isTimeframeSelectorTriggerElement,\n  Trigger,\n  type TimeframeSelectorTriggerProps,\n} from './components/trigger/Trigger.js';\nimport {\n  TIMEFRAMESELECTOR_ERROR_MESSAGES,\n  TIMEFRAME_SELECTOR_MESSAGES,\n} from './constants/timeframeSelectorMessages.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport * as styles from './TimeframeSelector.sty.js';\nimport type {\n  TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport { getTimeframePresets } from './utils/presets-helpers.js';\nimport {\n  TIMEFRAME_PRESETS_QUERY_KEY,\n  timeframeQueryClient,\n} from './utils/TimeframePresetsClient.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision, TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  validate,\n} from '../../core/time/validation.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport type { ValidateFieldOptions } from '../../forms/form/form.types.js';\nimport { useInternalFormRegistration } from '../../forms/form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { UseFormControlReturnType } from '../../forms/forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../../forms/forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldValidationAriaProps } from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../../forms/forms-core/hooks/useMinMaxLogger.js';\nimport { FormFieldMessagesAction } from '../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  parseValue,\n  removePrecision,\n} from '../../forms/forms-core/time/timeParser.js';\nimport { useContainerFocus } from '../../forms/hooks/useContainerFocus.js';\nimport type { TimeRangePickerRef } from '../../forms/shared-types.js';\nimport {\n  ValidityStateKey,\n  type ValidationState,\n} from '../../forms/validation/types.js';\nimport { useCustomMessageEmitter } from '../../forms/validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../../forms/validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../../forms/validation/validation-builders.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'TimeframeSelector';\n\n//#region Typings\ntype TimeframeSelectorSlotsAndPresetItemsMap = {\n  trigger: ReactElement<TimeframeSelectorTriggerProps> | null;\n  customTrigger: ReactElement<TimeframeSelectorCustomTriggerProps> | null;\n  presets: ReactNode;\n  presetItemsDisplayValuesMap: Map<string, ReactNode | undefined>;\n};\n//#endregion\n\n/** Iterates over child nodes to extract specific component slots. */\nfunction getItemSlots(children: ReactNode, precision?: Precision) {\n  const presetItemsDisplayValuesMap = new Map();\n  const slots: TimeframeSelectorSlotsAndPresetItemsMap = {\n    trigger: null,\n    customTrigger: null,\n    presets: null,\n    presetItemsDisplayValuesMap,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, Presets)) {\n      slots.presets = child;\n      for (const childItem of Children.toArray(child.props.children)) {\n        if (isSlot(childItem, PresetItem)) {\n          slots.presetItemsDisplayValuesMap.set(\n            `${removePrecision(\n              childItem.props.value.from,\n              precision,\n            )} ${removePrecision(childItem.props.value.to, precision)}`,\n            childItem.props.children,\n          );\n        }\n      }\n    } else if (isTimeframeSelectorCustomTriggerElement(child)) {\n      slots.customTrigger = child;\n    } else if (isTimeframeSelectorTriggerElement(child)) {\n      slots.trigger = child;\n    } else {\n      // do nothing if the child is null (when rendered conditionally for example) and throw a warning otherwise\n      devLog('The used child is not supported by the TimeframeSelector.');\n    }\n  }\n\n  return slots;\n}\n\n/** @internal */\nexport const TimeframeSelectorRoot = forwardRef<\n  TimeRangePickerRef,\n  Omit<\n    TimeframeSelectorProps,\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n  }\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const { formFieldLabelId } = useFormFieldContext();\n  const {\n    value: propValue,\n    defaultValue,\n    // oxlint-disable-next-line typescript/no-deprecated\n    clearable = false,\n    children,\n    onChange,\n    onFocus,\n    onBlur,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    name,\n    _form,\n    _messageTarget,\n    stepper = true,\n    onValidityChange,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    formControl,\n    ...remainingProps\n  } = props;\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly = false,\n    hint,\n    hintProps,\n    showError,\n    messageState: formFieldMessagesState,\n    messageDispatch: formFieldMessagesDispatch,\n  } = formControl;\n  const value = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorTimeframe,\n  );\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const min = useTimeframeSelectorStore((state) => state.min);\n  const max = useTimeframeSelectorStore((state) => state.max);\n  const formatString = useTimeframeSelectorStore((state) => state.formatString);\n  const timeframeSelectorRef = useTimeframeSelectorStore(\n    (state) => state.timeframeSelectorRef,\n  );\n  const setDateTimeRangePickerTimeframe = useTimeframeSelectorStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n\n  const placeholder = intl.formatMessage({\n    defaultMessage: 'Select timeframe',\n    id: 'W+rTy8UuFKDho3mc',\n    description: 'Placeholder shown for the timeframe selector.',\n  });\n\n  const defaultTriggerLabel = intl.formatMessage(\n    TIMEFRAME_SELECTOR_MESSAGES.timeframeLabel,\n  );\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'TimeframeSelector');\n\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => {\n      const errorKey = validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      return getValidationState(\n        errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n        'manual',\n        getValidationMessage(errorKey),\n        [inputId],\n      );\n    },\n  );\n\n  const getValidationMessage = useCallback(\n    (errorKey: TimeErrorKey | undefined): string | undefined => {\n      if (!errorKey) {\n        return undefined;\n      }\n      return formatTimeValidationMessage(errorKey, intl, {\n        value,\n        min,\n        max,\n        precision,\n        expectedFormat: formatString,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n    },\n    [intl, value, min, max, precision, formatString],\n  );\n\n  /** Handle overlay on open change. */\n  const onOpenChange = useCallback(\n    (isOpen: boolean) => {\n      if (!isOpen) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        setDateTimeRangePickerTimeframe(value);\n\n        if (!formFieldMessagesState.isTouched) {\n          const errorKey = validate(value, min, max, {\n            precision,\n            checkOrder: true,\n            ref: timeframeSelectorRef,\n            expectedFormat: formatString,\n            valueMode: 'timeframeSelector',\n            required,\n            errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n          });\n          emitValidationState(\n            getValidationState(\n              errorKey !== undefined\n                ? new ValidityStateKey(errorKey)\n                : undefined,\n              'blur',\n              getValidationMessage(errorKey),\n              [inputId],\n            ),\n          );\n        }\n      }\n    },\n    [\n      emitValidationState,\n      formFieldMessagesDispatch,\n      formFieldMessagesState.isTouched,\n      formatString,\n      max,\n      min,\n      precision,\n      required,\n      setDateTimeRangePickerTimeframe,\n      timeframeSelectorRef,\n      value,\n    ],\n  );\n\n  const {\n    targetRef,\n    overlayRef,\n    triggerRef,\n    overlayProps,\n    overlayState,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    offset: 4,\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    heightStrategy: 'maxViewport',\n    disabled,\n    onOpenChange,\n  });\n\n  // Prefetch timeframe presets on mount so opening the overlay can use cached data immediately.\n  useEffect(() => {\n    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {\n      return;\n    }\n\n    timeframeQueryClient\n      .prefetchQuery({\n        queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n        queryFn: getTimeframePresets,\n      })\n      .catch(() => undefined);\n  }, []);\n\n  const details = useMemo((): TimeframeValueDetails | null => {\n    const { from, to } = parseValue(value);\n    return from && to ? { from, to } : null;\n  }, [value]);\n\n  const { customTrigger, trigger, presets, presetItemsDisplayValuesMap } =\n    useMemo(() => getItemSlots(children, precision), [children, precision]);\n\n  const presetItemName = presetItemsDisplayValuesMap.get(\n    `${details?.from?.value} ${details?.to?.value}`,\n  );\n\n  const {\n    displayValue,\n    isInvalid: displayValueError,\n    hint: displayValueHint,\n  } = getTimeframeDisplayValueProps(\n    value,\n    intl,\n    placeholder,\n    precision,\n    presetItemName,\n    required,\n    min?.value,\n    max?.value,\n  );\n\n  const triggerErrorId = useId();\n  const inputId = useId();\n  const overlayOwnerId = useId();\n\n  // We need to create a ref to give access to the trigger in our imperative handle.\n  const imperativeTriggerRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fromInputRef = useRef<HTMLInputElement>(null);\n  const toInputRef = useRef<HTMLInputElement>(null);\n  const ariaLabelingProps = {\n    'aria-label':\n      ariaLabelProp ??\n      (!ariaLabelledByProp && !formFieldLabelId\n        ? defaultTriggerLabel\n        : undefined),\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  };\n  const ariaFormProps = useFormFieldValidationAriaProps(ariaLabelingProps);\n\n  const validateField = useCallback(\n    ({ reveal, trigger }: ValidateFieldOptions): ValidationState => {\n      if (reveal) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const errorKey = validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: timeframeSelectorRef,\n        expectedFormat: formatString,\n        valueMode: 'timeframeSelector',\n        required,\n        errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n      });\n      return emitValidationState(\n        getValidationState(\n          errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n          trigger,\n          getValidationMessage(errorKey),\n          [inputId],\n        ),\n      );\n    },\n    [\n      formFieldMessagesDispatch,\n      emitValidationState,\n      value,\n      min,\n      max,\n      precision,\n      timeframeSelectorRef,\n      formatString,\n      required,\n      getValidationMessage,\n      inputId,\n    ],\n  );\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value,\n    focus: () => imperativeTriggerRef.current?.focus(),\n    validateField: (options) => Promise.resolve(validateField(options)),\n    resetValidation: () => {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false },\n      });\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n      for (const msg of formFieldMessagesState.customMessages) {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.REMOVEMESSAGE,\n          payload: { id: msg.id, messageType: 'custom' },\n        });\n      }\n    },\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\n\n  useImperativeHandle(\n    forwardedRef,\n    (): TimeRangePickerRef => ({\n      element: containerRef.current,\n      triggerRef: imperativeTriggerRef.current,\n      inputRef: { from: fromInputRef.current, to: toInputRef.current },\n      open: overlayState.open,\n      close: overlayState.close,\n      focus() {\n        imperativeTriggerRef.current?.focus?.();\n      },\n      validate() {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        const errorKey = validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n\n        emitValidationState(\n          getValidationState(\n            errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n            'manual',\n            getValidationMessage(errorKey),\n            [inputId],\n          ),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        const errorKey = validate(value, min, max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n\n        const state = getValidationState(\n          errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n          'manual',\n          getValidationMessage(errorKey),\n          [inputId],\n        );\n        return emitValidationState(state);\n      },\n    }),\n    [\n      formFieldMessagesDispatch,\n      emitValidationState,\n      getValidationMessage,\n      overlayState.close,\n      overlayState.open,\n    ],\n  );\n\n  useEffect(() => {\n    if (overlayState.isOpen) {\n      return;\n    }\n\n    if (!displayValueError && triggerErrorId) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n    }\n  }, [\n    displayValueError,\n    displayValueHint,\n    overlayState.isOpen,\n    triggerErrorId,\n    formFieldMessagesDispatch,\n    inputId,\n  ]);\n\n  // Surface the validation state on every value change (automatic `change`\n  // trigger) so `onValidityChange` stays in sync as the timeframe is edited, not just\n  // on blur or manual validation. The error key is computed without dispatching\n  // messages \u2014 the displayed error is already driven by the value pipeline.\n  useEffect(() => {\n    const errorKey = validate(value, min, max, {\n      precision,\n      checkOrder: true,\n      ref: timeframeSelectorRef,\n      expectedFormat: formatString,\n      valueMode: 'timeframeSelector',\n      required,\n      errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n    });\n    emitValidationState(\n      getValidationState(\n        errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n        'change',\n        getValidationMessage(errorKey),\n        [inputId],\n      ),\n    );\n  }, [\n    value,\n    min,\n    max,\n    precision,\n    formatString,\n    required,\n    timeframeSelectorRef,\n    emitValidationState,\n    getValidationMessage,\n  ]);\n\n  const triggerButtonRef = useMergeRefs([\n    targetRef,\n    triggerRef,\n    imperativeTriggerRef,\n  ]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      fromInputRef.current?.reportValidity();\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: true },\n      });\n\n      if (!formFieldMessagesState.isTouched) {\n        const errorKey = validate(value, min, max, {\n          precision,\n          checkOrder: true,\n          ref: timeframeSelectorRef,\n          expectedFormat: formatString,\n          valueMode: 'timeframeSelector',\n          required,\n          errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES,\n        });\n        emitValidationState(\n          getValidationState(\n            errorKey !== undefined ? new ValidityStateKey(errorKey) : undefined,\n            'blur',\n            getValidationMessage(errorKey),\n            [inputId],\n          ),\n        );\n      }\n    }\n  }, [\n    overlayState.isOpen,\n    formFieldMessagesDispatch,\n    formFieldMessagesState.isTouched,\n    emitValidationState,\n    getValidationMessage,\n    value,\n    min,\n    max,\n    precision,\n    timeframeSelectorRef,\n    formatString,\n    required,\n  ]);\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId,\n    // When the overlay is open, autoFocus moves focus into the portal. The browser\n    // fires a blur on the trigger with relatedTarget=null (the portal is outside the\n    // container DOM). Suppress that blur so hasFocusRef stays true and focus\n    // returning to the trigger on close does not re-fire onFocus.\n    shouldSuppressBlur: () => overlayState.isOpen,\n  });\n\n  const triggerProps = useMemo(\n    () => ({\n      disabled,\n      onBlur: handleOnBlur,\n      ref: triggerButtonRef,\n      id,\n      'aria-disabled': ariaDisabled,\n      ...ariaFormProps,\n      ...(readOnly ? {} : overlayTriggerProps),\n      'data-dt-component': COMPONENT_NAME,\n    }),\n    [\n      disabled,\n      handleOnBlur,\n      triggerButtonRef,\n      id,\n      ariaDisabled,\n      ariaFormProps,\n      readOnly,\n      overlayTriggerProps,\n    ],\n  );\n\n  const timeframeSelectorContextValue = useMemo(\n    () => ({\n      details,\n      displayValue,\n      triggerProps,\n      hint: displayValueHint,\n      readOnly,\n      showError,\n      disabled,\n    }),\n    [\n      disabled,\n      details,\n      readOnly,\n      displayValue,\n      triggerProps,\n      displayValueHint,\n      showError,\n    ],\n  );\n\n  return (\n    <TimeframeSelectorContext.Provider value={timeframeSelectorContextValue}>\n      <Flex\n        gap={4}\n        flexDirection=\"column\"\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        ref={containerRef}\n        className={clsx(consumerClassName, containerClassName, styles.root)}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component=\"TimeframeSelector\"\n        {...containerFocusProps}\n      >\n        <VisuallyHidden>\n          <input\n            id={inputId}\n            type=\"text\"\n            ref={fromInputRef}\n            name={name && `${name}-from`}\n            form={_form}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.from.value ?? ''}\n            onInvalid={(event) => {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n\n              // Prevents the browser validation pop up.\n              event.preventDefault();\n            }}\n            onChange={() => {\n              /** noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n          <input\n            type=\"text\"\n            ref={toInputRef}\n            name={name && `${name}-to`}\n            form={_form}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.to.value ?? ''}\n            onInvalid={(event) => event.preventDefault()}\n            onChange={() => {\n              /**noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n        </VisuallyHidden>\n        <InputGroup style={{ gridAutoColumns: '1fr max-content max-content' }}>\n          <TimeframeSelectorTooltip\n            displayValue={displayValue}\n            value={value}\n            disabled={disabled}\n          >\n            {customTrigger ?? trigger ?? <Trigger />}\n          </TimeframeSelectorTooltip>\n          {stepper && (\n            <>\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"backward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n              <StepperButton\n                disabled={disabled || readOnly}\n                direction=\"forward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n            </>\n          )}\n        </InputGroup>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabled || !!ariaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n        {overlayState.isOpen && (\n          <TimeframeSelectorOverlay\n            ref={overlayRef}\n            overlayProps={overlayProps}\n            overlayClose={overlayState.close}\n            overlayOwnerId={overlayOwnerId}\n            // oxlint-disable-next-line typescript/no-deprecated\n            clearable={clearable}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          >\n            {presets}\n          </TimeframeSelectorOverlay>\n        )}\n      </Flex>\n    </TimeframeSelectorContext.Provider>\n  );\n});\n"],
   "mappings": "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",
   "names": ["trigger"]
 }

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

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

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

@@ -1,7 +1,7 @@
 import "./CustomTimeframeSelector.css";
-var fieldset = "_at2xro0-3-12-2";
-var overlayRoot = "_at2xro1-3-12-2";
-var wrapper = "_at2xro2-3-12-2";
+var fieldset = "_at2xro0-3-13-2";
+var overlayRoot = "_at2xro1-3-13-2";
+var wrapper = "_at2xro2-3-13-2";
 export {
   fieldset,
   overlayRoot,

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

@@ -1,7 +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-12-2';\nexport var overlayRoot = '_at2xro1-3-12-2';\nexport var wrapper = '_at2xro2-3-12-2';"],
+  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-13-2';\nexport var overlayRoot = '_at2xro1-3-13-2';\nexport var wrapper = '_at2xro2-3-13-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,cAAc;AAClB,IAAI,UAAU;",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._14xc6b0-3-12-2 {
+._14xc6b0-3-13-2 {
   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);
@@ -9,18 +9,18 @@
   min-height: 0;
   max-width: 100vw;
 }
-._14xc6b1-3-12-2 {
+._14xc6b1-3-13-2 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-12-2 {
+._14xc6b2-3-13-2 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-12-2 {
+._14xc6b3-3-13-2 {
   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);

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

@@ -35,7 +35,7 @@ function getMaxWidth(toParts) {
 const TimeframeSelectorOverlay = forwardRef((props, forwardedRef) => {
   const {
     overlayProps,
-    /* eslint-disable @typescript-eslint/no-deprecated */
+    /* oxlint-disable typescript/no-deprecated */
     clearable,
     children,
     overlayClose,

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { TimeframeSelectorOverlayFooter } from './TimeframeSelectorOverlayFooter.js';\nimport { FocusScope } from '../../../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../../../core/components/OverlayContainer.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { useRovingFocus } from '../../../../core/hooks/useRovingFocus.js';\nimport { OverlayStackingProvider } from '../../../../core/providers/OverlayStackingProvider.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { useDateTimeFormat } from '../../../../forms/date-time-picker/hooks/useDateTimeFormat.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { OverlayTriggerState } from '../../../../overlays/hooks/useOverlay.js';\nimport { DismissButton } from '../../../../overlays/hooks/useOverlay.js';\nimport type { OverlayProps } from '../../../../overlays/hooks/useOverlayWithTrigger.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\nimport { CustomTimeframeSelector } from '../custom-timeframe-selector/CustomTimeframeSelector.js';\nimport { Presets } from '../presets/Presets.js';\nimport { RecentTimeframes } from '../presets/RecentTimeframes.js';\n\n//#region Typings\ninterface TimeframeSelectorOverlayProps\n  extends WithChildren,\n    MaskingProps,\n    Pick<TimeframeSelectorProps, 'clearable'> {\n  /** The props of the overlay. */\n  overlayProps: OverlayProps['overlayProps'];\n  /** The state of the overlay. */\n  overlayClose: OverlayTriggerState['close'];\n  /** Owner ID used to tag this overlay so focus changes into it are treated as internal. */\n  overlayOwnerId: string;\n}\n//#endregion\n\nfunction getMaxWidth(toParts: (date: Date) => Intl.DateTimeFormatPart[]) {\n  const placeholderFromOrToParts = toParts(new TZDateMini()).map(\n    (part: Intl.DateTimeFormatPart) => {\n      if (part.type === 'dayPeriod') {\n        return 'AM/PM';\n      }\n\n      return part.value;\n    },\n  );\n  const placeholderFromOrTo = placeholderFromOrToParts.join('');\n  const placeholdersNumberOfChars = 2 * placeholderFromOrTo.length;\n  const surroundingSpace = 22; // this is an approximation in ch units of the space around the placeholders (including the inline padding inside each placeholder part)\n\n  return `${\n    placeholdersNumberOfChars * 1.05 + // try to compensate for the ch unit being calculated for \"0\" instead of a placeholder char, which needs slightly more width\n    surroundingSpace\n  }ch`;\n}\n\n/**\n * Relative Timeframe Selector Overlay component\n */\nexport const TimeframeSelectorOverlay = forwardRef<\n  HTMLDivElement,\n  TimeframeSelectorOverlayProps\n>((props, forwardedRef) => {\n  const {\n    overlayProps,\n    /* eslint-disable @typescript-eslint/no-deprecated */\n    clearable,\n    children,\n    overlayClose,\n    overlayOwnerId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const intl = useIntl();\n  const {\n    trapFocus,\n    style: overlayPropsStyle,\n    ...remainingOverlayProps\n  } = overlayProps;\n  const overlayContainerProps = useOverlayStacking(undefined, 'overlay');\n\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const { toParts } = useDateTimeFormat('datetime', precision);\n\n  const { containerRef } = useRovingFocus<HTMLDivElement>({\n    initialIndex: 0,\n    direction: 'vertical',\n    focusableChildrenSelector: \"[role='option'][aria-disabled='false']\",\n  });\n\n  return (\n    <OverlayContainer\n      {...overlayContainerProps}\n      data-dt-owner={overlayOwnerId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n    >\n      <OverlayStackingProvider>\n        <FocusScope autoFocus>\n          <Flex\n            ref={forwardedRef}\n            gap={4}\n            flexDirection=\"column\"\n            padding={4}\n            className={styles.wrapper}\n            style={{\n              ...overlayPropsStyle,\n              width: getMaxWidth(toParts),\n              maxHeight: `min(${overlayPropsStyle?.maxHeight}, 600px)`,\n            }}\n            aria-label={intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.overlayContainer,\n            )}\n            {...remainingOverlayProps}\n          >\n            <CustomTimeframeSelector />\n            <Flex\n              ref={containerRef}\n              gap={4}\n              paddingLeft={0}\n              paddingRight={0}\n              flexDirection=\"column\"\n              className={styles.scrollContainer}\n            >\n              {children ?? <Presets />}\n              <RecentTimeframes />\n            </Flex>\n            {/* eslint-disable @typescript-eslint/no-deprecated */}\n            <TimeframeSelectorOverlayFooter clearable={clearable} />\n          </Flex>\n          <DismissButton onDismiss={overlayClose} />\n        </FocusScope>\n      </OverlayStackingProvider>\n    </OverlayContainer>\n  );\n});\n\n(\n  TimeframeSelectorOverlay as typeof TimeframeSelectorOverlay & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlay';\n"],
-  "mappings": "AAsHY,cACA,YADA;AAtHZ,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAG1C,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAE9B,SAAS,mCAAmC;AAE5C,SAAS,+BAA+B;AACxC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAgBjC,SAAS,YAAY,SAAoD;AACvE,QAAM,2BAA2B,QAAQ,IAAI,WAAW,CAAC,EAAE;AAAA,IACzD,CAAC,SAAkC;AACjC,UAAI,KAAK,SAAS,aAAa;AAC7B,eAAO;AAAA,MACT;AAEA,aAAO,KAAK;AAAA,IACd;AAAA,EACF;AACA,QAAM,sBAAsB,yBAAyB,KAAK,EAAE;AAC5D,QAAM,4BAA4B,IAAI,oBAAoB;AAC1D,QAAM,mBAAmB;AAEzB,SAAO,GACL,4BAA4B;AAAA,EAC5B,gBACF;AACF;AAKO,MAAM,2BAA2B,WAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,wBAAwB,mBAAmB,QAAW,SAAS;AAErE,QAAM,YAAY,0BAA0B,CAAC,UAAU,MAAM,SAAS;AACtE,QAAM,EAAE,QAAQ,IAAI,kBAAkB,YAAY,SAAS;AAE3D,QAAM,EAAE,aAAa,IAAI,eAA+B;AAAA,IACtD,cAAc;AAAA,IACd,WAAW;AAAA,IACX,2BAA2B;AAAA,EAC7B,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAElB,8BAAC,2BACC,+BAAC,cAAW,WAAS,MACnB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,eAAc;AAAA,YACd,SAAS;AAAA,YACT,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,cACL,GAAG;AAAA,cACH,OAAO,YAAY,OAAO;AAAA,cAC1B,WAAW,OAAO,mBAAmB,SAAS;AAAA,YAChD;AAAA,YACA,cAAY,KAAK;AAAA,cACf,4BAA4B;AAAA,YAC9B;AAAA,YACC,GAAG;AAAA,YAEJ;AAAA,kCAAC,2BAAwB;AAAA,cACzB;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK;AAAA,kBACL,aAAa;AAAA,kBACb,cAAc;AAAA,kBACd,eAAc;AAAA,kBACd,WAAW,OAAO;AAAA,kBAEjB;AAAA,gCAAY,oBAAC,WAAQ;AAAA,oBACtB,oBAAC,oBAAiB;AAAA;AAAA;AAAA,cACpB;AAAA,cAEA,oBAAC,kCAA+B,WAAsB;AAAA;AAAA;AAAA,QACxD;AAAA,QACA,oBAAC,iBAAc,WAAW,cAAc;AAAA,SAC1C,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,yBAGA,cAAc;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { TimeframeSelectorOverlayFooter } from './TimeframeSelectorOverlayFooter.js';\nimport { FocusScope } from '../../../../core/components/focus-scope/FocusScope.js';\nimport { OverlayContainer } from '../../../../core/components/OverlayContainer.js';\nimport { useOverlayStacking } from '../../../../core/hooks/useOverlayStacking.js';\nimport { useRovingFocus } from '../../../../core/hooks/useRovingFocus.js';\nimport { OverlayStackingProvider } from '../../../../core/providers/OverlayStackingProvider.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { MaskingProps } from '../../../../core/types/masking-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { useDateTimeFormat } from '../../../../forms/date-time-picker/hooks/useDateTimeFormat.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { OverlayTriggerState } from '../../../../overlays/hooks/useOverlay.js';\nimport { DismissButton } from '../../../../overlays/hooks/useOverlay.js';\nimport type { OverlayProps } from '../../../../overlays/hooks/useOverlayWithTrigger.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\nimport { CustomTimeframeSelector } from '../custom-timeframe-selector/CustomTimeframeSelector.js';\nimport { Presets } from '../presets/Presets.js';\nimport { RecentTimeframes } from '../presets/RecentTimeframes.js';\n\n//#region Typings\ninterface TimeframeSelectorOverlayProps\n  extends\n    WithChildren,\n    MaskingProps,\n    Pick<TimeframeSelectorProps, 'clearable'> {\n  /** The props of the overlay. */\n  overlayProps: OverlayProps['overlayProps'];\n  /** The state of the overlay. */\n  overlayClose: OverlayTriggerState['close'];\n  /** Owner ID used to tag this overlay so focus changes into it are treated as internal. */\n  overlayOwnerId: string;\n}\n//#endregion\n\nfunction getMaxWidth(toParts: (date: Date) => Intl.DateTimeFormatPart[]) {\n  const placeholderFromOrToParts = toParts(new TZDateMini()).map(\n    (part: Intl.DateTimeFormatPart) => {\n      if (part.type === 'dayPeriod') {\n        return 'AM/PM';\n      }\n\n      return part.value;\n    },\n  );\n  const placeholderFromOrTo = placeholderFromOrToParts.join('');\n  const placeholdersNumberOfChars = 2 * placeholderFromOrTo.length;\n  const surroundingSpace = 22; // this is an approximation in ch units of the space around the placeholders (including the inline padding inside each placeholder part)\n\n  return `${\n    placeholdersNumberOfChars * 1.05 + // try to compensate for the ch unit being calculated for \"0\" instead of a placeholder char, which needs slightly more width\n    surroundingSpace\n  }ch`;\n}\n\n/**\n * Relative Timeframe Selector Overlay component\n */\nexport const TimeframeSelectorOverlay = forwardRef<\n  HTMLDivElement,\n  TimeframeSelectorOverlayProps\n>((props, forwardedRef) => {\n  const {\n    overlayProps,\n    /* oxlint-disable typescript/no-deprecated */\n    clearable,\n    children,\n    overlayClose,\n    overlayOwnerId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n  } = props;\n  const intl = useIntl();\n  const {\n    trapFocus,\n    style: overlayPropsStyle,\n    ...remainingOverlayProps\n  } = overlayProps;\n  const overlayContainerProps = useOverlayStacking(undefined, 'overlay');\n\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n  const { toParts } = useDateTimeFormat('datetime', precision);\n\n  const { containerRef } = useRovingFocus<HTMLDivElement>({\n    initialIndex: 0,\n    direction: 'vertical',\n    focusableChildrenSelector: \"[role='option'][aria-disabled='false']\",\n  });\n\n  return (\n    <OverlayContainer\n      {...overlayContainerProps}\n      data-dt-owner={overlayOwnerId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n    >\n      <OverlayStackingProvider>\n        <FocusScope autoFocus>\n          <Flex\n            ref={forwardedRef}\n            gap={4}\n            flexDirection=\"column\"\n            padding={4}\n            className={styles.wrapper}\n            style={{\n              ...overlayPropsStyle,\n              width: getMaxWidth(toParts),\n              maxHeight: `min(${overlayPropsStyle?.maxHeight}, 600px)`,\n            }}\n            aria-label={intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.overlayContainer,\n            )}\n            {...remainingOverlayProps}\n          >\n            <CustomTimeframeSelector />\n            <Flex\n              ref={containerRef}\n              gap={4}\n              paddingLeft={0}\n              paddingRight={0}\n              flexDirection=\"column\"\n              className={styles.scrollContainer}\n            >\n              {children ?? <Presets />}\n              <RecentTimeframes />\n            </Flex>\n            {/* oxlint-disable-next-line typescript/no-deprecated */}\n            <TimeframeSelectorOverlayFooter clearable={clearable} />\n          </Flex>\n          <DismissButton onDismiss={overlayClose} />\n        </FocusScope>\n      </OverlayStackingProvider>\n    </OverlayContainer>\n  );\n});\n\n(\n  TimeframeSelectorOverlay as typeof TimeframeSelectorOverlay & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlay';\n"],
+  "mappings": "AAuHY,cACA,YADA;AAvHZ,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,sCAAsC;AAC/C,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AACjC,SAAS,0BAA0B;AACnC,SAAS,sBAAsB;AAC/B,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAG1C,SAAS,yBAAyB;AAClC,SAAS,YAAY;AAErB,SAAS,qBAAqB;AAE9B,SAAS,mCAAmC;AAE5C,SAAS,+BAA+B;AACxC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAiBjC,SAAS,YAAY,SAAoD;AACvE,QAAM,2BAA2B,QAAQ,IAAI,WAAW,CAAC,EAAE;AAAA,IACzD,CAAC,SAAkC;AACjC,UAAI,KAAK,SAAS,aAAa;AAC7B,eAAO;AAAA,MACT;AAEA,aAAO,KAAK;AAAA,IACd;AAAA,EACF;AACA,QAAM,sBAAsB,yBAAyB,KAAK,EAAE;AAC5D,QAAM,4BAA4B,IAAI,oBAAoB;AAC1D,QAAM,mBAAmB;AAEzB,SAAO,GACL,4BAA4B;AAAA,EAC5B,gBACF;AACF;AAKO,MAAM,2BAA2B,WAGtC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,EACtB,IAAI;AACJ,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,wBAAwB,mBAAmB,QAAW,SAAS;AAErE,QAAM,YAAY,0BAA0B,CAAC,UAAU,MAAM,SAAS;AACtE,QAAM,EAAE,QAAQ,IAAI,kBAAkB,YAAY,SAAS;AAE3D,QAAM,EAAE,aAAa,IAAI,eAA+B;AAAA,IACtD,cAAc;AAAA,IACd,WAAW;AAAA,IACX,2BAA2B;AAAA,EAC7B,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAElB,8BAAC,2BACC,+BAAC,cAAW,WAAS,MACnB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,KAAK;AAAA,YACL,eAAc;AAAA,YACd,SAAS;AAAA,YACT,WAAW,OAAO;AAAA,YAClB,OAAO;AAAA,cACL,GAAG;AAAA,cACH,OAAO,YAAY,OAAO;AAAA,cAC1B,WAAW,OAAO,mBAAmB,SAAS;AAAA,YAChD;AAAA,YACA,cAAY,KAAK;AAAA,cACf,4BAA4B;AAAA,YAC9B;AAAA,YACC,GAAG;AAAA,YAEJ;AAAA,kCAAC,2BAAwB;AAAA,cACzB;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,KAAK;AAAA,kBACL,aAAa;AAAA,kBACb,cAAc;AAAA,kBACd,eAAc;AAAA,kBACd,WAAW,OAAO;AAAA,kBAEjB;AAAA,gCAAY,oBAAC,WAAQ;AAAA,oBACtB,oBAAC,oBAAiB;AAAA;AAAA;AAAA,cACpB;AAAA,cAEA,oBAAC,kCAA+B,WAAsB;AAAA;AAAA;AAAA,QACxD;AAAA,QACA,oBAAC,iBAAc,WAAW,cAAc;AAAA,SAC1C,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAGC,yBAGA,cAAc;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js

@@ -1,8 +1,8 @@
 import "./TimeframeSelectorOverlay.css";
-var footer = "_14xc6b2-3-12-2";
-var hint = "_14xc6b3-3-12-2";
-var scrollContainer = "_14xc6b1-3-12-2";
-var wrapper = "_14xc6b0-3-12-2";
+var footer = "_14xc6b2-3-13-2";
+var hint = "_14xc6b3-3-13-2";
+var scrollContainer = "_14xc6b1-3-13-2";
+var wrapper = "_14xc6b0-3-13-2";
 export {
   footer,
   hint,

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlay.css.ts"],
-  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-12-2';\nexport var hint = '_14xc6b3-3-12-2';\nexport var scrollContainer = '_14xc6b1-3-12-2';\nexport var wrapper = '_14xc6b0-3-12-2';"],
+  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-13-2';\nexport var hint = '_14xc6b3-3-13-2';\nexport var scrollContainer = '_14xc6b1-3-13-2';\nexport var wrapper = '_14xc6b0-3-13-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,kBAAkB;AACtB,IAAI,UAAU;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.js

@@ -76,6 +76,9 @@ const TimeframeSelectorOverlayFooter = (props) => {
                     textStyle: "small",
                     style: { paddingRight: Spacings.Size6 },
                     "data-dt-children-name": "LearnMore",
+                    "aria-label": intl.formatMessage(
+                      TIMEFRAME_SELECTOR_MESSAGES.docsLinkAriaLabel
+                    ),
                     children: intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)
                   }
                 )

package/esm/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/overlay/TimeframeSelectorOverlayFooter.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { TIMEFRAME_SELECTOR_DOCUMENTATION_URL } from '../../../../core/external-links.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport { getSafeRegionalFormat } from '../../../../forms/forms-core/time/helpers.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { globalSprinkles } from '../../../../styles/safe-sprinkles.js';\nimport { ExternalLink } from '../../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\n\nexport const TimeframeSelectorOverlayFooter = (\n  props: Pick<TimeframeSelectorProps, 'clearable'>,\n) => {\n  /* eslint-disable @typescript-eslint/no-deprecated */\n  const { clearable } = props;\n  const intl = useIntl();\n\n  const setValue = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n\n  const timeZoneWithOffset = useMemo(() => {\n    const timeZone = getTimezone();\n\n    const parts = new Intl.DateTimeFormat(getSafeRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'shortOffset',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const partsShortName = new Intl.DateTimeFormat(getSafeRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'short',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const timeZonePart = parts\n      ?.find((part) => part.type === 'timeZoneName')\n      ?.value.replace('GMT', 'UTC');\n    const timeZoneInfo = timeZonePart === 'UTC' ? 'UTC+0' : timeZonePart;\n    const timezoneDetails = timeZoneInfo ? ` (${timeZoneInfo})` : '';\n    const timeZoneShortName = partsShortName?.find(\n      (part) => part.type === 'timeZoneName',\n    )?.value;\n\n    return `${timeZoneShortName}${timezoneDetails}`;\n  }, []);\n\n  /** Handles the clear selection. Uses the pointerDown event to circumvent triggering the validation onBlur first. */\n  function handleClearSelection() {\n    setValue(null);\n  }\n\n  return (\n    <>\n      <Divider />\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        flexWrap=\"wrap-reverse\"\n        flex={1}\n        gap={4}\n        className={styles.footer}\n      >\n        <Flex\n          justifyContent={clearable ? 'flex-start' : 'space-between'}\n          alignItems=\"center\"\n          flexShrink={1}\n          flexGrow={1}\n          className={clsx(globalSprinkles({ paddingLeft: 6 }), {\n            [globalSprinkles({ paddingTop: 4, paddingBottom: 4 })]: !clearable,\n          })}\n        >\n          <Text className={styles.hint}>{timeZoneWithOffset}</Text>\n          {clearable && <Divider orientation=\"vertical\" aria-hidden />}\n          <Text\n            as={ExternalLink}\n            href={TIMEFRAME_SELECTOR_DOCUMENTATION_URL}\n            textStyle=\"small\"\n            style={{ paddingRight: Spacings.Size6 }}\n            data-dt-children-name=\"LearnMore\"\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)}\n          </Text>\n        </Flex>\n        {clearable && (\n          <Button\n            type=\"reset\"\n            onPointerDown={handleClearSelection}\n            size=\"condensed\"\n          >\n            {intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.resetTimeframeButton,\n            )}\n          </Button>\n        )}\n      </Flex>\n    </>\n  );\n};\n\n(\n  TimeframeSelectorOverlayFooter as typeof TimeframeSelectorOverlayFooter & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlayFooter';\n"],
-  "mappings": "AA6DI,mBACE,KASE,YAVJ;AA7DJ,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,mBAAmB;AAE5B,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,4CAA4C;AACrD,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAGrC,MAAM,iCAAiC,CAC5C,UACG;AAEH,QAAM,EAAE,UAAU,IAAI;AACtB,QAAM,OAAO,QAAQ;AAErB,QAAM,WAAW;AAAA,IACf,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,UAAM,WAAW,YAAY;AAE7B,UAAM,QAAQ,IAAI,KAAK,eAAe,sBAAsB,GAAG;AAAA,MAC7D;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,iBAAiB,IAAI,KAAK,eAAe,sBAAsB,GAAG;AAAA,MACtE;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,eAAe,OACjB,KAAK,CAAC,SAAS,KAAK,SAAS,cAAc,GAC3C,MAAM,QAAQ,OAAO,KAAK;AAC9B,UAAM,eAAe,iBAAiB,QAAQ,UAAU;AACxD,UAAM,kBAAkB,eAAe,KAAK,YAAY,MAAM;AAC9D,UAAM,oBAAoB,gBAAgB;AAAA,MACxC,CAAC,SAAS,KAAK,SAAS;AAAA,IAC1B,GAAG;AAEH,WAAO,GAAG,iBAAiB,GAAG,eAAe;AAAA,EAC/C,GAAG,CAAC,CAAC;AAGL,WAAS,uBAAuB;AAC9B,aAAS,IAAI;AAAA,EACf;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ;AAAA,IACT;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,MAAM;AAAA,QACN,KAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAElB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAgB,YAAY,eAAe;AAAA,cAC3C,YAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW,KAAK,gBAAgB,EAAE,aAAa,EAAE,CAAC,GAAG;AAAA,gBACnD,CAAC,gBAAgB,EAAE,YAAY,GAAG,eAAe,EAAE,CAAC,CAAC,GAAG,CAAC;AAAA,cAC3D,CAAC;AAAA,cAED;AAAA,oCAAC,QAAK,WAAW,OAAO,MAAO,8BAAmB;AAAA,gBACjD,aAAa,oBAAC,WAAQ,aAAY,YAAW,eAAW,MAAC;AAAA,gBAC1D;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAM;AAAA,oBACN,WAAU;AAAA,oBACV,OAAO,EAAE,cAAc,SAAS,MAAM;AAAA,oBACtC,yBAAsB;AAAA,oBAErB,eAAK,cAAc,4BAA4B,YAAY;AAAA;AAAA,gBAC9D;AAAA;AAAA;AAAA,UACF;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAe;AAAA,cACf,MAAK;AAAA,cAEJ,eAAK;AAAA,gBACJ,4BAA4B;AAAA,cAC9B;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAGE,+BAGA,cAAc;",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Spacings from '@dynatrace/strato-design-tokens/spacings';\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { TIMEFRAME_SELECTOR_DOCUMENTATION_URL } from '../../../../core/external-links.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport { getSafeRegionalFormat } from '../../../../forms/forms-core/time/helpers.js';\nimport { Divider } from '../../../../layouts/divider/Divider.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { globalSprinkles } from '../../../../styles/safe-sprinkles.js';\nimport { ExternalLink } from '../../../../typography/external-link/ExternalLink.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport type { TimeframeSelectorProps } from '../../TimeframeSelector.types.js';\n\nexport const TimeframeSelectorOverlayFooter = (\n  props: Pick<TimeframeSelectorProps, 'clearable'>,\n) => {\n  /* oxlint-disable typescript/no-deprecated */\n  const { clearable } = props;\n  const intl = useIntl();\n\n  const setValue = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n\n  const timeZoneWithOffset = useMemo(() => {\n    const timeZone = getTimezone();\n\n    const parts = new Intl.DateTimeFormat(getSafeRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'shortOffset',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const partsShortName = new Intl.DateTimeFormat(getSafeRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'short',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const timeZonePart = parts\n      ?.find((part) => part.type === 'timeZoneName')\n      ?.value.replace('GMT', 'UTC');\n    const timeZoneInfo = timeZonePart === 'UTC' ? 'UTC+0' : timeZonePart;\n    const timezoneDetails = timeZoneInfo ? ` (${timeZoneInfo})` : '';\n    const timeZoneShortName = partsShortName?.find(\n      (part) => part.type === 'timeZoneName',\n    )?.value;\n\n    return `${timeZoneShortName}${timezoneDetails}`;\n  }, []);\n\n  /** Handles the clear selection. Uses the pointerDown event to circumvent triggering the validation onBlur first. */\n  function handleClearSelection() {\n    setValue(null);\n  }\n\n  return (\n    <>\n      <Divider />\n      <Flex\n        justifyContent=\"space-between\"\n        alignItems=\"center\"\n        flexWrap=\"wrap-reverse\"\n        flex={1}\n        gap={4}\n        className={styles.footer}\n      >\n        <Flex\n          justifyContent={clearable ? 'flex-start' : 'space-between'}\n          alignItems=\"center\"\n          flexShrink={1}\n          flexGrow={1}\n          className={clsx(globalSprinkles({ paddingLeft: 6 }), {\n            [globalSprinkles({ paddingTop: 4, paddingBottom: 4 })]: !clearable,\n          })}\n        >\n          <Text className={styles.hint}>{timeZoneWithOffset}</Text>\n          {clearable && <Divider orientation=\"vertical\" aria-hidden />}\n          <Text\n            as={ExternalLink}\n            href={TIMEFRAME_SELECTOR_DOCUMENTATION_URL}\n            textStyle=\"small\"\n            style={{ paddingRight: Spacings.Size6 }}\n            data-dt-children-name=\"LearnMore\"\n            aria-label={intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.docsLinkAriaLabel,\n            )}\n          >\n            {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.docsLinkText)}\n          </Text>\n        </Flex>\n        {clearable && (\n          <Button\n            type=\"reset\"\n            onPointerDown={handleClearSelection}\n            size=\"condensed\"\n          >\n            {intl.formatMessage(\n              TIMEFRAME_SELECTOR_MESSAGES.resetTimeframeButton,\n            )}\n          </Button>\n        )}\n      </Flex>\n    </>\n  );\n};\n\n(\n  TimeframeSelectorOverlayFooter as typeof TimeframeSelectorOverlayFooter & {\n    displayName: string;\n  }\n).displayName = 'TimeframeSelectorOverlayFooter';\n"],
+  "mappings": "AA6DI,mBACE,KASE,YAVJ;AA7DJ,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB,SAAS,mBAAmB;AAE5B,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,4CAA4C;AACrD,SAAS,iCAAiC;AAC1C,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,YAAY;AACrB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,mCAAmC;AAGrC,MAAM,iCAAiC,CAC5C,UACG;AAEH,QAAM,EAAE,UAAU,IAAI;AACtB,QAAM,OAAO,QAAQ;AAErB,QAAM,WAAW;AAAA,IACf,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,qBAAqB,QAAQ,MAAM;AACvC,UAAM,WAAW,YAAY;AAE7B,UAAM,QAAQ,IAAI,KAAK,eAAe,sBAAsB,GAAG;AAAA,MAC7D;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,iBAAiB,IAAI,KAAK,eAAe,sBAAsB,GAAG;AAAA,MACtE;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,eAAe,OACjB,KAAK,CAAC,SAAS,KAAK,SAAS,cAAc,GAC3C,MAAM,QAAQ,OAAO,KAAK;AAC9B,UAAM,eAAe,iBAAiB,QAAQ,UAAU;AACxD,UAAM,kBAAkB,eAAe,KAAK,YAAY,MAAM;AAC9D,UAAM,oBAAoB,gBAAgB;AAAA,MACxC,CAAC,SAAS,KAAK,SAAS;AAAA,IAC1B,GAAG;AAEH,WAAO,GAAG,iBAAiB,GAAG,eAAe;AAAA,EAC/C,GAAG,CAAC,CAAC;AAGL,WAAS,uBAAuB;AAC9B,aAAS,IAAI;AAAA,EACf;AAEA,SACE,iCACE;AAAA,wBAAC,WAAQ;AAAA,IACT;AAAA,MAAC;AAAA;AAAA,QACC,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,UAAS;AAAA,QACT,MAAM;AAAA,QACN,KAAK;AAAA,QACL,WAAW,OAAO;AAAA,QAElB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,gBAAgB,YAAY,eAAe;AAAA,cAC3C,YAAW;AAAA,cACX,YAAY;AAAA,cACZ,UAAU;AAAA,cACV,WAAW,KAAK,gBAAgB,EAAE,aAAa,EAAE,CAAC,GAAG;AAAA,gBACnD,CAAC,gBAAgB,EAAE,YAAY,GAAG,eAAe,EAAE,CAAC,CAAC,GAAG,CAAC;AAAA,cAC3D,CAAC;AAAA,cAED;AAAA,oCAAC,QAAK,WAAW,OAAO,MAAO,8BAAmB;AAAA,gBACjD,aAAa,oBAAC,WAAQ,aAAY,YAAW,eAAW,MAAC;AAAA,gBAC1D;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAM;AAAA,oBACN,WAAU;AAAA,oBACV,OAAO,EAAE,cAAc,SAAS,MAAM;AAAA,oBACtC,yBAAsB;AAAA,oBACtB,cAAY,KAAK;AAAA,sBACf,4BAA4B;AAAA,oBAC9B;AAAA,oBAEC,eAAK,cAAc,4BAA4B,YAAY;AAAA;AAAA,gBAC9D;AAAA;AAAA;AAAA,UACF;AAAA,UACC,aACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,eAAe;AAAA,cACf,MAAK;AAAA,cAEJ,eAAK;AAAA,gBACJ,4BAA4B;AAAA,cAC9B;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAGE,+BAGA,cAAc;",
   "names": []
 }

package/esm/filters/timeframe-selector/components/presets/PresetItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/filters/timeframe-selector/components/presets/PresetItem.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { HistoryIcon } from '@dynatrace/strato-icons';\n\nimport type { PresetItemVariants } from './Presets.sty.js';\nimport * as styles from './Presets.sty.js';\nimport { useFocusRing } from '../../../../core/hooks/useFocusRing.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport {\n  parseValue,\n  removePrecisionFromTimeValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { usePresetItemContext } from '../../hooks/usePresetItemContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\nimport {\n  isPresetSelected,\n  saveRecentTimeframe,\n} from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n//#region Typings\n\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetItemProps\n  extends HTMLAttributes<HTMLLIElement>,\n    DataTestId,\n    StylingProps,\n    WithChildren,\n    BehaviorTrackingProps {\n  /** The value of the timeframe preset. */\n  value: {\n    /** Start of the time frame. */\n    from: string;\n    /** End of the time frame. */\n    to: string;\n  };\n}\n//#endregion\n\n/**\n * TimeframeSelector preset item shown inside the presets list of the overlay.\n * @public\n */\nexport const PresetItem = (\n  props: TimeframeSelectorPresetItemProps & {\n    // DEPRECATION: [APPDEV-16622] BREAKING-CHANGE: TimeframeSelector - Remove deprecated `_isSelected` prop.\n    /**\n     * @deprecated - Prop will be removed with the next breaking change cycle.\n     */\n    _isSelected?: boolean;\n  },\n) => {\n  const {\n    children,\n    value,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetItemProps & { _isSelected?: boolean } = props;\n\n  const intl = useIntl();\n  const [openTooltip, setOpenTooltip] = useState(false);\n\n  const { details } = useTimeframeSelectorContext();\n\n  const setValue = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n  const min = useTimeframeSelectorStore((state) => state.min?.value);\n  const max = useTimeframeSelectorStore((state) => state.max?.value);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n\n  const { isRecent } = usePresetItemContext();\n\n  const isSelected = isPresetSelected(value, details, isRecent, precision);\n  const isDisabled = isOutsideRange(value, min, max);\n\n  const tooltipId = useId();\n  const tooltipFocusProps = {\n    onFocus: useCallback(\n      () => !isDisabled && setOpenTooltip(true),\n      [isDisabled],\n    ),\n    onBlur: useCallback(() => setOpenTooltip(false), []),\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: isSelected && !isDisabled ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  let state: NonNullable<PresetItemVariants>['state'] = isSelected\n    ? 'selected'\n    : 'rest';\n  if (isDisabled) {\n    state = 'disabled';\n  }\n\n  const {\n    timeframeDisplayValue,\n    formattedPresetItemValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value, children);\n\n  /** Handle clicking on the timeframe selector preset item. */\n  const handleItemClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const { from, to } = parseValue(value);\n\n    if (from && to) {\n      const timeframe = {\n        from: removePrecisionFromTimeValue(from, precision) ?? from,\n        to: removePrecisionFromTimeValue(to, precision) ?? to,\n      };\n\n      setValue(timeframe);\n      saveRecentTimeframe(timeframe);\n    }\n  }, [isDisabled, value, precision, setValue]);\n\n  /**\n   * Temporary keydown listener to provide the possibility to select items via keyboard\n   * Will change as soon as we switch to the reusable listbox component.\n   */\n  const handleItemKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      if (\n        event.code === 'Enter' ||\n        event.code === 'NumpadEnter' ||\n        event.code === 'Space'\n      ) {\n        handleItemClick();\n      }\n    },\n    [handleItemClick, isDisabled],\n  );\n\n  const liRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    if (isSelected) {\n      liRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n    // we don't want to scroll the element into view when isSelected changes, but only on the first render\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (isInvalid) {\n    return null;\n  }\n\n  const tooltipContent = isDisabled ? (\n    <Text textStyle=\"small\">\n      {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip)}\n    </Text>\n  ) : (\n    <Flex flexDirection=\"column\">\n      <Flex gap={0} flexDirection=\"column\">\n        <Text textStyle=\"base-emphasized\">{timeframeDisplayValue}</Text>\n        <Text textStyle=\"small\">{formattedPresetItemValue}</Text>\n      </Flex>\n      {!isAbsoluteTimeframe && (\n        <Flex gap={0} flexDirection=\"column\">\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <li\n      ref={liRef}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-disabled={isDisabled}\n      className={clsx([\n        focusClassName,\n        styles.item({\n          state,\n        }),\n        consumerClassName,\n      ])}\n      onClick={handleItemClick}\n      onKeyDown={handleItemKeyDown}\n      data-testid={dataTestId}\n      style={consumerStyle}\n      {...mergeProps(remainingProps, focusProps, tooltipFocusProps)}\n    >\n      <Tooltip\n        id={tooltipId}\n        text={tooltipContent}\n        placement=\"right\"\n        fallbackPlacements={[\n          'right-end',\n          'bottom-end',\n          'bottom',\n          'bottom-start',\n          'left-end',\n          'left',\n          'left-start',\n        ]}\n        open={openTooltip}\n        onOpenChange={setOpenTooltip}\n      >\n        <div\n          className={styles.wrapper({ isSelected, isDisabled })}\n          aria-describedby={openTooltip ? tooltipId : undefined}\n        >\n          <Grid className={styles.itemContainer}>\n            <Flex alignItems=\"center\" className={styles.displayValueWrapper}>\n              {isRecent && <HistoryIcon className={styles.recentIcon} />}\n              <Text\n                textStyle=\"base-emphasized\"\n                as=\"div\"\n                className={styles.timeframeDisplayValue}\n              >\n                {timeframeDisplayValue}\n              </Text>\n            </Flex>\n            {(!isRecent || !isAbsoluteTimeframe) && (\n              <Text\n                as={Flex}\n                textStyle=\"small\"\n                className={clsx(\n                  styles.mediaQuery,\n                  styles.formattedPresetValue({\n                    state,\n                  }),\n                )}\n              >\n                {formattedPresetItemValue}\n              </Text>\n            )}\n          </Grid>\n        </div>\n      </Tooltip>\n    </li>\n  );\n};\n\nPresetItem.displayName = 'TimeframeSelector.PresetItem';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { HistoryIcon } from '@dynatrace/strato-icons';\n\nimport type { PresetItemVariants } from './Presets.sty.js';\nimport * as styles from './Presets.sty.js';\nimport { useFocusRing } from '../../../../core/hooks/useFocusRing.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport {\n  parseValue,\n  removePrecisionFromTimeValue,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport { Grid } from '../../../../layouts/grid/Grid.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { Text } from '../../../../typography/text/Text.js';\nimport { TIMEFRAME_SELECTOR_MESSAGES } from '../../constants/timeframeSelectorMessages.js';\nimport { usePresetItemContext } from '../../hooks/usePresetItemContext.js';\nimport { useTimeframeSelectorContext } from '../../hooks/useTimeframeSelectorContext.js';\nimport { useTooltipMessages } from '../../hooks/useTooltipMessages.js';\nimport {\n  isPresetSelected,\n  saveRecentTimeframe,\n} from '../../utils/presets-helpers.js';\nimport { isOutsideRange } from '../../utils/timeframe-selection.js';\n\n//#region Typings\n\n/**\n * @public\n */\nexport interface TimeframeSelectorPresetItemProps\n  extends\n    HTMLAttributes<HTMLLIElement>,\n    DataTestId,\n    StylingProps,\n    WithChildren,\n    BehaviorTrackingProps {\n  /** The value of the timeframe preset. */\n  value: {\n    /** Start of the time frame. */\n    from: string;\n    /** End of the time frame. */\n    to: string;\n  };\n}\n//#endregion\n\n/**\n * TimeframeSelector preset item shown inside the presets list of the overlay.\n * @public\n */\nexport const PresetItem = (\n  props: TimeframeSelectorPresetItemProps & {\n    // DEPRECATION: [APPDEV-16622] BREAKING-CHANGE: TimeframeSelector - Remove deprecated `_isSelected` prop.\n    /**\n     * @deprecated - Prop will be removed with the next breaking change cycle.\n     */\n    _isSelected?: boolean;\n  },\n) => {\n  const {\n    children,\n    value,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    ...remainingProps\n  }: TimeframeSelectorPresetItemProps & { _isSelected?: boolean } = props;\n\n  const intl = useIntl();\n  const [openTooltip, setOpenTooltip] = useState(false);\n\n  const { details } = useTimeframeSelectorContext();\n\n  const setValue = useTimeframeSelectorStore(\n    (state) => state.setTimeframeSelectorTimeframe,\n  );\n  const min = useTimeframeSelectorStore((state) => state.min?.value);\n  const max = useTimeframeSelectorStore((state) => state.max?.value);\n  const precision = useTimeframeSelectorStore((state) => state.precision);\n\n  const { isRecent } = usePresetItemContext();\n\n  const isSelected = isPresetSelected(value, details, isRecent, precision);\n  const isDisabled = isOutsideRange(value, min, max);\n\n  const tooltipId = useId();\n  const tooltipFocusProps = {\n    onFocus: useCallback(\n      () => !isDisabled && setOpenTooltip(true),\n      [isDisabled],\n    ),\n    onBlur: useCallback(() => setOpenTooltip(false), []),\n  };\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: isSelected && !isDisabled ? 'primary' : 'neutral',\n    disabled: isDisabled,\n  });\n\n  let state: NonNullable<PresetItemVariants>['state'] = isSelected\n    ? 'selected'\n    : 'rest';\n  if (isDisabled) {\n    state = 'disabled';\n  }\n\n  const {\n    timeframeDisplayValue,\n    formattedPresetItemValue,\n    tooltipFormattedTimeValueStart,\n    tooltipFormattedTimeValueEnd,\n    isAbsoluteTimeframe,\n    isInvalid,\n  } = useTooltipMessages(value, children);\n\n  /** Handle clicking on the timeframe selector preset item. */\n  const handleItemClick = useCallback(() => {\n    if (isDisabled) {\n      return;\n    }\n\n    const { from, to } = parseValue(value);\n\n    if (from && to) {\n      const timeframe = {\n        from: removePrecisionFromTimeValue(from, precision) ?? from,\n        to: removePrecisionFromTimeValue(to, precision) ?? to,\n      };\n\n      setValue(timeframe);\n      saveRecentTimeframe(timeframe);\n    }\n  }, [isDisabled, value, precision, setValue]);\n\n  /**\n   * Temporary keydown listener to provide the possibility to select items via keyboard\n   * Will change as soon as we switch to the reusable listbox component.\n   */\n  const handleItemKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLLIElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      if (\n        event.code === 'Enter' ||\n        event.code === 'NumpadEnter' ||\n        event.code === 'Space'\n      ) {\n        handleItemClick();\n      }\n    },\n    [handleItemClick, isDisabled],\n  );\n\n  const liRef = useRef<HTMLLIElement | null>(null);\n\n  useEffect(() => {\n    if (isSelected) {\n      liRef.current?.scrollIntoView({ block: 'nearest' });\n    }\n    // we don't want to scroll the element into view when isSelected changes, but only on the first render\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  if (isInvalid) {\n    return null;\n  }\n\n  const tooltipContent = isDisabled ? (\n    <Text textStyle=\"small\">\n      {intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.disabledTooltip)}\n    </Text>\n  ) : (\n    <Flex flexDirection=\"column\">\n      <Flex gap={0} flexDirection=\"column\">\n        <Text textStyle=\"base-emphasized\">{timeframeDisplayValue}</Text>\n        <Text textStyle=\"small\">{formattedPresetItemValue}</Text>\n      </Flex>\n      {!isAbsoluteTimeframe && (\n        <Flex gap={0} flexDirection=\"column\">\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueStart}</Text>\n          <Text textStyle=\"small\">{tooltipFormattedTimeValueEnd}</Text>\n        </Flex>\n      )}\n    </Flex>\n  );\n\n  return (\n    <li\n      ref={liRef}\n      role=\"option\"\n      aria-selected={isSelected}\n      aria-disabled={isDisabled}\n      className={clsx([\n        focusClassName,\n        styles.item({\n          state,\n        }),\n        consumerClassName,\n      ])}\n      onClick={handleItemClick}\n      onKeyDown={handleItemKeyDown}\n      data-testid={dataTestId}\n      style={consumerStyle}\n      {...mergeProps(remainingProps, focusProps, tooltipFocusProps)}\n    >\n      <Tooltip\n        id={tooltipId}\n        text={tooltipContent}\n        placement=\"right\"\n        fallbackPlacements={[\n          'right-end',\n          'bottom-end',\n          'bottom',\n          'bottom-start',\n          'left-end',\n          'left',\n          'left-start',\n        ]}\n        open={openTooltip}\n        onOpenChange={setOpenTooltip}\n      >\n        <div\n          className={styles.wrapper({ isSelected, isDisabled })}\n          aria-describedby={openTooltip ? tooltipId : undefined}\n        >\n          <Grid className={styles.itemContainer}>\n            <Flex alignItems=\"center\" className={styles.displayValueWrapper}>\n              {isRecent && <HistoryIcon className={styles.recentIcon} />}\n              <Text\n                textStyle=\"base-emphasized\"\n                as=\"div\"\n                className={styles.timeframeDisplayValue}\n              >\n                {timeframeDisplayValue}\n              </Text>\n            </Flex>\n            {(!isRecent || !isAbsoluteTimeframe) && (\n              <Text\n                as={Flex}\n                textStyle=\"small\"\n                className={clsx(\n                  styles.mediaQuery,\n                  styles.formattedPresetValue({\n                    state,\n                  }),\n                )}\n              >\n                {formattedPresetItemValue}\n              </Text>\n            )}\n          </Grid>\n        </div>\n      </Tooltip>\n    </li>\n  );\n};\n\nPresetItem.displayName = 'TimeframeSelector.PresetItem';\n"],
+  "mappings": "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",
   "names": ["state"]
 }

package/esm/filters/timeframe-selector/components/presets/Presets.css

@@ -1,11 +1,11 @@
-._14rlfn30-3-12-2 {
+._14rlfn30-3-13-2 {
   justify-content: space-between;
   align-items: center;
   grid: auto / auto-flow;
   grid-template-columns: auto 1fr;
   max-height: var(--dt-spacings-size-20, 20px);
 }
-._14rlfn31-3-12-2 {
+._14rlfn31-3-13-2 {
   position: relative;
   list-style: none;
   cursor: pointer;
@@ -16,45 +16,45 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   outline-offset: calc(var(--dt-spacings-size-2, 2px) * -1);
 }
-._14rlfn32-3-12-2 {
+._14rlfn32-3-13-2 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._14rlfn32-3-12-2:hover {
+._14rlfn32-3-13-2:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._14rlfn32-3-12-2:active {
+._14rlfn32-3-13-2:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._14rlfn33-3-12-2 {
+._14rlfn33-3-13-2 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn33-3-12-2:hover {
+._14rlfn33-3-13-2:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._14rlfn33-3-12-2:active {
+._14rlfn33-3-13-2:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._14rlfn34-3-12-2 {
+._14rlfn34-3-13-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._14rlfn36-3-12-2 {
+._14rlfn36-3-13-2 {
   min-width: 0;
 }
-._14rlfn37-3-12-2 {
+._14rlfn37-3-13-2 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._14rlfn38-3-12-2 {
+._14rlfn38-3-13-2 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
 }
-._14rlfn39-3-12-2::before {
+._14rlfn39-3-13-2::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -62,62 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3a-3-12-2::before {
+._14rlfn3a-3-13-2::before {
   content: "";
 }
-._14rlfn3b-3-12-2::before {
+._14rlfn3b-3-13-2::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3c-3-12-2::before {
+._14rlfn3c-3-13-2::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3e-3-12-2 {
+._14rlfn3e-3-13-2 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
   text-align: right;
 }
-._14rlfn3f-3-12-2 {
+._14rlfn3f-3-13-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3g-3-12-2 {
+._14rlfn3g-3-13-2 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn3h-3-12-2 {
+._14rlfn3h-3-13-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._14rlfn3i-3-12-2 {
+._14rlfn3i-3-13-2 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3j-3-12-2 {
+._14rlfn3j-3-13-2 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3k-3-12-2 {
+._14rlfn3k-3-13-2 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3l-3-12-2 {
+._14rlfn3l-3-13-2 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._14rlfn3m-3-12-2 {
+._14rlfn3m-3-13-2 {
   padding-top: var(--dt-spacings-size-12, 12px);
   padding-right: var(--dt-spacings-size-12, 12px);
   padding-bottom: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-12, 12px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3n-3-12-2 {
+._14rlfn3n-3-13-2 {
   flex-shrink: 0;
 }
 @media screen and (max-width: 470px) {
-  ._14rlfn3d-3-12-2 {
+  ._14rlfn3d-3-13-2 {
     display: none;
   }
 }