@dynatrace/strato-components 3.11.3 → 3.12.0

package/esm/forms/date-time-picker/DateTimePickerRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateTimePickerRoot.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport type { TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  getValidityStateKeyForTimeError,\n} from '../../core/time/validation.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldTokens } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRange } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport { isExpressionTriggerKey } from '../date-time-range-picker/expression-trigger-helpers.js';\nimport { isContentModifyingKey } from '../date-time-range-picker/helpers.js';\nimport { onTimeframeCopyCapture } from '../date-time-range-picker/selection-copy-helpers.js';\nimport { useSelectionInteractionHandlers } from '../date-time-range-picker/useSelectionInteractionHandlers.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { UseFormControlReturnType } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\nimport {\n  type ValidationState,\n  type ValidationTrigger,\n} from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'DateTimePicker';\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @internal\n */\nexport const DateTimePickerRoot = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  Omit<\n    DateTimePickerProps,\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n  }\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    placeholder,\n    name,\n    type = 'datetime',\n    formControl,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    ...remainingProps\n  } = props;\n  const {\n    id,\n    disabled,\n    required,\n    ariaDisabled,\n    readOnly = false,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageDispatch: formFieldDispatch,\n  } = formControl;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\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  const value = useDateTimePickerStore((state) => state.dateTimePickerValue);\n  const dateTimePickerError = useDateTimePickerStore(\n    (state) => state.dateTimePickerError,\n  );\n\n  const setValue = useDateTimePickerStore(\n    (state) => state.setDateTimePickerValue,\n  );\n  const dateInputRef = useDateTimePickerStore(\n    (state) => state.dateTimeInputRef,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  const [hasInputContent, setHasInputContent] = useState(false);\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'DateTimePicker');\n\n  const ownerId = useId();\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n  // No need to show the calendar widget if only a time value can be entered.\n  const showDateSelector = type !== 'time';\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n    color: showError ? 'critical' : 'neutral',\n    disabled,\n  });\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'Datepicker calendar trigger',\n    id: 'Uuc6xAAPyctyHamM',\n    description: 'Text shown for the datetimepicker calendar trigger.',\n  });\n  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time',\n    id: '5i26Rr1LLz0OIGNJ',\n    description: 'Aria label for the DateTimePicker clear button.',\n  });\n\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => buildValidationState('manual', dateTimePickerError),\n  );\n\n  const buildValidationState = useCallback(\n    (\n      trigger: ValidationTrigger,\n      key: TimeErrorKey | undefined,\n    ): ValidationState => {\n      if (key === undefined) {\n        return { status: 'done', trigger, errors: [] };\n      }\n\n      const keyInstance = getValidityStateKeyForTimeError(key);\n\n      return getValidationState(\n        keyInstance,\n        trigger,\n        formatTimeValidationMessage(key, intl, {\n          value,\n          min,\n          max,\n          precision,\n          expectedFormat: formatString,\n        }),\n        id || undefined,\n      );\n    },\n    [intl, value, min, max, precision, formatString, id],\n  );\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId: ownerId,\n    emitValidationState,\n    getBlurValidationState: () =>\n      buildValidationState('blur', dateTimePickerError),\n  });\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef<HTMLSpanElement> => ({\n      element: rootRef.current,\n      inputRef: dateInputRef.current?.inputRef,\n      triggerRef: dateInputRef.current?.inputRef,\n      open: () => dateSelectorRef.current?.open(),\n      close: () => dateSelectorRef.current?.close(),\n      focus() {\n        dateInputRef.current?.inputRef?.focus();\n      },\n      validate() {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          buildValidationState('manual', dateTimePickerError),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const state = buildValidationState('manual', dateTimePickerError);\n        return emitValidationState(state);\n      },\n    }),\n    [\n      formFieldDispatch,\n      dateInputRef,\n      emitValidationState,\n      buildValidationState,\n    ],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      value === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== '' &&\n      dateInputRef.current.element?.getAttribute('data-valuetype') !==\n        'expression'\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [value, dateInputRef]);\n\n  useEffect(() => {\n    emitValidationState(buildValidationState('change', dateTimePickerError));\n  }, [value, emitValidationState, buildValidationState, dateTimePickerError]);\n\n  const {\n    onMouseDown,\n    onKeyDown: handleSelectionKeyDown,\n    onCutCapture,\n    onContextMenu,\n  } = useSelectionInteractionHandlers(\n    touchedContainerRef,\n    useCallback(() => {\n      focusDateTimeInput(null, dateInputRef);\n    }, [dateInputRef]),\n    dateInputRef,\n  );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      const isIso =\n        dateInputRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      if (isExpressionTriggerKey(event) && isIso) {\n        dateInputRef.current?.setExpressionValue(event.key);\n        requestAnimationFrame(() => {\n          const expressionInputRef = dateInputRef.current?.expressionInputRef;\n          if (expressionInputRef) {\n            expressionInputRef.focus();\n            const selection = window.getSelection();\n            if (selection) {\n              const range = document.createRange();\n              range.selectNodeContents(expressionInputRef);\n              range.collapse(false);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          }\n        });\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      if (isContentModifyingKey(event)) {\n        dateInputRef.current?.clearPasteUndo();\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [disabled, readOnly, handleSelectionKeyDown, dateInputRef],\n  );\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={rootRef}\n      className={clsx(containerClassName, consumerClassName)}\n      style={consumerStyle}\n      {...containerFocusProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <InputGroup\n        className={clsx(\n          styles.dateTimePicker({\n            type,\n            disabled: disabledOrAriaDisabled,\n            showError,\n            readOnly,\n          }),\n        )}\n        style={{ gridAutoColumns: '1fr auto' }}\n      >\n        <div\n          ref={touchedContainerRef}\n          className={clsx(\n            fieldTokens({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRange({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onInput={() => {\n            // true if the user typed an expression, or partially filled any ISO spin button\n            setHasInputContent(\n              !!dateInputRef.current?.expressionInputRef?.textContent ||\n                Array.from(\n                  dateInputRef.current?.spinButtonHandlers?.values() ?? [],\n                ).some((h) => h?.element.current?.textContent),\n            );\n          }}\n          onMouseDown={onMouseDown}\n          onKeyDown={onKeyDown}\n          onFocus={(e: FocusEvent) => {\n            // Forward the focus only if it is coming from outside this component.\n            // Focus the first spin button with textContent; otherwise, focus the input.\n            if (!rootRef.current?.contains(e.relatedTarget)) {\n              focusDateTimeInput(e, dateInputRef);\n            }\n          }}\n          onCopyCapture={onTimeframeCopyCapture}\n          onCutCapture={onCutCapture}\n          onContextMenu={onContextMenu}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            value={value}\n            onChange={(newValue) => {\n              if (typeof newValue !== 'string') {\n                setValue(newValue);\n              }\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            required={required}\n            validationValueMode=\"single\"\n            controlId={id}\n            inputProps={inputProps}\n            onPasteComplete={() => {\n              requestAnimationFrame(() => {\n                dateInputRef.current?.focusLast();\n              });\n            }}\n          />\n          {!readOnly &&\n            !disabledOrAriaDisabled &&\n            ((value !== null && value.value !== '') || hasInputContent) && (\n              <Button\n                onClick={() => {\n                  // Focus before state updates so the button blurs with relatedTarget =\n                  // expressionInputRef (inside boundary) rather than null (which would\n                  // fire a spurious onBlur when the button unmounts after the clear).\n                  dateInputRef.current?.expressionInputRef?.focus();\n\n                  if (\n                    dateInputRef.current?.expressionInputRef &&\n                    dateInputRef.current.expressionInputRef.textContent !== ''\n                  ) {\n                    dateInputRef.current.expressionInputRef.textContent = '';\n                  } else {\n                    setValue(null);\n                  }\n                  setHasInputContent(false);\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    e.stopPropagation();\n                  }\n                }}\n                className={styles.clearIconButton}\n                color={showError ? 'critical' : 'neutral'}\n                size=\"condensed\"\n                aria-label={clearButtonLabel}\n              >\n                <XmarkIcon />\n              </Button>\n            )}\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            disabled={!!disabled}\n            error={showError}\n            className={clsx(styles.dateSelector, inputGroupClassName)}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            overlayOwnerId={ownerId}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </InternalBaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  DateTimePickerRoot as typeof DateTimePickerRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateSelector } from './DateSelector.js';\nimport * as styles from './DateTimePicker.sty.js';\nimport type { DateSelectorRef, DateTimePickerProps } from './types.js';\nimport { focusDateTimeInput } from './utils/focusDateTimeInput.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport type { TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useDateTimePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  getValidityStateKeyForTimeError,\n} from '../../core/time/validation.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldTokens } from '../../styles/field.sty.js';\nimport { DateTimeInput } from '../date-time-range-picker/DateTimeInput.js';\nimport { dateTimeRange } from '../date-time-range-picker/DateTimeRangePicker.sty.js';\nimport { isExpressionTriggerKey } from '../date-time-range-picker/expression-trigger-helpers.js';\nimport { isContentModifyingKey } from '../date-time-range-picker/helpers.js';\nimport { onTimeframeCopyCapture } from '../date-time-range-picker/selection-copy-helpers.js';\nimport { useSelectionInteractionHandlers } from '../date-time-range-picker/useSelectionInteractionHandlers.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { InternalBaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { UseFormControlReturnType } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlWithOverlayRef } from '../shared-types.js';\nimport {\n  type ValidationState,\n  type ValidationTrigger,\n} from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'DateTimePicker';\n\n/**\n * Component to comfortably enter a date time value.\n * The `DateTimePicker` component automatically uses the user's settings for the\n * locale and timezone and formats the date and time accordingly.\n * @internal\n */\nexport const DateTimePickerRoot = forwardRef<\n  FormControlWithOverlayRef<HTMLSpanElement>,\n  Omit<\n    DateTimePickerProps,\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n  }\n>((props, forwardedRef) => {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    placeholder,\n    name,\n    _form,\n    _messageTarget,\n    type = 'datetime',\n    formControl,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    ...remainingProps\n  } = props;\n  const {\n    id,\n    disabled,\n    required,\n    ariaDisabled,\n    readOnly = false,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageState,\n    messageDispatch: formFieldDispatch,\n  } = formControl;\n\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\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  const value = useDateTimePickerStore((state) => state.dateTimePickerValue);\n  const dateTimePickerError = useDateTimePickerStore(\n    (state) => state.dateTimePickerError,\n  );\n\n  const setValue = useDateTimePickerStore(\n    (state) => state.setDateTimePickerValue,\n  );\n  const dateInputRef = useDateTimePickerStore(\n    (state) => state.dateTimeInputRef,\n  );\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const dateSelectorRef = useRef<DateSelectorRef>(null);\n\n  const [hasInputContent, setHasInputContent] = useState(false);\n\n  // log to the sdk when min is larger than max.\n  useMinMaxLogger(min, max, 'DateTimePicker');\n\n  const ownerId = useId();\n\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n\n  const customMessagesRef = useRef(messageState.customMessages);\n  customMessagesRef.current = messageState.customMessages;\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n\n  // No need to show the calendar widget if only a time value can be entered.\n  const showDateSelector = type !== 'time';\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n    color: showError ? 'critical' : 'neutral',\n    disabled,\n  });\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'Datepicker calendar trigger',\n    id: 'Uuc6xAAPyctyHamM',\n    description: 'Text shown for the datetimepicker calendar trigger.',\n  });\n  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time',\n    id: '5i26Rr1LLz0OIGNJ',\n    description: 'Aria label for the DateTimePicker clear button.',\n  });\n\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => buildValidationState('manual', dateTimePickerError),\n  );\n\n  const buildValidationState = useCallback(\n    (\n      trigger: ValidationTrigger,\n      key: TimeErrorKey | undefined,\n    ): ValidationState => {\n      if (key === undefined) {\n        return { status: 'done', trigger, errors: [] };\n      }\n\n      const keyInstance = getValidityStateKeyForTimeError(key);\n\n      return getValidationState(\n        keyInstance,\n        trigger,\n        formatTimeValidationMessage(key, intl, {\n          value,\n          min,\n          max,\n          precision,\n          expectedFormat: formatString,\n        }),\n        id || undefined,\n      );\n    },\n    [intl, value, min, max, precision, formatString, id],\n  );\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId: ownerId,\n    emitValidationState,\n    getBlurValidationState: () =>\n      buildValidationState('blur', dateTimePickerError),\n  });\n\n  const validateField = useCallback(\n    async ({\n      reveal,\n      trigger,\n    }: ValidateFieldOptions): Promise<ValidationState> => {\n      if (reveal) {\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      return emitValidationState(\n        buildValidationState(trigger, dateTimePickerError),\n      );\n    },\n    [\n      formFieldDispatch,\n      emitValidationState,\n      buildValidationState,\n      dateTimePickerError,\n    ],\n  );\n\n  const resetValidation = useCallback(() => {\n    formFieldDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: false, resetShowError: true },\n    });\n\n    if (dateTimePickerError) {\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: dateTimePickerError, messageType: 'formcontrol' },\n      });\n    }\n    for (const msg of customMessagesRef.current) {\n      formFieldDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: msg.id, messageType: 'custom' },\n      });\n    }\n  }, [formFieldDispatch, dateTimePickerError]);\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value,\n    focus: () => dateInputRef.current?.inputRef?.focus(),\n    validateField,\n    resetValidation,\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlWithOverlayRef<HTMLSpanElement> => ({\n      element: rootRef.current,\n      inputRef: dateInputRef.current?.inputRef,\n      triggerRef: dateInputRef.current?.inputRef,\n      open: () => dateSelectorRef.current?.open(),\n      close: () => dateSelectorRef.current?.close(),\n      focus() {\n        dateInputRef.current?.inputRef?.focus();\n      },\n      validate() {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          buildValidationState('manual', dateTimePickerError),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        dateInputRef.current?.validate();\n        formFieldDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const state = buildValidationState('manual', dateTimePickerError);\n        return emitValidationState(state);\n      },\n    }),\n    [\n      formFieldDispatch,\n      dateInputRef,\n      emitValidationState,\n      buildValidationState,\n      dateTimePickerError,\n    ],\n  );\n\n  // remove the textContent when the value is set to null.\n  useEffect(() => {\n    if (\n      value === null &&\n      dateInputRef.current?.expressionInputRef &&\n      dateInputRef.current.expressionInputRef.textContent !== '' &&\n      dateInputRef.current.element?.getAttribute('data-valuetype') !==\n        'expression'\n    ) {\n      dateInputRef.current.expressionInputRef.textContent = '';\n    }\n  }, [value, dateInputRef]);\n\n  useEffect(() => {\n    emitValidationState(buildValidationState('change', dateTimePickerError));\n  }, [value, emitValidationState, buildValidationState, dateTimePickerError]);\n\n  const {\n    onMouseDown,\n    onKeyDown: handleSelectionKeyDown,\n    onCutCapture,\n    onContextMenu,\n  } = useSelectionInteractionHandlers(\n    touchedContainerRef,\n    useCallback(() => {\n      focusDateTimeInput(null, dateInputRef);\n    }, [dateInputRef]),\n    dateInputRef,\n  );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      const isIso =\n        dateInputRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      if (isExpressionTriggerKey(event) && isIso) {\n        dateInputRef.current?.setExpressionValue(event.key);\n        requestAnimationFrame(() => {\n          const expressionInputRef = dateInputRef.current?.expressionInputRef;\n          if (expressionInputRef) {\n            expressionInputRef.focus();\n            const selection = window.getSelection();\n            if (selection) {\n              const range = document.createRange();\n              range.selectNodeContents(expressionInputRef);\n              range.collapse(false);\n              selection.removeAllRanges();\n              selection.addRange(range);\n            }\n          }\n        });\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      if (isContentModifyingKey(event)) {\n        dateInputRef.current?.clearPasteUndo();\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [disabled, readOnly, handleSelectionKeyDown, dateInputRef],\n  );\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={rootRef}\n      className={clsx(containerClassName, consumerClassName)}\n      style={consumerStyle}\n      {...containerFocusProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <InputGroup\n        className={clsx(\n          styles.dateTimePicker({\n            type,\n            disabled: disabledOrAriaDisabled,\n            showError,\n            readOnly,\n          }),\n        )}\n        style={{ gridAutoColumns: '1fr auto' }}\n      >\n        <div\n          ref={touchedContainerRef}\n          className={clsx(\n            fieldTokens({\n              color: showError ? 'critical' : 'neutral',\n              disabled: disabledOrAriaDisabled,\n              variant: 'emphasized',\n            }),\n            dateTimeRange({\n              showError,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            focusClassName,\n            inputGroupClassName,\n          )}\n          tabIndex={disabled ? undefined : 0}\n          onInput={() => {\n            // true if the user typed an expression, or partially filled any ISO spin button\n            setHasInputContent(\n              !!dateInputRef.current?.expressionInputRef?.textContent ||\n                Array.from(\n                  dateInputRef.current?.spinButtonHandlers?.values() ?? [],\n                ).some((h) => h?.element.current?.textContent),\n            );\n          }}\n          onMouseDown={onMouseDown}\n          onKeyDown={onKeyDown}\n          onFocus={(e: FocusEvent) => {\n            // Forward the focus only if it is coming from outside this component.\n            // Focus the first spin button with textContent; otherwise, focus the input.\n            if (!rootRef.current?.contains(e.relatedTarget)) {\n              focusDateTimeInput(e, dateInputRef);\n            }\n          }}\n          onCopyCapture={onTimeframeCopyCapture}\n          onCutCapture={onCutCapture}\n          onContextMenu={onContextMenu}\n        >\n          <DateTimeInput\n            ref={dateInputRef}\n            id={id}\n            type={type}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={placeholder}\n            name={name}\n            form={_form}\n            value={value}\n            onChange={(newValue) => {\n              if (typeof newValue !== 'string') {\n                setValue(newValue);\n              }\n            }}\n            {...ariaLabelingProps}\n            aria-disabled={ariaDisabled}\n            required={required}\n            validationValueMode=\"single\"\n            controlId={id}\n            inputProps={inputProps}\n            onPasteComplete={() => {\n              requestAnimationFrame(() => {\n                dateInputRef.current?.focusLast();\n              });\n            }}\n          />\n          {!readOnly &&\n            !disabledOrAriaDisabled &&\n            ((value !== null && value.value !== '') || hasInputContent) && (\n              <Button\n                onClick={() => {\n                  // Focus before state updates so the button blurs with relatedTarget =\n                  // expressionInputRef (inside boundary) rather than null (which would\n                  // fire a spurious onBlur when the button unmounts after the clear).\n                  dateInputRef.current?.expressionInputRef?.focus();\n\n                  if (\n                    dateInputRef.current?.expressionInputRef &&\n                    dateInputRef.current.expressionInputRef.textContent !== ''\n                  ) {\n                    dateInputRef.current.expressionInputRef.textContent = '';\n                  } else {\n                    setValue(null);\n                  }\n                  setHasInputContent(false);\n                }}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') {\n                    e.stopPropagation();\n                  }\n                }}\n                className={styles.clearIconButton}\n                color={showError ? 'critical' : 'neutral'}\n                size=\"condensed\"\n                aria-label={clearButtonLabel}\n              >\n                <XmarkIcon />\n              </Button>\n            )}\n        </div>\n        {showDateSelector && (\n          <DateSelector\n            ref={dateSelectorRef}\n            aria-label={calendarTriggerLabel}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            disabled={!!disabled}\n            error={showError}\n            className={clsx(styles.dateSelector, inputGroupClassName)}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            overlayOwnerId={ownerId}\n          />\n        )}\n      </InputGroup>\n      {hint && (\n        <InternalBaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </InternalBaseItem>\n      )}\n    </Flex>\n  );\n});\n\n(\n  DateTimePickerRoot as typeof DateTimePickerRoot & { displayName: string }\n).displayName = COMPONENT_NAME;\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1uftu980-3-11-3 {
+._1uftu980-3-12-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;

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

@@ -1,5 +1,5 @@
 import "./DateRangeSelector.css";
-var selector = "_1uftu980-3-11-3";
+var selector = "_1uftu980-3-12-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-11-3';"],
+  "sourcesContent": ["import './DateRangeSelector.css';\nexport var selector = '_1uftu980-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

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

@@ -1,33 +1,33 @@
-._5u9o250-3-11-3 {
+._5u9o250-3-12-0 {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-._5u9o250-3-11-3::-webkit-scrollbar {
+._5u9o250-3-12-0::-webkit-scrollbar {
   display: none;
 }
-._5u9o252-3-11-3 {
+._5u9o252-3-12-0 {
   outline: none;
 }
-._5u9o252-3-11-3:not(:focus-visible) {
+._5u9o252-3-12-0:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o252-3-11-3:empty::before {
+._5u9o252-3-12-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-11-3 ._5u9o252-3-11-3:empty::before {
+._1vlwkc21-3-12-0 ._5u9o252-3-12-0:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-11-3 ._5u9o252-3-11-3:empty::before {
+._1vlwkc22-3-12-0 ._5u9o252-3-12-0:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-11-3._1vlwkc21-3-11-3 ._5u9o252-3-11-3:empty::before {
+._1vlwkc22-3-12-0._1vlwkc21-3-12-0 ._5u9o252-3-12-0:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._5u9o252-3-11-3::selection {
-  color: var(--_1i883gj2-3-11-3);
-  background-color: var(--_1i883gj3-3-11-3);
+._5u9o252-3-12-0::selection {
+  color: var(--_1i883gj2-3-12-0);
+  background-color: var(--_1i883gj3-3-12-0);
 }

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

@@ -52,6 +52,7 @@ const DateTimeInput = forwardRef(
       "data-testid": dataTestId,
       "aria-disabled": ariaDisabledProp,
       controlId,
+      form,
       required,
       type = "datetime",
       inputProps: formControlInputProps,
@@ -238,13 +239,14 @@ const DateTimeInput = forwardRef(
               onInvalid,
               disabled,
               tabIndex: -1,
-              required: validationValueMode === "single" ? false : required,
+              required,
               readOnly,
               "aria-disabled": ariaDisabledProp,
               ..._mergeProps(
                 formControlInputProps ?? ariaFormProps,
                 ariaLabelingProps
-              )
+              ),
+              form
             }
           ) }),
           /* @__PURE__ */ jsx(

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 { 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 { 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      inputProps: formControlInputProps,\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    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              formControlInputProps ?? 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": "AA6OM,SAgBI,KAhBJ;AA7ON,OAAO,UAAU;AACjB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP,SAAS,eAAe;AAExB,SAAS,mBAAmB,kBAAkB;AAC9C,YAAY,YAAY;AACxB,SAAS,wBAAwB;AAEjC,YAAY,0BAA0B;AACtC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,gBAAgB;AACzB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,YAAY;AACrB,YAAY,0BAA0B;AACtC,SAAS,mCAAmC;AAC5C,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AAEnC,SAAS,eAAe,GAA+B;AACrD,IAAE,eAAe;AACnB;AAKO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,iBAAiB;AACvB,UAAM,UAAU,OAAwB,IAAI;AAC5C,UAAM,WAAW,OAAyB,IAAI;AAC9C,UAAM,qBAAqB,OAAwB,IAAI;AAEvD,UAAM,MAAM,uBAAuB,CAAC,UAAU,MAAM,GAAG;AACvD,UAAM,MAAM,uBAAuB,CAAC,UAAU,MAAM,GAAG;AACvD,UAAM,YAAY,uBAAuB,CAAC,UAAU,MAAM,SAAS;AACnE,UAAM,eAAe,uBAAuB,CAAC,UAAU,MAAM,YAAY;AAEzE,UAAM,OAAO,QAAQ;AACrB,UAAM;AAAA,MACJ,WAAW;AAAA,MACX,UAAU;AAAA,MACV;AAAA,MACA;AAAA,IACF,IAAI,uBAAuB,QAAQ;AAEnC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,aAAa;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP;AAAA,MACA,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,YAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAwB;AAExB,UAAM,sBAAsB,KAAK,cAAc;AAAA,MAC7C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AACD,UAAM,kBAAkB,KAAK,cAAc;AAAA,MACzC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AACD,UAAM,kBAAkB,KAAK,cAAc;AAAA,MACzC,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aAAa;AAAA,IACf,CAAC;AAED,QAAI,cAAc;AAClB,QAAI,CAAC,iBAAiB;AACpB,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,wBAAc;AACd;AAAA,QACF,KAAK;AACH,wBAAc;AACd;AAAA,QACF,KAAK;AACH,wBAAc;AACd;AAAA,MACJ;AAAA,IACF;AAEA,UAAM,oBAAoB,qBAAqB,KAAK;AAEpD,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,iBAAiB,OAAO,kBAAkB;AAE9C,UAAM,oBAAoB,cAAc;AAExC,UAAM,EAAE,UAAU,oBAAoB,IAAI,4BAA4B;AAEtE;AAAA,MACE;AAAA,MACA,OAAyB;AAAA,QACvB,SAAS,QAAQ;AAAA,QACjB,UAAU,SAAS;AAAA,QACnB,oBAAoB,mBAAmB;AAAA,QACvC;AAAA,QACA;AAAA,QACA,oBAAoB;AAAA,QACpB;AAAA,QACA;AAAA,QACA,YAAY;AACV,cAAI,cAAc,cAAc;AAC9B,+BAAmB,SAAS,MAAM;AAAA,UACpC,OAAO;AACL,kBAAM,WAAW,MAAM,KAAK,mBAAmB,OAAO,CAAC,EAAE;AAAA,cACvD,CAAC,MAAM,MAAM;AAAA,YACf;AACA,kBAAM,cAAc,SAAS,SAAS,SAAS,CAAC;AAChD,wBAAY,QAAQ,SAAS,MAAM;AACnC,wBAAY,UAAU;AAAA,UACxB;AAAA,QACF;AAAA,QACA,WAAW;AACT,gBAAM,cAAc,mBAAmB,SAAS;AAGhD,cAAI,cAAc,gBAAgB,CAAC,aAAa;AAC9C,0BAAc,EAAE;AAAA,UAClB;AACA,mBAAS,SAAS,MAAM,KAAK,KAAK;AAAA,YAChC;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,gBAAgB;AAAA,YAChB,WAAW;AAAA;AAAA;AAAA;AAAA,YAIX,UAAU,wBAAwB,WAAW,QAAQ;AAAA,UACvD,CAAC;AACD,gCAAsB;AAAA,YACpB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AAAA,QACH;AAAA,QACA,eAAe,YAAY;AACzB,gBAAM,cAAc,mBAAmB,SAAS;AAChD,cAAI,cAAc,gBAAgB,CAAC,aAAa;AAC9C,0BAAc,EAAE;AAAA,UAClB;AACA,mBAAS,SAAS,MAAM,KAAK,KAAK;AAAA,YAChC;AAAA,YACA;AAAA,YACA,WAAW;AAAA,YACX,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,gBAAgB;AAAA,YAChB,WAAW;AAAA,YACX,UAAU,wBAAwB,WAAW,QAAQ;AAAA,UACvD,CAAC;AACD,gCAAsB;AAAA,YACpB,MAAM,wBAAwB;AAAA,YAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,UAC7B,CAAC;AACD,iBAAO,mBAAmB,SAAS,SAAS,QAAQ;AAAA,QACtD;AAAA,MACF;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,kBAAkB,KAAK;AAAA,MAC3B;AAAA,QACE,gBAAgB;AAAA,QAChB,IAAI;AAAA,QACJ,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,iBAAiB,kBAAkB,YAAY;AAAA,MACjD;AAAA,IACF;AAEA,cAAU,MAAM;AACd,yBAAmB;AAAA,IAGrB,GAAG,CAAC,UAAU,CAAC;AAEf,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,IAAG;AAAA,QACH,WAAW;AAAA,UACT;AAAA,UACA,OAAO;AAAA,UACP;AAAA,QACF;AAAA,QACA,OAAO;AAAA,QACP,eAAa;AAAA,QACb;AAAA,QACA,WAAW;AAAA,QACX,KAAK;AAAA,QACL,kBAAgB;AAAA,QAEhB;AAAA,8BAAC,kBACC;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,KAAK;AAAA,cACL;AAAA,cACA,OAAO,cAAc;AAAA,cACrB,UAAU,MAAM;AAAA,cAEhB;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA,UAAU;AAAA,cACV,UAAU,wBAAwB,WAAW,QAAQ;AAAA,cACrD;AAAA,cACA,iBAAe;AAAA,cACd,GAAG;AAAA,gBACF,yBAAyB;AAAA,gBACzB;AAAA,cACF;AAAA;AAAA,UACF,GACF;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,KAAK,YAAY;AAAA,gBAC1B,CAAC,qBAAqB,cAAc,GAAG,CAAC;AAAA,cAC1C,CAAC;AAAA,cACD,MAAK;AAAA,cACL,YAAY;AAAA,cACZ,UAAU,YAAY,CAAC,oBAAoB,KAAK;AAAA,cAChD,OACE;AAAA,gBACE,sBAAsB,IAAI,WAAW;AAAA,cACvC;AAAA,cAEF,kBAAe;AAAA,cACf,KAAK;AAAA,cACL,iBAAiB,CAAC,YAAY,CAAC,WAAW,OAAO;AAAA,cACjD,SAAS;AAAA,cACT,SAAS,CAAC,MAAwC;AAChD,oBAAI,EAAE,OAAO,aAAa,iBAAiB,MAAM,OAAO;AACtD;AAAA,gBACF;AACA,yCAAyB,CAAC;AAAA,cAC5B;AAAA,cACA,QAAQ,CAAC,MAAwC;AAC/C,oBAAI,EAAE,OAAO,aAAa,iBAAiB,MAAM,OAAO;AACtD;AAAA,gBACF;AACA,wCAAwB,CAAC;AAAA,cAC3B;AAAA,cACA,WAAW;AAAA,cACX,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,QAAQ;AAAA,cACR,cAAY;AAAA;AAAA,UACd;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW,KAAK,qBAAqB,iBAAiB;AAAA,gBACpD,CAAC,qBAAqB,cAAc,GAAG;AAAA,cACzC,CAAC;AAAA,cACD,eAAa;AAAA,cACb;AAAA,cACA;AAAA,cACA;AAAA,cAEC;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;",
+  "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 { 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 { 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      form,\n      required,\n      type = 'datetime',\n      inputProps: formControlInputProps,\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    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={required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              formControlInputProps ?? ariaFormProps,\n              ariaLabelingProps,\n            )}\n            form={form}\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-11-3";
-var dateTimeInputRoot = "_5u9o250-3-11-3";
-var expression = "_5u9o252-3-11-3";
+var dateTimeInput = "_5u9o251-3-12-0";
+var dateTimeInputRoot = "_5u9o250-3-12-0";
+var expression = "_5u9o252-3-12-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-11-3';\nexport var dateTimeInputRoot = '_5u9o250-3-11-3';\nexport var expression = '_5u9o252-3-11-3';"],
+  "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-12-0';\nexport var dateTimeInputRoot = '_5u9o250-3-12-0';\nexport var expression = '_5u9o252-3-12-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-11-3 {
+._1vlwkc20-3-12-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-11-3);
+  box-shadow: var(--_bx32h4-3-12-0);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-11-3);
-  background: var(--_bx32h3-3-11-3);
+  color: var(--_bx32h0-3-12-0);
+  background: var(--_bx32h3-3-12-0);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-11-3._1vlwkc20-3-11-3 {
+._1vlwkc20-3-12-0._1vlwkc20-3-12-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-11-3:has(._1i883gjd-3-11-3) {
+._1vlwkc20-3-12-0:has(._1i883gjd-3-12-0) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-11-3:has(._1i883gjd-3-11-3:hover) {
-  --_bx32h3-3-11-3: var(--_bx32h2-3-11-3);
+._1vlwkc20-3-12-0:has(._1i883gjd-3-12-0:hover) {
+  --_bx32h3-3-12-0: var(--_bx32h2-3-12-0);
 }
-._1vlwkc20-3-11-3:has(._1i883gjd-3-11-3:focus-visible) {
-  box-shadow: var(--_bx32h4-3-11-3, none);
+._1vlwkc20-3-12-0:has(._1i883gjd-3-12-0:focus-visible) {
+  box-shadow: var(--_bx32h4-3-12-0, none);
 }
-._1jgl8s50-3-11-3 ._1vlwkc20-3-11-3, ._1jgl8s50-3-11-3 ._1vlwkc20-3-11-3:hover, ._1jgl8s50-3-11-3 ._1vlwkc20-3-11-3:active {
-  --_bx32h3-3-11-3: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-12-0 ._1vlwkc20-3-12-0, ._1jgl8s50-3-12-0 ._1vlwkc20-3-12-0:hover, ._1jgl8s50-3-12-0 ._1vlwkc20-3-12-0:active {
+  --_bx32h3-3-12-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-11-3 {
+._1vlwkc22-3-12-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-11-3 {
-  --_bx32h3-3-11-3: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-12-0 {
+  --_bx32h3-3-12-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-11-3 ._1vlwkc23-3-11-3, ._1jgl8s50-3-11-3 ._1vlwkc23-3-11-3:hover, ._1jgl8s50-3-11-3 ._1vlwkc23-3-11-3:active {
-  --_bx32h4-3-11-3: 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-12-0 ._1vlwkc23-3-12-0, ._1jgl8s50-3-12-0 ._1vlwkc23-3-12-0:hover, ._1jgl8s50-3-12-0 ._1vlwkc23-3-12-0:active {
+  --_bx32h4-3-12-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-11-3 {
-  --_bx32h3-3-11-3: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1vlwkc24-3-12-0 {
+  --_bx32h3-3-12-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-11-3 ._1vlwkc24-3-11-3, ._1jgl8s50-3-11-3 ._1vlwkc24-3-11-3:hover, ._1jgl8s50-3-11-3 ._1vlwkc24-3-11-3:active {
-  --_bx32h4-3-11-3: 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-12-0 ._1vlwkc24-3-12-0, ._1jgl8s50-3-12-0 ._1vlwkc24-3-12-0:hover, ._1jgl8s50-3-12-0 ._1vlwkc24-3-12-0:active {
+  --_bx32h4-3-12-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-11-3 {
+._1vlwkc25-3-12-0 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -51,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-11-3._1vlwkc25-3-11-3 {
+._1vlwkc25-3-12-0._1vlwkc25-3-12-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-11-3::-webkit-scrollbar {
+._1vlwkc25-3-12-0::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-11-3._1vlwkc26-3-11-3 {
+._1vlwkc26-3-12-0._1vlwkc26-3-12-0 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-11-3 {
+._1vlwkc27-3-12-0 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-11-3::selection {
+._1vlwkc27-3-12-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-11-3";
-var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-11-3", variantClassNames: { showError: { true: "_1vlwkc21-3-11-3" }, disabled: { true: "_1vlwkc22-3-11-3" }, readOnly: { true: "_1vlwkc23-3-11-3" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-11-3"]] });
-var scrollContainer = "_1vlwkc25-3-11-3";
-var timeframeSeparator = "_1vlwkc27-3-11-3";
+var dateTimeInput = "_1vlwkc26-3-12-0";
+var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-12-0", variantClassNames: { showError: { true: "_1vlwkc21-3-12-0" }, disabled: { true: "_1vlwkc22-3-12-0" }, readOnly: { true: "_1vlwkc23-3-12-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-12-0"]] });
+var scrollContainer = "_1vlwkc25-3-12-0";
+var timeframeSeparator = "_1vlwkc27-3-12-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-11-3';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-11-3',variantClassNames:{showError:{true:'_1vlwkc21-3-11-3'},disabled:{true:'_1vlwkc22-3-11-3'},readOnly:{true:'_1vlwkc23-3-11-3'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-11-3']]});\nexport var scrollContainer = '_1vlwkc25-3-11-3';\nexport var timeframeSeparator = '_1vlwkc27-3-11-3';"],
+  "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-12-0';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-12-0',variantClassNames:{showError:{true:'_1vlwkc21-3-12-0'},disabled:{true:'_1vlwkc22-3-12-0'},readOnly:{true:'_1vlwkc23-3-12-0'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-12-0']]});\nexport var scrollContainer = '_1vlwkc25-3-12-0';\nexport var timeframeSeparator = '_1vlwkc27-3-12-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,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AACxR,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;",
   "names": []
 }

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

@@ -42,6 +42,7 @@ import {
   dateTimePicker
 } from "../date-time-picker/DateTimePicker.sty.js";
 import { focusDateTimeInput } from "../date-time-picker/utils/focusDateTimeInput.js";
+import { useInternalFormRegistration } from "../form/hooks/useInternalFormRegistration.js";
 import { FormFieldMessageContext } from "../forms-core/contexts/FormFieldMessageContext.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { useContainerFocus } from "../hooks/useContainerFocus.js";
@@ -89,6 +90,8 @@ function getOffsetWithinElement(element, container, offset) {
 const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
   const {
     name,
+    _form,
+    _messageTarget,
     style: consumerStyle,
     className: consumerClassName,
     "data-testid": dataTestId,
@@ -110,6 +113,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     ariaDisabled,
     inputProps,
     showError,
+    messageState,
     messageDispatch: formMessageDispatch
   } = formControl;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
@@ -144,8 +148,13 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     dateTimeToRef
   });
   const intl = useIntl();
+  const customMessagesRef = useRef(messageState.customMessages);
+  customMessagesRef.current = messageState.customMessages;
   const lastValidationErrorRef = useRef(void 0);
-  const _emitValidationState = useValidationStateEmitter(onValidityChange);
+  const formValidityChangeRef = useRef(void 0);
+  const _emitValidationState = useValidationStateEmitter(
+    (state) => formValidityChangeRef.current?.(state)
+  );
   const buildValidationState = useCallback(
     (trigger, key) => {
       if (key === void 0) {
@@ -260,6 +269,51 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     getBlurValidationState: () => buildValidationState("blur", getErrorKey()),
     shouldSuppressBlur
   });
+  const validateField = useCallback(
+    async ({
+      reveal,
+      trigger
+    }) => {
+      if (reveal) {
+        formMessageDispatch?.({
+          type: FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+      }
+      const errorKey = getErrorKey();
+      return emitValidationState(buildValidationState(trigger, errorKey));
+    },
+    [
+      formMessageDispatch,
+      getErrorKey,
+      emitValidationState,
+      buildValidationState
+    ]
+  );
+  const resetValidation = useCallback(() => {
+    formMessageDispatch?.({
+      type: FormFieldMessagesAction.SETISTOUCHED,
+      payload: { isTouched: false }
+    });
+    for (const msg of customMessagesRef.current) {
+      formMessageDispatch?.({
+        type: FormFieldMessagesAction.REMOVEMESSAGE,
+        payload: { id: msg.id, messageType: "custom" }
+      });
+    }
+  }, [formMessageDispatch]);
+  const formRegistration = useInternalFormRegistration({
+    id,
+    name,
+    form: _form,
+    messageTarget: _messageTarget,
+    onValidityChange,
+    getValue: () => value,
+    focus: () => dateTimeFromRef.current?.focus?.(),
+    validateField,
+    resetValidation
+  });
+  formValidityChangeRef.current = formRegistration.onValidityChange;
   useEffect(() => {
     emitValidationState(buildValidationState("change", getErrorKey()));
   }, [value, emitValidationState, buildValidationState, getErrorKey]);
@@ -498,6 +552,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
                     readOnly,
                     placeholder: placeholder.from,
                     name: name === void 0 ? void 0 : `${name}-from`,
+                    form: _form,
                     value: value === null ? null : value.from,
                     onChange: (newValue) => {
                       if (typeof newValue !== "string") {
@@ -527,6 +582,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
                     readOnly,
                     placeholder: placeholder.to,
                     name: name === void 0 ? void 0 : `${name}-to`,
+                    form: _form,
                     value: value === null ? null : value.to,
                     onChange: (newValue) => {
                       if (typeof newValue !== "string") {