@dynatrace/strato-components 3.2.0 → 3.3.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/filters/timeframe-selector/TimeframeSelectorRoot.tsx"],
+  "sourcesContent": ["import {\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 { TIMEFRAMESELECTOR_ERROR_MESSAGES } from './constants/timeframeSelectorMessages.js';\nimport { TimeframeSelectorContext } from './contexts/TimeframeSelectorContext.js';\nimport type {\n  TimeframeValueDetails,\n  TimeframeSelectorProps,\n} from './TimeframeSelector.types.js';\nimport { getTimeframeDisplayValueProps } from './utils/getTimeframeDisplayValueProps.js';\nimport { 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 { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { useTimeframeSelectorStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { devLog } from '../../core/utils/logging.js';\nimport { InternalBaseItem as BaseItem } from '../../forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../../forms/forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../../forms/forms-core/hooks/useFormFieldValidation.js';\nimport { useMinMaxLogger } from '../../forms/forms-core/hooks/useMinMaxLogger.js';\nimport { 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 type { TimeRangePickerRef } from '../../forms/shared-types.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\n\nconst COMPONENT_NAME = 'TimeframeSelector';\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  TimeframeSelectorProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n  const {\n    disabled,\n    value: propValue,\n    defaultValue,\n    /* eslint-disable @typescript-eslint/no-deprecated */\n    clearable = false,\n    readOnly = false,\n    controlState,\n    children,\n    onChange,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    name,\n    id,\n    stepper = true,\n    'aria-disabled': ariaDisabled,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  }: TimeframeSelectorProps = props;\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 required = useTimeframeSelectorStore((state) => state.required);\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  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'TimeframeSelector');\n\n  const [formControlStateError, hint] = useFormControlState(controlState);\n\n  const { state: formFieldMessagesState, dispatch: formFieldMessagesDispatch } =\n    useFormFieldMessagesContext();\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    },\n    [formFieldMessagesDispatch, setDateTimeRangePickerTimeframe, value],\n  );\n\n  const {\n    targetRef,\n    overlayRef,\n    triggerRef,\n    overlayProps,\n    overlayState,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    offset: 4,\n    placement: 'bottom-start',\n    placementFallbacks: ['bottom-end', 'top-start', 'top-end'],\n    heightStrategy: 'maxViewport',\n    disabled,\n    onOpenChange,\n  });\n\n  // Prefetch timeframe presets on mount so opening the overlay can use cached data immediately.\n  useEffect(() => {\n    if (timeframeQueryClient.getQueryData(TIMEFRAME_PRESETS_QUERY_KEY)) {\n      return;\n    }\n\n    timeframeQueryClient.prefetchQuery({\n      queryKey: TIMEFRAME_PRESETS_QUERY_KEY,\n      queryFn: getTimeframePresets,\n    });\n  }, []);\n\n  const details = useMemo((): TimeframeValueDetails | null => {\n    const { from, to } = parseValue(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\n  // We need to create a ref to give access to the trigger in our imperative handle.\n  const imperativeTriggerRef = useRef<HTMLButtonElement>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const fromInputRef = useRef<HTMLInputElement>(null);\n  const toInputRef = useRef<HTMLInputElement>(null);\n  const ariaLabelingProps = {\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n  };\n  const { ariaProps: ariaFormProps, onBlur } = useFormFieldValidation(\n    fromInputRef,\n    {},\n    ariaLabelingProps,\n  );\n\n  useImperativeHandle(\n    forwardedRef,\n    (): TimeRangePickerRef => ({\n      element: containerRef.current,\n      triggerRef: imperativeTriggerRef.current,\n      inputRef: { from: fromInputRef.current, to: toInputRef.current },\n      open: overlayState.open,\n      close: overlayState.close,\n      focus() {\n        imperativeTriggerRef.current?.focus?.();\n      },\n      validate() {\n        formFieldMessagesDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n\n        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    }),\n    [formFieldMessagesDispatch, overlayState.close, overlayState.open],\n  );\n\n  useEffect(() => {\n    if (overlayState.isOpen) {\n      return;\n    }\n\n    if (!displayValueError && triggerErrorId) {\n      formFieldMessagesDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: triggerErrorId,\n          messageType: 'formcontrol',\n          controlId: inputId,\n        },\n      });\n    }\n  }, [\n    displayValueError,\n    displayValueHint,\n    overlayState.isOpen,\n    triggerErrorId,\n    formFieldMessagesDispatch,\n    inputId,\n  ]);\n\n  const triggerButtonRef = useMergeRefs([\n    targetRef,\n    triggerRef,\n    imperativeTriggerRef,\n  ]);\n\n  const handleOnBlur = useCallback(() => {\n    if (!overlayState.isOpen) {\n      onBlur();\n    }\n  }, [onBlur, overlayState.isOpen]);\n\n  const triggerProps = useMemo(\n    () => ({\n      disabled,\n      onBlur: handleOnBlur,\n      ref: triggerButtonRef,\n      id,\n      'aria-disabled': ariaDisabled,\n      ...ariaFormProps,\n      ...(readOnly ? {} : overlayTriggerProps),\n      'data-dt-component': COMPONENT_NAME,\n    }),\n    [\n      disabled,\n      handleOnBlur,\n      triggerButtonRef,\n      id,\n      ariaDisabled,\n      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: formControlStateError || formFieldMessagesState.showError,\n    }),\n    [\n      details,\n      readOnly,\n      displayValue,\n      triggerProps,\n      displayValueHint,\n      formControlStateError,\n      formFieldMessagesState.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={consumerClassName}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component=\"TimeframeSelector\"\n      >\n        <VisuallyHidden>\n          <input\n            id={inputId}\n            type=\"text\"\n            ref={fromInputRef}\n            name={name && `${name}-from`}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.from.value ?? ''}\n            onInvalid={(event) => {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n\n              // Prevents the browser validation pop up.\n              event.preventDefault();\n            }}\n            onChange={() => {\n              /** noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n          <input\n            type=\"text\"\n            ref={toInputRef}\n            name={name && `${name}-to`}\n            aria-hidden={true}\n            readOnly={readOnly}\n            required={required}\n            disabled={disabled}\n            value={details?.to.value ?? ''}\n            onInvalid={(event) => event.preventDefault()}\n            onChange={() => {\n              /**noop */\n            }}\n            tabIndex={-1}\n            {...ariaFormProps}\n          />\n        </VisuallyHidden>\n        <InputGroup style={{ gridAutoColumns: 'auto 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}\n                direction=\"backward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n              <StepperButton\n                disabled={disabled}\n                direction=\"forward\"\n                aria-disabled={ariaDisabled}\n                onBlur={handleOnBlur}\n              />\n            </>\n          )}\n        </InputGroup>\n        {controlState && hint && (\n          <BaseItem\n            variant={formControlStateError ? 'error' : 'hint'}\n            disabled={disabled || !!ariaDisabled}\n          >\n            {hint}\n          </BaseItem>\n        )}\n        {overlayState.isOpen && (\n          <TimeframeSelectorOverlay\n            ref={overlayRef}\n            overlayProps={overlayProps}\n            overlayClose={overlayState.close}\n            /* eslint-disable @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"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -9,8 +9,7 @@ const TimeframeSelectorTooltip = (props) => {
     value,
     disabled,
     displayValue,
-    children,
-    precision
+    children
   } = props;
   const [tooltipTimeValues, setTooltipTimeValues] = useState({
     tooltipFormattedTimeValueStart: "",
@@ -22,7 +21,7 @@ const TimeframeSelectorTooltip = (props) => {
     timeframeDuration,
     isAbsoluteTimeframe,
     isInvalid
-  } = useTooltipMessages(value, precision);
+  } = useTooltipMessages(value);
   const onOpenTooltip = useCallback(
     async (open) => {
       if (open) {

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

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

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

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

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

@@ -4,76 +4,150 @@ import {
   useEffect,
   useMemo,
   useReducer,
-  useRef,
-  useState
+  useRef
 } from "react";
 import { useIntl } from "react-intl";
 import BreakpointsJS from "@dynatrace/strato-design-tokens/breakpoints-js";
 import * as customTimeframeSelectorStyles from "./CustomTimeframeSelector.sty.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { useId } from "../../../../core/hooks/useId.js";
-import { DateTimeRangePicker } from "../../../../forms/date-time-range-picker/DateTimeRangePicker.js";
+import { useTimeframeSelectorStore } from "../../../../core/time/timeframeStore/useTimeframeStore.js";
+import {
+  getTimeBoundaryMessageData,
+  validate
+} from "../../../../core/time/validation.js";
+import { DateTimeRangePickerRoot } from "../../../../forms/date-time-range-picker/DateTimeRangePickerRoot.js";
 import { FormFieldMessages } from "../../../../forms/forms-core/components/form-field-messages/FormFieldMessages.js";
 import { Label } from "../../../../forms/forms-core/components/label/Label.js";
 import { _FormFieldContext as FormFieldContext } from "../../../../forms/forms-core/contexts/FormFieldContext.js";
 import { FormFieldMessageContext } from "../../../../forms/forms-core/contexts/FormFieldMessageContext.js";
 import { useFormFieldContext } from "../../../../forms/forms-core/hooks/useFormFieldContext.js";
+import { useFormFieldMessagesContext } from "../../../../forms/forms-core/hooks/useFormFieldMessagesContext.js";
 import {
   FormFieldMessagesAction,
   formFieldMessagesReducer
 } from "../../../../forms/forms-core/state/formfield-messages-state-reducer.js";
+import { sortTimeframeValues } from "../../../../forms/forms-core/time/helpers.js";
 import {
-  filterOutGrailLimit,
-  sortTimeframeValues
-} from "../../../../forms/forms-core/time/helpers.js";
-import {
-  getOutsideRangeMessage,
+  getFromToValues,
   parseValue
 } from "../../../../forms/forms-core/time/timeParser.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { useBreakpoint } from "../../../../layouts/hooks/useBreakpoint.js";
 import { InputGroup } from "../../../../layouts/input-group/InputGroup.js";
-import { TIMEFRAME_SELECTOR_MESSAGES } from "../../constants/timeframeSelectorMessages.js";
-import { useInternalTimeframeSelectorContext } from "../../hooks/useInternalTimeframeSelectorContext.js";
-import { useTimeframeSelectorContext } from "../../hooks/useTimeframeSelectorContext.js";
+import {
+  TIMEFRAMESELECTOR_ERROR_MESSAGES,
+  TIMEFRAME_SELECTOR_MESSAGES
+} from "../../constants/timeframeSelectorMessages.js";
 import { saveRecentTimeframe } from "../../utils/presets-helpers.js";
 import { isOutsideRange } from "../../utils/timeframe-selection.js";
 const CustomTimeframeSelector = () => {
-  const ref = useRef(null);
+  const ref = useTimeframeSelectorStore(
+    (state2) => state2.dateTimeRangePickerRef
+  );
   const intl = useIntl();
-  const { details, onChange } = useTimeframeSelectorContext();
-  const { min, max, showError, precision, required } = useInternalTimeframeSelectorContext();
+  const value = useTimeframeSelectorStore(
+    (state2) => state2.dateTimeRangePickerTimeframe
+  );
+  const onChange = useTimeframeSelectorStore(
+    (state2) => state2.setTimeframeSelectorTimeframe
+  );
+  const min = useTimeframeSelectorStore((state2) => state2.min);
+  const max = useTimeframeSelectorStore((state2) => state2.max);
+  const precision = useTimeframeSelectorStore((state2) => state2.precision);
+  const required = useTimeframeSelectorStore((state2) => state2.required);
+  const dateTimeRangePickerError = useTimeframeSelectorStore(
+    (state2) => state2.dateTimeRangePickerError
+  );
+  const formatString = useTimeframeSelectorStore((state2) => state2.formatString);
+  const {
+    state: { showError }
+  } = useFormFieldMessagesContext();
   const rootRef = useRef(null);
   const dateTimeRangePickerId = useId();
   const hintId = useId();
   const labelId = useId();
-  const { from, to } = parseValue(details);
-  const [timeframe, setTimeframe] = useState(
-    from && to ? {
-      from,
-      to
-    } : null
-  );
+  const { from, to } = parseValue(value);
   const { required: contextRequired } = useFormFieldContext();
   const callback = useCallback(
     (state2, action) => formFieldMessagesReducer(state2, action),
-    [dateTimeRangePickerId]
+    []
   );
   const [state, dispatch] = useReducer(callback, {
     customMessages: [],
     formControlMessages: [],
-    showError: false,
-    isTouched: false
+    showError,
+    isTouched: showError
   });
   const applyButtonDataDtName = "Apply";
+  const { valueFrom, valueTo } = getFromToValues(value);
+  const applyButtonDataDtProperties = `valueFrom:${valueFrom},valueTo:${valueTo}`;
+  const previousErrorRef = useRef();
+  useEffect(() => {
+    previousErrorRef.current = validate(value, min, max, {
+      formMessageDispatch: dispatch,
+      formerError: previousErrorRef.current,
+      precision,
+      showError,
+      checkOrder: true,
+      ref,
+      expectedFormat: formatString,
+      valueMode: "dateTimePicker",
+      required: required || contextRequired,
+      errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES
+    });
+    if (!required && !contextRequired) {
+      if (!from && to?.value === "now()") {
+        dispatch({
+          type: FormFieldMessagesAction.ADDMESSAGE,
+          payload: {
+            id: hintId,
+            variant: "error",
+            message: intl.formatMessage(
+              TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom
+            ),
+            messageType: "formcontrol",
+            validityStateKey: "customError"
+          }
+        });
+        return;
+      }
+      if (!to && from?.value === "now()") {
+        dispatch({
+          type: FormFieldMessagesAction.ADDMESSAGE,
+          payload: {
+            id: hintId,
+            variant: "error",
+            message: intl.formatMessage(
+              TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo
+            ),
+            messageType: "formcontrol",
+            validityStateKey: "customError"
+          }
+        });
+        return;
+      }
+    }
+  }, [
+    value,
+    min,
+    max,
+    dispatch,
+    precision,
+    formatString,
+    required,
+    contextRequired,
+    showError,
+    ref
+  ]);
   const handleApply = useCallback(() => {
-    if (!state.isValid) {
+    if (dateTimeRangePickerError) {
       return;
     }
     const currentValue = ref.current?.getCurrentValue();
     const refFrom = currentValue?.from?.value;
     const refTo = currentValue?.to?.value;
-    let currentTimeframe = timeframe;
+    let currentTimeframe = value;
     const onlyFromIsEmpty = !refFrom && !!refTo && refTo !== "now()";
     const onlyToIsEmpty = !refTo && !!refFrom && refFrom !== "now()";
     if (onlyFromIsEmpty || onlyToIsEmpty) {
@@ -86,8 +160,8 @@ const CustomTimeframeSelector = () => {
             from: parsedTimeframe.from.value,
             to: parsedTimeframe.to.value
           },
-          min,
-          max
+          min?.value,
+          max?.value
         )) {
           return;
         }
@@ -105,17 +179,22 @@ const CustomTimeframeSelector = () => {
     }
     const { from: from2, to: to2 } = currentTimeframe ? parseValue(currentTimeframe, false, precision) : { from: null, to: null };
     if (from2 && to2) {
-      const timeframe2 = { from: from2, to: to2 };
-      onChange(timeframe2);
-      saveRecentTimeframe(timeframe2);
+      const timeframe = { from: from2, to: to2 };
+      onChange(timeframe);
+      saveRecentTimeframe(timeframe);
       return;
     }
     if (!required && !contextRequired) {
-      onChange(null);
+      const hasFromValue = Boolean(refFrom);
+      const hasToValue = Boolean(refTo);
+      if (!hasFromValue && !hasToValue) {
+        onChange(null);
+      }
     }
   }, [
-    timeframe,
-    state.isValid,
+    dateTimeRangePickerError,
+    ref,
+    value,
     precision,
     required,
     contextRequired,
@@ -132,22 +211,56 @@ const CustomTimeframeSelector = () => {
       ref.current?.validate();
       handleApply();
     },
-    [handleApply]
+    [handleApply, ref]
   );
   const isScreenLargerThanMobile = useBreakpoint(
     `(min-width: ${BreakpointsJS.Max.Mobile}px)`,
     true
   );
   useEffect(() => {
-    if (showError) {
-      ref.current?.validate();
-    }
-  }, [showError]);
-  useEffect(() => {
-    const timeframe2 = { from: from?.value, to: to?.value };
-    const tempMin = filterOutGrailLimit(timeframe2, min);
-    const tempMax = filterOutGrailLimit(timeframe2, max);
-    if (!tempMin && !tempMax) {
+    const timeBoundaryMessageData = getTimeBoundaryMessageData(
+      {
+        from: from ?? void 0,
+        to: to ?? void 0
+      },
+      min,
+      max,
+      precision,
+      false
+    );
+    if (!timeBoundaryMessageData) {
+      if (!required && !contextRequired) {
+        if (!from && to?.value === "now()") {
+          dispatch({
+            type: FormFieldMessagesAction.ADDMESSAGE,
+            payload: {
+              id: hintId,
+              variant: "error",
+              message: intl.formatMessage(
+                TIMEFRAMESELECTOR_ERROR_MESSAGES.missingFrom
+              ),
+              messageType: "formcontrol",
+              validityStateKey: "customError"
+            }
+          });
+          return;
+        }
+        if (!to && from?.value === "now()") {
+          dispatch({
+            type: FormFieldMessagesAction.ADDMESSAGE,
+            payload: {
+              id: hintId,
+              variant: "error",
+              message: intl.formatMessage(
+                TIMEFRAMESELECTOR_ERROR_MESSAGES.missingTo
+              ),
+              messageType: "formcontrol",
+              validityStateKey: "customError"
+            }
+          });
+          return;
+        }
+      }
       dispatch({
         type: FormFieldMessagesAction.REMOVEMESSAGE,
         payload: {
@@ -162,12 +275,26 @@ const CustomTimeframeSelector = () => {
       payload: {
         id: hintId,
         variant: "hint",
-        message: getOutsideRangeMessage(intl, tempMin, tempMax, precision),
+        message: intl.formatMessage(
+          TIMEFRAMESELECTOR_ERROR_MESSAGES[timeBoundaryMessageData.errorKey],
+          timeBoundaryMessageData.values
+        ),
         messageType: "formcontrol",
         validityStateKey: "customError"
       }
     });
-  }, [min, max, dispatch, intl, precision, hintId, from?.value, to?.value]);
+  }, [
+    min,
+    max,
+    dispatch,
+    intl,
+    precision,
+    hintId,
+    from,
+    to,
+    required,
+    contextRequired
+  ]);
   const messageContextValue = useMemo(
     () => ({
       dispatch,
@@ -196,16 +323,11 @@ const CustomTimeframeSelector = () => {
             ),
             /* @__PURE__ */ jsxs(InputGroup, { style: { gridAutoColumns: "1fr auto" }, children: [
               /* @__PURE__ */ jsx(
-                DateTimeRangePicker,
+                DateTimeRangePickerRoot,
                 {
                   ref,
                   id: dateTimeRangePickerId,
                   required: required || contextRequired,
-                  min,
-                  max,
-                  precision,
-                  value: timeframe,
-                  onChange: setTimeframe,
                   style: { gridTemplateColumns: "1fr auto" }
                 }
               ),
@@ -222,6 +344,7 @@ const CustomTimeframeSelector = () => {
                     borderBottomLeftRadius: 0
                   },
                   "data-dt-name": applyButtonDataDtName,
+                  "data-dt-properties": applyButtonDataDtProperties,
                   children: intl.formatMessage(
                     TIMEFRAME_SELECTOR_MESSAGES.applyButton
                   )
@@ -242,6 +365,7 @@ const CustomTimeframeSelector = () => {
         style: { alignSelf: "end" },
         onClick: handleApply,
         "data-dt-name": applyButtonDataDtName,
+        "data-dt-properties": applyButtonDataDtProperties,
         children: intl.formatMessage(TIMEFRAME_SELECTOR_MESSAGES.applyButton)
       }
     )

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

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

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

@@ -1,7 +1,7 @@
 import "./CustomTimeframeSelector.css";
-var fieldset = "_at2xro0-3-2-0";
-var overlayRoot = "_at2xro1-3-2-0";
-var wrapper = "_at2xro2-3-2-0";
+var fieldset = "_at2xro0-3-3-0";
+var overlayRoot = "_at2xro1-3-3-0";
+var wrapper = "_at2xro2-3-3-0";
 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-2-0';\nexport var overlayRoot = '_at2xro1-3-2-0';\nexport var wrapper = '_at2xro2-3-2-0';"],
+  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-3-0';\nexport var overlayRoot = '_at2xro1-3-3-0';\nexport var wrapper = '_at2xro2-3-3-0';"],
   "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-2-0 {
+._14xc6b0-3-3-0 {
   background: var(--dt-colors-background-surface-default, #fff);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   border-radius: var(--dt-borders-radius-surface-subdued, 9px);
@@ -9,18 +9,18 @@
   min-height: 0;
   max-width: 100vw;
 }
-._14xc6b1-3-2-0 {
+._14xc6b1-3-3-0 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-2-0 {
+._14xc6b2-3-3-0 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-2-0 {
+._14xc6b3-3-3-0 {
   overflow-wrap: break-word;
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);