@dynatrace/strato-components 3.7.0 → 3.8.0

package/esm/forms/date-time-range-picker/DateRangeSelector.js

@@ -1,15 +1,15 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { noop } from "lodash-es";
-import { forwardRef, useImperativeHandle, useState, useMemo } from "react";
+import { forwardRef, useImperativeHandle, useMemo, useState } from "react";
 import { useIntl } from "react-intl";
 import { CalendarIcon } from "@dynatrace/strato-icons";
 import * as styles from "./DateRangeSelector.sty.js";
 import { Button } from "../../buttons/button/Button.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
+import { useVisualRefreshEnabled } from "../../core/hooks/useVisualRefreshEnabled.js";
 import { useDateTimeRangePickerStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
-import { isVisualRefreshEnabled } from "../../core/utils/is-visual-refresh-enabled.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
 import { Overlay } from "../../overlays/overlay/Overlay.js";
 import { globalSprinkles } from "../../styles/safe-sprinkles.js";
@@ -89,7 +89,7 @@ const DateRangeSelector = forwardRef((props, forwardedRef) => {
     }),
     [error, disabled]
   );
-  const isCritical = isVisualRefreshEnabled() ? error && !disabled && !readOnly : error;
+  const isCritical = useVisualRefreshEnabled() ? error && !disabled && !readOnly : error;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Button,

package/esm/forms/date-time-range-picker/DateRangeSelector.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useState, useMemo } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { isVisualRefreshEnabled } from '../../core/utils/is-visual-refresh-enabled.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const clearCalendarValue = useDateTimeRangePickerStore(\n    (state) => state.clearCalendarValue,\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) {\n        clearCalendarValue?.();\n      }\n      setOpen(isOpen);\n    },\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  // with the visual refresh enabled, only pure error state should receive critical coloring\n  const isCritical = isVisualRefreshEnabled()\n    ? error && !disabled && !readOnly\n    : error;\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName)}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={isCritical ? 'critical' : 'neutral'}\n        disabled={disabled || readOnly}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useMemo, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const clearCalendarValue = useDateTimeRangePickerStore(\n    (state) => state.clearCalendarValue,\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) {\n        clearCalendarValue?.();\n      }\n      setOpen(isOpen);\n    },\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  // with the visual refresh enabled, only pure error state should receive critical coloring\n  const isCritical = useVisualRefreshEnabled()\n    ? error && !disabled && !readOnly\n    : error;\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName)}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={isCritical ? 'critical' : 'neutral'}\n        disabled={disabled || readOnly}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateRangeSelector.sty.js

@@ -1,5 +1,5 @@
 import "./DateRangeSelector.css";
-var selector = "_1uftu980-3-7-0";
+var selector = "_1uftu980-3-8-0";
 export {
   selector
 };

package/esm/forms/date-time-range-picker/DateRangeSelector.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.css.ts"],
-  "sourcesContent": ["import './DateRangeSelector.css';\nexport var selector = '_1uftu980-3-7-0';"],
+  "sourcesContent": ["import './DateRangeSelector.css';\nexport var selector = '_1uftu980-3-8-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeInput.css

@@ -1,33 +1,33 @@
-._5u9o250-3-7-0 {
+._5u9o250-3-8-0 {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-._5u9o250-3-7-0::-webkit-scrollbar {
+._5u9o250-3-8-0::-webkit-scrollbar {
   display: none;
 }
-._5u9o252-3-7-0 {
+._5u9o252-3-8-0 {
   outline: none;
 }
-._5u9o252-3-7-0:not(:focus-visible) {
+._5u9o252-3-8-0:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o252-3-7-0:empty::before {
+._5u9o252-3-8-0:empty::before {
   content: var(--data-placeholder);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1vlwkc21-3-7-0 ._5u9o252-3-7-0:empty::before {
+._1vlwkc21-3-8-0 ._5u9o252-3-8-0:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-7-0 ._5u9o252-3-7-0:empty::before {
+._1vlwkc22-3-8-0 ._5u9o252-3-8-0:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-7-0._1vlwkc21-3-7-0 ._5u9o252-3-7-0:empty::before {
+._1vlwkc22-3-8-0._1vlwkc21-3-8-0 ._5u9o252-3-8-0:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._5u9o252-3-7-0::selection {
-  color: var(--_1i883gj5-3-7-0);
-  background-color: var(--_1i883gj6-3-7-0);
+._5u9o252-3-8-0::selection {
+  color: var(--_1i883gj5-3-8-0);
+  background-color: var(--_1i883gj6-3-8-0);
 }

package/esm/forms/date-time-range-picker/DateTimeInput.js

@@ -24,6 +24,7 @@ import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidati
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { useInputHint } from "../hooks/useInputHint.js";
 import { SpinButtonGroup } from "../spin-buttons/spin-button-group/SpinButtonGroup.js";
+import { getValidationState } from "../validation/validation-builders.js";
 function preventDefault(e) {
   e.preventDefault();
 }
@@ -153,14 +154,35 @@ const DateTimeInput = forwardRef(
             expectedFormat: formatString,
             valueMode: validationValueMode,
             // In single mode, required validation is handled by core time validation
-            // (singleValueMissing). Keeping native `required` here would add a second
-            // browser `valueMissing` message with identical text.
+            // (emits native valueMissing). Keeping native `required` here would add a
+            // second browser `valueMissing` message with identical text.
             required: validationValueMode === "single" ? false : required
           });
           formMessageDispatch?.({
             type: FormFieldMessagesAction.SETISTOUCHED,
             payload: { isTouched: true }
           });
+        },
+        validateAsync: async () => {
+          const textContent = expressionInputRef.current?.textContent;
+          if (valueType === "expression" && !textContent) {
+            setInputValue("");
+          }
+          validate(value ?? null, min, max, {
+            formMessageDispatch,
+            precision,
+            showError: true,
+            checkOrder: true,
+            ref: rootRef,
+            expectedFormat: formatString,
+            valueMode: validationValueMode,
+            required: validationValueMode === "single" ? false : required
+          });
+          formMessageDispatch?.({
+            type: FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          return getValidationState(inputRef.current, "manual");
         }
       }),
       [
@@ -223,7 +245,7 @@ const DateTimeInput = forwardRef(
               onInvalid,
               disabled,
               tabIndex: -1,
-              required,
+              required: validationValueMode === "single" ? false : required,
               readOnly,
               "aria-disabled": ariaDisabledProp,
               ..._mergeProps(

package/esm/forms/date-time-range-picker/DateTimeInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type DragEvent,\n  type ClipboardEvent,\n  type CSSProperties,\n  type FocusEvent as ReactFocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { dateTimeInputRoot, expression } from './DateTimeInput.sty.js';\nimport * as styles from './DateTimeInput.sty.js';\nimport { useDateTimeInput } from './hooks/useDateTimeInput.js';\nimport type { DateTimeInputProps, DateTimeInputRef } from './types.js';\nimport * as visuallyHiddenStyles from '../../core/components/visually-hidden/VisuallyHidden.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport * as dataTimePickerStyles from '../date-time-picker/DateTimePicker.sty.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport { SpinButtonGroup } from '../spin-buttons/spin-button-group/SpinButtonGroup.js';\n\nfunction preventDefault(e: DragEvent | ClipboardEvent) {\n  e.preventDefault();\n}\n\n/** Date & Time Input used in DateTimeRangePicker and DateTimePicker components\n * @internal\n */\nexport const DateTimeInput = forwardRef<DateTimeInputRef, DateTimeInputProps>(\n  (props, forwardedRef) => {\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const expressionInputRef = useRef<HTMLSpanElement>(null);\n\n    const min = useDateTimePickerStore((state) => state.min);\n    const max = useDateTimePickerStore((state) => state.max);\n    const precision = useDateTimePickerStore((state) => state.precision);\n    const formatString = useDateTimePickerStore((state) => state.formatString);\n\n    const intl = useIntl();\n    const {\n      ariaProps: ariaFormProps,\n      onChange: validationOnChange,\n      onBlur,\n      onInvalid,\n    } = useFormFieldValidation(inputRef);\n\n    const {\n      disabled,\n      readOnly,\n      placeholder: propPlaceholder,\n      className: consumerClassName,\n      style: consumerStyle,\n      name,\n      'data-testid': dataTestId,\n      'aria-disabled': ariaDisabledProp,\n      controlId,\n      required,\n      type = 'datetime',\n      controlState,\n      validationValueMode,\n      onLeadingEdge,\n      onTrailingEdge,\n      onTrailingOverflow,\n    }: DateTimeInputProps = props;\n\n    const dateTimePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add date and time',\n      id: 'X9SZ3eLw4rz/ODZQ',\n      description: 'Default placeholder for the date time input.',\n    });\n    const datePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add date',\n      id: 'XC7nO0JIPg0R0kBw',\n      description: 'Default placeholder for the date input.',\n    });\n    const timePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add time',\n      id: 'MlwM+/jonCtjJ+L7',\n      description: 'Default placeholder for the time input.',\n    });\n\n    let placeholder = propPlaceholder;\n    if (!propPlaceholder) {\n      switch (type) {\n        case 'datetime':\n          placeholder = dateTimePlaceholder;\n          break;\n        case 'date':\n          placeholder = datePlaceholder;\n          break;\n        case 'time':\n          placeholder = timePlaceholder;\n          break;\n      }\n    }\n\n    // Backwards compatibility for controlState.\n    const [hasFormControlError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps } = useInputHint({\n      hint,\n      hasError: hasFormControlError,\n    });\n\n    const ariaLabelingProps = useAriaLabelingProps(props);\n\n    const {\n      expressionInputHandler,\n      expressionOnFocusHandler,\n      expressionOnBlurHandler,\n      expressionOnKeyDownHandler,\n      onPaste,\n      pasteText,\n      onPasteUndoKeyDown,\n      clearPasteUndo,\n      value,\n      valueType,\n      spinButtons,\n      spinButtonHandlers,\n      inputValue,\n      focus,\n      switchToExpressionMode,\n      setInputValue,\n    } = useDateTimeInput(props, expressionInputRef);\n\n    const isExpressionInput = valueType === 'expression';\n\n    const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateTimeInputRef => ({\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        expressionInputRef: expressionInputRef.current,\n        spinButtonHandlers,\n        focus,\n        setExpressionValue: switchToExpressionMode,\n        clearPasteUndo,\n        pasteText,\n        focusLast() {\n          if (valueType === 'expression') {\n            expressionInputRef.current?.focus();\n          } else {\n            const handlers = Array.from(spinButtonHandlers.values()).filter(\n              (h) => h !== null,\n            );\n            const lastHandler = handlers[handlers.length - 1];\n            lastHandler.element.current?.focus();\n            lastHandler.selectAll();\n          }\n        },\n        validate() {\n          const textContent = expressionInputRef.current?.textContent;\n          // Reset stale inputValue when expression span is empty so the hidden\n          // input correctly reports valueMissing for required-field validation.\n          if (valueType === 'expression' && !textContent) {\n            setInputValue('');\n          }\n          validate(value ?? null, min, max, {\n            formMessageDispatch,\n            precision,\n            showError: true,\n            checkOrder: true,\n            ref: rootRef,\n            expectedFormat: formatString,\n            valueMode: validationValueMode,\n            // In single mode, required validation is handled by core time validation\n            // (singleValueMissing). Keeping native `required` here would add a second\n            // browser `valueMissing` message with identical text.\n            required: validationValueMode === 'single' ? false : required,\n          });\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      }),\n      [\n        spinButtonHandlers,\n        focus,\n        switchToExpressionMode,\n        setInputValue,\n        value,\n        valueType,\n        min,\n        max,\n        formMessageDispatch,\n        precision,\n        formatString,\n        validationValueMode,\n        required,\n      ],\n    );\n\n    const expressionLabel = intl.formatMessage(\n      {\n        defaultMessage: '{ariaLabelPrefix} expression',\n        id: 'M6eNgatb2wf4fQ3I',\n        description: 'Textbox to enter a dql timeframe expression.',\n      },\n      {\n        ariaLabelPrefix: ariaLabelingProps['aria-label'],\n      },\n    );\n\n    useEffect(() => {\n      validationOnChange(); // needs to be in an effect here because the value update should happen before the validation, which validates the input ref value\n      // validationOnChange doesn't change and can be excluded\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputValue]);\n\n    return (\n      <Flex\n        ref={rootRef}\n        as=\"span\"\n        className={clsx(\n          dateTimeInputRoot,\n          styles.dateTimeInput,\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        onPaste={onPaste}\n        onKeyDown={onPasteUndoKeyDown}\n        gap={0}\n        data-valuetype={valueType}\n      >\n        <VisuallyHidden>\n          <input\n            id={controlId}\n            ref={inputRef}\n            name={name}\n            value={inputValue ?? ''}\n            onChange={() => {\n              /** noop */\n            }}\n            onFocus={focus}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            disabled={disabled}\n            tabIndex={-1}\n            required={required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              // Backwards compatibility for controlState.\n              controlState ? inputProps : ariaFormProps,\n              ariaLabelingProps,\n            )}\n          />\n        </VisuallyHidden>\n\n        <span\n          className={clsx(expression, {\n            [visuallyHiddenStyles.visuallyHidden]: !isExpressionInput,\n          })}\n          role=\"textbox\"\n          spellCheck={false}\n          tabIndex={disabled || !isExpressionInput ? -1 : 0}\n          style={\n            {\n              '--data-placeholder': `\"${placeholder}\"`,\n            } as CSSProperties\n          }\n          data-valuetype=\"expression\"\n          ref={expressionInputRef}\n          contentEditable={!disabled && !readOnly ? true : undefined}\n          onInput={expressionInputHandler}\n          onFocus={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnFocusHandler(e);\n          }}\n          onBlur={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnBlurHandler(e);\n          }}\n          onKeyDown={expressionOnKeyDownHandler}\n          onPaste={preventDefault}\n          onDragOver={preventDefault}\n          onDrop={preventDefault}\n          aria-label={expressionLabel}\n        />\n        <SpinButtonGroup\n          className={clsx(dataTimePickerStyles.spinButtonGroup, {\n            [visuallyHiddenStyles.visuallyHidden]: isExpressionInput,\n          })}\n          valueOverflow\n          onLeadingEdge={onLeadingEdge}\n          onTrailingEdge={onTrailingEdge}\n          onTrailingOverflow={onTrailingOverflow}\n        >\n          {spinButtons}\n        </SpinButtonGroup>\n      </Flex>\n    );\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type DragEvent,\n  type ClipboardEvent,\n  type CSSProperties,\n  type FocusEvent as ReactFocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { dateTimeInputRoot, expression } from './DateTimeInput.sty.js';\nimport * as styles from './DateTimeInput.sty.js';\nimport { useDateTimeInput } from './hooks/useDateTimeInput.js';\nimport type { DateTimeInputProps, DateTimeInputRef } from './types.js';\nimport * as visuallyHiddenStyles from '../../core/components/visually-hidden/VisuallyHidden.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport * as dataTimePickerStyles from '../date-time-picker/DateTimePicker.sty.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport { SpinButtonGroup } from '../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nfunction preventDefault(e: DragEvent | ClipboardEvent) {\n  e.preventDefault();\n}\n\n/** Date & Time Input used in DateTimeRangePicker and DateTimePicker components\n * @internal\n */\nexport const DateTimeInput = forwardRef<DateTimeInputRef, DateTimeInputProps>(\n  (props, forwardedRef) => {\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const expressionInputRef = useRef<HTMLSpanElement>(null);\n\n    const min = useDateTimePickerStore((state) => state.min);\n    const max = useDateTimePickerStore((state) => state.max);\n    const precision = useDateTimePickerStore((state) => state.precision);\n    const formatString = useDateTimePickerStore((state) => state.formatString);\n\n    const intl = useIntl();\n    const {\n      ariaProps: ariaFormProps,\n      onChange: validationOnChange,\n      onBlur,\n      onInvalid,\n    } = useFormFieldValidation(inputRef);\n\n    const {\n      disabled,\n      readOnly,\n      placeholder: propPlaceholder,\n      className: consumerClassName,\n      style: consumerStyle,\n      name,\n      'data-testid': dataTestId,\n      'aria-disabled': ariaDisabledProp,\n      controlId,\n      required,\n      type = 'datetime',\n      controlState,\n      validationValueMode,\n      onLeadingEdge,\n      onTrailingEdge,\n      onTrailingOverflow,\n    }: DateTimeInputProps = props;\n\n    const dateTimePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add date and time',\n      id: 'X9SZ3eLw4rz/ODZQ',\n      description: 'Default placeholder for the date time input.',\n    });\n    const datePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add date',\n      id: 'XC7nO0JIPg0R0kBw',\n      description: 'Default placeholder for the date input.',\n    });\n    const timePlaceholder = intl.formatMessage({\n      defaultMessage: 'Add time',\n      id: 'MlwM+/jonCtjJ+L7',\n      description: 'Default placeholder for the time input.',\n    });\n\n    let placeholder = propPlaceholder;\n    if (!propPlaceholder) {\n      switch (type) {\n        case 'datetime':\n          placeholder = dateTimePlaceholder;\n          break;\n        case 'date':\n          placeholder = datePlaceholder;\n          break;\n        case 'time':\n          placeholder = timePlaceholder;\n          break;\n      }\n    }\n\n    // Backwards compatibility for controlState.\n    const [hasFormControlError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps } = useInputHint({\n      hint,\n      hasError: hasFormControlError,\n    });\n\n    const ariaLabelingProps = useAriaLabelingProps(props);\n\n    const {\n      expressionInputHandler,\n      expressionOnFocusHandler,\n      expressionOnBlurHandler,\n      expressionOnKeyDownHandler,\n      onPaste,\n      pasteText,\n      onPasteUndoKeyDown,\n      clearPasteUndo,\n      value,\n      valueType,\n      spinButtons,\n      spinButtonHandlers,\n      inputValue,\n      focus,\n      switchToExpressionMode,\n      setInputValue,\n    } = useDateTimeInput(props, expressionInputRef);\n\n    const isExpressionInput = valueType === 'expression';\n\n    const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateTimeInputRef => ({\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        expressionInputRef: expressionInputRef.current,\n        spinButtonHandlers,\n        focus,\n        setExpressionValue: switchToExpressionMode,\n        clearPasteUndo,\n        pasteText,\n        focusLast() {\n          if (valueType === 'expression') {\n            expressionInputRef.current?.focus();\n          } else {\n            const handlers = Array.from(spinButtonHandlers.values()).filter(\n              (h) => h !== null,\n            );\n            const lastHandler = handlers[handlers.length - 1];\n            lastHandler.element.current?.focus();\n            lastHandler.selectAll();\n          }\n        },\n        validate() {\n          const textContent = expressionInputRef.current?.textContent;\n          // Reset stale inputValue when expression span is empty so the hidden\n          // input correctly reports valueMissing for required-field validation.\n          if (valueType === 'expression' && !textContent) {\n            setInputValue('');\n          }\n          validate(value ?? null, min, max, {\n            formMessageDispatch,\n            precision,\n            showError: true,\n            checkOrder: true,\n            ref: rootRef,\n            expectedFormat: formatString,\n            valueMode: validationValueMode,\n            // In single mode, required validation is handled by core time validation\n            // (emits native valueMissing). Keeping native `required` here would add a\n            // second browser `valueMissing` message with identical text.\n            required: validationValueMode === 'single' ? false : required,\n          });\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n        validateAsync: async () => {\n          const textContent = expressionInputRef.current?.textContent;\n          if (valueType === 'expression' && !textContent) {\n            setInputValue('');\n          }\n          validate(value ?? null, min, max, {\n            formMessageDispatch,\n            precision,\n            showError: true,\n            checkOrder: true,\n            ref: rootRef,\n            expectedFormat: formatString,\n            valueMode: validationValueMode,\n            required: validationValueMode === 'single' ? false : required,\n          });\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return getValidationState(inputRef.current, 'manual');\n        },\n      }),\n      [\n        spinButtonHandlers,\n        focus,\n        switchToExpressionMode,\n        setInputValue,\n        value,\n        valueType,\n        min,\n        max,\n        formMessageDispatch,\n        precision,\n        formatString,\n        validationValueMode,\n        required,\n      ],\n    );\n\n    const expressionLabel = intl.formatMessage(\n      {\n        defaultMessage: '{ariaLabelPrefix} expression',\n        id: 'M6eNgatb2wf4fQ3I',\n        description: 'Textbox to enter a dql timeframe expression.',\n      },\n      {\n        ariaLabelPrefix: ariaLabelingProps['aria-label'],\n      },\n    );\n\n    useEffect(() => {\n      validationOnChange(); // needs to be in an effect here because the value update should happen before the validation, which validates the input ref value\n      // validationOnChange doesn't change and can be excluded\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputValue]);\n\n    return (\n      <Flex\n        ref={rootRef}\n        as=\"span\"\n        className={clsx(\n          dateTimeInputRoot,\n          styles.dateTimeInput,\n          consumerClassName,\n        )}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        onPaste={onPaste}\n        onKeyDown={onPasteUndoKeyDown}\n        gap={0}\n        data-valuetype={valueType}\n      >\n        <VisuallyHidden>\n          <input\n            id={controlId}\n            ref={inputRef}\n            name={name}\n            value={inputValue ?? ''}\n            onChange={() => {\n              /** noop */\n            }}\n            onFocus={focus}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            disabled={disabled}\n            tabIndex={-1}\n            required={validationValueMode === 'single' ? false : required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              // Backwards compatibility for controlState.\n              controlState ? inputProps : ariaFormProps,\n              ariaLabelingProps,\n            )}\n          />\n        </VisuallyHidden>\n\n        <span\n          className={clsx(expression, {\n            [visuallyHiddenStyles.visuallyHidden]: !isExpressionInput,\n          })}\n          role=\"textbox\"\n          spellCheck={false}\n          tabIndex={disabled || !isExpressionInput ? -1 : 0}\n          style={\n            {\n              '--data-placeholder': `\"${placeholder}\"`,\n            } as CSSProperties\n          }\n          data-valuetype=\"expression\"\n          ref={expressionInputRef}\n          contentEditable={!disabled && !readOnly ? true : undefined}\n          onInput={expressionInputHandler}\n          onFocus={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnFocusHandler(e);\n          }}\n          onBlur={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnBlurHandler(e);\n          }}\n          onKeyDown={expressionOnKeyDownHandler}\n          onPaste={preventDefault}\n          onDragOver={preventDefault}\n          onDrop={preventDefault}\n          aria-label={expressionLabel}\n        />\n        <SpinButtonGroup\n          className={clsx(dataTimePickerStyles.spinButtonGroup, {\n            [visuallyHiddenStyles.visuallyHidden]: isExpressionInput,\n          })}\n          valueOverflow\n          onLeadingEdge={onLeadingEdge}\n          onTrailingEdge={onTrailingEdge}\n          onTrailingOverflow={onTrailingOverflow}\n        >\n          {spinButtons}\n        </SpinButtonGroup>\n      </Flex>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeInput.sty.js

@@ -5,9 +5,9 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import "./DateTimeInput.css";
-var dateTimeInput = "_5u9o251-3-7-0";
-var dateTimeInputRoot = "_5u9o250-3-7-0";
-var expression = "_5u9o252-3-7-0";
+var dateTimeInput = "_5u9o251-3-8-0";
+var dateTimeInputRoot = "_5u9o250-3-8-0";
+var expression = "_5u9o252-3-8-0";
 export {
   dateTimeInput,
   dateTimeInputRoot,

package/esm/forms/date-time-range-picker/DateTimeInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o251-3-7-0';\nexport var dateTimeInputRoot = '_5u9o250-3-7-0';\nexport var expression = '_5u9o252-3-7-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o251-3-8-0';\nexport var dateTimeInputRoot = '_5u9o250-3-8-0';\nexport var expression = '_5u9o252-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,oBAAoB;AACxB,IAAI,aAAa;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.css

@@ -1,49 +1,49 @@
-._1vlwkc20-3-7-0 {
+._1vlwkc20-3-8-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;
   padding-inline: var(--dt-spacings-size-12, 12px);
   padding-block: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
-  box-shadow: var(--_bx32h4-3-7-0);
+  box-shadow: var(--_bx32h4-3-8-0);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-7-0);
-  background: var(--_bx32h3-3-7-0);
+  color: var(--_bx32h0-3-8-0);
+  background: var(--_bx32h3-3-8-0);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-7-0._1vlwkc20-3-7-0 {
+._1vlwkc20-3-8-0._1vlwkc20-3-8-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-7-0:has(._1i883gjh-3-7-0) {
+._1vlwkc20-3-8-0:has(._1i883gjh-3-8-0) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-7-0:has(._1i883gjh-3-7-0:hover) {
-  --_bx32h3-3-7-0: var(--_bx32h2-3-7-0);
+._1vlwkc20-3-8-0:has(._1i883gjh-3-8-0:hover) {
+  --_bx32h3-3-8-0: var(--_bx32h2-3-8-0);
 }
-._1vlwkc20-3-7-0:has(._1i883gjh-3-7-0:focus-visible) {
-  box-shadow: var(--_bx32h4-3-7-0, none);
+._1vlwkc20-3-8-0:has(._1i883gjh-3-8-0:focus-visible) {
+  box-shadow: var(--_bx32h4-3-8-0, none);
 }
-._1jgl8s50-3-7-0 ._1vlwkc20-3-7-0, ._1jgl8s50-3-7-0 ._1vlwkc20-3-7-0:hover, ._1jgl8s50-3-7-0 ._1vlwkc20-3-7-0:active {
-  --_bx32h3-3-7-0: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-8-0 ._1vlwkc20-3-8-0, ._1jgl8s50-3-8-0 ._1vlwkc20-3-8-0:hover, ._1jgl8s50-3-8-0 ._1vlwkc20-3-8-0:active {
+  --_bx32h3-3-8-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-7-0 {
+._1vlwkc22-3-8-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-7-0 {
-  --_bx32h3-3-7-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-8-0 {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-7-0 ._1vlwkc23-3-7-0, ._1jgl8s50-3-7-0 ._1vlwkc23-3-7-0:hover, ._1jgl8s50-3-7-0 ._1vlwkc23-3-7-0:active {
-  --_bx32h4-3-7-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-8-0 ._1vlwkc23-3-8-0, ._1jgl8s50-3-8-0 ._1vlwkc23-3-8-0:hover, ._1jgl8s50-3-8-0 ._1vlwkc23-3-8-0:active {
+  --_bx32h4-3-8-0: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc24-3-7-0 {
-  --_bx32h3-3-7-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1vlwkc24-3-8-0 {
+  --_bx32h3-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-7-0 ._1vlwkc24-3-7-0, ._1jgl8s50-3-7-0 ._1vlwkc24-3-7-0:hover, ._1jgl8s50-3-7-0 ._1vlwkc24-3-7-0:active {
-  --_bx32h4-3-7-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-8-0 ._1vlwkc24-3-8-0, ._1jgl8s50-3-8-0 ._1vlwkc24-3-8-0:hover, ._1jgl8s50-3-8-0 ._1vlwkc24-3-8-0:active {
+  --_bx32h4-3-8-0: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc25-3-7-0 {
+._1vlwkc25-3-8-0 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -51,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-7-0._1vlwkc25-3-7-0 {
+._1vlwkc25-3-8-0._1vlwkc25-3-8-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-7-0::-webkit-scrollbar {
+._1vlwkc25-3-8-0::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-7-0._1vlwkc26-3-7-0 {
+._1vlwkc26-3-8-0._1vlwkc26-3-8-0 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-7-0 {
+._1vlwkc27-3-8-0 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-7-0::selection {
+._1vlwkc27-3-8-0::selection {
   background: transparent;
 }

package/esm/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -5,10 +5,10 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dateTimeInput = "_1vlwkc26-3-7-0";
-var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-7-0", variantClassNames: { showError: { true: "_1vlwkc21-3-7-0" }, disabled: { true: "_1vlwkc22-3-7-0" }, readOnly: { true: "_1vlwkc23-3-7-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-7-0"]] });
-var scrollContainer = "_1vlwkc25-3-7-0";
-var timeframeSeparator = "_1vlwkc27-3-7-0";
+var dateTimeInput = "_1vlwkc26-3-8-0";
+var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-8-0", variantClassNames: { showError: { true: "_1vlwkc21-3-8-0" }, disabled: { true: "_1vlwkc22-3-8-0" }, readOnly: { true: "_1vlwkc23-3-8-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-8-0"]] });
+var scrollContainer = "_1vlwkc25-3-8-0";
+var timeframeSeparator = "_1vlwkc27-3-8-0";
 export {
   dateTimeInput,
   dateTimeRange,

package/esm/forms/date-time-range-picker/DateTimeRangePicker.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-7-0';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-7-0',variantClassNames:{showError:{true:'_1vlwkc21-3-7-0'},disabled:{true:'_1vlwkc22-3-7-0'},readOnly:{true:'_1vlwkc23-3-7-0'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-7-0']]});\nexport var scrollContainer = '_1vlwkc25-3-7-0';\nexport var timeframeSeparator = '_1vlwkc27-3-7-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-8-0';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-8-0',variantClassNames:{showError:{true:'_1vlwkc21-3-8-0'},disabled:{true:'_1vlwkc22-3-8-0'},readOnly:{true:'_1vlwkc23-3-8-0'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-8-0']]});\nexport var scrollContainer = '_1vlwkc25-3-8-0';\nexport var timeframeSeparator = '_1vlwkc27-3-8-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB;AACpB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AACnR,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeRangePickerRoot.js

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
@@ -25,7 +26,11 @@ import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
 import { useDateTimeRangePickerStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
-import { validate } from "../../core/time/validation.js";
+import {
+  formatTimeValidationMessage,
+  getValidityStateKeyForTimeError,
+  validate
+} from "../../core/time/validation.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js";
 import { InputGroup } from "../../layouts/input-group/InputGroup.js";
@@ -40,6 +45,9 @@ import { FormFieldMessageContext } from "../forms-core/contexts/FormFieldMessage
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
+import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
+import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
+import { getValidationState } from "../validation/validation-builders.js";
 function isInputInSelectionOrFocused(ref, preRestoreEndpoints) {
   const element = ref.current?.element;
   if (!element) {
@@ -93,6 +101,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     "aria-disabled": ariaDisabledProp,
     placeholder: placeholderProp,
     onBlur,
+    onValidityChange,
     ...remainingProps
   } = props;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
@@ -133,10 +142,38 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
   });
   const intl = useIntl();
   const {
-    state: { showError },
+    state: { showError, isTouched },
     dispatch: formMessageDispatch
   } = useFormFieldMessagesContext();
   const lastValidationErrorRef = useRef();
+  const _emitValidationState = useValidationStateEmitter(onValidityChange);
+  const emitValidationState = useCustomMessageEmitter(
+    _emitValidationState,
+    () => {
+      const key = getErrorKey();
+      return getValidationState(
+        key !== void 0 ? getValidityStateKeyForTimeError(key) : void 0,
+        "manual",
+        getValidationMessage(key),
+        id ? [id] : []
+      );
+    }
+  );
+  const getValidationMessage = useCallback(
+    (errorKey) => {
+      if (!errorKey) {
+        return void 0;
+      }
+      return formatTimeValidationMessage(errorKey, intl, {
+        value,
+        min,
+        max,
+        precision,
+        expectedFormat: formatString
+      });
+    },
+    [intl, value, min, max, precision, formatString]
+  );
   useImperativeHandle(
     forwardedRef,
     () => ({
@@ -168,6 +205,39 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        emitValidationState(
+          getValidationState(
+            lastValidationErrorRef.current !== void 0 ? getValidityStateKeyForTimeError(lastValidationErrorRef.current) : void 0,
+            "manual",
+            getValidationMessage(lastValidationErrorRef.current),
+            id ? [id] : []
+          )
+        );
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        lastValidationErrorRef.current = validate(value, min, max, {
+          formMessageDispatch,
+          formerError: lastValidationErrorRef.current,
+          precision,
+          showError: true,
+          checkOrder: true,
+          ref: rootRef,
+          expectedFormat: formatString,
+          valueMode: "dateTimePicker",
+          required
+        });
+        formMessageDispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        const state = getValidationState(
+          lastValidationErrorRef.current !== void 0 ? getValidityStateKeyForTimeError(lastValidationErrorRef.current) : void 0,
+          "manual",
+          getValidationMessage(lastValidationErrorRef.current),
+          id ? [id] : []
+        );
+        return emitValidationState(state);
       }
     }),
     [
@@ -178,9 +248,33 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
       precision,
       formatString,
       required,
-      dateTimeFromRef
+      dateTimeFromRef,
+      emitValidationState,
+      getValidationMessage
     ]
   );
+  const getErrorKey = useCallback(
+    () => validate(value, min, max, {
+      precision,
+      checkOrder: true,
+      ref: rootRef,
+      expectedFormat: formatString,
+      valueMode: "dateTimePicker",
+      required
+    }),
+    [value, min, max, precision, formatString, required]
+  );
+  useEffect(() => {
+    const key = getErrorKey();
+    emitValidationState(
+      getValidationState(
+        key !== void 0 ? getValidityStateKeyForTimeError(key) : void 0,
+        "change",
+        getValidationMessage(key),
+        id ? [id] : []
+      )
+    );
+  }, [value, id, getErrorKey, emitValidationState, getValidationMessage]);
   const { focusClassName } = useFocusRing({
     focusWithin: true,
     ignoreModality: true,
@@ -391,6 +485,20 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
               requestAnimationFrame(() => {
                 onBlur?.(event);
               });
+              if (touchedContainerRef.current?.contains(event.relatedTarget)) {
+                return;
+              }
+              if (!isTouched) {
+                const blurKey = getErrorKey();
+                emitValidationState(
+                  getValidationState(
+                    blurKey !== void 0 ? getValidityStateKeyForTimeError(blurKey) : void 0,
+                    "blur",
+                    getValidationMessage(blurKey),
+                    id ? [id] : []
+                  )
+                );
+              }
             },
             onInput: () => {
               setHasInputContent(