@dynatrace/strato-components 3.2.1 → 3.3.1

package/forms/date-time-range-picker/types.d.ts

@@ -75,18 +75,6 @@ export type DateTimeError = 'valueMissing' | 'invalid' | 'outsideRange' | null;
  * @internal
  */
 export type DateTimeInputProps = FormControlProps<TimeValue | null, (value: TimeValue | string | null) => void> & StylingProps & DataTestId & {
-    /**
-     * ISODatetime string of the earliest datetime that can be configured.
-     */
-    min?: string;
-    /**
-     * ISODatetime string of the latest datetime that can be configured.
-     */
-    max?: string;
-    /**
-     * Determines the level of precision of the time component.
-     */
-    precision?: DateTimePickerPrecision;
     /**
      * Determines which spin buttons will be shown when not in expression mode.
      */
@@ -95,9 +83,41 @@ export type DateTimeInputProps = FormControlProps<TimeValue | null, (value: Time
      * The placeholder that's shown in the respective input fields if the content is empty.
      */
     placeholder?: string;
-    /** Callback triggered when the element has an error. */
+    /**
+     * Callback triggered when the element has an error.
+     */
     onError?: (error: DateTimeError) => void;
+    /**
+     * Used to connect the hidden input with the form field context
+     */
     controlId?: string;
+    /** Internal: validation mode used when required empty values are checked. */
+    validationValueMode?: 'single';
+    /**
+     * Called when the user navigates backwards past the first spin button of this input
+     * (ArrowLeft at position 0, or Backspace with collapsed cursor at position 0).
+     */
+    onLeadingEdge?: () => void;
+    /**
+     * Called when the user navigates forward past the last spin button of this input
+     * (ArrowRight at the last cursor position).
+     */
+    onTrailingEdge?: () => void;
+    /**
+     * Called with the overflow character when a digit overflows the last spin button
+     * and there is no further spin button within this input.
+     */
+    onTrailingOverflow?: (overflowChar: string) => void;
+    /**
+     * When pasting a date-only value, determines whether to anchor the
+     * time portion at the start or end of the day.
+     * @defaultValue 'startOfDay'
+     */
+    dateOnlyPasteAnchor?: 'startOfDay' | 'endOfDay';
+    /**
+     * Called after a complete value was successfully pasted.
+     */
+    onPasteComplete?: () => void;
 };
 /**
  * Imperative handler to give access to the DOM elements of the DateTimeInput.
@@ -107,6 +127,12 @@ export type DateTimeInputRef = Omit<FormControlRef<HTMLSpanElement>, 'inputRef'>
     readonly inputRef?: HTMLInputElement | null;
     readonly expressionInputRef?: HTMLSpanElement | null;
     readonly spinButtonHandlers: Map<Intl.DateTimeFormatPartTypes, SpinButtonHandler | null>;
+    /**
+     * Focuses the last interactive element (last spin button or expression input).
+     * Useful when navigating backwards into this input from the sibling input.
+     */
+    readonly focusLast: () => void;
+    readonly switchToExpression: (initialChar?: string, focus?: boolean) => void;
 };
 /**
  * Props of the DateRangeSelector value.
@@ -121,26 +147,12 @@ export type DateRangeSelectorValueType = {
  * @internal
  */
 export interface DateRangeSelectorProps extends StylingProps, DataTestId, MaskingProps, AriaDisabledProps {
-    /** ISO string to initialize the calendar widget when opened. */
-    value: DateRangeSelectorValueType;
-    /** Returns the selected ISO datetime selected in the calendar widget. */
-    onChange: (value: DateRangeSelectorValueType) => void;
     /** Determine if the trigger is disabled or not. */
     disabled?: boolean;
     /** Determines whether the input is in read-only mode. */
     readOnly?: boolean;
     /** Determine if the trigger is in error state or not. */
     error: boolean;
-    /** ISODatetime string of the earliest datetime that can be configured. */
-    min?: string;
-    /** ISODatetime string of the latest datetime that can be configured. */
-    max?: string;
-    /** Determine if the ValueFrom is in error state or not. */
-    errorFrom?: DateTimeRangeError;
-    /** Determine if the ValueTo is in error state or not. */
-    errorTo?: DateTimeRangeError;
-    /** Determines the level of precision of the time component. */
-    precision?: 'minutes' | 'seconds' | 'milliseconds';
 }
 /**
  * Imperative handle to provide methods to interact with the calendar widget.
@@ -152,3 +164,13 @@ export interface DateRangeSelectorRef {
     /** Close the calendar widget. */
     close(): void;
 }
+/**
+ * Snapshot of a DateTimeInput state used for undo operations.
+ * @internal
+ */
+export type UndoSnapshot = {
+    value: TimeValue | null;
+    valueType: 'expression' | 'iso8601';
+    spinButtonTexts: Map<Intl.DateTimeFormatPart['type'], string>;
+    expressionText: string;
+};

package/forms/date-time-range-picker/useSelectionInteractionHandlers.js

@@ -51,56 +51,59 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput) {
     },
     [onFocusInput]
   );
-  const hasContentEditableKeyRemoved = (0, import_react.useRef)(false);
   const onKeyDown = (0, import_react.useCallback)(
     (event) => {
-      const userAgent = navigator.userAgent.toLowerCase();
-      const isMac = userAgent.includes("mac");
-      const hasModifierKey = isMac ? event.metaKey === true : event.ctrlKey === true;
-      if (event.key === "Shift" || event.key === "Control" || event.key === "Command") {
+      const hasModifierKey = event.metaKey === true || event.ctrlKey === true;
+      if (event.key === "Shift" || event.key === "Control" || event.key === "Meta" || event.key === "Alt" || event.key === "Command") {
         event.preventDefault();
         return;
       }
-      function removeContentEditableIfNeeded() {
-        if (hasContentEditableKeyRemoved.current === false) {
-          hasContentEditableKeyRemoved.current = true;
-          (0, import_selection_helpers.removeContentEditable)(
-            event.currentTarget,
-            event.currentTarget,
-            "keyup",
-            () => hasContentEditableKeyRemoved.current = false
-          );
-        }
-      }
-      if (hasModifierKey && event.key === "c") {
-        (0, import_selection_helpers.removeContentEditable)(
-          event.currentTarget,
-          event.currentTarget,
-          "keyup"
-        );
-        return;
-      }
       if (hasModifierKey && event.key === "a") {
         event.preventDefault();
         if (event.currentTarget instanceof HTMLElement) {
-          removeContentEditableIfNeeded();
           (0, import_selection_helpers.extendSelectionToAll)();
         }
         return;
       }
       if (event.shiftKey === true && (event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End")) {
         event.preventDefault();
-        if (event.currentTarget instanceof HTMLElement) {
-          removeContentEditableIfNeeded();
-          (0, import_selection_helpers.extendSelection)(event.key);
-        }
+        (0, import_selection_helpers.extendSelection)(event.key);
         return;
       }
-      if (event.target === touchedContainerRef.current) {
-        onFocusInput();
+      if (!event.shiftKey && !hasModifierKey && (event.key === "ArrowUp" || event.key === "ArrowDown") && event.target === touchedContainerRef.current) {
+        const anchorSpinButton = getAnchorSpinButton();
+        if (anchorSpinButton !== null) {
+          event.preventDefault();
+          anchorSpinButton.focus();
+          anchorSpinButton.dispatchEvent(
+            new KeyboardEvent("keydown", {
+              key: event.key,
+              bubbles: true,
+              cancelable: true
+            })
+          );
+          return;
+        }
+      }
+      if (event.target === touchedContainerRef.current && !hasModifierKey) {
+        const anchorSpinButton = getAnchorSpinButton();
+        if (anchorSpinButton !== null) {
+          anchorSpinButton.focus();
+        } else {
+          onFocusInput();
+        }
       }
     },
     [onFocusInput, touchedContainerRef]
   );
   return { onMouseDown, onKeyDown };
 }
+function getAnchorSpinButton() {
+  const anchorNode = window.getSelection()?.anchorNode ?? null;
+  if (anchorNode === null) {
+    return null;
+  }
+  return anchorNode.nodeType === Node.TEXT_NODE ? anchorNode.parentElement?.closest(
+    "[contenteditable]"
+  ) ?? null : anchorNode?.closest?.("[contenteditable]") ?? null;
+}

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-2-1 {
+._1dphm0f0-3-3-1 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-2-1 {
+._1dphm0f1-3-3-1 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -23,5 +23,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-2-1";
-var legend = "_1dphm0f1-3-2-1";
+var fieldset = "_1dphm0f0-3-3-1";
+var legend = "_1dphm0f1-3-3-1";

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -22,4 +22,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-2-1";
+var formField = "_mvcxum0-3-3-1";

package/forms/forms-core/components/form-field/FormFieldContextProvider.d.ts

@@ -4,4 +4,4 @@ import type { SharedFormFieldProps } from '../../types/formfield.types.js';
  * Provides the FormField context and handles default values properly, to easily reuse it when needed.
  * @internal
  */
-export declare const FormFieldContextProvider: (props: SharedFormFieldProps & WithChildren) => import("react/jsx-runtime.js").JSX.Element;
+export declare const FormFieldContextProvider: (props: SharedFormFieldProps & WithChildren) => import("react/jsx-runtime").JSX.Element;

package/forms/forms-core/components/form-field/FormFieldMessageContextProvider.d.ts

@@ -8,7 +8,7 @@ type FormFieldMessageContextProviderProps = WithChildren & DOMProps & Pick<Share
  * Provides the FormFieldMessages context and handles default values properly, to easily reuse it when needed.
  * @internal
  */
-export declare const FormFieldMessageContextProvider: (formFieldProps: FormFieldMessageContextProviderProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const FormFieldMessageContextProvider: (formFieldProps: FormFieldMessageContextProviderProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Function to ensure that a component with props that have generics in their type is always wrapped within a `MessageContextProvider`
  * for form validation outside of a `FormField`.

package/forms/forms-core/components/form-field-messages/FormFieldMessageBaseItem.d.ts

@@ -23,6 +23,6 @@ export interface FormFieldMessageBaseItemProps extends WithChildren, StylingProp
  * @internal
  */
 export declare const InternalBaseItem: {
-    (props: FormFieldMessageBaseItemProps): import("react/jsx-runtime.js").JSX.Element;
+    (props: FormFieldMessageBaseItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-2-1 {
+._16z6rg10-3-3-1 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-2-1 {
+._16z6rg11-3-3-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-2-1 {
+._16z6rg12-3-3-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-2-1 {
+._16z6rg13-3-3-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-2-1 {
+._16z6rg14-3-3-1 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.d.ts

@@ -21,6 +21,6 @@ export type FormFieldMessageItemProps = FormFieldMessageBaseItemProps & {
  * @public
  */
 export declare const FormFieldMessageItem: {
-    (props: FormFieldMessageItemProps): import("react/jsx-runtime.js").JSX.Element | null;
+    (props: FormFieldMessageItemProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -24,5 +24,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-2-1", variantClassNames: { variant: { hint: "_16z6rg11-3-2-1", error: "_16z6rg12-3-2-1" }, disabled: { true: "_16z6rg13-3-2-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-2-1";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-3-1", variantClassNames: { variant: { hint: "_16z6rg11-3-3-1", error: "_16z6rg12-3-3-1" }, disabled: { true: "_16z6rg13-3-3-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-3-1";

package/forms/forms-core/components/form-field-messages/FormFieldMessages.d.ts

@@ -17,7 +17,7 @@ export declare const FormFieldMessages: ((props: MaskingProps & StylingProps & D
     children?: ((messages: FormFieldControlMessage[]) => ReactNode[] | ReactNode) | ReactNode;
 } & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null) & {
     Item: {
-        (props: import("./FormFieldMessageItem.js").FormFieldMessageItemProps): import("react/jsx-runtime.js").JSX.Element | null;
+        (props: import("./FormFieldMessageItem.js").FormFieldMessageItemProps): import("react/jsx-runtime").JSX.Element | null;
         displayName: string;
     };
 };

package/forms/forms-core/components/form-field-messages/FormFieldMessages.sty.js

@@ -22,4 +22,4 @@ __export(FormFieldMessages_css_exports, {
 });
 module.exports = __toCommonJS(FormFieldMessages_css_exports);
 var import_FormFieldMessages_css_ts_vanilla = require("./FormFieldMessages.css");
-var formFieldMessages = "_1l9bja60-3-2-1";
+var formFieldMessages = "_1l9bja60-3-3-1";

package/forms/forms-core/components/hint/Hint.d.ts

@@ -18,6 +18,6 @@ export interface HintProps extends WithChildren, StylingProps, DataTestId {
  * @public
  */
 export declare const Hint: {
-    (props: HintProps): import("react/jsx-runtime.js").JSX.Element | null;
+    (props: HintProps): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/forms/forms-core/components/label/Label.css

@@ -1,9 +1,9 @@
-._1gxatyo0-3-2-1 {
+._1gxatyo0-3-3-1 {
   display: inline-block;
 }
-._1gxatyo1-3-2-1 {
+._1gxatyo1-3-3-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1gxatyo2-3-2-1:after {
+._1gxatyo2-3-3-1:after {
   content: "*" / "";
 }

package/forms/forms-core/components/label/Label.sty.js

@@ -23,4 +23,4 @@ __export(Label_css_exports, {
 module.exports = __toCommonJS(Label_css_exports);
 var import_Label_css_ts_vanilla = require("./Label.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var LabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-2-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-2-1" }, required: { true: "_1gxatyo2-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var LabelCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1gxatyo0-3-3-1", variantClassNames: { disabled: { true: "_1gxatyo1-3-3-1" }, required: { true: "_1gxatyo2-3-3-1" } }, defaultVariants: {}, compoundVariants: [] });

package/forms/forms-core/hooks/useFormFieldValidation.d.ts

@@ -12,7 +12,7 @@ export declare function getErrorType(validityState?: ValidityState): "badInput"
  * each validityStateKey.
  * @internal
  */
-export declare function getI18nErrorMessage(key: keyof ValidityState, ref?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null): import("react/jsx-runtime.js").JSX.Element | null;
+export declare function getI18nErrorMessage(key: keyof ValidityState, ref?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null): import("react/jsx-runtime").JSX.Element | null;
 /** @internal */
 interface FormFieldValidationProps {
     ariaProps: Pick<AriaAttributes, 'aria-errormessage' | 'aria-invalid' | 'aria-describedby'>;

package/forms/forms-core/hooks/useFormFieldValidation.js

@@ -25,7 +25,7 @@ __export(useFormFieldValidation_exports, {
 });
 module.exports = __toCommonJS(useFormFieldValidation_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react2 = require("react");
+var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_useFormFieldMessagesContext = require("./useFormFieldMessagesContext.js");
 var import_useId = require("../../../core/hooks/useId.js");
@@ -165,7 +165,7 @@ function getI18nErrorMessage(key, ref) {
 function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}, controlId) {
   const { state, dispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
   const errorId = (0, import_useId.useId)();
-  const _ariaProps = (0, import_react2.useMemo)(() => {
+  const _ariaProps = (0, import_react.useMemo)(() => {
     let messageIdsString;
     let errorMessageIdsString;
     if (state.customMessages.length > 0 || state.formControlMessages.length > 0) {
@@ -180,9 +180,11 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
     };
   }, [state.customMessages, state.formControlMessages, state.showError]);
   const ariaProps = getCombinedAriaProps(_ariaProps, ariaLabelingProps);
-  const updateErrorMessages = (0, import_react2.useCallback)(() => {
+  const formControlMessagesRef = (0, import_react.useRef)(state.formControlMessages);
+  formControlMessagesRef.current = state.formControlMessages;
+  const updateErrorMessages = (0, import_react.useCallback)(() => {
     const errorType = getErrorType(ref.current?.validity);
-    state.formControlMessages.forEach((message) => {
+    formControlMessagesRef.current.forEach((message) => {
       if (message.validityStateKey !== errorType && message.validityStateKey !== "customError") {
         dispatch?.({
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.REMOVEMESSAGE,
@@ -207,8 +209,8 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
         }
       });
     }
-  }, [controlId, dispatch, errorId, ref, state.formControlMessages]);
-  const onInvalid = (0, import_react2.useCallback)(
+  }, [controlId, dispatch, errorId, ref]);
+  const onInvalid = (0, import_react.useCallback)(
     (event) => {
       updateErrorMessages();
       dispatch?.({
@@ -219,7 +221,7 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
     },
     [dispatch, updateErrorMessages]
   );
-  const onBlur = (0, import_react2.useCallback)(() => {
+  const onBlur = (0, import_react.useCallback)(() => {
     ref.current?.reportValidity();
     dispatch?.({
       type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
@@ -227,7 +229,7 @@ function useFormFieldValidation(ref, validationDeps = {}, ariaLabelingProps = {}
     });
   }, [dispatch, ref]);
   const validationDepsKey = JSON.stringify(validationDeps);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react.useEffect)(() => {
     updateErrorMessages();
   }, [validationDepsKey, updateErrorMessages]);
   return {

package/forms/forms-core/hooks/useMinMaxLogger.d.ts

@@ -1,5 +1,6 @@
+import type { TimeValue } from '@dynatrace-sdk/units/types/packages/util/units/src/util-format/time.js';
 /**
  * Hook to check and log when the min is larger than the max.
  * @internal
  */
-export declare const useMinMaxLogger: (min?: string, max?: string, componentName?: string) => void;
+export declare const useMinMaxLogger: (min?: TimeValue | null, max?: TimeValue | null, componentName?: string) => void;

package/forms/forms-core/hooks/useMinMaxLogger.js

@@ -23,7 +23,6 @@ __export(useMinMaxLogger_exports, {
 module.exports = __toCommonJS(useMinMaxLogger_exports);
 var import_tz = require("@date-fns/tz");
 var import_react = require("react");
-var import_units = require("@dynatrace-sdk/units");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
 var import_sdk_logger = require("../../../core/sdk/sdk-logger.js");
 const useMinMaxLogger = (min, max, componentName) => {
@@ -32,14 +31,10 @@ const useMinMaxLogger = (min, max, componentName) => {
   );
   const timezone = (0, import_user_preferences.getTimezone)();
   (0, import_react.useEffect)(() => {
-    if (min && max) {
-      const minDate = (0, import_units.parseTimeAsTimeValue)(min);
-      const maxDate = (0, import_units.parseTimeAsTimeValue)(max);
-      if (minDate && maxDate && new import_tz.TZDateMini(minDate.absoluteDate, timezone).getTime() >= new import_tz.TZDateMini(maxDate.absoluteDate, timezone).getTime()) {
-        logger.error(
-          `Min prop is larger than the max prop. Min: ${min}, Max: ${max}`
-        );
-      }
+    if (min && max && new import_tz.TZDateMini(min.absoluteDate, timezone).getTime() >= new import_tz.TZDateMini(max.absoluteDate, timezone).getTime()) {
+      logger.error(
+        `Min prop is larger than the max prop. Min: ${min.value}, Max: ${max.value}`
+      );
     }
   }, [min, max, logger, timezone]);
 };

package/forms/forms-core/state/formfield-messages-state-reducer.js

@@ -74,19 +74,35 @@ function formFieldMessagesReducer(state, action) {
     const { payload } = action;
     const { messageType, ...remainingPayload } = payload;
     if (isFormControlPayload(remainingPayload, messageType)) {
-      const isNewBrowserError = remainingPayload.validityStateKey !== void 0 && remainingPayload.validityStateKey !== "customError" && !state.formControlMessages.some(
-        (message) => message.validityStateKey === remainingPayload.validityStateKey
-      );
-      const isNewInternalMessage = remainingPayload.validityStateKey === "customError" && "id" in remainingPayload && !state.formControlMessages.some(
-        (message) => message.id === remainingPayload.id
-      );
-      if (!(isNewBrowserError || isNewInternalMessage)) {
-        return state;
+      if (remainingPayload.validityStateKey === "customError" && remainingPayload.variant === "error" && "id" in remainingPayload) {
+        const { id: internalId, ...internalRest } = remainingPayload;
+        const customErrors = state.formControlMessages.filter(
+          (m) => m.validityStateKey === "customError"
+        );
+        if (customErrors.length === 1 && customErrors[0].id === internalId) {
+          if ((payload.showError ?? state.showError) === state.showError) {
+            return state;
+          }
+        } else {
+          newState.formControlMessages = [
+            ...state.formControlMessages.filter(
+              (m) => m.validityStateKey !== "customError"
+            ),
+            { id: internalId, ...internalRest }
+          ];
+        }
+      } else {
+        const isNewBrowserError = remainingPayload.validityStateKey !== void 0 && !state.formControlMessages.some(
+          (message) => message.validityStateKey === remainingPayload.validityStateKey
+        );
+        if (!isNewBrowserError) {
+          return state;
+        }
+        newState.formControlMessages = [
+          ...newState.formControlMessages,
+          { id: `strato-${crypto.randomUUID()}`, ...remainingPayload }
+        ];
       }
-      newState.formControlMessages.push({
-        id: `strato-${crypto.randomUUID()}`,
-        ...remainingPayload
-      });
     } else if ("id" in remainingPayload && !state.formControlMessages.some(
       (message) => message.id === remainingPayload.id
     ) && !state.customMessages.some(

package/forms/forms-core/time/helpers.d.ts

@@ -1,16 +1,44 @@
 import { TZDate } from '@date-fns/tz';
+import { EachDayOfIntervalOptions } from 'date-fns';
 import { RequireAtLeastOne } from 'type-fest';
-import type { StringTimeOffset } from './types.js';
+import type { Precision } from '../../../core/time/shared.types.js';
+import type { StringTimeOffset } from '../../../core/time/timeframeStore/calendar.types.js';
 import { type TimeValue, type Timeframe } from '../../../core/types/time.js';
-import { CalendarState } from '../../calendar/types/shared-types.js';
+import type { CalendarState } from '../../calendar/types/shared-types.js';
+/**
+ * Returns an array of dates within the specified time interval.
+ *
+ * @returns An array with starts of days from the day of the interval start to the day of the interval end
+ *
+ * @example
+ * Each day between 6 October 2014 and 10 October 2014:
+ * const result = eachDayOfInterval({
+ *   start: new Date(2014, 9, 6),
+ *   end: new Date(2014, 9, 10)
+ * })
+ * => [
+ *    Mon Oct 06 2014 00:00:00,
+ *    Tue Oct 07 2014 00:00:00,
+ *    Wed Oct 08 2014 00:00:00,
+ *    Thu Oct 09 2014 00:00:00,
+ *    Fri Oct 10 2014 00:00:00
+ *  ]
+ *
+ * @internal
+ */
+export declare function eachDayOfInterval(interval: {
+    start: TZDate | number | string;
+    end: TZDate | number | string;
+}, options?: EachDayOfIntervalOptions<TZDate>): TZDate[];
 /**
  * Sanitizes Timeframe to have a from date that comes before the to date and ensures the times are applied properly.
  * @internal
  */
-export declare function sortTimeframeValues(value: Partial<Timeframe>, min?: TimeValue, max?: TimeValue, precision?: 'minutes' | 'seconds' | 'milliseconds'): {
+export declare function sortTimeframeValues(value: Partial<Timeframe>, min?: TimeValue | null, max?: TimeValue | null, precision?: 'minutes' | 'seconds' | 'milliseconds'): {
     from: TimeValue | undefined;
     to: TimeValue | undefined;
 };
+export declare function resetRegionalFormatErrorFlag(): void;
 /**
  * Returns a "safe" regional format string by replacing problematic language codes
  * with 'en' (English) while preserving the region, and by removing any extra subtags.
@@ -22,7 +50,7 @@ export declare function sortTimeframeValues(value: Partial<Timeframe>, min?: Tim
  *
  * @internal
  */
-export declare const getSafeRegionalFormat: () => string;
+export declare function getSafeRegionalFormat(): string;
 /**
  * Gets the dayPeriod values such as AM/PM, a.m./p.m. etc. depending on the user's region.
  * @internal
@@ -37,13 +65,20 @@ export declare function timeValueToDate(timeValue: TimeValue | undefined, relati
  * Converts a given Date or ISO string to the TimeValue structure for the calendar value.
  * @internal
  */
-export declare const getTimeValueFromSimpleValue: (candidate?: string | Date | null, timeOffset?: StringTimeOffset, position?: CalendarState["position"], isExpression?: boolean, min?: TimeValue, max?: TimeValue, precision?: "minutes" | "seconds" | "milliseconds") => TimeValue | undefined;
+export declare const getTimeValueFromSimpleValue: (candidate?: string | Date | null, timeOffset?: StringTimeOffset, position?: CalendarState["position"], isExpression?: boolean, min?: TimeValue | null, max?: TimeValue | null, precision?: "day" | "minutes" | "seconds" | "milliseconds") => TimeValue | undefined;
 /**
  * For 'date' type, it adjusts the time by the timezone offset to ensure the
  * date is correct without time information.
  * For 'time' and 'datetime' types, it returns the ISO string as is.
  */
 export declare const convertDateOnlyToDateTime: (isoString: string | undefined, type: "time" | "date" | "datetime" | undefined) => string;
+/**
+ * Converts a raw TimeValue to the correct calendarValue shape.
+ * When precision is 'day', the absoluteDate/value fields must contain a full
+ * ISO datetime string (produced by convertDateOnlyToDateTime) rather than the
+ * date-only string stored in dateTimePickerValue.
+ */
+export declare function toCalendarValue(value: TimeValue | null | undefined, precision: Precision | undefined): TimeValue | null;
 /**
  * Filters the Grail min or max date.
  * Returns `undefined` if the provided limit is the default Grail min or max and the value is not outside the Grail range.