@dynatrace/strato-components 3.5.2 → 3.7.0

package/core/styles/focusRingStatic.css

@@ -1,49 +1,49 @@
-._z0fq9b4-3-5-2 {
+._z0fq9b4-3-7-0 {
   outline: none;
 }
-._z0fq9b5-3-5-2 {
-  --_z0fq9b3-3-5-2: var(--dt-borders-width-default, 1px);
-  --_z0fq9b2-3-5-2: 0 0 0 var(--_z0fq9b3-3-5-2) var(--_z0fq9b0-3-5-2) inset;
+._z0fq9b5-3-7-0 {
+  --_z0fq9b3-3-7-0: var(--dt-borders-width-default, 1px);
+  --_z0fq9b2-3-7-0: 0 0 0 var(--_z0fq9b3-3-7-0) var(--_z0fq9b0-3-7-0) inset;
 }
-._z0fq9b6-3-5-2 {
-  --_z0fq9b3-3-5-2: var(--dt-borders-width-emphasized, 2px);
-  --_z0fq9b2-3-5-2: 0 0 0 var(--_z0fq9b3-3-5-2) var(--_z0fq9b0-3-5-2) inset, 0 0 0 calc(var(--_z0fq9b3-3-5-2) + 1px) var(--_z0fq9b1-3-5-2) inset;
+._z0fq9b6-3-7-0 {
+  --_z0fq9b3-3-7-0: var(--dt-borders-width-emphasized, 2px);
+  --_z0fq9b2-3-7-0: 0 0 0 var(--_z0fq9b3-3-7-0) var(--_z0fq9b0-3-7-0) inset, 0 0 0 calc(var(--_z0fq9b3-3-7-0) + 1px) var(--_z0fq9b1-3-7-0) inset;
 }
-._z0fq9b7-3-5-2 {
-  --_z0fq9b2-3-5-2: none;
+._z0fq9b7-3-7-0 {
+  --_z0fq9b2-3-7-0: none;
 }
-._z0fq9b8-3-5-2._z0fq9b8-3-5-2 {
-  box-shadow: var(--_z0fq9b2-3-5-2);
+._z0fq9b8-3-7-0._z0fq9b8-3-7-0 {
+  box-shadow: var(--_z0fq9b2-3-7-0);
 }
-._z0fq9b9-3-5-2:focus-visible {
-  box-shadow: var(--_z0fq9b2-3-5-2);
+._z0fq9b9-3-7-0:focus-visible {
+  box-shadow: var(--_z0fq9b2-3-7-0);
 }
-._z0fq9ba-3-5-2:focus-within {
-  box-shadow: var(--_z0fq9b2-3-5-2);
+._z0fq9ba-3-7-0:focus-within {
+  box-shadow: var(--_z0fq9b2-3-7-0);
 }
-._z0fq9bb-3-5-2:has(:focus-visible) {
-  box-shadow: var(--_z0fq9b2-3-5-2);
+._z0fq9bb-3-7-0:has(:focus-visible) {
+  box-shadow: var(--_z0fq9b2-3-7-0);
 }
-._z0fq9bc-3-5-2:focus {
-  box-shadow: var(--_z0fq9b2-3-5-2);
+._z0fq9bc-3-7-0:focus {
+  box-shadow: var(--_z0fq9b2-3-7-0);
 }
-._z0fq9bd-3-5-2 {
-  --_z0fq9b0-3-5-2: var(--dt-colors-border-neutral-accent, #595a7d);
-  --_z0fq9b1-3-5-2: var(--dt-colors-border-neutral-default, #dadbe4);
+._z0fq9bd-3-7-0 {
+  --_z0fq9b0-3-7-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_z0fq9b1-3-7-0: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._z0fq9be-3-5-2 {
-  --_z0fq9b0-3-5-2: var(--dt-colors-border-primary-accent, #464cce);
-  --_z0fq9b1-3-5-2: var(--dt-colors-border-primary-default, #d5dbf6);
+._z0fq9be-3-7-0 {
+  --_z0fq9b0-3-7-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_z0fq9b1-3-7-0: var(--dt-colors-border-primary-default, #d5dbf6);
 }
-._z0fq9bf-3-5-2 {
-  --_z0fq9b0-3-5-2: var(--dt-colors-border-success-accent, #2d6761);
-  --_z0fq9b1-3-5-2: var(--dt-colors-border-success-default, #d3dedd);
+._z0fq9bf-3-7-0 {
+  --_z0fq9b0-3-7-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_z0fq9b1-3-7-0: var(--dt-colors-border-success-default, #d3dedd);
 }
-._z0fq9bg-3-5-2 {
-  --_z0fq9b0-3-5-2: var(--dt-colors-border-warning-accent, #855400);
-  --_z0fq9b1-3-5-2: var(--dt-colors-border-warning-default, #f9ebdb);
+._z0fq9bg-3-7-0 {
+  --_z0fq9b0-3-7-0: var(--dt-colors-border-warning-accent, #855400);
+  --_z0fq9b1-3-7-0: var(--dt-colors-border-warning-default, #f9ebdb);
 }
-._z0fq9bh-3-5-2 {
-  --_z0fq9b0-3-5-2: var(--dt-colors-border-critical-accent, #bb0731);
-  --_z0fq9b1-3-5-2: var(--dt-colors-border-critical-default, #f6d6d5);
+._z0fq9bh-3-7-0 {
+  --_z0fq9b0-3-7-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_z0fq9b1-3-7-0: var(--dt-colors-border-critical-default, #f6d6d5);
 }

package/core/styles/focusRingStatic.sty.js

@@ -22,4 +22,4 @@ __export(focusRingStatic_css_exports, {
 module.exports = __toCommonJS(focusRingStatic_css_exports);
 var import_focusRingStatic_css_ts_vanilla = require("./focusRingStatic.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-3-5-2", variantClassNames: { minimal: { true: "_z0fq9b5-3-5-2", false: "_z0fq9b6-3-5-2" }, disabled: { true: "_z0fq9b7-3-5-2" }, when: { always: "_z0fq9b8-3-5-2", "focus-visible": "_z0fq9b9-3-5-2", "focus-within": "_z0fq9ba-3-5-2", "focus-within-visible": "_z0fq9bb-3-5-2", focus: "_z0fq9bc-3-5-2" }, color: { neutral: "_z0fq9bd-3-5-2", primary: "_z0fq9be-3-5-2", success: "_z0fq9bf-3-5-2", warning: "_z0fq9bg-3-5-2", critical: "_z0fq9bh-3-5-2" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });
+var focusRingStatic = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_z0fq9b4-3-7-0", variantClassNames: { minimal: { true: "_z0fq9b5-3-7-0", false: "_z0fq9b6-3-7-0" }, disabled: { true: "_z0fq9b7-3-7-0" }, when: { always: "_z0fq9b8-3-7-0", "focus-visible": "_z0fq9b9-3-7-0", "focus-within": "_z0fq9ba-3-7-0", "focus-within-visible": "_z0fq9bb-3-7-0", focus: "_z0fq9bc-3-7-0" }, color: { neutral: "_z0fq9bd-3-7-0", primary: "_z0fq9be-3-7-0", success: "_z0fq9bf-3-7-0", warning: "_z0fq9bg-3-7-0", critical: "_z0fq9bh-3-7-0" } }, defaultVariants: { color: "neutral", minimal: false, when: "focus", disabled: false }, compoundVariants: [] });

package/core/styles/virtualFocus.css

@@ -1,10 +1,10 @@
-._9mvxlq0-3-5-2 {
+._9mvxlq0-3-7-0 {
   transition: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._9mvxlq1-3-5-2 {
+._9mvxlq1-3-7-0 {
   transition: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-primary-accent, #464cce);

package/core/styles/virtualFocus.sty.js

@@ -21,4 +21,4 @@ __export(virtualFocus_css_exports, {
 });
 module.exports = __toCommonJS(virtualFocus_css_exports);
 var import_virtualFocus_css_ts_vanilla = require("./virtualFocus.css");
-var virtualFocus = { neutral: "_9mvxlq0-3-5-2", primary: "_9mvxlq1-3-5-2" };
+var virtualFocus = { neutral: "_9mvxlq0-3-7-0", primary: "_9mvxlq1-3-7-0" };

package/core/time/helpers.d.ts

@@ -30,6 +30,14 @@ export declare function isTimeValue(value: unknown): value is TimeValue;
  * @internal
  */
 export declare function isFullTimeframe(timeframe?: unknown): timeframe is Timeframe;
+export declare function isNowTimeValue(value?: TimeValue | null): boolean;
+export declare function isRangeValue(value: TimeValue | {
+    from: TimeValue | null;
+    to: TimeValue | null;
+} | null): value is {
+    from: TimeValue | null;
+    to: TimeValue | null;
+};
 /**
  * Typeguard to check if a given object is a partial timeframe. So either from or to are missing.
  * @internal

package/core/time/helpers.js

@@ -22,7 +22,9 @@ __export(helpers_exports, {
   isEqualRangeSelection: () => isEqualRangeSelection,
   isEqualTimeValue: () => isEqualTimeValue,
   isFullTimeframe: () => isFullTimeframe,
+  isNowTimeValue: () => isNowTimeValue,
   isPartialTimeframe: () => isPartialTimeframe,
+  isRangeValue: () => isRangeValue,
   isSimpleTimeOffset: () => isSimpleTimeOffset,
   isTimeValue: () => isTimeValue,
   isTimeframe: () => isTimeframe,
@@ -70,6 +72,14 @@ function isFullTimeframe(timeframe) {
   const candidate = timeframe;
   return isTimeValue(candidate.from) && candidate.from.absoluteDate !== "" && isTimeValue(candidate.to) && candidate.to.absoluteDate !== "";
 }
+function isNowTimeValue(value) {
+  return Boolean(
+    value?.type === "expression" && (value.value === "now" || value.value === "now()")
+  );
+}
+function isRangeValue(value) {
+  return typeof value === "object" && value !== null && "from" in value;
+}
 function isPartialTimeframe(timeframe) {
   if (typeof timeframe !== "object" || timeframe === null) {
     return false;

package/core/time/timeframeStore/actions/calendar.d.ts

@@ -10,7 +10,7 @@ import type { CalendarTimeframeState, CalendarTimeframeStoreActions } from '../c
  * Gets the timeframe from the calendar selection.
  * @internal
  */
-export declare function getTimeframeFromCalendarSelection(inputValue: TZDate | null, state: CalendarTimeframeState): {
+export declare function getTimeframeFromCalendarSelection(inputValue: TZDate | TimeValue | null, state: CalendarTimeframeState): {
     from: TimeValue | null;
     to: TimeValue | null;
 } | null;

package/core/time/timeframeStore/actions/calendar.js

@@ -33,7 +33,8 @@ function getTimeframeFromCalendarSelection(inputValue, state) {
   if (inputValue === null) {
     return null;
   }
-  const stringDate = inputValue.toISOString();
+  const isInputTimeValue = (0, import_helpers2.isTimeValue)(inputValue);
+  const stringDate = isInputTimeValue ? inputValue.absoluteDate : inputValue.toISOString();
   const calendarRangeValue = state.calendarValue;
   const { from, to } = calendarRangeValue ?? {};
   let position = "from";
@@ -42,30 +43,39 @@ function getTimeframeFromCalendarSelection(inputValue, state) {
     to: null
   };
   if (from && !to) {
-    const isToBeforeFrom = (0, import_date_fns.isBefore)(stringDate, from.absoluteDate);
-    if (!isToBeforeFrom) {
-      newTimeframe = {
-        from,
-        to: null
-      };
-      position = "to";
-    }
-    if (isToBeforeFrom) {
-      newTimeframe = {
-        from: null,
-        to: (0, import_helpers.getTimeValueFromSimpleValue)(
-          from.absoluteDate,
-          state.timeOffset,
-          "to",
-          void 0,
-          state.min,
-          state.max,
-          state.precision
-        )
-      };
+    const fromIsOutOfBounds = (0, import_validation.isOutOfBounds)(from.value, state.min, state.max) !== void 0;
+    if (!fromIsOutOfBounds) {
+      const resolvedToDate = isInputTimeValue ? stringDate : (0, import_helpers.getTimeValueFromSimpleValue)(
+        stringDate,
+        state.timeOffset,
+        "to",
+        void 0,
+        state.min,
+        state.max,
+        state.precision
+      )?.absoluteDate ?? stringDate;
+      const isToBeforeFrom = (0, import_date_fns.isBefore)(resolvedToDate, from.absoluteDate);
+      if (!isToBeforeFrom) {
+        newTimeframe = { from, to: null };
+        position = "to";
+      }
+      if (isToBeforeFrom) {
+        newTimeframe = {
+          from: null,
+          to: (0, import_helpers.getTimeValueFromSimpleValue)(
+            from.value,
+            state.timeOffset,
+            "to",
+            void 0,
+            state.min,
+            state.max,
+            state.precision
+          )
+        };
+      }
     }
   }
-  const newTimeValue = (0, import_helpers.getTimeValueFromSimpleValue)(
+  newTimeframe[position] = isInputTimeValue ? inputValue : (0, import_helpers.getTimeValueFromSimpleValue)(
     stringDate,
     state.timeOffset,
     position,
@@ -74,7 +84,6 @@ function getTimeframeFromCalendarSelection(inputValue, state) {
     state.max,
     state.precision
   );
-  newTimeframe[position] = newTimeValue;
   return newTimeframe;
 }
 function getCalendarActions(isControlled, type, formFieldMessagesDispatch, onChangeProp) {
@@ -107,7 +116,7 @@ function getCalendarActions(isControlled, type, formFieldMessagesDispatch, onCha
             calendarError: calendarError2
           };
         }
-        const newTimeValue = (0, import_helpers.getTimeValueFromSimpleValue)(
+        const newTimeValue = (0, import_helpers2.isTimeValue)(inputValue) ? inputValue : (0, import_helpers.getTimeValueFromSimpleValue)(
           inputValue,
           state.timeOffset,
           void 0,

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

@@ -23,12 +23,16 @@ module.exports = __toCommonJS(dateTimePicker_exports);
 var import_focusDateTimeInput = require("../../../../forms/date-time-picker/utils/focusDateTimeInput.js");
 var import_helpers = require("../../../../forms/forms-core/time/helpers.js");
 var import_timeParser = require("../../../../forms/forms-core/time/timeParser.js");
+var import_helpers2 = require("../../helpers.js");
 var import_validation = require("../../validation.js");
 function getDateTimePickerActions(formFieldMessagesDispatch, onChangeProp, isControlled) {
   const actions = (set) => {
     return {
       setCalendarValue: (inputValue) => {
         set((state) => {
+          if ((0, import_helpers2.isTimeValue)(inputValue)) {
+            return state;
+          }
           const newTimeValue = (0, import_helpers.getTimeValueFromSimpleValue)(
             inputValue,
             state.timeOffset,
@@ -50,11 +54,10 @@ function getDateTimePickerActions(formFieldMessagesDispatch, onChangeProp, isCon
             required: state.required
           });
           state.dateTimePickerRef?.current?.close();
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              (0, import_focusDateTimeInput.focusTimeInput)(state.dateTimeInputRef);
-            });
-          });
+          (0, import_focusDateTimeInput.focusElementWithRetry)(
+            () => state.dateTimeInputRef.current?.spinButtonHandlers.get("hour")?.element.current,
+            state.dateTimeInputRef
+          );
           const calendarTimeValue = (0, import_helpers.toCalendarValue)(
             newTimeValue,
             state.precision

package/core/time/timeframeStore/actions/dateTimeRangePicker.d.ts

@@ -7,4 +7,4 @@ import type { DateTimeRangePickerTimeframeStates, DateTimeRangePickerTimeframeSt
  * Creates actions for the DateTimeRangePicker store using the slice action handlers.
  *  @internal
  */
-export declare function getDateTimeRangePickerActions(formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>, onChangeProp?: ((value: Timeframe | null) => void) | undefined): (set: StoreApi<DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions>["setState"]) => DateTimeRangePickerTimeframeStoreActions;
+export declare function getDateTimeRangePickerActions(isControlled: boolean, formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>, onChangeProp?: ((value: Timeframe | null) => void) | undefined): (set: StoreApi<DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions>["setState"]) => DateTimeRangePickerTimeframeStoreActions;

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

@@ -21,34 +21,71 @@ __export(dateTimeRangePicker_exports, {
 });
 module.exports = __toCommonJS(dateTimeRangePicker_exports);
 var import_calendar = require("./calendar.js");
-var import_focusDateTimeInput = require("../../../../forms/date-time-picker/utils/focusDateTimeInput.js");
+var import_helpers = require("./helpers.js");
+var import_helpers2 = require("../../../../forms/forms-core/time/helpers.js");
 var import_timeParser = require("../../../../forms/forms-core/time/timeParser.js");
-var import_helpers = require("../../helpers.js");
+var import_helpers3 = require("../../helpers.js");
 var import_validation = require("../../validation.js");
-function getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp) {
+function getDateTimeRangePickerActions(isControlled, formFieldMessagesDispatch, onChangeProp) {
   const actions = (set) => {
     return {
       setCalendarValue: (inputValue) => {
         set((state) => {
+          if ((0, import_helpers3.isTimeValue)(inputValue) && inputValue.value === "now()") {
+            const update = (0, import_helpers.applySetToNow)(state, {
+              isControlled,
+              onChangeProp,
+              formFieldMessagesDispatch,
+              validateMode: "dateTimePicker"
+            });
+            const nowInserted = "dateTimeRangePickerTimeframe" in update && !update.dateTimeRangePickerTimeframe?.from && (0, import_helpers3.isNowTimeValue)(update.dateTimeRangePickerTimeframe?.to);
+            return { ...update, nowInserted };
+          }
           const calendarTimeframe = (0, import_calendar.getTimeframeFromCalendarSelection)(
             inputValue,
             state
           );
-          if ((0, import_helpers.isFullTimeframe)(calendarTimeframe)) {
-            state.dateTimeRangePickerRef?.current?.close();
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                state.dateTimeRangePickerRef?.current?.focus?.();
-                (0, import_focusDateTimeInput.focusTimeInput)(state.dateTimeFromRef);
-              });
-            });
+          const nowIsOutOfBounds = (0, import_validation.isOutOfBounds)(
+            "now",
+            (0, import_helpers3.isNowTimeValue)(state.min) ? null : state.min,
+            (0, import_helpers3.isNowTimeValue)(state.max) ? null : state.max
+          ) !== void 0;
+          if (!nowIsOutOfBounds && !state.dateTimeRangePickerTimeframe?.from && state.dateTimeRangePickerTimeframe?.to && (0, import_helpers3.isNowTimeValue)(state.dateTimeRangePickerTimeframe.to) && calendarTimeframe?.from && !calendarTimeframe?.to) {
+            const timeframe = (0, import_helpers2.sortTimeframeValues)(
+              {
+                from: calendarTimeframe.from,
+                to: state.dateTimeRangePickerTimeframe.to
+              },
+              state.min,
+              state.max,
+              state.precision
+            );
+            if ((0, import_helpers3.isFullTimeframe)(timeframe)) {
+              (0, import_helpers.closeCalendarAndFocusInput)(
+                state.dateTimeRangePickerRef,
+                state.dateTimeFromRef
+              );
+              onChangeProp?.(timeframe);
+            }
+            return {
+              calendarValue: timeframe,
+              dateTimeRangePickerTimeframe: timeframe,
+              nowInserted: false
+            };
+          }
+          if ((0, import_helpers3.isFullTimeframe)(calendarTimeframe)) {
+            (0, import_helpers.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) => {
@@ -57,10 +94,11 @@ function getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp)
             onChangeProp?.(null);
             return {
               dateTimeRangePickerTimeframe: null,
-              calendarValue: null
+              calendarValue: null,
+              nowInserted: false
             };
           }
-          const merged = (0, import_helpers.mergeRangeValue)(
+          const merged = (0, import_helpers3.mergeRangeValue)(
             state.dateTimeRangePickerTimeframe,
             value
           );
@@ -68,9 +106,9 @@ function getDateTimeRangePickerActions(formFieldMessagesDispatch, onChangeProp)
           if (timeframeWithPrecision?.from === null && timeframeWithPrecision?.to === null) {
             onChangeProp?.(null);
           }
-          (0, import_helpers.isFullTimeframe)(timeframeWithPrecision) && onChangeProp?.(timeframeWithPrecision);
-          const isPartialFrom = (0, import_helpers.isTimeValue)(merged.from) && merged.from.absoluteDate === "";
-          const isPartialTo = (0, import_helpers.isTimeValue)(merged.to) && merged.to.absoluteDate === "";
+          (0, import_helpers3.isFullTimeframe)(timeframeWithPrecision) && onChangeProp?.(timeframeWithPrecision);
+          const isPartialFrom = (0, import_helpers3.isTimeValue)(merged.from) && merged.from.absoluteDate === "";
+          const isPartialTo = (0, import_helpers3.isTimeValue)(merged.to) && merged.to.absoluteDate === "";
           if (isPartialFrom || isPartialTo) {
             const errorKey = (0, import_validation.validate)(
               timeframeWithPrecision,
@@ -124,15 +162,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) => (0, import_helpers.handleClearCalendarValue)(state));
       }
     };
   };

package/core/time/timeframeStore/actions/helpers.d.ts

@@ -0,0 +1,44 @@
+import type { Dispatch, RefObject } from 'react';
+import type { DateTimeInputRef } from '../../../../forms/date-time-range-picker/types.js';
+import type { FormFieldMessagesReducerAction } from '../../../../forms/forms-core/state/formfield-messages-state-reducer.js';
+import { type Timeframe } from '../../../types/time.js';
+import type { ValidateOptions } from '../../validation.js';
+import type { DateTimeRangePickerTimeframeStates } from '../dateTimeRangePicker.types.js';
+/**
+ * Closes Calendar overlay and, after two animation frames, refocuses the from-input.
+ * The double rAF ensures the overlay has fully unmounted before focus is moved.
+ * @internal
+ */
+export declare function closeCalendarAndFocusInput(pickerRef: RefObject<{
+    close(): void;
+    focus?: () => void;
+} | null> | undefined, dateTimeFromRef: RefObject<DateTimeInputRef | null> | undefined): void;
+/**
+ * Pure reducer for the `clearCalendarValue` action, shared between
+ * DateTimeRangePicker and TimeframeSelector.
+ * @internal
+ */
+export declare function handleClearCalendarValue(state: Pick<DateTimeRangePickerTimeframeStates, 'calendarValue' | 'dateTimeRangePickerTimeframe' | 'nowInserted'>): Partial<Pick<DateTimeRangePickerTimeframeStates, 'calendarValue' | 'dateTimeRangePickerTimeframe' | 'nowInserted'>>;
+/**
+ * Options for {@link applySetToNow}.
+ * @internal
+ */
+export type SetToNowOptions = {
+    /** Which boundary to set to `now`. Defaults to `to`. */
+    target?: 'from' | 'to';
+    /** Called with the committed timeframe when a full range is built. */
+    onChangeProp?: (value: Timeframe | null) => void;
+    formFieldMessagesDispatch?: Dispatch<FormFieldMessagesReducerAction>;
+    /** Controls validation messaging and whether to swap an inverted boundary. */
+    validateMode: 'dateTimePicker' | 'timeframeSelector';
+    errorMessages?: ValidateOptions['errorMessages'];
+    /** When true the component is controlled: skip internal state update after firing `onChangeProp`. */
+    isControlled?: boolean;
+};
+/**
+ * Returns the store state patch for the "set a boundary to now" action, shared by
+ * DateTimeRangePicker and TimeframeSelector. Callers may spread in additional
+ * component-specific fields on top of the returned patch.
+ * @internal
+ */
+export declare function applySetToNow(state: DateTimeRangePickerTimeframeStates, options: SetToNowOptions): Partial<DateTimeRangePickerTimeframeStates>;

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

@@ -0,0 +1,121 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var helpers_exports = {};
+__export(helpers_exports, {
+  applySetToNow: () => applySetToNow,
+  closeCalendarAndFocusInput: () => closeCalendarAndFocusInput,
+  handleClearCalendarValue: () => handleClearCalendarValue
+});
+module.exports = __toCommonJS(helpers_exports);
+var import_focusDateTimeInput = require("../../../../forms/date-time-picker/utils/focusDateTimeInput.js");
+var import_helpers = require("../../../../forms/forms-core/time/helpers.js");
+var import_helpers2 = require("../../helpers.js");
+var import_validation = require("../../validation.js");
+function closeCalendarAndFocusInput(pickerRef, dateTimeFromRef) {
+  pickerRef?.current?.close();
+  (0, import_focusDateTimeInput.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 && (0, import_helpers2.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 = (0, import_helpers2.isNowTimeValue)(state.min) ? "from" : "to";
+  const { target = defaultTarget } = options;
+  const nowIsOutOfBounds = (0, import_validation.isOutOfBounds)("now", state.min, state.max) !== void 0;
+  if (nowIsOutOfBounds) {
+    return state;
+  }
+  const nowExpression = (0, import_helpers.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 && (0, import_validation.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 = (0, import_helpers.sortTimeframeValues)(
+    { from: existingTimeValue, to: nowExpression },
+    state.min,
+    state.max,
+    state.precision
+  );
+  if ((0, import_helpers2.isFullTimeframe)(timeframe)) {
+    options.onChangeProp?.(timeframe);
+    closeCalendarAndFocusInput(
+      state.dateTimeRangePickerRef,
+      state.dateTimeFromRef
+    );
+    if (options.isControlled) {
+      return state;
+    }
+  }
+  const error = (0, import_validation.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
+  };
+}