@dynatrace/strato-components 3.5.2 → 3.7.0

package/esm/core/time/timeframeStore/actions/dateTimePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/core/time/timeframeStore/actions/dateTimePicker.ts"],
-  "sourcesContent": ["import type { Dispatch } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { focusTimeInput } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  getTimeValueFromSimpleValue,\n  toCalendarValue,\n} from '../../../../forms/forms-core/time/helpers.js';\nimport { getTimeValue } from '../../../../forms/forms-core/time/timeParser.js';\nimport { type TimeValue } from '../../../types/time.js';\nimport { validate } from '../../validation.js';\nimport type {\n  DateTimePickerValueStore,\n  DateTimePickerValueStoreActions,\n} from '../dateTimePicker.types.js';\n\n/**\n * Creates actions for the DateTimePicker store using the slice action handlers.\n *  @internal\n */\nexport function getDateTimePickerActions(\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: TimeValue | null | '') => void) | undefined,\n  isControlled?: boolean,\n) {\n  const actions = (\n    set: StoreApi<DateTimePickerValueStore>['setState'],\n  ): DateTimePickerValueStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          const newTimeValue =\n            getTimeValueFromSimpleValue(\n              inputValue,\n              state.timeOffset,\n              undefined,\n              undefined,\n              state.min,\n              state.max,\n              state.precision,\n            ) ?? null;\n\n          const calendarError = validate(newTimeValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.dateTimePickerError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: state.dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n            required: state.required,\n          });\n\n          state.dateTimePickerRef?.current?.close();\n          requestAnimationFrame(() => {\n            requestAnimationFrame(() => {\n              focusTimeInput(state.dateTimeInputRef);\n            });\n          });\n\n          const calendarTimeValue = toCalendarValue(\n            newTimeValue,\n            state.precision,\n          );\n          return {\n            calendarValue: calendarTimeValue,\n            dateTimePickerValue: newTimeValue,\n            dateTimePickerError: calendarError,\n            calendarError,\n          };\n        });\n      },\n      setDateTimePickerValue: (value) => {\n        return set((state) => {\n          const newValue = getTimeValue(value, state.precision) ?? null;\n\n          // we would expect a timevalue but as it isn't a complete value then parser returns null.\n          const isPartialValue = newValue?.absoluteDate === '';\n\n          // In case of interrim values we want to validate and show errors but not update the calendar value.\n          // To still inform about the error state it triggers the onChange with an empty string.\n          if (isPartialValue) {\n            const errorKey = validate(newValue, state.min, state.max, {\n              formMessageDispatch: formFieldMessagesDispatch,\n              formerError: state.dateTimePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'single',\n            });\n\n            onChangeProp?.('');\n\n            return {\n              calendarError: errorKey,\n              dateTimePickerError: errorKey,\n            };\n          }\n\n          onChangeProp?.(newValue);\n\n          const calendarTimeValue = toCalendarValue(newValue, state.precision);\n\n          if (isControlled) {\n            return { calendarValue: calendarTimeValue };\n          }\n\n          const dateTimePickerError = validate(newValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.dateTimePickerError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: false,\n            ref: state.dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n          });\n\n          return {\n            dateTimePickerValue: newValue,\n            calendarValue: calendarTimeValue,\n            calendarError: dateTimePickerError,\n            dateTimePickerError,\n          };\n        });\n      },\n    };\n  };\n\n  return actions;\n}\n"],
-  "mappings": "AAGA,SAAS,sBAAsB;AAE/B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,gBAAgB;AAUlB,SAAS,yBACd,2BACA,cACA,cACA;AACA,QAAM,UAAU,CACd,QACoC;AACpC,WAAO;AAAA,MACL,kBAAkB,CAAC,eAAe;AAChC,YAAI,CAAC,UAAU;AACb,gBAAM,eACJ;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM;AAAA,UACR,KAAK;AAEP,gBAAM,gBAAgB,SAAS,cAAc,MAAM,KAAK,MAAM,KAAK;AAAA,YACjE,qBAAqB;AAAA,YACrB,aAAa,MAAM;AAAA,YACnB,WAAW,MAAM;AAAA,YACjB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK,MAAM;AAAA,YACX,gBAAgB,MAAM;AAAA,YACtB,WAAW;AAAA,YACX,UAAU,MAAM;AAAA,UAClB,CAAC;AAED,gBAAM,mBAAmB,SAAS,MAAM;AACxC,gCAAsB,MAAM;AAC1B,kCAAsB,MAAM;AAC1B,6BAAe,MAAM,gBAAgB;AAAA,YACvC,CAAC;AAAA,UACH,CAAC;AAED,gBAAM,oBAAoB;AAAA,YACxB;AAAA,YACA,MAAM;AAAA,UACR;AACA,iBAAO;AAAA,YACL,eAAe;AAAA,YACf,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,wBAAwB,CAAC,UAAU;AACjC,eAAO,IAAI,CAAC,UAAU;AACpB,gBAAM,WAAW,aAAa,OAAO,MAAM,SAAS,KAAK;AAGzD,gBAAM,iBAAiB,UAAU,iBAAiB;AAIlD,cAAI,gBAAgB;AAClB,kBAAM,WAAW,SAAS,UAAU,MAAM,KAAK,MAAM,KAAK;AAAA,cACxD,qBAAqB;AAAA,cACrB,aAAa,MAAM;AAAA,cACnB,WAAW,MAAM;AAAA,cACjB,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,KAAK,MAAM;AAAA,cACX,gBAAgB,MAAM;AAAA,cACtB,WAAW;AAAA,YACb,CAAC;AAED,2BAAe,EAAE;AAEjB,mBAAO;AAAA,cACL,eAAe;AAAA,cACf,qBAAqB;AAAA,YACvB;AAAA,UACF;AAEA,yBAAe,QAAQ;AAEvB,gBAAM,oBAAoB,gBAAgB,UAAU,MAAM,SAAS;AAEnE,cAAI,cAAc;AAChB,mBAAO,EAAE,eAAe,kBAAkB;AAAA,UAC5C;AAEA,gBAAM,sBAAsB,SAAS,UAAU,MAAM,KAAK,MAAM,KAAK;AAAA,YACnE,qBAAqB;AAAA,YACrB,aAAa,MAAM;AAAA,YACnB,WAAW,MAAM;AAAA,YACjB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK,MAAM;AAAA,YACX,gBAAgB,MAAM;AAAA,YACtB,WAAW;AAAA,UACb,CAAC;AAED,iBAAO;AAAA,YACL,qBAAqB;AAAA,YACrB,eAAe;AAAA,YACf,eAAe;AAAA,YACf;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "sourcesContent": ["import type { Dispatch } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { focusElementWithRetry } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  getTimeValueFromSimpleValue,\n  toCalendarValue,\n} from '../../../../forms/forms-core/time/helpers.js';\nimport { getTimeValue } from '../../../../forms/forms-core/time/timeParser.js';\nimport { type TimeValue } from '../../../types/time.js';\nimport { isTimeValue } from '../../helpers.js';\nimport { validate } from '../../validation.js';\nimport type {\n  DateTimePickerValueStore,\n  DateTimePickerValueStoreActions,\n} from '../dateTimePicker.types.js';\n\n/**\n * Creates actions for the DateTimePicker store using the slice action handlers.\n *  @internal\n */\nexport function getDateTimePickerActions(\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: TimeValue | null | '') => void) | undefined,\n  isControlled?: boolean,\n) {\n  const actions = (\n    set: StoreApi<DateTimePickerValueStore>['setState'],\n  ): DateTimePickerValueStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          // DateTimePicker is single-date only \u2014 TimeValue expressions are not applicable.\n          if (isTimeValue(inputValue)) {\n            return state;\n          }\n\n          const newTimeValue =\n            getTimeValueFromSimpleValue(\n              inputValue,\n              state.timeOffset,\n              undefined,\n              undefined,\n              state.min,\n              state.max,\n              state.precision,\n            ) ?? null;\n\n          const calendarError = validate(newTimeValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.dateTimePickerError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: state.dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n            required: state.required,\n          });\n\n          state.dateTimePickerRef?.current?.close();\n          focusElementWithRetry(\n            () =>\n              state.dateTimeInputRef.current?.spinButtonHandlers.get('hour')\n                ?.element.current,\n            state.dateTimeInputRef,\n          );\n\n          const calendarTimeValue = toCalendarValue(\n            newTimeValue,\n            state.precision,\n          );\n          return {\n            calendarValue: calendarTimeValue,\n            dateTimePickerValue: newTimeValue,\n            dateTimePickerError: calendarError,\n            calendarError,\n          };\n        });\n      },\n      setDateTimePickerValue: (value) => {\n        return set((state) => {\n          const newValue = getTimeValue(value, state.precision) ?? null;\n\n          // we would expect a timevalue but as it isn't a complete value then parser returns null.\n          const isPartialValue = newValue?.absoluteDate === '';\n\n          // In case of interrim values we want to validate and show errors but not update the calendar value.\n          // To still inform about the error state it triggers the onChange with an empty string.\n          if (isPartialValue) {\n            const errorKey = validate(newValue, state.min, state.max, {\n              formMessageDispatch: formFieldMessagesDispatch,\n              formerError: state.dateTimePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'single',\n            });\n\n            onChangeProp?.('');\n\n            return {\n              calendarError: errorKey,\n              dateTimePickerError: errorKey,\n            };\n          }\n\n          onChangeProp?.(newValue);\n\n          const calendarTimeValue = toCalendarValue(newValue, state.precision);\n\n          if (isControlled) {\n            return { calendarValue: calendarTimeValue };\n          }\n\n          const dateTimePickerError = validate(newValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.dateTimePickerError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: false,\n            ref: state.dateTimePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'single',\n          });\n\n          return {\n            dateTimePickerValue: newValue,\n            calendarValue: calendarTimeValue,\n            calendarError: dateTimePickerError,\n            dateTimePickerError,\n          };\n        });\n      },\n    };\n  };\n\n  return actions;\n}\n"],
+  "mappings": "AAGA,SAAS,6BAA6B;AAEtC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,oBAAoB;AAE7B,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AAUlB,SAAS,yBACd,2BACA,cACA,cACA;AACA,QAAM,UAAU,CACd,QACoC;AACpC,WAAO;AAAA,MACL,kBAAkB,CAAC,eAAe;AAChC,YAAI,CAAC,UAAU;AAEb,cAAI,YAAY,UAAU,GAAG;AAC3B,mBAAO;AAAA,UACT;AAEA,gBAAM,eACJ;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN;AAAA,YACA;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN,MAAM;AAAA,UACR,KAAK;AAEP,gBAAM,gBAAgB,SAAS,cAAc,MAAM,KAAK,MAAM,KAAK;AAAA,YACjE,qBAAqB;AAAA,YACrB,aAAa,MAAM;AAAA,YACnB,WAAW,MAAM;AAAA,YACjB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK,MAAM;AAAA,YACX,gBAAgB,MAAM;AAAA,YACtB,WAAW;AAAA,YACX,UAAU,MAAM;AAAA,UAClB,CAAC;AAED,gBAAM,mBAAmB,SAAS,MAAM;AACxC;AAAA,YACE,MACE,MAAM,iBAAiB,SAAS,mBAAmB,IAAI,MAAM,GACzD,QAAQ;AAAA,YACd,MAAM;AAAA,UACR;AAEA,gBAAM,oBAAoB;AAAA,YACxB;AAAA,YACA,MAAM;AAAA,UACR;AACA,iBAAO;AAAA,YACL,eAAe;AAAA,YACf,qBAAqB;AAAA,YACrB,qBAAqB;AAAA,YACrB;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,wBAAwB,CAAC,UAAU;AACjC,eAAO,IAAI,CAAC,UAAU;AACpB,gBAAM,WAAW,aAAa,OAAO,MAAM,SAAS,KAAK;AAGzD,gBAAM,iBAAiB,UAAU,iBAAiB;AAIlD,cAAI,gBAAgB;AAClB,kBAAM,WAAW,SAAS,UAAU,MAAM,KAAK,MAAM,KAAK;AAAA,cACxD,qBAAqB;AAAA,cACrB,aAAa,MAAM;AAAA,cACnB,WAAW,MAAM;AAAA,cACjB,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,KAAK,MAAM;AAAA,cACX,gBAAgB,MAAM;AAAA,cACtB,WAAW;AAAA,YACb,CAAC;AAED,2BAAe,EAAE;AAEjB,mBAAO;AAAA,cACL,eAAe;AAAA,cACf,qBAAqB;AAAA,YACvB;AAAA,UACF;AAEA,yBAAe,QAAQ;AAEvB,gBAAM,oBAAoB,gBAAgB,UAAU,MAAM,SAAS;AAEnE,cAAI,cAAc;AAChB,mBAAO,EAAE,eAAe,kBAAkB;AAAA,UAC5C;AAEA,gBAAM,sBAAsB,SAAS,UAAU,MAAM,KAAK,MAAM,KAAK;AAAA,YACnE,qBAAqB;AAAA,YACrB,aAAa,MAAM;AAAA,YACnB,WAAW,MAAM;AAAA,YACjB,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK,MAAM;AAAA,YACX,gBAAgB,MAAM;AAAA,YACtB,WAAW;AAAA,UACb,CAAC;AAED,iBAAO;AAAA,YACL,qBAAqB;AAAA,YACrB,eAAe;AAAA,YACf,eAAe;AAAA,YACf;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/core/time/timeframeStore/actions/dateTimeRangePicker.js

@@ -1,36 +1,78 @@
 import { getTimeframeFromCalendarSelection } from "./calendar.js";
-import { focusTimeInput } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
+import {
+  applySetToNow,
+  closeCalendarAndFocusInput,
+  handleClearCalendarValue
+} from "./helpers.js";
+import { sortTimeframeValues } from "../../../../forms/forms-core/time/helpers.js";
 import { removePrecisionFromTimeFrame } from "../../../../forms/forms-core/time/timeParser.js";
 import {
   isFullTimeframe,
+  isNowTimeValue,
   isTimeValue,
   mergeRangeValue
 } from "../../helpers.js";
-import { validate } from "../../validation.js";
-function getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp) {
+import { validate, isOutOfBounds } from "../../validation.js";
+function getDateTimeRangePickerActions(isControlled, formFieldMessagesDispatch, onChangeProp) {
   const actions = (set) => {
     return {
       setCalendarValue: (inputValue) => {
         set((state) => {
+          if (isTimeValue(inputValue) && inputValue.value === "now()") {
+            const update = applySetToNow(state, {
+              isControlled,
+              onChangeProp,
+              formFieldMessagesDispatch,
+              validateMode: "dateTimePicker"
+            });
+            const nowInserted = "dateTimeRangePickerTimeframe" in update && !update.dateTimeRangePickerTimeframe?.from && isNowTimeValue(update.dateTimeRangePickerTimeframe?.to);
+            return { ...update, nowInserted };
+          }
           const calendarTimeframe = getTimeframeFromCalendarSelection(
             inputValue,
             state
           );
+          const nowIsOutOfBounds = isOutOfBounds(
+            "now",
+            isNowTimeValue(state.min) ? null : state.min,
+            isNowTimeValue(state.max) ? null : state.max
+          ) !== void 0;
+          if (!nowIsOutOfBounds && !state.dateTimeRangePickerTimeframe?.from && state.dateTimeRangePickerTimeframe?.to && isNowTimeValue(state.dateTimeRangePickerTimeframe.to) && calendarTimeframe?.from && !calendarTimeframe?.to) {
+            const timeframe = sortTimeframeValues(
+              {
+                from: calendarTimeframe.from,
+                to: state.dateTimeRangePickerTimeframe.to
+              },
+              state.min,
+              state.max,
+              state.precision
+            );
+            if (isFullTimeframe(timeframe)) {
+              closeCalendarAndFocusInput(
+                state.dateTimeRangePickerRef,
+                state.dateTimeFromRef
+              );
+              onChangeProp?.(timeframe);
+            }
+            return {
+              calendarValue: timeframe,
+              dateTimeRangePickerTimeframe: timeframe,
+              nowInserted: false
+            };
+          }
           if (isFullTimeframe(calendarTimeframe)) {
-            state.dateTimeRangePickerRef?.current?.close();
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                state.dateTimeRangePickerRef?.current?.focus?.();
-                focusTimeInput(state.dateTimeFromRef);
-              });
-            });
+            closeCalendarAndFocusInput(
+              state.dateTimeRangePickerRef,
+              state.dateTimeFromRef
+            );
             onChangeProp?.(calendarTimeframe);
             return {
               calendarValue: calendarTimeframe,
-              dateTimeRangePickerTimeframe: calendarTimeframe
+              dateTimeRangePickerTimeframe: calendarTimeframe,
+              nowInserted: false
             };
           }
-          return { calendarValue: calendarTimeframe };
+          return { calendarValue: calendarTimeframe, nowInserted: false };
         });
       },
       setDateTimeRangePickerTimeframe: (value) => {
@@ -39,7 +81,8 @@ function getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp)
             onChangeProp?.(null);
             return {
               dateTimeRangePickerTimeframe: null,
-              calendarValue: null
+              calendarValue: null,
+              nowInserted: false
             };
           }
           const merged = mergeRangeValue(
@@ -106,15 +149,7 @@ function getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp)
         });
       },
       clearCalendarValue: () => {
-        set((state) => {
-          if (!state.calendarValue || state.calendarValue.from && state.calendarValue.to) {
-            return state;
-          }
-          if (state.dateTimeRangePickerTimeframe?.from && state.dateTimeRangePickerTimeframe?.to) {
-            return { calendarValue: state.dateTimeRangePickerTimeframe };
-          }
-          return { calendarValue: null };
-        });
+        set((state) => handleClearCalendarValue(state));
       }
     };
   };

package/esm/core/time/timeframeStore/actions/dateTimeRangePicker.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/core/time/timeframeStore/actions/dateTimeRangePicker.ts"],
-  "sourcesContent": ["import type { Dispatch } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { getTimeframeFromCalendarSelection } from './calendar.js';\nimport { focusTimeInput } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { removePrecisionFromTimeFrame } from '../../../../forms/forms-core/time/timeParser.js';\nimport { type Timeframe } from '../../../types/time.js';\nimport {\n  isFullTimeframe,\n  isTimeValue,\n  mergeRangeValue,\n} from '../../helpers.js';\nimport { validate } from '../../validation.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../dateTimeRangePicker.types.js';\n\n/**\n * Creates actions for the DateTimeRangePicker store using the slice action handlers.\n *  @internal\n */\nexport function getDateTimeRangePickerActions(\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: Timeframe | null) => void) | undefined,\n) {\n  const actions = (\n    set: StoreApi<\n      DateTimeRangePickerTimeframeStates &\n        DateTimeRangePickerTimeframeStoreActions\n    >['setState'],\n  ): DateTimeRangePickerTimeframeStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          const calendarTimeframe = getTimeframeFromCalendarSelection(\n            inputValue,\n            state,\n          );\n\n          if (isFullTimeframe(calendarTimeframe)) {\n            state.dateTimeRangePickerRef?.current?.close();\n            requestAnimationFrame(() => {\n              requestAnimationFrame(() => {\n                state.dateTimeRangePickerRef?.current?.focus?.();\n                focusTimeInput(state.dateTimeFromRef);\n              });\n            });\n            onChangeProp?.(calendarTimeframe);\n\n            return {\n              calendarValue: calendarTimeframe,\n              dateTimeRangePickerTimeframe: calendarTimeframe,\n            };\n          }\n\n          return { calendarValue: calendarTimeframe };\n        });\n      },\n      setDateTimeRangePickerTimeframe: (value) => {\n        return set((state) => {\n          // Full clear: null resets both fields to null\n          if (value === null) {\n            onChangeProp?.(null);\n            return {\n              dateTimeRangePickerTimeframe: null,\n              calendarValue: null,\n            };\n          }\n\n          const merged = mergeRangeValue(\n            state.dateTimeRangePickerTimeframe,\n            value,\n          );\n\n          const timeframeWithPrecision =\n            removePrecisionFromTimeFrame(merged, state.precision) ?? null;\n\n          if (\n            timeframeWithPrecision?.from === null &&\n            timeframeWithPrecision?.to === null\n          ) {\n            onChangeProp?.(null);\n          }\n\n          isFullTimeframe(timeframeWithPrecision) &&\n            onChangeProp?.(timeframeWithPrecision);\n\n          const isPartialFrom =\n            isTimeValue(merged.from) && merged.from.absoluteDate === '';\n          const isPartialTo =\n            isTimeValue(merged.to) && merged.to.absoluteDate === '';\n\n          // Partial values while editing\n          if (isPartialFrom || isPartialTo) {\n            const errorKey = validate(\n              timeframeWithPrecision,\n              state.min,\n              state.max,\n              {\n                formMessageDispatch: formFieldMessagesDispatch,\n                formerError: state.dateTimeRangePickerError,\n                precision: state.precision,\n                showError: false,\n                checkOrder: true,\n                ref: state.dateTimeRangePickerRef,\n                expectedFormat: state.formatString,\n                valueMode: 'dateTimePicker',\n                required: state.required,\n              },\n            );\n\n            const calendarValue = {\n              from: isPartialFrom ? null : timeframeWithPrecision?.from ?? null,\n              to: isPartialTo ? null : timeframeWithPrecision?.to ?? null,\n            };\n\n            return {\n              dateTimeRangePickerTimeframe: timeframeWithPrecision,\n              calendarValue,\n              calendarError: errorKey,\n              dateTimeRangePickerError: errorKey,\n            };\n          }\n\n          const dateTimeRangePickerError = validate(\n            timeframeWithPrecision,\n            state.min,\n            state.max,\n            {\n              formMessageDispatch: formFieldMessagesDispatch,\n              formerError: state.dateTimeRangePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimeRangePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'dateTimePicker',\n              required: state.required,\n            },\n          );\n\n          return {\n            dateTimeRangePickerTimeframe: timeframeWithPrecision,\n            calendarValue: timeframeWithPrecision,\n            calendarError: dateTimeRangePickerError,\n            dateTimeRangePickerError,\n          };\n        });\n      },\n      clearCalendarValue: () => {\n        set((state) => {\n          if (\n            !state.calendarValue ||\n            (state.calendarValue.from && state.calendarValue.to)\n          ) {\n            return state;\n          }\n\n          if (\n            state.dateTimeRangePickerTimeframe?.from &&\n            state.dateTimeRangePickerTimeframe?.to\n          ) {\n            return { calendarValue: state.dateTimeRangePickerTimeframe };\n          }\n\n          // in case of a partial value, we want to clear the calendar selection entirely to avoid confusion\n          return { calendarValue: null };\n        });\n      },\n    };\n  };\n\n  return actions;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Dispatch } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { getTimeframeFromCalendarSelection } from './calendar.js';\nimport {\n  applySetToNow,\n  closeCalendarAndFocusInput,\n  handleClearCalendarValue,\n} from './helpers.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { sortTimeframeValues } from '../../../../forms/forms-core/time/helpers.js';\nimport { removePrecisionFromTimeFrame } from '../../../../forms/forms-core/time/timeParser.js';\nimport { type Timeframe } from '../../../types/time.js';\nimport {\n  isFullTimeframe,\n  isNowTimeValue,\n  isTimeValue,\n  mergeRangeValue,\n} from '../../helpers.js';\nimport { validate, isOutOfBounds } from '../../validation.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../dateTimeRangePicker.types.js';\n\n/**\n * Creates actions for the DateTimeRangePicker store using the slice action handlers.\n *  @internal\n */\nexport function getDateTimeRangePickerActions(\n  isControlled: boolean,\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: Timeframe | null) => void) | undefined,\n) {\n  const actions = (\n    set: StoreApi<\n      DateTimeRangePickerTimeframeStates &\n        DateTimeRangePickerTimeframeStoreActions\n    >['setState'],\n  ): DateTimeRangePickerTimeframeStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          // TimeValue input (e.g. a \"now\" expression): apply it as the \"to\" boundary directly.\n          if (isTimeValue(inputValue) && inputValue.value === 'now()') {\n            const update = applySetToNow(state, {\n              isControlled,\n              onChangeProp,\n              formFieldMessagesDispatch,\n              validateMode: 'dateTimePicker',\n            });\n            // nowInserted: true only in the \"pending\" case \u2014 button clicked with no existing\n            // from, so calendar stays open waiting for the complementary boundary.\n            const nowInserted =\n              'dateTimeRangePickerTimeframe' in update &&\n              !update.dateTimeRangePickerTimeframe?.from &&\n              isNowTimeValue(update.dateTimeRangePickerTimeframe?.to);\n            return { ...update, nowInserted };\n          }\n\n          const calendarTimeframe = getTimeframeFromCalendarSelection(\n            inputValue,\n            state,\n          );\n\n          const nowIsOutOfBounds =\n            isOutOfBounds(\n              'now',\n              isNowTimeValue(state.min) ? null : state.min,\n              isNowTimeValue(state.max) ? null : state.max,\n            ) !== undefined;\n\n          // The user set `to = now` (via button or typing) without a `from` yet.\n          // When they click a calendar date, pair it with the existing `to = now`.\n          if (\n            !nowIsOutOfBounds &&\n            !state.dateTimeRangePickerTimeframe?.from &&\n            state.dateTimeRangePickerTimeframe?.to &&\n            isNowTimeValue(state.dateTimeRangePickerTimeframe.to) &&\n            calendarTimeframe?.from &&\n            !calendarTimeframe?.to\n          ) {\n            const timeframe = sortTimeframeValues(\n              {\n                from: calendarTimeframe.from,\n                to: state.dateTimeRangePickerTimeframe.to,\n              },\n              state.min,\n              state.max,\n              state.precision,\n            );\n\n            if (isFullTimeframe(timeframe)) {\n              closeCalendarAndFocusInput(\n                state.dateTimeRangePickerRef,\n                state.dateTimeFromRef,\n              );\n              onChangeProp?.(timeframe);\n            }\n\n            return {\n              calendarValue: timeframe,\n              dateTimeRangePickerTimeframe: timeframe,\n              nowInserted: false,\n            };\n          }\n\n          if (isFullTimeframe(calendarTimeframe)) {\n            closeCalendarAndFocusInput(\n              state.dateTimeRangePickerRef,\n              state.dateTimeFromRef,\n            );\n            onChangeProp?.(calendarTimeframe);\n\n            return {\n              calendarValue: calendarTimeframe,\n              dateTimeRangePickerTimeframe: calendarTimeframe,\n              nowInserted: false,\n            };\n          }\n\n          return { calendarValue: calendarTimeframe, nowInserted: false };\n        });\n      },\n      setDateTimeRangePickerTimeframe: (value) => {\n        return set((state) => {\n          // Full clear: null resets both fields to null\n          if (value === null) {\n            onChangeProp?.(null);\n            return {\n              dateTimeRangePickerTimeframe: null,\n              calendarValue: null,\n              nowInserted: false,\n            };\n          }\n\n          const merged = mergeRangeValue(\n            state.dateTimeRangePickerTimeframe,\n            value,\n          );\n\n          const timeframeWithPrecision =\n            removePrecisionFromTimeFrame(merged, state.precision) ?? null;\n\n          if (\n            timeframeWithPrecision?.from === null &&\n            timeframeWithPrecision?.to === null\n          ) {\n            onChangeProp?.(null);\n          }\n\n          isFullTimeframe(timeframeWithPrecision) &&\n            onChangeProp?.(timeframeWithPrecision);\n\n          const isPartialFrom =\n            isTimeValue(merged.from) && merged.from.absoluteDate === '';\n          const isPartialTo =\n            isTimeValue(merged.to) && merged.to.absoluteDate === '';\n\n          // Partial values while editing\n          if (isPartialFrom || isPartialTo) {\n            const errorKey = validate(\n              timeframeWithPrecision,\n              state.min,\n              state.max,\n              {\n                formMessageDispatch: formFieldMessagesDispatch,\n                formerError: state.dateTimeRangePickerError,\n                precision: state.precision,\n                showError: false,\n                checkOrder: true,\n                ref: state.dateTimeRangePickerRef,\n                expectedFormat: state.formatString,\n                valueMode: 'dateTimePicker',\n                required: state.required,\n              },\n            );\n\n            const calendarValue = {\n              from: isPartialFrom ? null : timeframeWithPrecision?.from ?? null,\n              to: isPartialTo ? null : timeframeWithPrecision?.to ?? null,\n            };\n\n            return {\n              dateTimeRangePickerTimeframe: timeframeWithPrecision,\n              calendarValue,\n              calendarError: errorKey,\n              dateTimeRangePickerError: errorKey,\n            };\n          }\n\n          const dateTimeRangePickerError = validate(\n            timeframeWithPrecision,\n            state.min,\n            state.max,\n            {\n              formMessageDispatch: formFieldMessagesDispatch,\n              formerError: state.dateTimeRangePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimeRangePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'dateTimePicker',\n              required: state.required,\n            },\n          );\n\n          return {\n            dateTimeRangePickerTimeframe: timeframeWithPrecision,\n            calendarValue: timeframeWithPrecision,\n            calendarError: dateTimeRangePickerError,\n            dateTimeRangePickerError,\n          };\n        });\n      },\n      clearCalendarValue: () => {\n        set((state) => handleClearCalendarValue(state));\n      },\n    };\n  };\n\n  return actions;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/core/time/timeframeStore/actions/helpers.js

@@ -0,0 +1,106 @@
+import { focusElementWithRetry } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
+import {
+  getTimeValueFromSimpleValue,
+  sortTimeframeValues
+} from "../../../../forms/forms-core/time/helpers.js";
+import { isFullTimeframe, isNowTimeValue } from "../../helpers.js";
+import { validate, isOutOfBounds } from "../../validation.js";
+function closeCalendarAndFocusInput(pickerRef, dateTimeFromRef) {
+  pickerRef?.current?.close();
+  focusElementWithRetry(
+    () => dateTimeFromRef?.current?.spinButtonHandlers.get("hour")?.element.current,
+    dateTimeFromRef
+  );
+}
+function handleClearCalendarValue(state) {
+  if (!state.calendarValue || state.calendarValue.from && state.calendarValue.to) {
+    return {};
+  }
+  if (state.nowInserted && isNowTimeValue(state.dateTimeRangePickerTimeframe?.to) && !state.dateTimeRangePickerTimeframe?.from) {
+    return {
+      calendarValue: null,
+      dateTimeRangePickerTimeframe: null,
+      nowInserted: false
+    };
+  }
+  if (state.dateTimeRangePickerTimeframe?.from || state.dateTimeRangePickerTimeframe?.to) {
+    return {
+      calendarValue: state.dateTimeRangePickerTimeframe
+    };
+  }
+  return { calendarValue: null };
+}
+function applySetToNow(state, options) {
+  const defaultTarget = isNowTimeValue(state.min) ? "from" : "to";
+  const { target = defaultTarget } = options;
+  const nowIsOutOfBounds = isOutOfBounds("now", state.min, state.max) !== void 0;
+  if (nowIsOutOfBounds) {
+    return state;
+  }
+  const nowExpression = getTimeValueFromSimpleValue(
+    "now",
+    state.timeOffset,
+    target,
+    true,
+    state.min,
+    state.max,
+    state.precision
+  );
+  const activeRangeValue = state.calendarValue ?? state.dateTimeRangePickerTimeframe;
+  const fromValue = activeRangeValue?.from ?? null;
+  const toValue = activeRangeValue?.to ?? null;
+  const existingTimeValue = target === "from" ? toValue ?? fromValue : fromValue ?? toValue;
+  const existingTimeValueOutOfBounds = existingTimeValue && isOutOfBounds(existingTimeValue?.value, state.min, state.max) !== void 0;
+  if (!existingTimeValue || existingTimeValueOutOfBounds) {
+    if (target === "from") {
+      return {
+        dateTimeRangePickerTimeframe: { from: nowExpression, to: null },
+        calendarValue: { from: nowExpression, to: null }
+      };
+    }
+    return {
+      dateTimeRangePickerTimeframe: { from: null, to: nowExpression },
+      calendarValue: { from: null, to: nowExpression }
+    };
+  }
+  const timeframe = sortTimeframeValues(
+    { from: existingTimeValue, to: nowExpression },
+    state.min,
+    state.max,
+    state.precision
+  );
+  if (isFullTimeframe(timeframe)) {
+    options.onChangeProp?.(timeframe);
+    closeCalendarAndFocusInput(
+      state.dateTimeRangePickerRef,
+      state.dateTimeFromRef
+    );
+    if (options.isControlled) {
+      return state;
+    }
+  }
+  const error = validate(timeframe, state.min, state.max, {
+    formMessageDispatch: options.formFieldMessagesDispatch,
+    formerError: state.dateTimeRangePickerError,
+    precision: state.precision,
+    showError: false,
+    checkOrder: true,
+    ref: state.dateTimeRangePickerRef,
+    expectedFormat: state.formatString,
+    valueMode: options.validateMode,
+    required: state.required,
+    errorMessages: options.errorMessages
+  });
+  return {
+    dateTimeRangePickerTimeframe: timeframe,
+    calendarValue: timeframe,
+    calendarError: error,
+    dateTimeRangePickerError: error
+  };
+}
+export {
+  applySetToNow,
+  closeCalendarAndFocusInput,
+  handleClearCalendarValue
+};
+//# sourceMappingURL=helpers.js.map

package/esm/core/time/timeframeStore/actions/helpers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/core/time/timeframeStore/actions/helpers.ts"],
+  "sourcesContent": ["import type { Dispatch, RefObject } from 'react';\n\nimport { focusElementWithRetry } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { DateTimeInputRef } from '../../../../forms/date-time-range-picker/types.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  getTimeValueFromSimpleValue,\n  sortTimeframeValues,\n} from '../../../../forms/forms-core/time/helpers.js';\nimport { type Timeframe } from '../../../types/time.js';\nimport { isFullTimeframe, isNowTimeValue } from '../../helpers.js';\nimport { validate, isOutOfBounds } from '../../validation.js';\nimport type { ValidateOptions } from '../../validation.js';\nimport type { DateTimeRangePickerTimeframeStates } from '../dateTimeRangePicker.types.js';\n\n/**\n * Closes Calendar overlay and, after two animation frames, refocuses the from-input.\n * The double rAF ensures the overlay has fully unmounted before focus is moved.\n * @internal\n */\nexport function closeCalendarAndFocusInput(\n  pickerRef:\n    | RefObject<{ close(): void; focus?: () => void } | null>\n    | undefined,\n  dateTimeFromRef: RefObject<DateTimeInputRef | null> | undefined,\n): void {\n  pickerRef?.current?.close();\n  focusElementWithRetry(\n    () =>\n      dateTimeFromRef?.current?.spinButtonHandlers.get('hour')?.element.current,\n    dateTimeFromRef,\n  );\n}\n\n/**\n * Pure reducer for the `clearCalendarValue` action, shared between\n * DateTimeRangePicker and TimeframeSelector.\n * @internal\n */\nexport function handleClearCalendarValue(\n  state: Pick<\n    DateTimeRangePickerTimeframeStates,\n    'calendarValue' | 'dateTimeRangePickerTimeframe' | 'nowInserted'\n  >,\n): Partial<\n  Pick<\n    DateTimeRangePickerTimeframeStates,\n    'calendarValue' | 'dateTimeRangePickerTimeframe' | 'nowInserted'\n  >\n> {\n  // Guard: complete range or no selection \u2014 nothing to revert.\n  if (\n    !state.calendarValue ||\n    (state.calendarValue.from && state.calendarValue.to)\n  ) {\n    return {};\n  }\n\n  // Pending \"now\" boundary set via the now-button: `to = now` with no `from` yet.\n  // Only revert when the value originated from the button \u2014 user-typed \"now\" must be preserved.\n  if (\n    state.nowInserted &&\n    isNowTimeValue(state.dateTimeRangePickerTimeframe?.to) &&\n    !state.dateTimeRangePickerTimeframe?.from\n  ) {\n    return {\n      calendarValue: null,\n      dateTimeRangePickerTimeframe: null,\n      nowInserted: false,\n    };\n  }\n\n  // Standard restore-on-close: restore calendar value from stored timeframe.\n  if (\n    state.dateTimeRangePickerTimeframe?.from ||\n    state.dateTimeRangePickerTimeframe?.to\n  ) {\n    return {\n      calendarValue: state.dateTimeRangePickerTimeframe,\n    };\n  }\n\n  return { calendarValue: null };\n}\n\n/**\n * Options for {@link applySetToNow}.\n * @internal\n */\nexport type SetToNowOptions = {\n  /** Which boundary to set to `now`. Defaults to `to`. */\n  target?: 'from' | 'to';\n  /** Called with the committed timeframe when a full range is built. */\n  onChangeProp?: (value: Timeframe | null) => void;\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>;\n  /** Controls validation messaging and whether to swap an inverted boundary. */\n  validateMode: 'dateTimePicker' | 'timeframeSelector';\n  errorMessages?: ValidateOptions['errorMessages'];\n  /** When true the component is controlled: skip internal state update after firing `onChangeProp`. */\n  isControlled?: boolean;\n};\n\n/**\n * Returns the store state patch for the \"set a boundary to now\" action, shared by\n * DateTimeRangePicker and TimeframeSelector. Callers may spread in additional\n * component-specific fields on top of the returned patch.\n * @internal\n */\nexport function applySetToNow(\n  state: DateTimeRangePickerTimeframeStates,\n  options: SetToNowOptions,\n): Partial<DateTimeRangePickerTimeframeStates> {\n  // When min is a \"now\" expression the component operates in a \"starts from now\"\n  // mode \u2014 the button always anchors the \"from\" boundary to now.\n  const defaultTarget = isNowTimeValue(state.min) ? 'from' : 'to';\n  const { target = defaultTarget } = options;\n\n  // If \"now\" is outside the allowed min, max range the whole action is a no-op.\n  // The \"Set time to now\" button is already visually disabled in this case.\n  const nowIsOutOfBounds =\n    isOutOfBounds('now', state.min, state.max) !== undefined;\n\n  if (nowIsOutOfBounds) {\n    return state;\n  }\n\n  const nowExpression = getTimeValueFromSimpleValue(\n    'now',\n    state.timeOffset,\n    target,\n    true,\n    state.min,\n    state.max,\n    state.precision,\n  );\n\n  const activeRangeValue =\n    state.calendarValue ?? state.dateTimeRangePickerTimeframe;\n  const fromValue = activeRangeValue?.from ?? null;\n  const toValue = activeRangeValue?.to ?? null;\n  const existingTimeValue =\n    target === 'from' ? toValue ?? fromValue : fromValue ?? toValue;\n\n  // Treat an out-of-bounds preserved boundary as absent \u2014 clear it and keep the calendar open.\n  const existingTimeValueOutOfBounds =\n    existingTimeValue &&\n    isOutOfBounds(existingTimeValue?.value, state.min, state.max) !== undefined;\n\n  if (!existingTimeValue || existingTimeValueOutOfBounds) {\n    if (target === 'from') {\n      // No valid complementary boundary yet \u2014 set from=now and let the user pick to next.\n      return {\n        dateTimeRangePickerTimeframe: { from: nowExpression, to: null },\n        calendarValue: { from: nowExpression, to: null },\n      };\n    }\n    return {\n      dateTimeRangePickerTimeframe: { from: null, to: nowExpression },\n      calendarValue: { from: null, to: nowExpression },\n    };\n  }\n\n  const timeframe = sortTimeframeValues(\n    { from: existingTimeValue, to: nowExpression },\n    state.min,\n    state.max,\n    state.precision,\n  );\n\n  if (isFullTimeframe(timeframe)) {\n    options.onChangeProp?.(timeframe);\n    closeCalendarAndFocusInput(\n      state.dateTimeRangePickerRef,\n      state.dateTimeFromRef,\n    );\n\n    if (options.isControlled) {\n      return state;\n    }\n  }\n\n  const error = validate(timeframe, state.min, state.max, {\n    formMessageDispatch: options.formFieldMessagesDispatch,\n    formerError: state.dateTimeRangePickerError,\n    precision: state.precision,\n    showError: false,\n    checkOrder: true,\n    ref: state.dateTimeRangePickerRef,\n    expectedFormat: state.formatString,\n    valueMode: options.validateMode,\n    required: state.required,\n    errorMessages: options.errorMessages,\n  });\n\n  return {\n    dateTimeRangePickerTimeframe: timeframe,\n    calendarValue: timeframe,\n    calendarError: error,\n    dateTimeRangePickerError: error,\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/core/time/timeframeStore/actions/timeframeSelector.js

@@ -2,17 +2,23 @@ import { TZDateMini } from "@date-fns/tz";
 import { endOfDay, startOfDay } from "date-fns";
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { getTimeframeFromCalendarSelection } from "./calendar.js";
-import { focusTimeInput } from "../../../../forms/date-time-picker/utils/focusDateTimeInput.js";
+import {
+  applySetToNow,
+  closeCalendarAndFocusInput,
+  handleClearCalendarValue
+} from "./helpers.js";
+import { sortTimeframeValues } from "../../../../forms/forms-core/time/helpers.js";
 import {
   removePrecision,
   removePrecisionFromTimeFrame
 } from "../../../../forms/forms-core/time/timeParser.js";
 import {
   isFullTimeframe,
+  isNowTimeValue,
   isTimeValue,
   mergeRangeValue
 } from "../../helpers.js";
-import { validate } from "../../validation.js";
+import { isOutOfBounds, validate } from "../../validation.js";
 function handleTimeframeSelectorTimeframeChange(inputValue, state, isControlled, timeframeSelectorRef, formFieldMessagesDispatch, onChangeProp, errorMessages) {
   const timeframeWithPrecision = removePrecisionFromTimeFrame(inputValue, state.precision) ?? null;
   const value = isFullTimeframe(timeframeWithPrecision) ? timeframeWithPrecision : null;
@@ -35,8 +41,9 @@ function handleTimeframeSelectorTimeframeChange(inputValue, state, isControlled,
   });
   return {
     timeframeSelectorTimeframe: value,
-    calendarValue: value,
-    dateTimeRangePickerTimeframe: value,
+    calendarValue: value ?? timeframeWithPrecision,
+    dateTimeRangePickerTimeframe: value ?? timeframeWithPrecision,
+    referenceTimeframe: null,
     timeframeSelectorError: error,
     calendarError: error,
     dateTimeRangePickerError: error
@@ -64,26 +71,66 @@ function getTimeframeSelectorActions(isControlled, timeframeSelectorRef, formFie
     return {
       setCalendarValue: (inputValue) => {
         set((state) => {
+          if (isTimeValue(inputValue) && inputValue.value === "now()") {
+            const update = applySetToNow(state, {
+              validateMode: "timeframeSelector",
+              errorMessages
+            });
+            const nowInserted = "dateTimeRangePickerTimeframe" in update && !update.dateTimeRangePickerTimeframe?.from && isNowTimeValue(update.dateTimeRangePickerTimeframe?.to);
+            return {
+              timeframeSelectorError: void 0,
+              isFullDay: false,
+              ...update,
+              nowInserted
+            };
+          }
           const calendarValue = getTimeframeFromCalendarSelection(
             inputValue,
             state
           );
+          const nowIsOutOfBounds = isOutOfBounds(
+            "now",
+            isNowTimeValue(state.min) ? null : state.min,
+            isNowTimeValue(state.max) ? null : state.max
+          ) !== void 0;
+          if (!nowIsOutOfBounds && !state.dateTimeRangePickerTimeframe?.from && state.dateTimeRangePickerTimeframe?.to && isNowTimeValue(state.dateTimeRangePickerTimeframe?.to) && calendarValue?.from && !calendarValue?.to) {
+            const timeframe = sortTimeframeValues(
+              {
+                from: calendarValue.from,
+                to: state.dateTimeRangePickerTimeframe.to
+              },
+              state.min,
+              state.max,
+              state.precision
+            );
+            closeCalendarAndFocusInput(
+              state.dateTimeRangePickerRef,
+              state.dateTimeFromRef
+            );
+            return {
+              calendarValue: timeframe,
+              dateTimeRangePickerTimeframe: timeframe,
+              calendarError: void 0,
+              dateTimeRangePickerError: void 0,
+              timeframeSelectorError: void 0,
+              isFullDay: false,
+              nowInserted: false
+            };
+          }
           if (isFullTimeframe(calendarValue)) {
-            state.dateTimeRangePickerRef?.current?.close();
             const isFullDay = isFullDayTimeframe(calendarValue, state);
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                state.dateTimeRangePickerRef?.current?.focus?.();
-                focusTimeInput(state.dateTimeFromRef);
-              });
-            });
+            closeCalendarAndFocusInput(
+              state.dateTimeRangePickerRef,
+              state.dateTimeFromRef
+            );
             return {
               calendarValue,
               dateTimeRangePickerTimeframe: calendarValue,
-              isFullDay
+              isFullDay,
+              nowInserted: false
             };
           }
-          return { calendarValue, isFullDay: false };
+          return { calendarValue, isFullDay: false, nowInserted: false };
         });
       },
       setDateTimeRangePickerTimeframe: (value) => {
@@ -91,7 +138,10 @@ function getTimeframeSelectorActions(isControlled, timeframeSelectorRef, formFie
           if (value === null) {
             return {
               dateTimeRangePickerTimeframe: null,
-              calendarValue: null
+              calendarValue: null,
+              dateTimeRangePickerError: void 0,
+              calendarError: void 0,
+              nowInserted: false
             };
           }
           const merged = mergeRangeValue(
@@ -171,8 +221,11 @@ function getTimeframeSelectorActions(isControlled, timeframeSelectorRef, formFie
         set(() => handlePreviousTimeframeChange(value));
       },
       setStepperValue: (value) => {
-        set(() => {
+        set((state) => {
           debouncedOnChangeRef?.current?.(value);
+          if (isControlled) {
+            return state;
+          }
           return {
             timeframeSelectorTimeframe: value,
             calendarValue: value,
@@ -181,15 +234,7 @@ function getTimeframeSelectorActions(isControlled, timeframeSelectorRef, formFie
         });
       },
       clearCalendarValue: () => {
-        set((state) => {
-          if (!state.calendarValue || state.calendarValue.from && state.calendarValue.to) {
-            return state;
-          }
-          if (state.dateTimeRangePickerTimeframe?.from && state.dateTimeRangePickerTimeframe?.to) {
-            return { calendarValue: state.dateTimeRangePickerTimeframe };
-          }
-          return { calendarValue: null };
-        });
+        set((state) => handleClearCalendarValue(state));
       }
     };
   };

package/esm/core/time/timeframeStore/actions/timeframeSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/core/time/timeframeStore/actions/timeframeSelector.ts"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { endOfDay, startOfDay } from 'date-fns';\nimport type { DebouncedFunc } from 'lodash-es';\nimport type { Dispatch, RefObject } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { getTimeframeFromCalendarSelection } from './calendar.js';\nimport { focusTimeInput } from '../../../../forms/date-time-picker/utils/focusDateTimeInput.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  removePrecision,\n  removePrecisionFromTimeFrame,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport type { TimeRangePickerRef } from '../../../../forms/shared-types.js';\nimport { type Timeframe } from '../../../types/time.js';\nimport {\n  isFullTimeframe,\n  isTimeValue,\n  mergeRangeValue,\n} from '../../helpers.js';\nimport { validate } from '../../validation.js';\nimport type { ValidateOptions } from '../../validation.js';\nimport type {\n  TimeframeSelectorState,\n  TimeframeSelectorStoreActions,\n} from '../timeframeSelector.types.js';\n\n/**\n * Handles setting the TimeframeSelector timeframe value.\n * Validates the input, calls onChange callback, closes the selector,\n * and updates all related state (selector, calendar, dateTimePicker).\n * @internal\n */\nfunction handleTimeframeSelectorTimeframeChange(\n  inputValue: Timeframe | null,\n  state: TimeframeSelectorState,\n  isControlled: boolean,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef>,\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: (value: Timeframe | null) => void,\n  errorMessages?: ValidateOptions['errorMessages'],\n): Partial<TimeframeSelectorState> {\n  const timeframeWithPrecision =\n    removePrecisionFromTimeFrame(inputValue, state.precision) ?? null;\n\n  const value = isFullTimeframe(timeframeWithPrecision)\n    ? timeframeWithPrecision\n    : null;\n\n  onChangeProp?.(value);\n  timeframeSelectorRef.current?.close();\n\n  if (isControlled) {\n    return state;\n  }\n\n  const error = validate(timeframeWithPrecision, state.min, state.max, {\n    formMessageDispatch: formFieldMessagesDispatch,\n    formerError: state.timeframeSelectorError,\n    precision: state.precision,\n    showError: false,\n    checkOrder: true,\n    ref: timeframeSelectorRef,\n    expectedFormat: state.formatString,\n    valueMode: 'timeframeSelector',\n    required: state.required,\n    errorMessages,\n  });\n\n  return {\n    timeframeSelectorTimeframe: value,\n    calendarValue: value,\n    dateTimeRangePickerTimeframe: value,\n    timeframeSelectorError: error,\n    calendarError: error,\n    dateTimeRangePickerError: error,\n  };\n}\n\n/**\n * Handles setting the previous timeframe value.\n * Used for tracking the last valid timeframe before changes.\n * @internal\n */\nfunction handlePreviousTimeframeChange(\n  value: Timeframe | null,\n): Partial<TimeframeSelectorState> {\n  return {\n    referenceTimeframe: value,\n  };\n}\n\nfunction isFullDayTimeframe(\n  timeframe: Timeframe,\n  state: TimeframeSelectorState,\n): boolean {\n  const timeZone = getTimezone();\n  const to = new TZDateMini(timeframe.to.absoluteDate, timeZone);\n  const from = new TZDateMini(timeframe.from.absoluteDate, timeZone);\n\n  const isToAtEndOfDay =\n    removePrecision(endOfDay(to).toISOString(), state.precision) ===\n    removePrecision(timeframe.to.absoluteDate, state.precision);\n  const isToAtMax = state.max?.absoluteDate === to.toISOString();\n\n  const isFromAtStartOfDay =\n    removePrecision(startOfDay(from).toISOString(), state.precision) ===\n    removePrecision(timeframe.from.absoluteDate, state.precision);\n  const isFromAtMin = state.min?.absoluteDate === from.toISOString();\n\n  return Boolean(\n    (isToAtEndOfDay || isToAtMax) && (isFromAtStartOfDay || isFromAtMin),\n  );\n}\n\n/**\n * Creates actions for the TimeframeSelector store using the slice action handlers.\n * @internal\n */\nexport function getTimeframeSelectorActions(\n  isControlled: boolean,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef>,\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: Timeframe | null) => void) | undefined,\n  debouncedOnChangeRef?: RefObject<\n    DebouncedFunc<(timeframe: Timeframe | null) => void>\n  >,\n  errorMessages?: ValidateOptions['errorMessages'],\n) {\n  const actions = (\n    set: StoreApi<\n      TimeframeSelectorState & TimeframeSelectorStoreActions\n    >['setState'],\n  ): TimeframeSelectorStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          const calendarValue = getTimeframeFromCalendarSelection(\n            inputValue,\n            state,\n          );\n\n          if (isFullTimeframe(calendarValue)) {\n            state.dateTimeRangePickerRef?.current?.close();\n            const isFullDay = isFullDayTimeframe(calendarValue, state);\n\n            requestAnimationFrame(() => {\n              requestAnimationFrame(() => {\n                state.dateTimeRangePickerRef?.current?.focus?.();\n                focusTimeInput(state.dateTimeFromRef);\n              });\n            });\n\n            return {\n              calendarValue,\n              dateTimeRangePickerTimeframe: calendarValue,\n              isFullDay,\n            };\n          }\n\n          return { calendarValue, isFullDay: false };\n        });\n      },\n      setDateTimeRangePickerTimeframe: (value) => {\n        return set((state) => {\n          // Full clear: null resets both fields to null\n          if (value === null) {\n            return {\n              dateTimeRangePickerTimeframe: null,\n              calendarValue: null,\n            };\n          }\n\n          const merged = mergeRangeValue(\n            state.dateTimeRangePickerTimeframe,\n            value,\n          );\n\n          const timeframeWithPrecision =\n            removePrecisionFromTimeFrame(merged, state.precision) ?? null;\n\n          const isPartialFrom =\n            isTimeValue(merged.from) && merged.from.absoluteDate === '';\n          const isPartialTo =\n            isTimeValue(merged.to) && merged.to.absoluteDate === '';\n\n          // For partial values while editing we trigger onChange with '' to inform\n          // the user that the current value is invalid, but not empty.\n          if (isPartialFrom || isPartialTo) {\n            const errorKey = validate(\n              timeframeWithPrecision,\n              state.min,\n              state.max,\n              {\n                formerError: state.dateTimeRangePickerError,\n                precision: state.precision,\n                showError: false,\n                checkOrder: true,\n                ref: state.dateTimeRangePickerRef,\n                expectedFormat: state.formatString,\n                valueMode: 'timeframeSelector',\n                required: state.required,\n                errorMessages,\n              },\n            );\n\n            const calendarValue = {\n              from: isPartialFrom ? null : timeframeWithPrecision?.from ?? null,\n              to: isPartialTo ? null : timeframeWithPrecision?.to ?? null,\n            };\n\n            return {\n              dateTimeRangePickerTimeframe: timeframeWithPrecision,\n              calendarValue,\n              calendarError: errorKey,\n              dateTimeRangePickerError: errorKey,\n            };\n          }\n\n          const dateTimeRangePickerError = validate(\n            timeframeWithPrecision,\n            state.min,\n            state.max,\n            {\n              formerError: state.dateTimeRangePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimeRangePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'timeframeSelector',\n              required: state.required,\n              errorMessages,\n            },\n          );\n\n          return {\n            dateTimeRangePickerTimeframe: timeframeWithPrecision,\n            calendarValue: timeframeWithPrecision,\n            calendarError: dateTimeRangePickerError,\n            dateTimeRangePickerError,\n          };\n        });\n      },\n      setTimeframeSelectorTimeframe: (inputValue) => {\n        debouncedOnChangeRef?.current?.cancel();\n        return set((state) =>\n          handleTimeframeSelectorTimeframeChange(\n            inputValue,\n            state,\n            isControlled,\n            timeframeSelectorRef,\n            formFieldMessagesDispatch,\n            onChangeProp,\n            errorMessages,\n          ),\n        );\n      },\n      setReferenceTimeframe: (value) => {\n        set(() => handlePreviousTimeframeChange(value));\n      },\n      setStepperValue: (value) => {\n        set(() => {\n          debouncedOnChangeRef?.current?.(value);\n          return {\n            timeframeSelectorTimeframe: value,\n            calendarValue: value,\n            dateTimeRangePickerTimeframe: value,\n          };\n        });\n      },\n      clearCalendarValue: () => {\n        set((state) => {\n          if (\n            !state.calendarValue ||\n            (state.calendarValue.from && state.calendarValue.to)\n          ) {\n            return state;\n          }\n\n          if (\n            state.dateTimeRangePickerTimeframe?.from &&\n            state.dateTimeRangePickerTimeframe?.to\n          ) {\n            return { calendarValue: state.dateTimeRangePickerTimeframe };\n          }\n\n          // in case of a partial value, we want to clear the calendar selection entirely to avoid confusion\n          return { calendarValue: null };\n        });\n      },\n    };\n  };\n\n  return actions;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { endOfDay, startOfDay } from 'date-fns';\nimport type { DebouncedFunc } from 'lodash-es';\nimport type { Dispatch, RefObject } from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { getTimeframeFromCalendarSelection } from './calendar.js';\nimport {\n  applySetToNow,\n  closeCalendarAndFocusInput,\n  handleClearCalendarValue,\n} from './helpers.js';\nimport type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';\nimport { sortTimeframeValues } from '../../../../forms/forms-core/time/helpers.js';\nimport {\n  removePrecision,\n  removePrecisionFromTimeFrame,\n} from '../../../../forms/forms-core/time/timeParser.js';\nimport type { TimeRangePickerRef } from '../../../../forms/shared-types.js';\nimport { type Timeframe } from '../../../types/time.js';\nimport {\n  isFullTimeframe,\n  isNowTimeValue,\n  isTimeValue,\n  mergeRangeValue,\n} from '../../helpers.js';\nimport { isOutOfBounds, validate } from '../../validation.js';\nimport type { ValidateOptions } from '../../validation.js';\nimport type {\n  TimeframeSelectorState,\n  TimeframeSelectorStoreActions,\n} from '../timeframeSelector.types.js';\n\n/**\n * Handles setting the TimeframeSelector timeframe value.\n * Validates the input, calls onChange callback, closes the selector,\n * and updates all related state (selector, calendar, dateTimePicker).\n * @internal\n */\nfunction handleTimeframeSelectorTimeframeChange(\n  inputValue: Timeframe | null,\n  state: TimeframeSelectorState,\n  isControlled: boolean,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef>,\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: (value: Timeframe | null) => void,\n  errorMessages?: ValidateOptions['errorMessages'],\n): Partial<TimeframeSelectorState> {\n  const timeframeWithPrecision =\n    removePrecisionFromTimeFrame(inputValue, state.precision) ?? null;\n\n  const value = isFullTimeframe(timeframeWithPrecision)\n    ? timeframeWithPrecision\n    : null;\n\n  onChangeProp?.(value);\n  timeframeSelectorRef.current?.close();\n\n  if (isControlled) {\n    return state;\n  }\n\n  const error = validate(timeframeWithPrecision, state.min, state.max, {\n    formMessageDispatch: formFieldMessagesDispatch,\n    formerError: state.timeframeSelectorError,\n    precision: state.precision,\n    showError: false,\n    checkOrder: true,\n    ref: timeframeSelectorRef,\n    expectedFormat: state.formatString,\n    valueMode: 'timeframeSelector',\n    required: state.required,\n    errorMessages,\n  });\n\n  return {\n    timeframeSelectorTimeframe: value,\n    calendarValue: value ?? timeframeWithPrecision,\n    dateTimeRangePickerTimeframe: value ?? timeframeWithPrecision,\n    referenceTimeframe: null,\n    timeframeSelectorError: error,\n    calendarError: error,\n    dateTimeRangePickerError: error,\n  };\n}\n\n/**\n * Handles setting the previous timeframe value.\n * Used for tracking the last valid timeframe before changes.\n * @internal\n */\nfunction handlePreviousTimeframeChange(\n  value: Timeframe | null,\n): Partial<TimeframeSelectorState> {\n  return {\n    referenceTimeframe: value,\n  };\n}\n\nfunction isFullDayTimeframe(\n  timeframe: Timeframe,\n  state: TimeframeSelectorState,\n): boolean {\n  const timeZone = getTimezone();\n  const to = new TZDateMini(timeframe.to.absoluteDate, timeZone);\n  const from = new TZDateMini(timeframe.from.absoluteDate, timeZone);\n\n  const isToAtEndOfDay =\n    removePrecision(endOfDay(to).toISOString(), state.precision) ===\n    removePrecision(timeframe.to.absoluteDate, state.precision);\n  const isToAtMax = state.max?.absoluteDate === to.toISOString();\n\n  const isFromAtStartOfDay =\n    removePrecision(startOfDay(from).toISOString(), state.precision) ===\n    removePrecision(timeframe.from.absoluteDate, state.precision);\n  const isFromAtMin = state.min?.absoluteDate === from.toISOString();\n\n  return Boolean(\n    (isToAtEndOfDay || isToAtMax) && (isFromAtStartOfDay || isFromAtMin),\n  );\n}\n\n/**\n * Creates actions for the TimeframeSelector store using the slice action handlers.\n * @internal\n */\nexport function getTimeframeSelectorActions(\n  isControlled: boolean,\n  timeframeSelectorRef: RefObject<TimeRangePickerRef>,\n  formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>,\n  onChangeProp?: ((value: Timeframe | null) => void) | undefined,\n  debouncedOnChangeRef?: RefObject<\n    DebouncedFunc<(timeframe: Timeframe | null) => void>\n  >,\n  errorMessages?: ValidateOptions['errorMessages'],\n) {\n  const actions = (\n    set: StoreApi<\n      TimeframeSelectorState & TimeframeSelectorStoreActions\n    >['setState'],\n  ): TimeframeSelectorStoreActions => {\n    return {\n      setCalendarValue: (inputValue) => {\n        set((state) => {\n          // TimeValue input (e.g. a \"now\" expression): apply it as the \"to\" boundary directly.\n          if (isTimeValue(inputValue) && inputValue.value === 'now()') {\n            const update = applySetToNow(state, {\n              validateMode: 'timeframeSelector',\n              errorMessages,\n            });\n            // nowInserted: true only in the \"pending\" case \u2014 button clicked with no existing\n            // from, so calendar stays open waiting for the complementary boundary.\n            const nowInserted =\n              'dateTimeRangePickerTimeframe' in update &&\n              !update.dateTimeRangePickerTimeframe?.from &&\n              isNowTimeValue(update.dateTimeRangePickerTimeframe?.to);\n\n            return {\n              timeframeSelectorError: undefined,\n              isFullDay: false,\n              ...update,\n              nowInserted,\n            };\n          }\n\n          const calendarValue = getTimeframeFromCalendarSelection(\n            inputValue,\n            state,\n          );\n\n          const nowIsOutOfBounds =\n            isOutOfBounds(\n              'now',\n              isNowTimeValue(state.min) ? null : state.min,\n              isNowTimeValue(state.max) ? null : state.max,\n            ) !== undefined;\n\n          // The user set `to = now` (via button or typing) without a `from` yet.\n          // When they click a calendar date, pair it with the existing `to = now`.\n          if (\n            !nowIsOutOfBounds &&\n            !state.dateTimeRangePickerTimeframe?.from &&\n            state.dateTimeRangePickerTimeframe?.to &&\n            isNowTimeValue(state.dateTimeRangePickerTimeframe?.to) &&\n            calendarValue?.from &&\n            !calendarValue?.to\n          ) {\n            const timeframe = sortTimeframeValues(\n              {\n                from: calendarValue.from,\n                to: state.dateTimeRangePickerTimeframe.to,\n              },\n              state.min,\n              state.max,\n              state.precision,\n            );\n            closeCalendarAndFocusInput(\n              state.dateTimeRangePickerRef,\n              state.dateTimeFromRef,\n            );\n\n            return {\n              calendarValue: timeframe,\n              dateTimeRangePickerTimeframe: timeframe,\n              calendarError: undefined,\n              dateTimeRangePickerError: undefined,\n              timeframeSelectorError: undefined,\n              isFullDay: false,\n              nowInserted: false,\n            };\n          }\n\n          if (isFullTimeframe(calendarValue)) {\n            const isFullDay = isFullDayTimeframe(calendarValue, state);\n            closeCalendarAndFocusInput(\n              state.dateTimeRangePickerRef,\n              state.dateTimeFromRef,\n            );\n\n            return {\n              calendarValue,\n              dateTimeRangePickerTimeframe: calendarValue,\n              isFullDay,\n              nowInserted: false,\n            };\n          }\n\n          return { calendarValue, isFullDay: false, nowInserted: false };\n        });\n      },\n      setDateTimeRangePickerTimeframe: (value) => {\n        return set((state) => {\n          // Full clear: null resets both fields to null and errors to undefined\n          if (value === null) {\n            return {\n              dateTimeRangePickerTimeframe: null,\n              calendarValue: null,\n              dateTimeRangePickerError: undefined,\n              calendarError: undefined,\n              nowInserted: false,\n            };\n          }\n\n          const merged = mergeRangeValue(\n            state.dateTimeRangePickerTimeframe,\n            value,\n          );\n\n          const timeframeWithPrecision =\n            removePrecisionFromTimeFrame(merged, state.precision) ?? null;\n\n          const isPartialFrom =\n            isTimeValue(merged.from) && merged.from.absoluteDate === '';\n          const isPartialTo =\n            isTimeValue(merged.to) && merged.to.absoluteDate === '';\n\n          // For partial values while editing we trigger onChange with '' to inform\n          // the user that the current value is invalid, but not empty.\n          if (isPartialFrom || isPartialTo) {\n            const errorKey = validate(\n              timeframeWithPrecision,\n              state.min,\n              state.max,\n              {\n                formerError: state.dateTimeRangePickerError,\n                precision: state.precision,\n                showError: false,\n                checkOrder: true,\n                ref: state.dateTimeRangePickerRef,\n                expectedFormat: state.formatString,\n                valueMode: 'timeframeSelector',\n                required: state.required,\n                errorMessages,\n              },\n            );\n\n            const calendarValue = {\n              from: isPartialFrom ? null : timeframeWithPrecision?.from ?? null,\n              to: isPartialTo ? null : timeframeWithPrecision?.to ?? null,\n            };\n\n            return {\n              dateTimeRangePickerTimeframe: timeframeWithPrecision,\n              calendarValue,\n              calendarError: errorKey,\n              dateTimeRangePickerError: errorKey,\n            };\n          }\n\n          const dateTimeRangePickerError = validate(\n            timeframeWithPrecision,\n            state.min,\n            state.max,\n            {\n              formerError: state.dateTimeRangePickerError,\n              precision: state.precision,\n              showError: false,\n              checkOrder: true,\n              ref: state.dateTimeRangePickerRef,\n              expectedFormat: state.formatString,\n              valueMode: 'timeframeSelector',\n              required: state.required,\n              errorMessages,\n            },\n          );\n\n          return {\n            dateTimeRangePickerTimeframe: timeframeWithPrecision,\n            calendarValue: timeframeWithPrecision,\n            calendarError: dateTimeRangePickerError,\n            dateTimeRangePickerError,\n          };\n        });\n      },\n      setTimeframeSelectorTimeframe: (inputValue) => {\n        debouncedOnChangeRef?.current?.cancel();\n        return set((state) =>\n          handleTimeframeSelectorTimeframeChange(\n            inputValue,\n            state,\n            isControlled,\n            timeframeSelectorRef,\n            formFieldMessagesDispatch,\n            onChangeProp,\n            errorMessages,\n          ),\n        );\n      },\n      setReferenceTimeframe: (value) => {\n        set(() => handlePreviousTimeframeChange(value));\n      },\n      setStepperValue: (value) => {\n        set((state) => {\n          debouncedOnChangeRef?.current?.(value);\n          if (isControlled) {\n            return state;\n          }\n          return {\n            timeframeSelectorTimeframe: value,\n            calendarValue: value,\n            dateTimeRangePickerTimeframe: value,\n          };\n        });\n      },\n      clearCalendarValue: () => {\n        set((state) => handleClearCalendarValue(state));\n      },\n    };\n  };\n\n  return actions;\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,UAAU,kBAAkB;AAKrC,SAAS,mBAAmB;AAE5B,SAAS,yCAAyC;AAClD;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,2BAA2B;AACpC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe,gBAAgB;AAaxC,SAAS,uCACP,YACA,OACA,cACA,sBACA,2BACA,cACA,eACiC;AACjC,QAAM,yBACJ,6BAA6B,YAAY,MAAM,SAAS,KAAK;AAE/D,QAAM,QAAQ,gBAAgB,sBAAsB,IAChD,yBACA;AAEJ,iBAAe,KAAK;AACpB,uBAAqB,SAAS,MAAM;AAEpC,MAAI,cAAc;AAChB,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,SAAS,wBAAwB,MAAM,KAAK,MAAM,KAAK;AAAA,IACnE,qBAAqB;AAAA,IACrB,aAAa,MAAM;AAAA,IACnB,WAAW,MAAM;AAAA,IACjB,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,gBAAgB,MAAM;AAAA,IACtB,WAAW;AAAA,IACX,UAAU,MAAM;AAAA,IAChB;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,4BAA4B;AAAA,IAC5B,eAAe,SAAS;AAAA,IACxB,8BAA8B,SAAS;AAAA,IACvC,oBAAoB;AAAA,IACpB,wBAAwB;AAAA,IACxB,eAAe;AAAA,IACf,0BAA0B;AAAA,EAC5B;AACF;AAOA,SAAS,8BACP,OACiC;AACjC,SAAO;AAAA,IACL,oBAAoB;AAAA,EACtB;AACF;AAEA,SAAS,mBACP,WACA,OACS;AACT,QAAM,WAAW,YAAY;AAC7B,QAAM,KAAK,IAAI,WAAW,UAAU,GAAG,cAAc,QAAQ;AAC7D,QAAM,OAAO,IAAI,WAAW,UAAU,KAAK,cAAc,QAAQ;AAEjE,QAAM,iBACJ,gBAAgB,SAAS,EAAE,EAAE,YAAY,GAAG,MAAM,SAAS,MAC3D,gBAAgB,UAAU,GAAG,cAAc,MAAM,SAAS;AAC5D,QAAM,YAAY,MAAM,KAAK,iBAAiB,GAAG,YAAY;AAE7D,QAAM,qBACJ,gBAAgB,WAAW,IAAI,EAAE,YAAY,GAAG,MAAM,SAAS,MAC/D,gBAAgB,UAAU,KAAK,cAAc,MAAM,SAAS;AAC9D,QAAM,cAAc,MAAM,KAAK,iBAAiB,KAAK,YAAY;AAEjE,SAAO;AAAA,KACJ,kBAAkB,eAAe,sBAAsB;AAAA,EAC1D;AACF;AAMO,SAAS,4BACd,cACA,sBACA,2BACA,cACA,sBAGA,eACA;AACA,QAAM,UAAU,CACd,QAGkC;AAClC,WAAO;AAAA,MACL,kBAAkB,CAAC,eAAe;AAChC,YAAI,CAAC,UAAU;AAEb,cAAI,YAAY,UAAU,KAAK,WAAW,UAAU,SAAS;AAC3D,kBAAM,SAAS,cAAc,OAAO;AAAA,cAClC,cAAc;AAAA,cACd;AAAA,YACF,CAAC;AAGD,kBAAM,cACJ,kCAAkC,UAClC,CAAC,OAAO,8BAA8B,QACtC,eAAe,OAAO,8BAA8B,EAAE;AAExD,mBAAO;AAAA,cACL,wBAAwB;AAAA,cACxB,WAAW;AAAA,cACX,GAAG;AAAA,cACH;AAAA,YACF;AAAA,UACF;AAEA,gBAAM,gBAAgB;AAAA,YACpB;AAAA,YACA;AAAA,UACF;AAEA,gBAAM,mBACJ;AAAA,YACE;AAAA,YACA,eAAe,MAAM,GAAG,IAAI,OAAO,MAAM;AAAA,YACzC,eAAe,MAAM,GAAG,IAAI,OAAO,MAAM;AAAA,UAC3C,MAAM;AAIR,cACE,CAAC,oBACD,CAAC,MAAM,8BAA8B,QACrC,MAAM,8BAA8B,MACpC,eAAe,MAAM,8BAA8B,EAAE,KACrD,eAAe,QACf,CAAC,eAAe,IAChB;AACA,kBAAM,YAAY;AAAA,cAChB;AAAA,gBACE,MAAM,cAAc;AAAA,gBACpB,IAAI,MAAM,6BAA6B;AAAA,cACzC;AAAA,cACA,MAAM;AAAA,cACN,MAAM;AAAA,cACN,MAAM;AAAA,YACR;AACA;AAAA,cACE,MAAM;AAAA,cACN,MAAM;AAAA,YACR;AAEA,mBAAO;AAAA,cACL,eAAe;AAAA,cACf,8BAA8B;AAAA,cAC9B,eAAe;AAAA,cACf,0BAA0B;AAAA,cAC1B,wBAAwB;AAAA,cACxB,WAAW;AAAA,cACX,aAAa;AAAA,YACf;AAAA,UACF;AAEA,cAAI,gBAAgB,aAAa,GAAG;AAClC,kBAAM,YAAY,mBAAmB,eAAe,KAAK;AACzD;AAAA,cACE,MAAM;AAAA,cACN,MAAM;AAAA,YACR;AAEA,mBAAO;AAAA,cACL;AAAA,cACA,8BAA8B;AAAA,cAC9B;AAAA,cACA,aAAa;AAAA,YACf;AAAA,UACF;AAEA,iBAAO,EAAE,eAAe,WAAW,OAAO,aAAa,MAAM;AAAA,QAC/D,CAAC;AAAA,MACH;AAAA,MACA,iCAAiC,CAAC,UAAU;AAC1C,eAAO,IAAI,CAAC,UAAU;AAEpB,cAAI,UAAU,MAAM;AAClB,mBAAO;AAAA,cACL,8BAA8B;AAAA,cAC9B,eAAe;AAAA,cACf,0BAA0B;AAAA,cAC1B,eAAe;AAAA,cACf,aAAa;AAAA,YACf;AAAA,UACF;AAEA,gBAAM,SAAS;AAAA,YACb,MAAM;AAAA,YACN;AAAA,UACF;AAEA,gBAAM,yBACJ,6BAA6B,QAAQ,MAAM,SAAS,KAAK;AAE3D,gBAAM,gBACJ,YAAY,OAAO,IAAI,KAAK,OAAO,KAAK,iBAAiB;AAC3D,gBAAM,cACJ,YAAY,OAAO,EAAE,KAAK,OAAO,GAAG,iBAAiB;AAIvD,cAAI,iBAAiB,aAAa;AAChC,kBAAM,WAAW;AAAA,cACf;AAAA,cACA,MAAM;AAAA,cACN,MAAM;AAAA,cACN;AAAA,gBACE,aAAa,MAAM;AAAA,gBACnB,WAAW,MAAM;AAAA,gBACjB,WAAW;AAAA,gBACX,YAAY;AAAA,gBACZ,KAAK,MAAM;AAAA,gBACX,gBAAgB,MAAM;AAAA,gBACtB,WAAW;AAAA,gBACX,UAAU,MAAM;AAAA,gBAChB;AAAA,cACF;AAAA,YACF;AAEA,kBAAM,gBAAgB;AAAA,cACpB,MAAM,gBAAgB,OAAO,wBAAwB,QAAQ;AAAA,cAC7D,IAAI,cAAc,OAAO,wBAAwB,MAAM;AAAA,YACzD;AAEA,mBAAO;AAAA,cACL,8BAA8B;AAAA,cAC9B;AAAA,cACA,eAAe;AAAA,cACf,0BAA0B;AAAA,YAC5B;AAAA,UACF;AAEA,gBAAM,2BAA2B;AAAA,YAC/B;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,YACN;AAAA,cACE,aAAa,MAAM;AAAA,cACnB,WAAW,MAAM;AAAA,cACjB,WAAW;AAAA,cACX,YAAY;AAAA,cACZ,KAAK,MAAM;AAAA,cACX,gBAAgB,MAAM;AAAA,cACtB,WAAW;AAAA,cACX,UAAU,MAAM;AAAA,cAChB;AAAA,YACF;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,8BAA8B;AAAA,YAC9B,eAAe;AAAA,YACf,eAAe;AAAA,YACf;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,+BAA+B,CAAC,eAAe;AAC7C,8BAAsB,SAAS,OAAO;AACtC,eAAO;AAAA,UAAI,CAAC,UACV;AAAA,YACE;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,uBAAuB,CAAC,UAAU;AAChC,YAAI,MAAM,8BAA8B,KAAK,CAAC;AAAA,MAChD;AAAA,MACA,iBAAiB,CAAC,UAAU;AAC1B,YAAI,CAAC,UAAU;AACb,gCAAsB,UAAU,KAAK;AACrC,cAAI,cAAc;AAChB,mBAAO;AAAA,UACT;AACA,iBAAO;AAAA,YACL,4BAA4B;AAAA,YAC5B,eAAe;AAAA,YACf,8BAA8B;AAAA,UAChC;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,oBAAoB,MAAM;AACxB,YAAI,CAAC,UAAU,yBAAyB,KAAK,CAAC;AAAA,MAChD;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
   "names": []
 }

package/esm/core/time/useDateTimeMessages.js

@@ -5,12 +5,12 @@ import {
   defineMessages,
   useIntl
 } from "react-intl";
-import {
-  getRegionalFormat,
-  getTimezone
-} from "@dynatrace-sdk/user-preferences";
+import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { intlCache } from "../../forms/date-time-picker/utils/intl-cache.js";
-import { getDayPeriodValues } from "../../forms/forms-core/time/helpers.js";
+import {
+  getDayPeriodValues,
+  getSafeRegionalFormat
+} from "../../forms/forms-core/time/helpers.js";
 const placeholderMessages = defineMessages({
   year: {
     defaultMessage: "YYYY",
@@ -60,7 +60,7 @@ function getPlaceholder(type, formatMessage) {
 }
 const useDateTimeMessages = (options) => {
   const {
-    locale = getRegionalFormat(),
+    locale = getSafeRegionalFormat(),
     timeZone: timeZoneProp = getTimezone(),
     type = "datetime",
     precision = "minutes"