@dynatrace/strato-components 3.5.2 → 3.7.0

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

@@ -59,6 +59,7 @@ const CustomTimeframeSelector = () => {
   const dateTimeRangePickerError = useTimeframeSelectorStore(
     (state2) => state2.dateTimeRangePickerError
   );
+  const nowInserted = useTimeframeSelectorStore((state2) => state2.nowInserted);
   const formatString = useTimeframeSelectorStore((state2) => state2.formatString);
   const {
     state: { showError }
@@ -67,7 +68,7 @@ const CustomTimeframeSelector = () => {
   const dateTimeRangePickerId = useId();
   const hintId = useId();
   const labelId = useId();
-  const { from, to } = parseValue(value);
+  const { from, to } = useMemo(() => parseValue(value), [value]);
   const { required: contextRequired } = useFormFieldContext();
   const callback = useCallback(
     (state2, action) => formFieldMessagesReducer(state2, action),
@@ -96,7 +97,7 @@ const CustomTimeframeSelector = () => {
       required: required || contextRequired,
       errorMessages: TIMEFRAMESELECTOR_ERROR_MESSAGES
     });
-    if (!required && !contextRequired) {
+    if (!nowInserted && !required && !contextRequired) {
       if (!from && to?.value === "now()") {
         dispatch({
           type: FormFieldMessagesAction.ADDMESSAGE,
@@ -127,6 +128,13 @@ const CustomTimeframeSelector = () => {
         });
         return;
       }
+      dispatch({
+        type: FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: {
+          id: hintId,
+          messageType: "formcontrol"
+        }
+      });
     }
   }, [
     value,
@@ -138,9 +146,18 @@ const CustomTimeframeSelector = () => {
     required,
     contextRequired,
     showError,
-    ref
+    ref,
+    nowInserted,
+    from,
+    to,
+    hintId,
+    intl
   ]);
   const handleApply = useCallback(() => {
+    dispatch({
+      type: FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: true }
+    });
     if (dateTimeRangePickerError) {
       return;
     }
@@ -229,7 +246,7 @@ const CustomTimeframeSelector = () => {
       false
     );
     if (!timeBoundaryMessageData) {
-      if (!required && !contextRequired) {
+      if (!nowInserted && !required && !contextRequired) {
         if (!from && to?.value === "now()") {
           dispatch({
             type: FormFieldMessagesAction.ADDMESSAGE,
@@ -293,7 +310,8 @@ const CustomTimeframeSelector = () => {
     from,
     to,
     required,
-    contextRequired
+    contextRequired,
+    nowInserted
   ]);
   const messageContextValue = useMemo(
     () => ({

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  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,\n        to,\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                    onBlur={(event) => {\n                      const hasPresetItemSelected =\n                        event.relatedTarget?.getAttribute('role') === 'option';\n                      const isActiveElementInside =\n                        ref.current?.element?.contains(document.activeElement);\n\n                      if (hasPresetItemSelected || isActiveElementInside) {\n                        return;\n                      }\n\n                      dispatch({\n                        type: FormFieldMessagesAction.SETISTOUCHED,\n                        payload: { isTouched: true },\n                      });\n                    }}\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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",
+  "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 nowInserted = useTimeframeSelectorStore((state) => state.nowInserted);\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  const hintId = useId();\n  const labelId = useId();\n\n  const { from, to } = useMemo(() => parseValue(value), [value]);\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 (!nowInserted && !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      // Neither error condition applies anymore \u2014 clear any previously shown error.\n      dispatch({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: {\n          id: hintId,\n          messageType: 'formcontrol',\n        },\n      });\n    }\n  }, [\n    value,\n    min,\n    max,\n    dispatch,\n    precision,\n    formatString,\n    required,\n    contextRequired,\n    showError,\n    ref,\n    nowInserted,\n    from,\n    to,\n    hintId,\n    intl,\n  ]);\n\n  /** Handle form submission. */\n  const handleApply = useCallback(() => {\n    dispatch({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n\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,\n        to,\n      },\n      min,\n      max,\n      precision,\n      false,\n    );\n\n    if (!timeBoundaryMessageData) {\n      if (!nowInserted && !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    nowInserted,\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                    onBlur={(event) => {\n                      const hasPresetItemSelected =\n                        event.relatedTarget?.getAttribute('role') === 'option';\n                      const isActiveElementInside =\n                        ref.current?.element?.contains(document.activeElement);\n\n                      if (hasPresetItemSelected || isActiveElementInside) {\n                        return;\n                      }\n\n                      dispatch({\n                        type: FormFieldMessagesAction.SETISTOUCHED,\n                        payload: { isTouched: true },\n                      });\n                    }}\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-5-2";
-var overlayRoot = "_at2xro1-3-5-2";
-var wrapper = "_at2xro2-3-5-2";
+var fieldset = "_at2xro0-3-7-0";
+var overlayRoot = "_at2xro1-3-7-0";
+var wrapper = "_at2xro2-3-7-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-5-2';\nexport var overlayRoot = '_at2xro1-3-5-2';\nexport var wrapper = '_at2xro2-3-5-2';"],
+  "sourcesContent": ["import './CustomTimeframeSelector.css';\nexport var fieldset = '_at2xro0-3-7-0';\nexport var overlayRoot = '_at2xro1-3-7-0';\nexport var wrapper = '_at2xro2-3-7-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-5-2 {
+._14xc6b0-3-7-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-5-2 {
+._14xc6b1-3-7-0 {
   overflow-y: auto;
   overflow-x: hidden;
   width: 100%;
 }
-._14xc6b2-3-5-2 {
+._14xc6b2-3-7-0 {
   box-sizing: border-box;
   min-width: 0;
   width: 100%;
   padding: var(--dt-spacings-size-6, 6px);
 }
-._14xc6b3-3-5-2 {
+._14xc6b3-3-7-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);

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

@@ -1,8 +1,8 @@
 import "./TimeframeSelectorOverlay.css";
-var footer = "_14xc6b2-3-5-2";
-var hint = "_14xc6b3-3-5-2";
-var scrollContainer = "_14xc6b1-3-5-2";
-var wrapper = "_14xc6b0-3-5-2";
+var footer = "_14xc6b2-3-7-0";
+var hint = "_14xc6b3-3-7-0";
+var scrollContainer = "_14xc6b1-3-7-0";
+var wrapper = "_14xc6b0-3-7-0";
 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-5-2';\nexport var hint = '_14xc6b3-3-5-2';\nexport var scrollContainer = '_14xc6b1-3-5-2';\nexport var wrapper = '_14xc6b0-3-5-2';"],
+  "sourcesContent": ["import './TimeframeSelectorOverlay.css';\nexport var footer = '_14xc6b2-3-7-0';\nexport var hint = '_14xc6b3-3-7-0';\nexport var scrollContainer = '_14xc6b1-3-7-0';\nexport var wrapper = '_14xc6b0-3-7-0';"],
   "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

@@ -4,13 +4,12 @@ import clsx from "clsx";
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 import Spacings from "@dynatrace/strato-design-tokens/spacings";
-import {
-  getRegionalFormat,
-  getTimezone
-} from "@dynatrace-sdk/user-preferences";
+import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import * as styles from "./TimeframeSelectorOverlay.sty.js";
 import { Button } from "../../../../buttons/button/Button.js";
+import { TIMEFRAME_SELECTOR_DOCUMENTATION_URL } from "../../../../core/external-links.js";
 import { useTimeframeSelectorStore } from "../../../../core/time/timeframeStore/useTimeframeStore.js";
+import { getSafeRegionalFormat } from "../../../../forms/forms-core/time/helpers.js";
 import { Divider } from "../../../../layouts/divider/Divider.js";
 import { Flex } from "../../../../layouts/flex/Flex.js";
 import { globalSprinkles } from "../../../../styles/safe-sprinkles.js";
@@ -25,11 +24,11 @@ const TimeframeSelectorOverlayFooter = (props) => {
   );
   const timeZoneWithOffset = useMemo(() => {
     const timeZone = getTimezone();
-    const parts = new Intl.DateTimeFormat(getRegionalFormat(), {
+    const parts = new Intl.DateTimeFormat(getSafeRegionalFormat(), {
       timeZone,
       timeZoneName: "shortOffset"
     }).formatToParts(TZDateMini.tz(timeZone));
-    const partsShortName = new Intl.DateTimeFormat(getRegionalFormat(), {
+    const partsShortName = new Intl.DateTimeFormat(getSafeRegionalFormat(), {
       timeZone,
       timeZoneName: "short"
     }).formatToParts(TZDateMini.tz(timeZone));
@@ -73,7 +72,7 @@ const TimeframeSelectorOverlayFooter = (props) => {
                   Text,
                   {
                     as: ExternalLink,
-                    href: "https://dt-url.net/timeframe-selector",
+                    href: TIMEFRAME_SELECTOR_DOCUMENTATION_URL,
                     textStyle: "small",
                     style: { paddingRight: Spacings.Size6 },
                     "data-dt-name": "LearnMore",

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 {\n  getRegionalFormat,\n  getTimezone,\n} from '@dynatrace-sdk/user-preferences';\n\nimport * as styles from './TimeframeSelectorOverlay.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { useTimeframeSelectorStore } from '../../../../core/time/timeframeStore/useTimeframeStore.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(getRegionalFormat(), {\n      timeZone,\n      timeZoneName: 'shortOffset',\n    }).formatToParts(TZDateMini.tz(timeZone));\n    const partsShortName = new Intl.DateTimeFormat(getRegionalFormat(), {\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\" />}\n          <Text\n            as={ExternalLink}\n            href=\"https://dt-url.net/timeframe-selector\"\n            textStyle=\"small\"\n            style={{ paddingRight: Spacings.Size6 }}\n            data-dt-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": "AA8DI,mBACE,KASE,YAVJ;AA9DJ,SAAS,kBAAkB;AAC3B,OAAO,UAAU;AACjB,SAAS,eAAe;AACxB,SAAS,eAAe;AAExB,OAAO,cAAc;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEP,YAAY,YAAY;AACxB,SAAS,cAAc;AACvB,SAAS,iCAAiC;AAC1C,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,kBAAkB,GAAG;AAAA,MACzD;AAAA,MACA,cAAc;AAAA,IAChB,CAAC,EAAE,cAAc,WAAW,GAAG,QAAQ,CAAC;AACxC,UAAM,iBAAiB,IAAI,KAAK,eAAe,kBAAkB,GAAG;AAAA,MAClE;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;AAAA,gBAC9C;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAK;AAAA,oBACL,WAAU;AAAA,oBACV,OAAO,EAAE,cAAc,SAAS,MAAM;AAAA,oBACtC,gBAAa;AAAA,oBAEZ,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  /* 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\" />}\n          <Text\n            as={ExternalLink}\n            href={TIMEFRAME_SELECTOR_DOCUMENTATION_URL}\n            textStyle=\"small\"\n            style={{ paddingRight: Spacings.Size6 }}\n            data-dt-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;AAAA,gBAC9C;AAAA,kBAAC;AAAA;AAAA,oBACC,IAAI;AAAA,oBACJ,MAAM;AAAA,oBACN,WAAU;AAAA,oBACV,OAAO,EAAE,cAAc,SAAS,MAAM;AAAA,oBACtC,gBAAa;AAAA,oBAEZ,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

@@ -9,8 +9,8 @@ import {
 import { useIntl } from "react-intl";
 import { HistoryIcon } from "@dynatrace/strato-icons";
 import * as styles from "./Presets.sty.js";
+import { useFocusRing } from "../../../../core/hooks/useFocusRing.js";
 import { useId } from "../../../../core/hooks/useId.js";
-import { useFocusRing } from "../../../../core/styles/useFocusRing.js";
 import { useTimeframeSelectorStore } from "../../../../core/time/timeframeStore/useTimeframeStore.js";
 import { mergeProps } from "../../../../core/utils/merge-props.js";
 import {

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 { useId } from '../../../../core/hooks/useId.js';\nimport { useFocusRing } from '../../../../core/styles/useFocusRing.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={tooltipId}\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 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={tooltipId}\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-5-2 {
+._14rlfn30-3-7-0 {
   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-5-2 {
+._14rlfn31-3-7-0 {
   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-5-2 {
+._14rlfn32-3-7-0 {
   background-color: var(--dt-colors-background-field-neutral-default, #e4e5eb00);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._14rlfn32-3-5-2:hover {
+._14rlfn32-3-7-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._14rlfn32-3-5-2:active {
+._14rlfn32-3-7-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._14rlfn33-3-5-2 {
+._14rlfn33-3-7-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn33-3-5-2:hover {
+._14rlfn33-3-7-0:hover {
   background-color: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
 }
-._14rlfn33-3-5-2:active {
+._14rlfn33-3-7-0:active {
   background-color: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
 }
-._14rlfn34-3-5-2 {
+._14rlfn34-3-7-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._14rlfn36-3-5-2 {
+._14rlfn36-3-7-0 {
   min-width: 0;
 }
-._14rlfn37-3-5-2 {
+._14rlfn37-3-7-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
 }
-._14rlfn38-3-5-2 {
+._14rlfn38-3-7-0 {
   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-5-2::before {
+._14rlfn39-3-7-0::before {
   content: "";
   position: absolute;
   width: 2px;
@@ -62,62 +62,62 @@
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3a-3-5-2::before {
+._14rlfn3a-3-7-0::before {
   content: "";
 }
-._14rlfn3b-3-5-2::before {
+._14rlfn3b-3-7-0::before {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3c-3-5-2::before {
+._14rlfn3c-3-7-0::before {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3e-3-5-2 {
+._14rlfn3e-3-7-0 {
   white-space: nowrap;
   overflow: hidden;
   display: block;
   text-overflow: ellipsis;
   text-align: right;
 }
-._14rlfn3f-3-5-2 {
+._14rlfn3f-3-7-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._14rlfn3g-3-5-2 {
+._14rlfn3g-3-7-0 {
   color: var(--dt-colors-text-primary-default, #464cce);
 }
-._14rlfn3h-3-5-2 {
+._14rlfn3h-3-7-0 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._14rlfn3i-3-5-2 {
+._14rlfn3i-3-7-0 {
   position: absolute;
   width: 2px;
   height: 20px;
   left: 4px;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._14rlfn3j-3-5-2 {
+._14rlfn3j-3-7-0 {
   background-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._14rlfn3k-3-5-2 {
+._14rlfn3k-3-7-0 {
   background-color: var(--dt-colors-border-primary-accent, #464cce);
 }
-._14rlfn3l-3-5-2 {
+._14rlfn3l-3-7-0 {
   position: relative;
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._14rlfn3m-3-5-2 {
+._14rlfn3m-3-7-0 {
   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-5-2 {
+._14rlfn3n-3-7-0 {
   flex-shrink: 0;
 }
 @media screen and (max-width: 470px) {
-  ._14rlfn3d-3-5-2 {
+  ._14rlfn3d-3-7-0 {
     display: none;
   }
 }

package/esm/filters/timeframe-selector/components/presets/Presets.sty.js

@@ -1,16 +1,16 @@
 import "./Presets.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var displayValueWrapper = "_14rlfn36-3-5-2";
-var formattedPresetValue = _7a468({ defaultClassName: "_14rlfn3e-3-5-2", variantClassNames: { state: { rest: "_14rlfn3f-3-5-2", selected: "_14rlfn3g-3-5-2", disabled: "_14rlfn3h-3-5-2" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
-var indicatorIcon = _7a468({ defaultClassName: "_14rlfn3i-3-5-2", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-5-2", false: "_14rlfn3k-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
-var item = _7a468({ defaultClassName: "_14rlfn31-3-5-2", variantClassNames: { state: { rest: "_14rlfn32-3-5-2", selected: "_14rlfn33-3-5-2", disabled: "_14rlfn34-3-5-2" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
-var itemContainer = "_14rlfn30-3-5-2";
-var listContainer = "_14rlfn3l-3-5-2";
-var mediaQuery = "_14rlfn3d-3-5-2";
-var recentHeading = "_14rlfn3m-3-5-2";
-var recentIcon = "_14rlfn3n-3-5-2";
-var timeframeDisplayValue = "_14rlfn37-3-5-2";
-var wrapper = _7a468({ defaultClassName: "_14rlfn38-3-5-2", variantClassNames: { isSelected: { true: "_14rlfn39-3-5-2", false: "_14rlfn3a-3-5-2" }, isDisabled: { true: "_14rlfn3b-3-5-2", false: "_14rlfn3c-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var displayValueWrapper = "_14rlfn36-3-7-0";
+var formattedPresetValue = _7a468({ defaultClassName: "_14rlfn3e-3-7-0", variantClassNames: { state: { rest: "_14rlfn3f-3-7-0", selected: "_14rlfn3g-3-7-0", disabled: "_14rlfn3h-3-7-0" } }, defaultVariants: { state: "rest" }, compoundVariants: [] });
+var indicatorIcon = _7a468({ defaultClassName: "_14rlfn3i-3-7-0", variantClassNames: { isDisabled: { true: "_14rlfn3j-3-7-0", false: "_14rlfn3k-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
+var item = _7a468({ defaultClassName: "_14rlfn31-3-7-0", variantClassNames: { state: { rest: "_14rlfn32-3-7-0", selected: "_14rlfn33-3-7-0", disabled: "_14rlfn34-3-7-0" }, defaultVariants: { state: "rest" } }, defaultVariants: {}, compoundVariants: [] });
+var itemContainer = "_14rlfn30-3-7-0";
+var listContainer = "_14rlfn3l-3-7-0";
+var mediaQuery = "_14rlfn3d-3-7-0";
+var recentHeading = "_14rlfn3m-3-7-0";
+var recentIcon = "_14rlfn3n-3-7-0";
+var timeframeDisplayValue = "_14rlfn37-3-7-0";
+var wrapper = _7a468({ defaultClassName: "_14rlfn38-3-7-0", variantClassNames: { isSelected: { true: "_14rlfn39-3-7-0", false: "_14rlfn3a-3-7-0" }, isDisabled: { true: "_14rlfn3b-3-7-0", false: "_14rlfn3c-3-7-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   displayValueWrapper,
   formattedPresetValue,