npm - @dynatrace/strato-components - Versions diffs - 3.11.3 → 3.12.0 - Mend

@dynatrace/strato-components 3.11.3 → 3.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2354) hide show

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePickerRoot.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateRangeSelector } from './DateRangeSelector.js';\nimport { DateTimeInput } from './DateTimeInput.js';\nimport * as styles from './DateTimeRangePicker.sty.js';\nimport { isExpressionTriggerKey } from './expression-trigger-helpers.js';\nimport { useDateTimeRangePicker } from './hooks/useDateTimeRangePicker.js';\nimport { onTimeframeCopyCapture } from './selection-copy-helpers.js';\nimport {\n  peekPreRestoreEndpoints,\n  type SelectionEndpoints,\n} from './selection-helpers.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { DateRangeSelectorRef, DateTimeInputRef } from './types.js';\nimport { useSelectionInteractionHandlers } from './useSelectionInteractionHandlers.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 { TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  getValidityStateKeyForTimeError,\n  validate,\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 { textStyle } from '../../styles/textStyle.sty.js';\nimport {\n  clearIconButton,\n  dateTimePicker,\n} from '../date-time-picker/DateTimePicker.sty.js';\nimport { focusDateTimeInput } from '../date-time-picker/utils/focusDateTimeInput.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport type { UseFormControlReturnType } from '../forms-core/hooks/useFormControl.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport { SpinButtonHandler } from '../spin-buttons/spin-button-group/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\n/**\n * Returns true if a given DateTimeInput element contains the active (focused)\n * element *or* the window selection intersects it.\n *\n * The focus-based check covers the common case where a single spin button is\n * focused \u2013 including empty (placeholder) spin buttons whose `selectAll()` is\n * a no-op and therefore leave the window selection collapsed.\n *\n * The selection-based check covers cross-input scenarios such as Ctrl+A or\n * drag-select spanning both \"from\" and \"to\" inputs.\n */\nfunction isInputInSelectionOrFocused(\n  ref: RefObject<DateTimeInputRef | null>,\n  preRestoreEndpoints?: SelectionEndpoints,\n): boolean {\n  const element = ref.current?.element;\n  if (!element) {\n    return false;\n  }\n\n  if (element.contains(document.activeElement)) {\n    return true;\n  }\n\n  const selection = window.getSelection();\n  if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {\n    if (selection.getRangeAt(0).intersectsNode(element)) {\n      return true;\n    }\n  }\n\n  // Safari clips the live selection to the active CE host after contenteditable\n  // is re-attached in the keydown capture phase. Fall back to the pre-restore\n  // endpoints stashed by deferContentEditableRestore, which still span both inputs.\n  return (\n    !!preRestoreEndpoints &&\n    (element.contains(preRestoreEndpoints.anchorNode) ||\n      element.contains(preRestoreEndpoints.focusNode))\n  );\n}\n\nfunction focusExpressionInputAtEnd(\n  ref: RefObject<DateTimeInputRef | null>,\n): void {\n  const expressionElement = ref.current?.expressionInputRef;\n  if (!expressionElement) {\n    return;\n  }\n\n  expressionElement.focus();\n\n  const selection = window.getSelection();\n  if (!selection) {\n    return;\n  }\n\n  const range = document.createRange();\n  range.selectNodeContents(expressionElement);\n  range.collapse(false);\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n\nfunction getOffsetWithinElement(\n  element: HTMLElement,\n  container: Node,\n  offset: number,\n): number {\n  const range = document.createRange();\n  range.selectNodeContents(element);\n  range.setEnd(container, offset);\n  return range.toString().length;\n}\n\n/**@internal */\nexport const DateTimeRangePickerRoot = forwardRef<\n  DateTimeRangePickerRef | null,\n  Omit<\n    DateTimeRangePickerProps,\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n    shouldSuppressBlur?: (relatedTarget: Element | null) => boolean;\n  }\n>((props, forwardedRef) => {\n  const {\n    name,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    placeholder: placeholderProp,\n    onBlur,\n    onFocus,\n    formControl,\n    onValidityChange,\n    shouldSuppressBlur,\n    ...remainingProps\n  } = props;\n  const {\n    id,\n    disabled,\n    required,\n    readOnly = false,\n    ariaDisabled,\n    inputProps,\n    showError,\n    messageDispatch: formMessageDispatch,\n  } = formControl;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const ariaProps = useAriaLabelingProps(remainingProps);\n  const COMPONENT_NAME = 'DateTimeRangePicker';\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n  const dateTimeToRef = useRef<DateTimeInputRef>(null);\n  const dateRangeSelectorRef = useRef<DateRangeSelectorRef>(null);\n\n  const ownerId = useId();\n\n  const [hasInputContent, setHasInputContent] = useState(false);\n\n  const setValue = useDateTimeRangePickerStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n  const value = useDateTimeRangePickerStore(\n    (state) => state.dateTimeRangePickerTimeframe,\n  );\n  const dateTimeFromRef = useDateTimeRangePickerStore(\n    (state) => state.dateTimeFromRef,\n  );\n  const precision = useDateTimeRangePickerStore((state) => state.precision);\n  const min = useDateTimeRangePickerStore((state) => state.min);\n  const max = useDateTimeRangePickerStore((state) => state.max);\n  const formatString = useDateTimeRangePickerStore(\n    (state) => state.formatString,\n  );\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const { placeholder, onPasteCapture, onUndoPasteKeyDown } =\n    useDateTimeRangePicker({\n      placeholder: placeholderProp,\n      readOnly,\n      dateTimeFromRef,\n      dateTimeToRef,\n    });\n\n  const intl = useIntl();\n\n  // Track the last error key returned by the imperative validate() so we can\n  // pass it as `formerError` on the next call and clean up stale messages.\n  const lastValidationErrorRef = useRef<TimeErrorKey | undefined>(undefined);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\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      return getValidationState(\n        getValidityStateKeyForTimeError(key),\n        trigger,\n        formatTimeValidationMessage(key, intl, {\n          value,\n          min,\n          max,\n          precision,\n          expectedFormat: formatString,\n        }),\n        id ? [id] : [],\n      );\n    },\n    [intl, value, min, max, precision, formatString, id],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => buildValidationState('manual', getErrorKey()),\n  );\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): DateTimeRangePickerRef => ({\n      element: rootRef.current,\n      inputRef: {\n        from: dateTimeFromRef.current?.inputRef,\n        to: dateTimeToRef.current?.inputRef,\n      },\n      open: () => dateRangeSelectorRef.current?.open(),\n      close: () => dateRangeSelectorRef.current?.close(),\n      focus: () => dateTimeFromRef.current?.focus?.(),\n      getCurrentValue: () => ({\n        from: value?.from ?? null,\n        to: value?.to ?? null,\n      }),\n      validate() {\n        lastValidationErrorRef.current = validate(value, min, max, {\n          formMessageDispatch,\n          formerError: lastValidationErrorRef.current,\n          precision,\n          showError: true,\n          checkOrder: true,\n          ref: rootRef,\n          expectedFormat: formatString,\n          valueMode: 'dateTimePicker',\n          required,\n        });\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          buildValidationState('manual', lastValidationErrorRef.current),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        lastValidationErrorRef.current = validate(value, min, max, {\n          formMessageDispatch,\n          formerError: lastValidationErrorRef.current,\n          precision,\n          showError: true,\n          checkOrder: true,\n          ref: rootRef,\n          expectedFormat: formatString,\n          valueMode: 'dateTimePicker',\n          required,\n        });\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          buildValidationState('manual', lastValidationErrorRef.current),\n        );\n      },\n    }),\n    [\n      value,\n      min,\n      max,\n      formMessageDispatch,\n      precision,\n      formatString,\n      required,\n      dateTimeFromRef,\n      emitValidationState,\n      buildValidationState,\n    ],\n  );\n\n  // Computes the current range error key without dispatching messages, used to\n  // keep `onValidityChange` in sync on automatic (change / blur) updates.\n  const getErrorKey = useCallback(\n    () =>\n      validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: rootRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      }),\n    [value, min, max, precision, formatString, required],\n  );\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId: ownerId,\n    emitValidationState,\n    getBlurValidationState: () => buildValidationState('blur', getErrorKey()),\n    shouldSuppressBlur,\n  });\n\n  // Surface validation state on every value change (`change` trigger).\n  useEffect(() => {\n    emitValidationState(buildValidationState('change', getErrorKey()));\n  }, [value, emitValidationState, buildValidationState, getErrorKey]);\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n    isMinimal: false,\n    disabled,\n    color: showError ? 'critical' : 'neutral',\n  });\n\n  const dateTimeFromLabel = intl.formatMessage({\n    defaultMessage: 'DateTime from',\n    id: 'fMy6q/KKOqbvCA3H',\n    description:\n      'Textbox to enter a relative or absolute timeframe from value.',\n  });\n\n  const dateTimeToLabel = intl.formatMessage({\n    defaultMessage: 'DateTime to',\n    id: 'uuhhc3nEZptwtV2E',\n    description: 'Textbox to enter a relative or absolute timeframe to value.',\n  });\n  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time range',\n    id: 'zX4r/Y8gJL1C8+5e',\n    description: 'Aria label for the DateTimeRangePicker clear button.',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        showError,\n      },\n    }),\n    [showError],\n  );\n\n  const {\n    onMouseDown,\n    onKeyDown: handleSelectionKeyDown,\n    onContextMenu,\n    onCutCapture,\n  } = useSelectionInteractionHandlers(\n    touchedContainerRef,\n    useCallback(() => {\n      focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n    }, [dateTimeFromRef]),\n    dateTimeFromRef,\n    dateTimeToRef,\n  );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      // Safari: Reads the stash set by deferContentEditableRestore\n      const preRestoreEndpoints = peekPreRestoreEndpoints(\n        event.currentTarget as HTMLElement,\n      );\n\n      const fromInputIsIso =\n        dateTimeFromRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n      const toInputIsIso =\n        dateTimeToRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      const bothInSelection =\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints);\n\n      // When both inputs are selected, allow expression trigger keys to switch the entire range to expression mode.\n      if (bothInSelection && isExpressionTriggerKey(event)) {\n        setValue(null);\n        if (dateTimeToRef.current?.expressionInputRef) {\n          dateTimeToRef.current.expressionInputRef.textContent = '';\n        }\n      }\n\n      const switchFromToExpression =\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        fromInputIsIso;\n      const switchToToExpression =\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) &&\n        toInputIsIso;\n      if (\n        isExpressionTriggerKey(event) &&\n        (switchFromToExpression || switchToToExpression)\n      ) {\n        const char = event.key;\n\n        // The primary input receives the character and focus.\n        // When both are selected, 'from' receives the character and focus.\n        const primaryRef = switchFromToExpression\n          ? dateTimeFromRef\n          : dateTimeToRef;\n\n        primaryRef.current?.setExpressionValue(char);\n\n        requestAnimationFrame(() => {\n          focusExpressionInputAtEnd(primaryRef);\n        });\n\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n      // Handle regular character input when both inputs are selected\n      if (\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) &&\n        !fromInputIsIso &&\n        !toInputIsIso &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey &&\n        !event.altKey\n      ) {\n        const char = event.key;\n        const fromExpressionElement =\n          dateTimeFromRef.current?.expressionInputRef;\n        const toExpressionElement = dateTimeToRef.current?.expressionInputRef;\n        const selection = window.getSelection();\n\n        if (\n          fromExpressionElement &&\n          toExpressionElement &&\n          selection &&\n          selection.rangeCount > 0 &&\n          !selection.isCollapsed\n        ) {\n          const range = selection.getRangeAt(0);\n          const fromValue = fromExpressionElement.textContent ?? '';\n          const toValue = toExpressionElement.textContent ?? '';\n\n          const fromStart = fromExpressionElement.contains(range.startContainer)\n            ? getOffsetWithinElement(\n                fromExpressionElement,\n                range.startContainer,\n                range.startOffset,\n              )\n            : 0;\n          const toEnd = toExpressionElement.contains(range.endContainer)\n            ? getOffsetWithinElement(\n                toExpressionElement,\n                range.endContainer,\n                range.endOffset,\n              )\n            : toValue.length;\n\n          dateTimeFromRef.current?.setExpressionValue(\n            `${fromValue.slice(0, fromStart)}${char}`,\n          );\n          dateTimeToRef.current?.setExpressionValue(toValue.slice(toEnd));\n\n          requestAnimationFrame(() => {\n            focusExpressionInputAtEnd(dateTimeFromRef);\n          });\n\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n\n        // Replace the selected expression in \"from\" and keep \"to\" unchanged.\n        dateTimeFromRef.current?.setExpressionValue(char);\n\n        requestAnimationFrame(() => {\n          focusExpressionInputAtEnd(dateTimeFromRef);\n        });\n\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [\n      disabled,\n      readOnly,\n      handleSelectionKeyDown,\n      dateTimeFromRef,\n      dateTimeToRef,\n      setValue,\n    ],\n  );\n\n  // Move from the last \"from\" segment to the first \"to\" segment.\n  const handleFromTrailingEdge = useCallback(() => {\n    dateTimeToRef.current?.focus?.();\n  }, []);\n\n  // Move from the first \"to\" segment to the last \"from\" segment.\n  const handleToLeadingEdge = useCallback(() => {\n    dateTimeFromRef.current?.focusLast();\n  }, [dateTimeFromRef]);\n\n  // Carry trailing overflow from \"from\" into the first \"to\" segment.\n  const handleFromTrailingOverflow = useCallback(\n    (overflowChar: string) => {\n      const handlers = Array.from(\n        dateTimeToRef.current?.spinButtonHandlers?.values() ?? [],\n      ).filter((h): h is SpinButtonHandler => h !== null && h !== undefined);\n\n      const firstHandler = handlers[0];\n      if (!firstHandler) {\n        return;\n      }\n\n      if (value?.to?.type === 'expression' || value?.to === null) {\n        dateTimeToRef.current?.setExpressionValue(overflowChar);\n        requestAnimationFrame(() => {\n          const exprEl = dateTimeToRef.current?.expressionInputRef;\n          if (exprEl) {\n            // Focus first so that expressionOnFocusHandler fires and selects all,\n            // then immediately collapse the selection to the end so the cursor\n            // lands after the overflow character instead of selecting everything.\n            exprEl.focus();\n            const sel = window.getSelection();\n            if (sel) {\n              const range = document.createRange();\n              range.selectNodeContents(exprEl);\n              range.collapse(false);\n              sel.removeAllRanges();\n              sel.addRange(range);\n            }\n          }\n        });\n        return;\n      }\n\n      if (firstHandler.type === 'number') {\n        firstHandler.applyText(overflowChar, true);\n        firstHandler.element.current?.focus();\n        firstHandler.setSelection({ start: 0, end: 0, rtl: true });\n      }\n    },\n    [value?.to],\n  );\n\n  return (\n    <Flex\n      ref={rootRef}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      style={consumerStyle}\n      className={clsx(containerClassName, consumerClassName)}\n      {...ariaProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n      {...containerFocusProps}\n    >\n      <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n        <InputGroup style={{ gridTemplateColumns: '1fr auto' }}>\n          <Flex\n            ref={touchedContainerRef}\n            className={clsx(\n              inputGroupClassName,\n              dateTimePicker({\n                readOnly,\n                showError,\n                disabled,\n                type: 'datetime',\n              }),\n              textStyle({ textStyle: 'base' }),\n              fieldTokens({\n                color: showError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'emphasized',\n              }),\n              focusClassName,\n              styles.dateTimeRange({\n                showError,\n                disabled: disabledOrAriaDisabled,\n                readOnly: readOnly,\n              }),\n            )}\n            onCopyCapture={onTimeframeCopyCapture}\n            onCutCapture={onCutCapture}\n            onPasteCapture={onPasteCapture}\n            onInput={() => {\n              setHasInputContent(\n                !!dateTimeFromRef.current?.expressionInputRef?.textContent ||\n                  !!dateTimeToRef.current?.expressionInputRef?.textContent,\n              );\n            }}\n            tabIndex={disabled ? undefined : 0}\n            onMouseDown={onMouseDown}\n            onContextMenu={onContextMenu}\n            onKeyDownCapture={(e) => {\n              // Handles undo for from and to inputs with Ctrl+Z.\n              // Uses capture phase so it fires before the input-level undo handler.\n              onUndoPasteKeyDown(e);\n            }}\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\n              if (!rootRef.current?.contains(e.relatedTarget)) {\n                focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n          >\n            <span className={styles.scrollContainer}>\n              <DateTimeInput\n                ref={dateTimeFromRef}\n                className={styles.dateTimeInput}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder.from}\n                name={name === undefined ? undefined : `${name}-from`}\n                // Maintains its own state to separate single and range value manipulations\n                value={value === null ? null : value.from}\n                onChange={(newValue) => {\n                  if (typeof newValue !== 'string') {\n                    setValue({ from: newValue ?? null });\n                  }\n                }}\n                aria-label={dateTimeFromLabel}\n                aria-disabled={ariaDisabled}\n                required={required}\n                controlId={id}\n                inputProps={inputProps}\n                onTrailingEdge={handleFromTrailingEdge}\n                onTrailingOverflow={handleFromTrailingOverflow}\n                partialTimeAnchorDate={value?.to?.absoluteDate || undefined}\n                onPasteComplete={() => {\n                  dateTimeToRef.current?.focus?.();\n                }}\n              />\n\n              <span className={styles.timeframeSeparator}>\u2192</span>\n              <DateTimeInput\n                ref={dateTimeToRef}\n                className={styles.dateTimeInput}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder.to}\n                name={name === undefined ? undefined : `${name}-to`}\n                // Maintains its own state to separate single and range value manipulations\n                value={value === null ? null : value.to}\n                onChange={(newValue) => {\n                  if (typeof newValue !== 'string') {\n                    setValue({ to: newValue ?? null });\n                  }\n                }}\n                aria-label={dateTimeToLabel}\n                aria-disabled={ariaDisabled}\n                required={required}\n                onLeadingEdge={handleToLeadingEdge}\n                dateOnlyPasteAnchor=\"endOfDay\"\n                partialTimeAnchorDate={value?.from?.absoluteDate || undefined}\n                onPasteComplete={() => {\n                  requestAnimationFrame(() => {\n                    dateTimeToRef.current?.focusLast();\n                  });\n                }}\n              />\n            </span>\n            {!readOnly &&\n              !disabledOrAriaDisabled &&\n              ((value &&\n                (value.from?.value !== '' || value.to?.value !== '')) ||\n                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                    dateTimeFromRef.current?.expressionInputRef?.focus();\n                    setValue(null);\n                    if (dateTimeFromRef.current?.expressionInputRef) {\n                      dateTimeFromRef.current.expressionInputRef.textContent =\n                        '';\n                    }\n                    if (dateTimeToRef.current?.expressionInputRef) {\n                      dateTimeToRef.current.expressionInputRef.textContent = '';\n                    }\n                    setHasInputContent(false);\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.stopPropagation();\n                    }\n                  }}\n                  className={clearIconButton}\n                  color={showError ? 'critical' : 'neutral'}\n                  size=\"condensed\"\n                  aria-label={clearButtonLabel}\n                >\n                  <XmarkIcon />\n                </Button>\n              )}\n          </Flex>\n          <DateRangeSelector\n            ref={dateRangeSelectorRef}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            error={showError}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            overlayOwnerId={ownerId}\n          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { DateRangeSelector } from './DateRangeSelector.js';\nimport { DateTimeInput } from './DateTimeInput.js';\nimport * as styles from './DateTimeRangePicker.sty.js';\nimport { isExpressionTriggerKey } from './expression-trigger-helpers.js';\nimport { useDateTimeRangePicker } from './hooks/useDateTimeRangePicker.js';\nimport { onTimeframeCopyCapture } from './selection-copy-helpers.js';\nimport {\n  peekPreRestoreEndpoints,\n  type SelectionEndpoints,\n} from './selection-helpers.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { DateRangeSelectorRef, DateTimeInputRef } from './types.js';\nimport { useSelectionInteractionHandlers } from './useSelectionInteractionHandlers.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 { TimeErrorKey } from '../../core/time/shared.types.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport {\n  formatTimeValidationMessage,\n  getValidityStateKeyForTimeError,\n  validate,\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 { textStyle } from '../../styles/textStyle.sty.js';\nimport {\n  clearIconButton,\n  dateTimePicker,\n} from '../date-time-picker/DateTimePicker.sty.js';\nimport { focusDateTimeInput } from '../date-time-picker/utils/focusDateTimeInput.js';\nimport type { ValidateFieldOptions } from '../form/form.types.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport type { UseFormControlReturnType } from '../forms-core/hooks/useFormControl.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport { SpinButtonHandler } from '../spin-buttons/spin-button-group/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\n/**\n * Returns true if a given DateTimeInput element contains the active (focused)\n * element *or* the window selection intersects it.\n *\n * The focus-based check covers the common case where a single spin button is\n * focused \u2013 including empty (placeholder) spin buttons whose `selectAll()` is\n * a no-op and therefore leave the window selection collapsed.\n *\n * The selection-based check covers cross-input scenarios such as Ctrl+A or\n * drag-select spanning both \"from\" and \"to\" inputs.\n */\nfunction isInputInSelectionOrFocused(\n  ref: RefObject<DateTimeInputRef | null>,\n  preRestoreEndpoints?: SelectionEndpoints,\n): boolean {\n  const element = ref.current?.element;\n  if (!element) {\n    return false;\n  }\n\n  if (element.contains(document.activeElement)) {\n    return true;\n  }\n\n  const selection = window.getSelection();\n  if (selection && selection.rangeCount > 0 && !selection.isCollapsed) {\n    if (selection.getRangeAt(0).intersectsNode(element)) {\n      return true;\n    }\n  }\n\n  // Safari clips the live selection to the active CE host after contenteditable\n  // is re-attached in the keydown capture phase. Fall back to the pre-restore\n  // endpoints stashed by deferContentEditableRestore, which still span both inputs.\n  return (\n    !!preRestoreEndpoints &&\n    (element.contains(preRestoreEndpoints.anchorNode) ||\n      element.contains(preRestoreEndpoints.focusNode))\n  );\n}\n\nfunction focusExpressionInputAtEnd(\n  ref: RefObject<DateTimeInputRef | null>,\n): void {\n  const expressionElement = ref.current?.expressionInputRef;\n  if (!expressionElement) {\n    return;\n  }\n\n  expressionElement.focus();\n\n  const selection = window.getSelection();\n  if (!selection) {\n    return;\n  }\n\n  const range = document.createRange();\n  range.selectNodeContents(expressionElement);\n  range.collapse(false);\n  selection.removeAllRanges();\n  selection.addRange(range);\n}\n\nfunction getOffsetWithinElement(\n  element: HTMLElement,\n  container: Node,\n  offset: number,\n): number {\n  const range = document.createRange();\n  range.selectNodeContents(element);\n  range.setEnd(container, offset);\n  return range.toString().length;\n}\n\n/**@internal */\nexport const DateTimeRangePickerRoot = forwardRef<\n  DateTimeRangePickerRef | null,\n  Omit<\n    DateTimeRangePickerProps,\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'disabled'\n    | 'required'\n    | 'id'\n    | 'aria-disabled'\n    | 'readOnly'\n    | 'controlState'\n  > & {\n    formControl: UseFormControlReturnType;\n    shouldSuppressBlur?: (relatedTarget: Element | null) => boolean;\n  }\n>((props, forwardedRef) => {\n  const {\n    name,\n    _form,\n    _messageTarget,\n    style: consumerStyle,\n    className: consumerClassName,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    placeholder: placeholderProp,\n    onBlur,\n    onFocus,\n    formControl,\n    onValidityChange,\n    shouldSuppressBlur,\n    ...remainingProps\n  } = props;\n  const {\n    id,\n    disabled,\n    required,\n    readOnly = false,\n    ariaDisabled,\n    inputProps,\n    showError,\n    messageState,\n    messageDispatch: formMessageDispatch,\n  } = formControl;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const ariaProps = useAriaLabelingProps(remainingProps);\n  const COMPONENT_NAME = 'DateTimeRangePicker';\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n  const dateTimeToRef = useRef<DateTimeInputRef>(null);\n  const dateRangeSelectorRef = useRef<DateRangeSelectorRef>(null);\n\n  const ownerId = useId();\n\n  const [hasInputContent, setHasInputContent] = useState(false);\n\n  const setValue = useDateTimeRangePickerStore(\n    (state) => state.setDateTimeRangePickerTimeframe,\n  );\n  const value = useDateTimeRangePickerStore(\n    (state) => state.dateTimeRangePickerTimeframe,\n  );\n  const dateTimeFromRef = useDateTimeRangePickerStore(\n    (state) => state.dateTimeFromRef,\n  );\n  const precision = useDateTimeRangePickerStore((state) => state.precision);\n  const min = useDateTimeRangePickerStore((state) => state.min);\n  const max = useDateTimeRangePickerStore((state) => state.max);\n  const formatString = useDateTimeRangePickerStore(\n    (state) => state.formatString,\n  );\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const { placeholder, onPasteCapture, onUndoPasteKeyDown } =\n    useDateTimeRangePicker({\n      placeholder: placeholderProp,\n      readOnly,\n      dateTimeFromRef,\n      dateTimeToRef,\n    });\n\n  const intl = useIntl();\n\n  const customMessagesRef = useRef(messageState.customMessages);\n  customMessagesRef.current = messageState.customMessages;\n\n  // Track the last error key returned by the imperative validate() so we can\n  // pass it as `formerError` on the next call and clean up stale messages.\n  const lastValidationErrorRef = useRef<TimeErrorKey | undefined>(undefined);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\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      return getValidationState(\n        getValidityStateKeyForTimeError(key),\n        trigger,\n        formatTimeValidationMessage(key, intl, {\n          value,\n          min,\n          max,\n          precision,\n          expectedFormat: formatString,\n        }),\n        id ? [id] : [],\n      );\n    },\n    [intl, value, min, max, precision, formatString, id],\n  );\n\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => buildValidationState('manual', getErrorKey()),\n  );\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): DateTimeRangePickerRef => ({\n      element: rootRef.current,\n      inputRef: {\n        from: dateTimeFromRef.current?.inputRef,\n        to: dateTimeToRef.current?.inputRef,\n      },\n      open: () => dateRangeSelectorRef.current?.open(),\n      close: () => dateRangeSelectorRef.current?.close(),\n      focus: () => dateTimeFromRef.current?.focus?.(),\n      getCurrentValue: () => ({\n        from: value?.from ?? null,\n        to: value?.to ?? null,\n      }),\n      validate() {\n        lastValidationErrorRef.current = validate(value, min, max, {\n          formMessageDispatch,\n          formerError: lastValidationErrorRef.current,\n          precision,\n          showError: true,\n          checkOrder: true,\n          ref: rootRef,\n          expectedFormat: formatString,\n          valueMode: 'dateTimePicker',\n          required,\n        });\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          buildValidationState('manual', lastValidationErrorRef.current),\n        );\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        lastValidationErrorRef.current = validate(value, min, max, {\n          formMessageDispatch,\n          formerError: lastValidationErrorRef.current,\n          precision,\n          showError: true,\n          checkOrder: true,\n          ref: rootRef,\n          expectedFormat: formatString,\n          valueMode: 'dateTimePicker',\n          required,\n        });\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          buildValidationState('manual', lastValidationErrorRef.current),\n        );\n      },\n    }),\n    [\n      value,\n      min,\n      max,\n      formMessageDispatch,\n      precision,\n      formatString,\n      required,\n      dateTimeFromRef,\n      emitValidationState,\n      buildValidationState,\n    ],\n  );\n\n  // Computes the current range error key without dispatching messages, used to\n  // keep `onValidityChange` in sync on automatic (change / blur) updates.\n  const getErrorKey = useCallback(\n    () =>\n      validate(value, min, max, {\n        precision,\n        checkOrder: true,\n        ref: rootRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      }),\n    [value, min, max, precision, formatString, required],\n  );\n\n  const { containerClassName, ...containerFocusProps } = useContainerFocus({\n    onFocus,\n    onBlur,\n    disabled,\n    overlayOwnerId: ownerId,\n    emitValidationState,\n    getBlurValidationState: () => buildValidationState('blur', getErrorKey()),\n    shouldSuppressBlur,\n  });\n\n  const validateField = useCallback(\n    async ({\n      reveal,\n      trigger,\n    }: ValidateFieldOptions): Promise<ValidationState> => {\n      if (reveal) {\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const errorKey = getErrorKey();\n      return emitValidationState(buildValidationState(trigger, errorKey));\n    },\n    [\n      formMessageDispatch,\n      getErrorKey,\n      emitValidationState,\n      buildValidationState,\n    ],\n  );\n\n  const resetValidation = useCallback(() => {\n    formMessageDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: false },\n    });\n    for (const msg of customMessagesRef.current) {\n      formMessageDispatch?.({\n        type: FormFieldMessagesAction.REMOVEMESSAGE,\n        payload: { id: msg.id, messageType: 'custom' },\n      });\n    }\n  }, [formMessageDispatch]);\n\n  const formRegistration = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => value,\n    focus: () => dateTimeFromRef.current?.focus?.(),\n    validateField,\n    resetValidation,\n  });\n  formValidityChangeRef.current = formRegistration.onValidityChange;\n\n  // Surface validation state on every value change (`change` trigger).\n  useEffect(() => {\n    emitValidationState(buildValidationState('change', getErrorKey()));\n  }, [value, emitValidationState, buildValidationState, getErrorKey]);\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    ignoreModality: true,\n    isMinimal: false,\n    disabled,\n    color: showError ? 'critical' : 'neutral',\n  });\n\n  const dateTimeFromLabel = intl.formatMessage({\n    defaultMessage: 'DateTime from',\n    id: 'fMy6q/KKOqbvCA3H',\n    description:\n      'Textbox to enter a relative or absolute timeframe from value.',\n  });\n\n  const dateTimeToLabel = intl.formatMessage({\n    defaultMessage: 'DateTime to',\n    id: 'uuhhc3nEZptwtV2E',\n    description: 'Textbox to enter a relative or absolute timeframe to value.',\n  });\n  const clearButtonLabel = intl.formatMessage({\n    defaultMessage: 'Clear date and time range',\n    id: 'zX4r/Y8gJL1C8+5e',\n    description: 'Aria label for the DateTimeRangePicker clear button.',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        showError,\n      },\n    }),\n    [showError],\n  );\n\n  const {\n    onMouseDown,\n    onKeyDown: handleSelectionKeyDown,\n    onContextMenu,\n    onCutCapture,\n  } = useSelectionInteractionHandlers(\n    touchedContainerRef,\n    useCallback(() => {\n      focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n    }, [dateTimeFromRef]),\n    dateTimeFromRef,\n    dateTimeToRef,\n  );\n\n  const onKeyDown = useCallback(\n    (event: ReactKeyboardEvent<HTMLDivElement>) => {\n      if (disabled || readOnly) {\n        handleSelectionKeyDown(event);\n        return;\n      }\n\n      // Safari: Reads the stash set by deferContentEditableRestore\n      const preRestoreEndpoints = peekPreRestoreEndpoints(\n        event.currentTarget as HTMLElement,\n      );\n\n      const fromInputIsIso =\n        dateTimeFromRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n      const toInputIsIso =\n        dateTimeToRef.current?.element?.getAttribute('data-valuetype') ===\n        'iso8601';\n\n      const bothInSelection =\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints);\n\n      // When both inputs are selected, allow expression trigger keys to switch the entire range to expression mode.\n      if (bothInSelection && isExpressionTriggerKey(event)) {\n        setValue(null);\n        if (dateTimeToRef.current?.expressionInputRef) {\n          dateTimeToRef.current.expressionInputRef.textContent = '';\n        }\n      }\n\n      const switchFromToExpression =\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        fromInputIsIso;\n      const switchToToExpression =\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) &&\n        toInputIsIso;\n      if (\n        isExpressionTriggerKey(event) &&\n        (switchFromToExpression || switchToToExpression)\n      ) {\n        const char = event.key;\n\n        // The primary input receives the character and focus.\n        // When both are selected, 'from' receives the character and focus.\n        const primaryRef = switchFromToExpression\n          ? dateTimeFromRef\n          : dateTimeToRef;\n\n        primaryRef.current?.setExpressionValue(char);\n\n        requestAnimationFrame(() => {\n          focusExpressionInputAtEnd(primaryRef);\n        });\n\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n      // Handle regular character input when both inputs are selected\n      if (\n        isInputInSelectionOrFocused(dateTimeFromRef, preRestoreEndpoints) &&\n        isInputInSelectionOrFocused(dateTimeToRef, preRestoreEndpoints) &&\n        !fromInputIsIso &&\n        !toInputIsIso &&\n        event.key.length === 1 &&\n        !event.ctrlKey &&\n        !event.metaKey &&\n        !event.altKey\n      ) {\n        const char = event.key;\n        const fromExpressionElement =\n          dateTimeFromRef.current?.expressionInputRef;\n        const toExpressionElement = dateTimeToRef.current?.expressionInputRef;\n        const selection = window.getSelection();\n\n        if (\n          fromExpressionElement &&\n          toExpressionElement &&\n          selection &&\n          selection.rangeCount > 0 &&\n          !selection.isCollapsed\n        ) {\n          const range = selection.getRangeAt(0);\n          const fromValue = fromExpressionElement.textContent ?? '';\n          const toValue = toExpressionElement.textContent ?? '';\n\n          const fromStart = fromExpressionElement.contains(range.startContainer)\n            ? getOffsetWithinElement(\n                fromExpressionElement,\n                range.startContainer,\n                range.startOffset,\n              )\n            : 0;\n          const toEnd = toExpressionElement.contains(range.endContainer)\n            ? getOffsetWithinElement(\n                toExpressionElement,\n                range.endContainer,\n                range.endOffset,\n              )\n            : toValue.length;\n\n          dateTimeFromRef.current?.setExpressionValue(\n            `${fromValue.slice(0, fromStart)}${char}`,\n          );\n          dateTimeToRef.current?.setExpressionValue(toValue.slice(toEnd));\n\n          requestAnimationFrame(() => {\n            focusExpressionInputAtEnd(dateTimeFromRef);\n          });\n\n          event.preventDefault();\n          event.stopPropagation();\n          return;\n        }\n\n        // Replace the selected expression in \"from\" and keep \"to\" unchanged.\n        dateTimeFromRef.current?.setExpressionValue(char);\n\n        requestAnimationFrame(() => {\n          focusExpressionInputAtEnd(dateTimeFromRef);\n        });\n\n        event.preventDefault();\n        event.stopPropagation();\n        return;\n      }\n\n      handleSelectionKeyDown(event);\n    },\n    [\n      disabled,\n      readOnly,\n      handleSelectionKeyDown,\n      dateTimeFromRef,\n      dateTimeToRef,\n      setValue,\n    ],\n  );\n\n  // Move from the last \"from\" segment to the first \"to\" segment.\n  const handleFromTrailingEdge = useCallback(() => {\n    dateTimeToRef.current?.focus?.();\n  }, []);\n\n  // Move from the first \"to\" segment to the last \"from\" segment.\n  const handleToLeadingEdge = useCallback(() => {\n    dateTimeFromRef.current?.focusLast();\n  }, [dateTimeFromRef]);\n\n  // Carry trailing overflow from \"from\" into the first \"to\" segment.\n  const handleFromTrailingOverflow = useCallback(\n    (overflowChar: string) => {\n      const handlers = Array.from(\n        dateTimeToRef.current?.spinButtonHandlers?.values() ?? [],\n      ).filter((h): h is SpinButtonHandler => h !== null && h !== undefined);\n\n      const firstHandler = handlers[0];\n      if (!firstHandler) {\n        return;\n      }\n\n      if (value?.to?.type === 'expression' || value?.to === null) {\n        dateTimeToRef.current?.setExpressionValue(overflowChar);\n        requestAnimationFrame(() => {\n          const exprEl = dateTimeToRef.current?.expressionInputRef;\n          if (exprEl) {\n            // Focus first so that expressionOnFocusHandler fires and selects all,\n            // then immediately collapse the selection to the end so the cursor\n            // lands after the overflow character instead of selecting everything.\n            exprEl.focus();\n            const sel = window.getSelection();\n            if (sel) {\n              const range = document.createRange();\n              range.selectNodeContents(exprEl);\n              range.collapse(false);\n              sel.removeAllRanges();\n              sel.addRange(range);\n            }\n          }\n        });\n        return;\n      }\n\n      if (firstHandler.type === 'number') {\n        firstHandler.applyText(overflowChar, true);\n        firstHandler.element.current?.focus();\n        firstHandler.setSelection({ start: 0, end: 0, rtl: true });\n      }\n    },\n    [value?.to],\n  );\n\n  return (\n    <Flex\n      ref={rootRef}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      style={consumerStyle}\n      className={clsx(containerClassName, consumerClassName)}\n      {...ariaProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\n      {...containerFocusProps}\n    >\n      <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n        <InputGroup style={{ gridTemplateColumns: '1fr auto' }}>\n          <Flex\n            ref={touchedContainerRef}\n            className={clsx(\n              inputGroupClassName,\n              dateTimePicker({\n                readOnly,\n                showError,\n                disabled,\n                type: 'datetime',\n              }),\n              textStyle({ textStyle: 'base' }),\n              fieldTokens({\n                color: showError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'emphasized',\n              }),\n              focusClassName,\n              styles.dateTimeRange({\n                showError,\n                disabled: disabledOrAriaDisabled,\n                readOnly: readOnly,\n              }),\n            )}\n            onCopyCapture={onTimeframeCopyCapture}\n            onCutCapture={onCutCapture}\n            onPasteCapture={onPasteCapture}\n            onInput={() => {\n              setHasInputContent(\n                !!dateTimeFromRef.current?.expressionInputRef?.textContent ||\n                  !!dateTimeToRef.current?.expressionInputRef?.textContent,\n              );\n            }}\n            tabIndex={disabled ? undefined : 0}\n            onMouseDown={onMouseDown}\n            onContextMenu={onContextMenu}\n            onKeyDownCapture={(e) => {\n              // Handles undo for from and to inputs with Ctrl+Z.\n              // Uses capture phase so it fires before the input-level undo handler.\n              onUndoPasteKeyDown(e);\n            }}\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\n              if (!rootRef.current?.contains(e.relatedTarget)) {\n                focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n          >\n            <span className={styles.scrollContainer}>\n              <DateTimeInput\n                ref={dateTimeFromRef}\n                className={styles.dateTimeInput}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder.from}\n                name={name === undefined ? undefined : `${name}-from`}\n                form={_form}\n                // Maintains its own state to separate single and range value manipulations\n                value={value === null ? null : value.from}\n                onChange={(newValue) => {\n                  if (typeof newValue !== 'string') {\n                    setValue({ from: newValue ?? null });\n                  }\n                }}\n                aria-label={dateTimeFromLabel}\n                aria-disabled={ariaDisabled}\n                required={required}\n                controlId={id}\n                inputProps={inputProps}\n                onTrailingEdge={handleFromTrailingEdge}\n                onTrailingOverflow={handleFromTrailingOverflow}\n                partialTimeAnchorDate={value?.to?.absoluteDate || undefined}\n                onPasteComplete={() => {\n                  dateTimeToRef.current?.focus?.();\n                }}\n              />\n\n              <span className={styles.timeframeSeparator}>\u2192</span>\n              <DateTimeInput\n                ref={dateTimeToRef}\n                className={styles.dateTimeInput}\n                disabled={disabled}\n                readOnly={readOnly}\n                placeholder={placeholder.to}\n                name={name === undefined ? undefined : `${name}-to`}\n                form={_form}\n                // Maintains its own state to separate single and range value manipulations\n                value={value === null ? null : value.to}\n                onChange={(newValue) => {\n                  if (typeof newValue !== 'string') {\n                    setValue({ to: newValue ?? null });\n                  }\n                }}\n                aria-label={dateTimeToLabel}\n                aria-disabled={ariaDisabled}\n                required={required}\n                onLeadingEdge={handleToLeadingEdge}\n                dateOnlyPasteAnchor=\"endOfDay\"\n                partialTimeAnchorDate={value?.from?.absoluteDate || undefined}\n                onPasteComplete={() => {\n                  requestAnimationFrame(() => {\n                    dateTimeToRef.current?.focusLast();\n                  });\n                }}\n              />\n            </span>\n            {!readOnly &&\n              !disabledOrAriaDisabled &&\n              ((value &&\n                (value.from?.value !== '' || value.to?.value !== '')) ||\n                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                    dateTimeFromRef.current?.expressionInputRef?.focus();\n                    setValue(null);\n                    if (dateTimeFromRef.current?.expressionInputRef) {\n                      dateTimeFromRef.current.expressionInputRef.textContent =\n                        '';\n                    }\n                    if (dateTimeToRef.current?.expressionInputRef) {\n                      dateTimeToRef.current.expressionInputRef.textContent = '';\n                    }\n                    setHasInputContent(false);\n                  }}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter') {\n                      e.stopPropagation();\n                    }\n                  }}\n                  className={clearIconButton}\n                  color={showError ? 'critical' : 'neutral'}\n                  size=\"condensed\"\n                  aria-label={clearButtonLabel}\n                >\n                  <XmarkIcon />\n                </Button>\n              )}\n          </Flex>\n          <DateRangeSelector\n            ref={dateRangeSelectorRef}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            error={showError}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n            overlayOwnerId={ownerId}\n          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\n});\n"],
+  "mappings": "AA2tBY,SACE,KADF;AA3tBZ,OAAO,UAAU;AACjB;AAAA,EAEE;AAAA,EAGA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAExB,SAAS,iBAAiB;AAE1B,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAC9B,YAAY,YAAY;AACxB,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,OAEK;AAMP,SAAS,uCAAuC;AAChD,SAAS,cAAc;AACvB,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB;AAC7B,SAAS,aAAa;AAEtB,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AACrB,SAAS,2BAA2B;AACpC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AAEnC,SAAS,mCAAmC;AAC5C,SAAS,+BAA+B;AAExC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAMlC,SAAS,+BAA+B;AACxC,SAAS,iCAAiC;AAC1C,SAAS,0BAA0B;AAanC,SAAS,4BACP,KACA,qBACS;AACT,QAAM,UAAU,IAAI,SAAS;AAC7B,MAAI,CAAC,SAAS;AACZ,WAAO;AAAA,EACT;AAEA,MAAI,QAAQ,SAAS,SAAS,aAAa,GAAG;AAC5C,WAAO;AAAA,EACT;AAEA,QAAM,YAAY,OAAO,aAAa;AACtC,MAAI,aAAa,UAAU,aAAa,KAAK,CAAC,UAAU,aAAa;AACnE,QAAI,UAAU,WAAW,CAAC,EAAE,eAAe,OAAO,GAAG;AACnD,aAAO;AAAA,IACT;AAAA,EACF;AAKA,SACE,CAAC,CAAC,wBACD,QAAQ,SAAS,oBAAoB,UAAU,KAC9C,QAAQ,SAAS,oBAAoB,SAAS;AAEpD;AAEA,SAAS,0BACP,KACM;AACN,QAAM,oBAAoB,IAAI,SAAS;AACvC,MAAI,CAAC,mBAAmB;AACtB;AAAA,EACF;AAEA,oBAAkB,MAAM;AAExB,QAAM,YAAY,OAAO,aAAa;AACtC,MAAI,CAAC,WAAW;AACd;AAAA,EACF;AAEA,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAmB,iBAAiB;AAC1C,QAAM,SAAS,KAAK;AACpB,YAAU,gBAAgB;AAC1B,YAAU,SAAS,KAAK;AAC1B;AAEA,SAAS,uBACP,SACA,WACA,QACQ;AACR,QAAM,QAAQ,SAAS,YAAY;AACnC,QAAM,mBAAmB,OAAO;AAChC,QAAM,OAAO,WAAW,MAAM;AAC9B,SAAO,MAAM,SAAS,EAAE;AAC1B;AAGO,MAAM,0BAA0B,WAiBrC,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,WAAW;AAAA,IACX,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EACnB,IAAI;AACJ,QAAM,CAAC,uBAAuB,IAAI,2BAA2B,cAAc;AAC3E,QAAM,YAAY,qBAAqB,cAAc;AACrD,QAAM,iBAAiB;AAEvB,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,sBAAsB,OAAuB,IAAI;AACvD,QAAM,gBAAgB,OAAyB,IAAI;AACnD,QAAM,uBAAuB,OAA6B,IAAI;AAE9D,QAAM,UAAU,MAAM;AAEtB,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,WAAW;AAAA,IACf,CAAC,UAAU,MAAM;AAAA,EACnB;AACA,QAAM,QAAQ;AAAA,IACZ,CAAC,UAAU,MAAM;AAAA,EACnB;AACA,QAAM,kBAAkB;AAAA,IACtB,CAAC,UAAU,MAAM;AAAA,EACnB;AACA,QAAM,YAAY,4BAA4B,CAAC,UAAU,MAAM,SAAS;AACxE,QAAM,MAAM,4BAA4B,CAAC,UAAU,MAAM,GAAG;AAC5D,QAAM,MAAM,4BAA4B,CAAC,UAAU,MAAM,GAAG;AAC5D,QAAM,eAAe;AAAA,IACnB,CAAC,UAAU,MAAM;AAAA,EACnB;AAEA,QAAM,yBAAyB,YAAY,gBAAgB;AAE3D,QAAM,EAAE,aAAa,gBAAgB,mBAAmB,IACtD,uBAAuB;AAAA,IACrB,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,QAAM,OAAO,QAAQ;AAErB,QAAM,oBAAoB,OAAO,aAAa,cAAc;AAC5D,oBAAkB,UAAU,aAAa;AAIzC,QAAM,yBAAyB,OAAiC,MAAS;AACzE,QAAM,wBAAwB,OAE5B,MAAS;AACX,QAAM,uBAAuB;AAAA,IAA0B,CAAC,UACtD,sBAAsB,UAAU,KAAK;AAAA,EACvC;AAEA,QAAM,uBAAuB;AAAA,IAC3B,CACE,SACA,QACoB;AACpB,UAAI,QAAQ,QAAW;AACrB,eAAO,EAAE,QAAQ,QAAQ,SAAS,QAAQ,CAAC,EAAE;AAAA,MAC/C;AACA,aAAO;AAAA,QACL,gCAAgC,GAAG;AAAA,QACnC;AAAA,QACA,4BAA4B,KAAK,MAAM;AAAA,UACrC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,gBAAgB;AAAA,QAClB,CAAC;AAAA,QACD,KAAK,CAAC,EAAE,IAAI,CAAC;AAAA,MACf;AAAA,IACF;AAAA,IACA,CAAC,MAAM,OAAO,KAAK,KAAK,WAAW,cAAc,EAAE;AAAA,EACrD;AAEA,QAAM,sBAAsB;AAAA,IAC1B;AAAA,IACA,MAAM,qBAAqB,UAAU,YAAY,CAAC;AAAA,EACpD;AAGA;AAAA,IACE;AAAA,IACA,OAA+B;AAAA,MAC7B,SAAS,QAAQ;AAAA,MACjB,UAAU;AAAA,QACR,MAAM,gBAAgB,SAAS;AAAA,QAC/B,IAAI,cAAc,SAAS;AAAA,MAC7B;AAAA,MACA,MAAM,MAAM,qBAAqB,SAAS,KAAK;AAAA,MAC/C,OAAO,MAAM,qBAAqB,SAAS,MAAM;AAAA,MACjD,OAAO,MAAM,gBAAgB,SAAS,QAAQ;AAAA,MAC9C,iBAAiB,OAAO;AAAA,QACtB,MAAM,OAAO,QAAQ;AAAA,QACrB,IAAI,OAAO,MAAM;AAAA,MACnB;AAAA,MACA,WAAW;AACT,+BAAuB,UAAU,SAAS,OAAO,KAAK,KAAK;AAAA,UACzD;AAAA,UACA,aAAa,uBAAuB;AAAA,UACpC;AAAA,UACA,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX;AAAA,QACF,CAAC;AACD,8BAAsB;AAAA,UACpB,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AACD;AAAA,UACE,qBAAqB,UAAU,uBAAuB,OAAO;AAAA,QAC/D;AAAA,MACF;AAAA;AAAA,MAEA,eAAe,YAAY;AACzB,+BAAuB,UAAU,SAAS,OAAO,KAAK,KAAK;AAAA,UACzD;AAAA,UACA,aAAa,uBAAuB;AAAA,UACpC;AAAA,UACA,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX;AAAA,QACF,CAAC;AACD,8BAAsB;AAAA,UACpB,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AACD,eAAO;AAAA,UACL,qBAAqB,UAAU,uBAAuB,OAAO;AAAA,QAC/D;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAIA,QAAM,cAAc;AAAA,IAClB,MACE,SAAS,OAAO,KAAK,KAAK;AAAA,MACxB;AAAA,MACA,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,gBAAgB;AAAA,MAChB,WAAW;AAAA,MACX;AAAA,IACF,CAAC;AAAA,IACH,CAAC,OAAO,KAAK,KAAK,WAAW,cAAc,QAAQ;AAAA,EACrD;AAEA,QAAM,EAAE,oBAAoB,GAAG,oBAAoB,IAAI,kBAAkB;AAAA,IACvE;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,wBAAwB,MAAM,qBAAqB,QAAQ,YAAY,CAAC;AAAA,IACxE;AAAA,EACF,CAAC;AAED,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF,MAAsD;AACpD,UAAI,QAAQ;AACV,8BAAsB;AAAA,UACpB,MAAM,wBAAwB;AAAA,UAC9B,SAAS,EAAE,WAAW,KAAK;AAAA,QAC7B,CAAC;AAAA,MACH;AACA,YAAM,WAAW,YAAY;AAC7B,aAAO,oBAAoB,qBAAqB,SAAS,QAAQ,CAAC;AAAA,IACpE;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,kBAAkB,YAAY,MAAM;AACxC,0BAAsB;AAAA,MACpB,MAAM,wBAAwB;AAAA,MAC9B,SAAS,EAAE,WAAW,MAAM;AAAA,IAC9B,CAAC;AACD,eAAW,OAAO,kBAAkB,SAAS;AAC3C,4BAAsB;AAAA,QACpB,MAAM,wBAAwB;AAAA,QAC9B,SAAS,EAAE,IAAI,IAAI,IAAI,aAAa,SAAS;AAAA,MAC/C,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,mBAAmB,CAAC;AAExB,QAAM,mBAAmB,4BAA4B;AAAA,IACnD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,eAAe;AAAA,IACf;AAAA,IACA,UAAU,MAAM;AAAA,IAChB,OAAO,MAAM,gBAAgB,SAAS,QAAQ;AAAA,IAC9C;AAAA,IACA;AAAA,EACF,CAAC;AACD,wBAAsB,UAAU,iBAAiB;AAGjD,YAAU,MAAM;AACd,wBAAoB,qBAAqB,UAAU,YAAY,CAAC,CAAC;AAAA,EACnE,GAAG,CAAC,OAAO,qBAAqB,sBAAsB,WAAW,CAAC;AAElE,QAAM,EAAE,eAAe,IAAI,aAAa;AAAA,IACtC,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX;AAAA,IACA,OAAO,YAAY,aAAa;AAAA,EAClC,CAAC;AAED,QAAM,oBAAoB,KAAK,cAAc;AAAA,IAC3C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aACE;AAAA,EACJ,CAAC;AAED,QAAM,kBAAkB,KAAK,cAAc;AAAA,IACzC,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,mBAAmB,KAAK,cAAc;AAAA,IAC1C,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AACD,QAAM,+BAA+B;AAAA,IACnC,OAAO;AAAA,MACL,OAAO;AAAA,QACL,gBAAgB,CAAC;AAAA,QACjB,qBAAqB,CAAC;AAAA,QACtB;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,SAAS;AAAA,EACZ;AAEA,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,IAAI;AAAA,IACF;AAAA,IACA,YAAY,MAAM;AAChB,yBAAmB,MAAM,iBAAiB,aAAa;AAAA,IACzD,GAAG,CAAC,eAAe,CAAC;AAAA,IACpB;AAAA,IACA;AAAA,EACF;AAEA,QAAM,YAAY;AAAA,IAChB,CAAC,UAA8C;AAC7C,UAAI,YAAY,UAAU;AACxB,+BAAuB,KAAK;AAC5B;AAAA,MACF;AAGA,YAAM,sBAAsB;AAAA,QAC1B,MAAM;AAAA,MACR;AAEA,YAAM,iBACJ,gBAAgB,SAAS,SAAS,aAAa,gBAAgB,MAC/D;AACF,YAAM,eACJ,cAAc,SAAS,SAAS,aAAa,gBAAgB,MAC7D;AAEF,YAAM,kBACJ,4BAA4B,iBAAiB,mBAAmB,KAChE,4BAA4B,eAAe,mBAAmB;AAGhE,UAAI,mBAAmB,uBAAuB,KAAK,GAAG;AACpD,iBAAS,IAAI;AACb,YAAI,cAAc,SAAS,oBAAoB;AAC7C,wBAAc,QAAQ,mBAAmB,cAAc;AAAA,QACzD;AAAA,MACF;AAEA,YAAM,yBACJ,4BAA4B,iBAAiB,mBAAmB,KAChE;AACF,YAAM,uBACJ,4BAA4B,eAAe,mBAAmB,KAC9D;AACF,UACE,uBAAuB,KAAK,MAC3B,0BAA0B,uBAC3B;AACA,cAAM,OAAO,MAAM;AAInB,cAAM,aAAa,yBACf,kBACA;AAEJ,mBAAW,SAAS,mBAAmB,IAAI;AAE3C,8BAAsB,MAAM;AAC1B,oCAA0B,UAAU;AAAA,QACtC,CAAC;AAED,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB;AAAA,MACF;AAEA,UACE,4BAA4B,iBAAiB,mBAAmB,KAChE,4BAA4B,eAAe,mBAAmB,KAC9D,CAAC,kBACD,CAAC,gBACD,MAAM,IAAI,WAAW,KACrB,CAAC,MAAM,WACP,CAAC,MAAM,WACP,CAAC,MAAM,QACP;AACA,cAAM,OAAO,MAAM;AACnB,cAAM,wBACJ,gBAAgB,SAAS;AAC3B,cAAM,sBAAsB,cAAc,SAAS;AACnD,cAAM,YAAY,OAAO,aAAa;AAEtC,YACE,yBACA,uBACA,aACA,UAAU,aAAa,KACvB,CAAC,UAAU,aACX;AACA,gBAAM,QAAQ,UAAU,WAAW,CAAC;AACpC,gBAAM,YAAY,sBAAsB,eAAe;AACvD,gBAAM,UAAU,oBAAoB,eAAe;AAEnD,gBAAM,YAAY,sBAAsB,SAAS,MAAM,cAAc,IACjE;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,UACR,IACA;AACJ,gBAAM,QAAQ,oBAAoB,SAAS,MAAM,YAAY,IACzD;AAAA,YACE;AAAA,YACA,MAAM;AAAA,YACN,MAAM;AAAA,UACR,IACA,QAAQ;AAEZ,0BAAgB,SAAS;AAAA,YACvB,GAAG,UAAU,MAAM,GAAG,SAAS,CAAC,GAAG,IAAI;AAAA,UACzC;AACA,wBAAc,SAAS,mBAAmB,QAAQ,MAAM,KAAK,CAAC;AAE9D,gCAAsB,MAAM;AAC1B,sCAA0B,eAAe;AAAA,UAC3C,CAAC;AAED,gBAAM,eAAe;AACrB,gBAAM,gBAAgB;AACtB;AAAA,QACF;AAGA,wBAAgB,SAAS,mBAAmB,IAAI;AAEhD,8BAAsB,MAAM;AAC1B,oCAA0B,eAAe;AAAA,QAC3C,CAAC;AAED,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB;AAAA,MACF;AAEA,6BAAuB,KAAK;AAAA,IAC9B;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAGA,QAAM,yBAAyB,YAAY,MAAM;AAC/C,kBAAc,SAAS,QAAQ;AAAA,EACjC,GAAG,CAAC,CAAC;AAGL,QAAM,sBAAsB,YAAY,MAAM;AAC5C,oBAAgB,SAAS,UAAU;AAAA,EACrC,GAAG,CAAC,eAAe,CAAC;AAGpB,QAAM,6BAA6B;AAAA,IACjC,CAAC,iBAAyB;AACxB,YAAM,WAAW,MAAM;AAAA,QACrB,cAAc,SAAS,oBAAoB,OAAO,KAAK,CAAC;AAAA,MAC1D,EAAE,OAAO,CAAC,MAA8B,MAAM,QAAQ,MAAM,MAAS;AAErE,YAAM,eAAe,SAAS,CAAC;AAC/B,UAAI,CAAC,cAAc;AACjB;AAAA,MACF;AAEA,UAAI,OAAO,IAAI,SAAS,gBAAgB,OAAO,OAAO,MAAM;AAC1D,sBAAc,SAAS,mBAAmB,YAAY;AACtD,8BAAsB,MAAM;AAC1B,gBAAM,SAAS,cAAc,SAAS;AACtC,cAAI,QAAQ;AAIV,mBAAO,MAAM;AACb,kBAAM,MAAM,OAAO,aAAa;AAChC,gBAAI,KAAK;AACP,oBAAM,QAAQ,SAAS,YAAY;AACnC,oBAAM,mBAAmB,MAAM;AAC/B,oBAAM,SAAS,KAAK;AACpB,kBAAI,gBAAgB;AACpB,kBAAI,SAAS,KAAK;AAAA,YACpB;AAAA,UACF;AAAA,QACF,CAAC;AACD;AAAA,MACF;AAEA,UAAI,aAAa,SAAS,UAAU;AAClC,qBAAa,UAAU,cAAc,IAAI;AACzC,qBAAa,QAAQ,SAAS,MAAM;AACpC,qBAAa,aAAa,EAAE,OAAO,GAAG,KAAK,GAAG,KAAK,KAAK,CAAC;AAAA,MAC3D;AAAA,IACF;AAAA,IACA,CAAC,OAAO,EAAE;AAAA,EACZ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAc;AAAA,MACd,eAAa;AAAA,MACb,OAAO;AAAA,MACP,WAAW,KAAK,oBAAoB,iBAAiB;AAAA,MACpD,GAAG;AAAA,MACH,GAAG;AAAA,MACJ,qBAAmB;AAAA,MAClB,GAAG;AAAA,MAEJ,8BAAC,wBAAwB,UAAxB,EAAiC,OAAO,8BACvC,+BAAC,cAAW,OAAO,EAAE,qBAAqB,WAAW,GACnD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,WAAW;AAAA,cACT;AAAA,cACA,eAAe;AAAA,gBACb;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA,MAAM;AAAA,cACR,CAAC;AAAA,cACD,UAAU,EAAE,WAAW,OAAO,CAAC;AAAA,cAC/B,YAAY;AAAA,gBACV,OAAO,YAAY,aAAa;AAAA,gBAChC,UAAU;AAAA,gBACV,SAAS;AAAA,cACX,CAAC;AAAA,cACD;AAAA,cACA,OAAO,cAAc;AAAA,gBACnB;AAAA,gBACA,UAAU;AAAA,gBACV;AAAA,cACF,CAAC;AAAA,YACH;AAAA,YACA,eAAe;AAAA,YACf;AAAA,YACA;AAAA,YACA,SAAS,MAAM;AACb;AAAA,gBACE,CAAC,CAAC,gBAAgB,SAAS,oBAAoB,eAC7C,CAAC,CAAC,cAAc,SAAS,oBAAoB;AAAA,cACjD;AAAA,YACF;AAAA,YACA,UAAU,WAAW,SAAY;AAAA,YACjC;AAAA,YACA;AAAA,YACA,kBAAkB,CAAC,MAAM;AAGvB,iCAAmB,CAAC;AAAA,YACtB;AAAA,YACA;AAAA,YACA,SAAS,CAAC,MAAkB;AAI1B,kBAAI,CAAC,QAAQ,SAAS,SAAS,EAAE,aAAa,GAAG;AAC/C,mCAAmB,GAAG,iBAAiB,aAAa;AAAA,cACtD;AAAA,YACF;AAAA,YAEA;AAAA,mCAAC,UAAK,WAAW,OAAO,iBACtB;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL,WAAW,OAAO;AAAA,oBAClB;AAAA,oBACA;AAAA,oBACA,aAAa,YAAY;AAAA,oBACzB,MAAM,SAAS,SAAY,SAAY,GAAG,IAAI;AAAA,oBAC9C,MAAM;AAAA,oBAEN,OAAO,UAAU,OAAO,OAAO,MAAM;AAAA,oBACrC,UAAU,CAAC,aAAa;AACtB,0BAAI,OAAO,aAAa,UAAU;AAChC,iCAAS,EAAE,MAAM,YAAY,KAAK,CAAC;AAAA,sBACrC;AAAA,oBACF;AAAA,oBACA,cAAY;AAAA,oBACZ,iBAAe;AAAA,oBACf;AAAA,oBACA,WAAW;AAAA,oBACX;AAAA,oBACA,gBAAgB;AAAA,oBAChB,oBAAoB;AAAA,oBACpB,uBAAuB,OAAO,IAAI,gBAAgB;AAAA,oBAClD,iBAAiB,MAAM;AACrB,oCAAc,SAAS,QAAQ;AAAA,oBACjC;AAAA;AAAA,gBACF;AAAA,gBAEA,oBAAC,UAAK,WAAW,OAAO,oBAAoB,oBAAC;AAAA,gBAC7C;AAAA,kBAAC;AAAA;AAAA,oBACC,KAAK;AAAA,oBACL,WAAW,OAAO;AAAA,oBAClB;AAAA,oBACA;AAAA,oBACA,aAAa,YAAY;AAAA,oBACzB,MAAM,SAAS,SAAY,SAAY,GAAG,IAAI;AAAA,oBAC9C,MAAM;AAAA,oBAEN,OAAO,UAAU,OAAO,OAAO,MAAM;AAAA,oBACrC,UAAU,CAAC,aAAa;AACtB,0BAAI,OAAO,aAAa,UAAU;AAChC,iCAAS,EAAE,IAAI,YAAY,KAAK,CAAC;AAAA,sBACnC;AAAA,oBACF;AAAA,oBACA,cAAY;AAAA,oBACZ,iBAAe;AAAA,oBACf;AAAA,oBACA,eAAe;AAAA,oBACf,qBAAoB;AAAA,oBACpB,uBAAuB,OAAO,MAAM,gBAAgB;AAAA,oBACpD,iBAAiB,MAAM;AACrB,4CAAsB,MAAM;AAC1B,sCAAc,SAAS,UAAU;AAAA,sBACnC,CAAC;AAAA,oBACH;AAAA;AAAA,gBACF;AAAA,iBACF;AAAA,cACC,CAAC,YACA,CAAC,2BACC,UACC,MAAM,MAAM,UAAU,MAAM,MAAM,IAAI,UAAU,OACjD,oBACA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAS,MAAM;AAIb,oCAAgB,SAAS,oBAAoB,MAAM;AACnD,6BAAS,IAAI;AACb,wBAAI,gBAAgB,SAAS,oBAAoB;AAC/C,sCAAgB,QAAQ,mBAAmB,cACzC;AAAA,oBACJ;AACA,wBAAI,cAAc,SAAS,oBAAoB;AAC7C,oCAAc,QAAQ,mBAAmB,cAAc;AAAA,oBACzD;AACA,uCAAmB,KAAK;AAAA,kBAC1B;AAAA,kBACA,WAAW,CAAC,MAAM;AAChB,wBAAI,EAAE,QAAQ,SAAS;AACrB,wBAAE,gBAAgB;AAAA,oBACpB;AAAA,kBACF;AAAA,kBACA,WAAW;AAAA,kBACX,OAAO,YAAY,aAAa;AAAA,kBAChC,MAAK;AAAA,kBACL,cAAY;AAAA,kBAEZ,8BAAC,aAAU;AAAA;AAAA,cACb;AAAA;AAAA;AAAA,QAEN;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,iBAAe;AAAA,YACf;AAAA,YACA,OAAO;AAAA,YACP,mBAAiB;AAAA,YACjB,oBAAkB;AAAA,YAClB,gBAAgB;AAAA;AAAA,QAClB;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;",
   "names": []
 }

package/esm/forms/form/Form.js CHANGED Viewed

@@ -12,6 +12,7 @@ import {
 import { registerFormById } from "./runtime/formRegistry.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
+import { useId } from "../../core/hooks/useId.js";
 import { useSafeLayoutEffect } from "../../core/hooks/useSafeLayoutEffect.js";
 const EMPTY_VALIDATORS = [];
 function isFormRuntime(value) {
@@ -35,6 +36,7 @@ const FormRoot = /* @__PURE__ */ forwardRef(function Form(props, forwardedRef) {
     "data-testid": dataTestId,
     ...remainingProps
   } = props;
+  const formMessagesId = useId();
   const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
   const ariaLabelingProps = useAriaLabelingProps(restProps);
   const configRef = useRef({
@@ -75,8 +77,8 @@ const FormRoot = /* @__PURE__ */ forwardRef(function Form(props, forwardedRef) {
     return registerFormById(id, runtime);
   }, [id, runtime]);
   const contextValue = useMemo(
-    () => ({ runtime, formId: id }),
-    [runtime, id]
+    () => ({ runtime, formId: id, formMessagesId }),
+    [runtime, id, formMessagesId]
   );
   const handleSubmit = (event) => {
     event.preventDefault();

package/esm/forms/form/Form.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/form/Form.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  type ForwardedRef,\n  type ReactElement,\n  type SyntheticEvent,\n} from 'react';\n\nimport { FormContext, type FormContextValue } from './context/FormContext.js';\nimport type {\n  FormApi,\n  FormInvalidContext,\n  FormSubmitContext,\n  FormValidator,\n} from './form.types.js';\nimport {\n  createFormRuntime,\n  type FormRuntime,\n  type FormRuntimeConfig,\n} from './runtime/createFormRuntime.js';\nimport { registerFormById } from './runtime/formRegistry.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useSafeLayoutEffect } from '../../core/hooks/useSafeLayoutEffect.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport type { ValidationState } from '../validation/types.js';\n\n/**\n * Props for `Form`.\n * @internal\n */\nexport interface FormProps<TValues = Record<string, unknown>>\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Native form id. Required to associate `FormMessages` or a control from\n   * outside the React subtree via `form=\"\u2026\"`; optional otherwise.\n   */\n  id?: string;\n  /** Form-level validators. Receive the full snapshot and may be async. */\n  validators?: FormValidator<TValues>[];\n  /** Called after successful validation on a submit trigger. */\n  onSubmit?: (context: FormSubmitContext<TValues>) => void;\n  /** Called after failed validation on a submit trigger. */\n  onInvalid?: (context: FormInvalidContext<TValues>) => void;\n  /**\n   * Called when the form's aggregate validation state transitions \u2014 validity\n   * flips, or the set of errors changes. Not called on identical recomputations.\n   */\n  onValidityChange?: (state: ValidationState) => void;\n  /**\n   * Pre-built runtime created by `useForm` or `createForm`. When provided,\n   * the form uses this runtime instead of creating its own, so callers outside\n   * the subtree can drive `submit()`, `setError()`, etc. via the same handle.\n   * @internal\n   */\n  form?: FormApi<TValues>;\n}\n\nconst EMPTY_VALIDATORS: FormValidator<never>[] = [];\n\n/**\n * Narrows a `FormApi` (or unknown value) to a full `FormRuntime` by checking\n * for the runtime-only methods (`register`, `subscribe`, `getFormMessages`,\n * `getFieldMessages`). `useForm` / `createForm` return the underlying runtime\n * widened to `FormApi`, so this succeeds for legitimate handles.\n * @internal\n */\nexport function isFormRuntime<TValues = Record<string, unknown>>(\n  value: unknown,\n): value is FormRuntime<TValues> {\n  if (value === null || typeof value !== 'object') {\n    return false;\n  }\n  const candidate = value as Record<string, unknown>;\n  return (\n    typeof candidate.register === 'function' &&\n    typeof candidate.subscribe === 'function' &&\n    typeof candidate.getFormMessages === 'function' &&\n    typeof candidate.getFieldMessages === 'function'\n  );\n}\n\nconst FormRoot = /* @__PURE__ */ forwardRef(function Form<\n  TValues = Record<string, unknown>,\n>(props: FormProps<TValues>, forwardedRef: ForwardedRef<HTMLFormElement>) {\n  const {\n    children,\n    id,\n    form,\n    validators = EMPTY_VALIDATORS as FormValidator<TValues>[],\n    onSubmit,\n    onInvalid,\n    onValidityChange,\n    className,\n    style,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n  // Keep the runtime's view of the latest props current without mutating it\n  // during render: the runtime reads this ref lazily on submit/validate.\n  const configRef = useRef<FormRuntimeConfig<TValues>>({\n    validators: EMPTY_VALIDATORS as FormValidator<TValues>[],\n  });\n  configRef.current = {\n    formId: id,\n    validators,\n    onSubmit,\n    onInvalid,\n    onValidityChange,\n  };\n\n  const externalRuntime = isFormRuntime<TValues>(form) ? form : undefined;\n\n  // Internal runtime is only created when no external `form` is provided.\n  // If the consumer toggles between defined/undefined across renders the active\n  // runtime identity swaps \u2014 this is a deliberate non-goal for the `_`-prefixed\n  // unstable API; avoid doing it.\n  const internalRuntimeRef = useRef<FormRuntime<TValues> | undefined>(\n    undefined,\n  );\n  let runtime: FormRuntime<TValues>;\n  if (externalRuntime !== undefined) {\n    runtime = externalRuntime;\n  } else {\n    internalRuntimeRef.current ??= createFormRuntime<TValues>(\n      () => configRef.current,\n    );\n    runtime = internalRuntimeRef.current;\n  }\n\n  // Wire the Form's config into an externally-provided runtime. useSafeLayoutEffect\n  // fires before child useEffect registrations, so config is live before any\n  // submit/validate can read it. On unmount the binding is cleared.\n  useSafeLayoutEffect(() => {\n    const bindConfig = externalRuntime?._bindConfig;\n    if (!bindConfig) {\n      return;\n    }\n    bindConfig(() => configRef.current);\n    return () => bindConfig(undefined);\n  }, [externalRuntime]);\n\n  // Expose the runtime under its id so out-of-subtree controls can associate.\n  useEffect(() => {\n    if (id === undefined) {\n      return;\n    }\n    return registerFormById(id, runtime as FormRuntime);\n  }, [id, runtime]);\n\n  const contextValue = useMemo<FormContextValue>(\n    () => ({ runtime: runtime as FormRuntime, formId: id }),\n    [runtime, id],\n  );\n\n  const handleSubmit = (event: SyntheticEvent<HTMLFormElement>) => {\n    // We own validation and submission; keep the browser out of both.\n    event.preventDefault();\n    void runtime.submit();\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <form\n        ref={forwardedRef}\n        id={id}\n        noValidate\n        onSubmit={handleSubmit}\n        className={className}\n        style={style}\n        data-testid={dataTestId}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n      >\n        {children}\n      </form>\n    </FormContext.Provider>\n  );\n});\n\n(FormRoot as typeof FormRoot & { displayName: string }).displayName = 'Form';\n\n/**\n * Aggregates the validation state of the `FormField`s it wraps into a single\n * submit / validity flow, without owning any control values.\n * @internal\n */\nexport const Form = FormRoot as <TValues = Record<string, unknown>>(\n  props: FormProps<TValues> & { ref?: ForwardedRef<HTMLFormElement> },\n) => ReactElement;\n"],
-  "mappings": "AAkLM;AAlLN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,mBAA0C;AAOnD;AAAA,EACE;AAAA,OAGK;AACP,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,2BAA2B;AA2CpC,MAAM,mBAA2C,CAAC;AAS3C,SAAS,cACd,OAC+B;AAC/B,MAAI,UAAU,QAAQ,OAAO,UAAU,UAAU;AAC/C,WAAO;AAAA,EACT;AACA,QAAM,YAAY;AAClB,SACE,OAAO,UAAU,aAAa,cAC9B,OAAO,UAAU,cAAc,cAC/B,OAAO,UAAU,oBAAoB,cACrC,OAAO,UAAU,qBAAqB;AAE1C;AAEA,MAAM,WAA2B,2BAAW,SAAS,KAEnD,OAA2B,cAA6C;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AAIxD,QAAM,YAAY,OAAmC;AAAA,IACnD,YAAY;AAAA,EACd,CAAC;AACD,YAAU,UAAU;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,cAAuB,IAAI,IAAI,OAAO;AAM9D,QAAM,qBAAqB;AAAA,IACzB;AAAA,EACF;AACA,MAAI;AACJ,MAAI,oBAAoB,QAAW;AACjC,cAAU;AAAA,EACZ,OAAO;AACL,uBAAmB,YAAY;AAAA,MAC7B,MAAM,UAAU;AAAA,IAClB;AACA,cAAU,mBAAmB;AAAA,EAC/B;AAKA,sBAAoB,MAAM;AACxB,UAAM,aAAa,iBAAiB;AACpC,QAAI,CAAC,YAAY;AACf;AAAA,IACF;AACA,eAAW,MAAM,UAAU,OAAO;AAClC,WAAO,MAAM,WAAW,MAAS;AAAA,EACnC,GAAG,CAAC,eAAe,CAAC;AAGpB,YAAU,MAAM;AACd,QAAI,OAAO,QAAW;AACpB;AAAA,IACF;AACA,WAAO,iBAAiB,IAAI,OAAsB;AAAA,EACpD,GAAG,CAAC,IAAI,OAAO,CAAC;AAEhB,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,SAAiC,QAAQ,GAAG;AAAA,IACrD,CAAC,SAAS,EAAE;AAAA,EACd;AAEA,QAAM,eAAe,CAAC,UAA2C;AAE/D,UAAM,eAAe;AACrB,SAAK,QAAQ,OAAO;AAAA,EACtB;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,cAC3B;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,YAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,SAAuD,cAAc;AAO/D,MAAMA,QAAO;",
+  "sourcesContent": ["import {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  type ForwardedRef,\n  type ReactElement,\n  type SyntheticEvent,\n} from 'react';\n\nimport { FormContext, type FormContextValue } from './context/FormContext.js';\nimport type {\n  FormApi,\n  FormInvalidContext,\n  FormSubmitContext,\n  FormValidator,\n} from './form.types.js';\nimport {\n  createFormRuntime,\n  type FormRuntime,\n  type FormRuntimeConfig,\n} from './runtime/createFormRuntime.js';\nimport { registerFormById } from './runtime/formRegistry.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { useSafeLayoutEffect } from '../../core/hooks/useSafeLayoutEffect.js';\nimport type { AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport type { ValidationState } from '../validation/types.js';\n\n/**\n * Props for `Form`.\n * @internal\n */\nexport interface FormProps<TValues = Record<string, unknown>>\n  extends WithChildren,\n    StylingProps,\n    DataTestId,\n    AriaLabelingProps,\n    BehaviorTrackingProps {\n  /**\n   * Native form id. Required to associate `FormMessages` or a control from\n   * outside the React subtree via `form=\"\u2026\"`; optional otherwise.\n   */\n  id?: string;\n  /** Form-level validators. Receive the full snapshot and may be async. */\n  validators?: FormValidator<TValues>[];\n  /** Called after successful validation on a submit trigger. */\n  onSubmit?: (context: FormSubmitContext<TValues>) => void;\n  /** Called after failed validation on a submit trigger. */\n  onInvalid?: (context: FormInvalidContext<TValues>) => void;\n  /**\n   * Called when the form's aggregate validation state transitions \u2014 validity\n   * flips, or the set of errors changes. Not called on identical recomputations.\n   */\n  onValidityChange?: (state: ValidationState) => void;\n  /**\n   * Pre-built runtime created by `useForm` or `createForm`. When provided,\n   * the form uses this runtime instead of creating its own, so callers outside\n   * the subtree can drive `submit()`, `setError()`, etc. via the same handle.\n   * @internal\n   */\n  form?: FormApi<TValues>;\n}\n\nconst EMPTY_VALIDATORS: FormValidator<never>[] = [];\n\n/**\n * Narrows a `FormApi` (or unknown value) to a full `FormRuntime` by checking\n * for the runtime-only methods (`register`, `subscribe`, `getFormMessages`,\n * `getFieldMessages`). `useForm` / `createForm` return the underlying runtime\n * widened to `FormApi`, so this succeeds for legitimate handles.\n * @internal\n */\nexport function isFormRuntime<TValues = Record<string, unknown>>(\n  value: unknown,\n): value is FormRuntime<TValues> {\n  if (value === null || typeof value !== 'object') {\n    return false;\n  }\n  const candidate = value as Record<string, unknown>;\n  return (\n    typeof candidate.register === 'function' &&\n    typeof candidate.subscribe === 'function' &&\n    typeof candidate.getFormMessages === 'function' &&\n    typeof candidate.getFieldMessages === 'function'\n  );\n}\n\nconst FormRoot = /* @__PURE__ */ forwardRef(function Form<\n  TValues = Record<string, unknown>,\n>(props: FormProps<TValues>, forwardedRef: ForwardedRef<HTMLFormElement>) {\n  const {\n    children,\n    id,\n    form,\n    validators = EMPTY_VALIDATORS as FormValidator<TValues>[],\n    onSubmit,\n    onInvalid,\n    onValidityChange,\n    className,\n    style,\n    'data-testid': dataTestId,\n    ...remainingProps\n  } = props;\n\n  const formMessagesId = useId();\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n  const ariaLabelingProps = useAriaLabelingProps(restProps);\n\n  // Keep the runtime's view of the latest props current without mutating it\n  // during render: the runtime reads this ref lazily on submit/validate.\n  const configRef = useRef<FormRuntimeConfig<TValues>>({\n    validators: EMPTY_VALIDATORS as FormValidator<TValues>[],\n  });\n  configRef.current = {\n    formId: id,\n    validators,\n    onSubmit,\n    onInvalid,\n    onValidityChange,\n  };\n\n  const externalRuntime = isFormRuntime<TValues>(form) ? form : undefined;\n\n  // Internal runtime is only created when no external `form` is provided.\n  // If the consumer toggles between defined/undefined across renders the active\n  // runtime identity swaps \u2014 this is a deliberate non-goal for the `_`-prefixed\n  // unstable API; avoid doing it.\n  const internalRuntimeRef = useRef<FormRuntime<TValues> | undefined>(\n    undefined,\n  );\n  let runtime: FormRuntime<TValues>;\n  if (externalRuntime !== undefined) {\n    runtime = externalRuntime;\n  } else {\n    internalRuntimeRef.current ??= createFormRuntime<TValues>(\n      () => configRef.current,\n    );\n    runtime = internalRuntimeRef.current;\n  }\n\n  // Wire the Form's config into an externally-provided runtime. useSafeLayoutEffect\n  // fires before child useEffect registrations, so config is live before any\n  // submit/validate can read it. On unmount the binding is cleared.\n  useSafeLayoutEffect(() => {\n    const bindConfig = externalRuntime?._bindConfig;\n    if (!bindConfig) {\n      return;\n    }\n    bindConfig(() => configRef.current);\n    return () => bindConfig(undefined);\n  }, [externalRuntime]);\n\n  // Expose the runtime under its id so out-of-subtree controls can associate.\n  useEffect(() => {\n    if (id === undefined) {\n      return;\n    }\n    return registerFormById(id, runtime as FormRuntime);\n  }, [id, runtime]);\n\n  const contextValue = useMemo<FormContextValue>(\n    () => ({ runtime: runtime as FormRuntime, formId: id, formMessagesId }),\n    [runtime, id, formMessagesId],\n  );\n\n  const handleSubmit = (event: SyntheticEvent<HTMLFormElement>) => {\n    // We own validation and submission; keep the browser out of both.\n    event.preventDefault();\n    void runtime.submit();\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <form\n        ref={forwardedRef}\n        id={id}\n        noValidate\n        onSubmit={handleSubmit}\n        className={className}\n        style={style}\n        data-testid={dataTestId}\n        {...ariaLabelingProps}\n        {...behavioralTrackingProps}\n      >\n        {children}\n      </form>\n    </FormContext.Provider>\n  );\n});\n\n(FormRoot as typeof FormRoot & { displayName: string }).displayName = 'Form';\n\n/**\n * Aggregates the validation state of the `FormField`s it wraps into a single\n * submit / validity flow, without owning any control values.\n * @internal\n */\nexport const Form = FormRoot as <TValues = Record<string, unknown>>(\n  props: FormProps<TValues> & { ref?: ForwardedRef<HTMLFormElement> },\n) => ReactElement;\n"],
+  "mappings": "AAqLM;AArLN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAEP,SAAS,mBAA0C;AAOnD;AAAA,EACE;AAAA,OAGK;AACP,SAAS,wBAAwB;AACjC,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AACtB,SAAS,2BAA2B;AA2CpC,MAAM,mBAA2C,CAAC;AAS3C,SAAS,cACd,OAC+B;AAC/B,MAAI,UAAU,QAAQ,OAAO,UAAU,UAAU;AAC/C,WAAO;AAAA,EACT;AACA,QAAM,YAAY;AAClB,SACE,OAAO,UAAU,aAAa,cAC9B,OAAO,UAAU,cAAc,cAC/B,OAAO,UAAU,oBAAoB,cACrC,OAAO,UAAU,qBAAqB;AAE1C;AAEA,MAAM,WAA2B,2BAAW,SAAS,KAEnD,OAA2B,cAA6C;AACxE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,iBAAiB,MAAM;AAE7B,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAC3C,QAAM,oBAAoB,qBAAqB,SAAS;AAIxD,QAAM,YAAY,OAAmC;AAAA,IACnD,YAAY;AAAA,EACd,CAAC;AACD,YAAU,UAAU;AAAA,IAClB,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAEA,QAAM,kBAAkB,cAAuB,IAAI,IAAI,OAAO;AAM9D,QAAM,qBAAqB;AAAA,IACzB;AAAA,EACF;AACA,MAAI;AACJ,MAAI,oBAAoB,QAAW;AACjC,cAAU;AAAA,EACZ,OAAO;AACL,uBAAmB,YAAY;AAAA,MAC7B,MAAM,UAAU;AAAA,IAClB;AACA,cAAU,mBAAmB;AAAA,EAC/B;AAKA,sBAAoB,MAAM;AACxB,UAAM,aAAa,iBAAiB;AACpC,QAAI,CAAC,YAAY;AACf;AAAA,IACF;AACA,eAAW,MAAM,UAAU,OAAO;AAClC,WAAO,MAAM,WAAW,MAAS;AAAA,EACnC,GAAG,CAAC,eAAe,CAAC;AAGpB,YAAU,MAAM;AACd,QAAI,OAAO,QAAW;AACpB;AAAA,IACF;AACA,WAAO,iBAAiB,IAAI,OAAsB;AAAA,EACpD,GAAG,CAAC,IAAI,OAAO,CAAC;AAEhB,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,SAAiC,QAAQ,IAAI,eAAe;AAAA,IACrE,CAAC,SAAS,IAAI,cAAc;AAAA,EAC9B;AAEA,QAAM,eAAe,CAAC,UAA2C;AAE/D,UAAM,eAAe;AACrB,SAAK,QAAQ,OAAO;AAAA,EACtB;AAEA,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,cAC3B;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,YAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,eAAa;AAAA,MACZ,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAEA,SAAuD,cAAc;AAO/D,MAAMA,QAAO;",
   "names": ["Form"]
 }

package/esm/forms/form/FormMessages.js CHANGED Viewed

@@ -25,6 +25,7 @@ const FormMessages = /* @__PURE__ */ forwardRef(
     } = props;
     const [behavioralTrackingProps, extraProps] = useBehavioralTrackingProps(remainingProps);
     const context = useContext(FormContext);
+    const formMessagesId = context?.formMessagesId;
     const byIdRuntime = useSyncExternalStore(
       form ? (listener) => subscribeToFormById(form, listener) : noopSubscribe,
       () => form ? getFormById(form) : void 0
@@ -46,6 +47,7 @@ const FormMessages = /* @__PURE__ */ forwardRef(
       `${error.validityStateKey.toString()}:${error.message}`
     ));
     const commonProps = {
+      id: formMessagesId,
       "aria-live": "polite",
       className,
       style,

package/esm/forms/form/FormMessages.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/form/FormMessages.tsx"],
-  "sourcesContent": ["import {\n  type ElementType,\n  type Ref,\n  type ReactElement,\n  forwardRef,\n  useContext,\n  useSyncExternalStore,\n} from 'react';\n\nimport { FormContext } from './context/FormContext.js';\nimport { getFormById, subscribeToFormById } from './runtime/formRegistry.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { Container } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { ValidationError } from '../validation/types.js';\n\n/**\n * Own props for `FormMessages`, independent of the wrapper element.\n * @internal\n */\nexport type FormMessagesOwnProps = StylingProps &\n  DataTestId &\n  BehaviorTrackingProps & {\n    /**\n     * Associates with a `<Form>` by id when rendered outside its subtree (same\n     * pattern as a native `<control form=\"\u2026\">`). Reads the nearest `<Form>` via\n     * context when omitted.\n     */\n    form?: string;\n  };\n\n/**\n * Props for `FormMessages`. Defaults to a `Container` wrapper; pass `as` to\n * swap the wrapper element and take full control of layout and styling.\n * @internal\n */\nexport type FormMessagesProps<E extends ElementType = typeof Container> =\n  PolymorphicComponentProps<E, FormMessagesOwnProps>;\n\nconst EMPTY_MESSAGES: ValidationError[] = [];\nconst noopSubscribe = () => () => undefined;\nconst getEmptyMessages = () => EMPTY_MESSAGES;\n\n/**\n * Renders the form-wide errors (`FormValidationError`) of the enclosing \u2014 or\n * `form`-associated \u2014 `<Form>`. Field errors render in each field's\n * `FormFieldMessages`, never here.\n *\n * By default wraps errors in a `Container` with `color=\"critical\"` and\n * `variant=\"default\"`. Pass `as` to replace the wrapper entirely and take full\n * control of layout and styling (e.g. `as={Flex}`).\n * @internal\n */\nexport const FormMessages: <E extends ElementType = typeof Container>(\n  props: FormMessagesProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: FormMessagesProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      as,\n      form,\n      className,\n      style,\n      'data-testid': dataTestId,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, extraProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const context = useContext(FormContext);\n    const byIdRuntime = useSyncExternalStore(\n      form ? (listener) => subscribeToFormById(form, listener) : noopSubscribe,\n      () => (form ? getFormById(form) : undefined),\n    );\n    const runtime = context?.runtime ?? byIdRuntime;\n\n    const messages = useSyncExternalStore(\n      runtime?.subscribe ?? noopSubscribe,\n      runtime?.getFormMessages ?? getEmptyMessages,\n    );\n\n    if (messages.length === 0) {\n      return null;\n    }\n\n    const items = messages.map((error) => (\n      <BaseItem\n        key={`${error.validityStateKey.toString()}:${error.message}`}\n        variant=\"error\"\n      >\n        {error.message}\n      </BaseItem>\n    ));\n\n    const commonProps = {\n      'aria-live': 'polite' as const,\n      className,\n      style,\n      'data-testid': dataTestId,\n      ...behavioralTrackingProps,\n    };\n\n    if (as !== undefined && as !== null) {\n      const Wrapper = as as ElementType;\n      return (\n        <Wrapper\n          ref={forwardedRef}\n          {...(extraProps as object)}\n          {...commonProps}\n        >\n          {items}\n        </Wrapper>\n      );\n    }\n\n    return (\n      <Container\n        ref={forwardedRef as unknown as Ref<HTMLDivElement>}\n        color=\"critical\"\n        variant=\"default\"\n        padding={8}\n        {...(extraProps as object)}\n        {...commonProps}\n      >\n        <Flex flexDirection=\"column\" gap={4}>\n          {items}\n        </Flex>\n      </Container>\n    );\n  },\n);\n\n(FormMessages as typeof FormMessages & { displayName: string }).displayName =\n  'FormMessages';\n"],
-  "mappings": "AA8FM;AA9FN;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAS,aAAa,2BAA2B;AACjD,SAAS,kCAAkC;AAK3C,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,oBAAoB,gBAAgB;AA0B7C,MAAM,iBAAoC,CAAC;AAC3C,MAAM,gBAAgB,MAAM,MAAM;AAClC,MAAM,mBAAmB,MAAM;AAYxB,MAAM,eAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,UAAU,IACxC,2BAA2B,cAAc;AAE3C,UAAM,UAAU,WAAW,WAAW;AACtC,UAAM,cAAc;AAAA,MAClB,OAAO,CAAC,aAAa,oBAAoB,MAAM,QAAQ,IAAI;AAAA,MAC3D,MAAO,OAAO,YAAY,IAAI,IAAI;AAAA,IACpC;AACA,UAAM,UAAU,SAAS,WAAW;AAEpC,UAAM,WAAW;AAAA,MACf,SAAS,aAAa;AAAA,MACtB,SAAS,mBAAmB;AAAA,IAC9B;AAEA,QAAI,SAAS,WAAW,GAAG;AACzB,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,SAAS,IAAI,CAAC,UAC1B;AAAA,MAAC;AAAA;AAAA,QAEC,SAAQ;AAAA,QAEP,gBAAM;AAAA;AAAA,MAHF,GAAG,MAAM,iBAAiB,SAAS,CAAC,IAAI,MAAM,OAAO;AAAA,IAI5D,CACD;AAED,UAAM,cAAc;AAAA,MAClB,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,GAAG;AAAA,IACL;AAEA,QAAI,OAAO,UAAa,OAAO,MAAM;AACnC,YAAM,UAAU;AAChB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACJ,GAAI;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAI;AAAA,QACJ,GAAG;AAAA,QAEJ,8BAAC,QAAK,eAAc,UAAS,KAAK,GAC/B,iBACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;",
+  "sourcesContent": ["import {\n  type ElementType,\n  type Ref,\n  type ReactElement,\n  forwardRef,\n  useContext,\n  useSyncExternalStore,\n} from 'react';\n\nimport { FormContext } from './context/FormContext.js';\nimport { getFormById, subscribeToFormById } from './runtime/formRegistry.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../core/types/data-props.js';\nimport type { PolymorphicComponentProps } from '../../core/types/polymorph.js';\nimport type { StylingProps } from '../../core/types/styling-props.js';\nimport { Container } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport type { ValidationError } from '../validation/types.js';\n\n/**\n * Own props for `FormMessages`, independent of the wrapper element.\n * @internal\n */\nexport type FormMessagesOwnProps = StylingProps &\n  DataTestId &\n  BehaviorTrackingProps & {\n    /**\n     * Associates with a `<Form>` by id when rendered outside its subtree (same\n     * pattern as a native `<control form=\"\u2026\">`). Reads the nearest `<Form>` via\n     * context when omitted.\n     */\n    form?: string;\n  };\n\n/**\n * Props for `FormMessages`. Defaults to a `Container` wrapper; pass `as` to\n * swap the wrapper element and take full control of layout and styling.\n * @internal\n */\nexport type FormMessagesProps<E extends ElementType = typeof Container> =\n  PolymorphicComponentProps<E, FormMessagesOwnProps>;\n\nconst EMPTY_MESSAGES: ValidationError[] = [];\nconst noopSubscribe = () => () => undefined;\nconst getEmptyMessages = () => EMPTY_MESSAGES;\n\n/**\n * Renders the form-wide errors (`FormValidationError`) of the enclosing \u2014 or\n * `form`-associated \u2014 `<Form>`. Field errors render in each field's\n * `FormFieldMessages`, never here.\n *\n * By default wraps errors in a `Container` with `color=\"critical\"` and\n * `variant=\"default\"`. Pass `as` to replace the wrapper entirely and take full\n * control of layout and styling (e.g. `as={Flex}`).\n * @internal\n */\nexport const FormMessages: <E extends ElementType = typeof Container>(\n  props: FormMessagesProps<E>,\n) => ReactElement | null = /* @__PURE__ */ forwardRef(\n  <E extends ElementType>(\n    props: FormMessagesProps<E>,\n    forwardedRef: typeof props.ref,\n  ) => {\n    const {\n      as,\n      form,\n      className,\n      style,\n      'data-testid': dataTestId,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, extraProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const context = useContext(FormContext);\n    const formMessagesId = context?.formMessagesId;\n    const byIdRuntime = useSyncExternalStore(\n      form ? (listener) => subscribeToFormById(form, listener) : noopSubscribe,\n      () => (form ? getFormById(form) : undefined),\n    );\n    const runtime = context?.runtime ?? byIdRuntime;\n\n    const messages = useSyncExternalStore(\n      runtime?.subscribe ?? noopSubscribe,\n      runtime?.getFormMessages ?? getEmptyMessages,\n    );\n\n    if (messages.length === 0) {\n      return null;\n    }\n\n    const items = messages.map((error) => (\n      <BaseItem\n        key={`${error.validityStateKey.toString()}:${error.message}`}\n        variant=\"error\"\n      >\n        {error.message}\n      </BaseItem>\n    ));\n\n    const commonProps = {\n      id: formMessagesId,\n      'aria-live': 'polite' as const,\n      className,\n      style,\n      'data-testid': dataTestId,\n      ...behavioralTrackingProps,\n    };\n\n    if (as !== undefined && as !== null) {\n      const Wrapper = as as ElementType;\n      return (\n        <Wrapper\n          ref={forwardedRef}\n          {...(extraProps as object)}\n          {...commonProps}\n        >\n          {items}\n        </Wrapper>\n      );\n    }\n\n    return (\n      <Container\n        ref={forwardedRef as unknown as Ref<HTMLDivElement>}\n        color=\"critical\"\n        variant=\"default\"\n        padding={8}\n        {...(extraProps as object)}\n        {...commonProps}\n      >\n        <Flex flexDirection=\"column\" gap={4}>\n          {items}\n        </Flex>\n      </Container>\n    );\n  },\n);\n\n(FormMessages as typeof FormMessages & { displayName: string }).displayName =\n  'FormMessages';\n"],
+  "mappings": "AA+FM;AA/FN;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,mBAAmB;AAC5B,SAAS,aAAa,2BAA2B;AACjD,SAAS,kCAAkC;AAK3C,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AACrB,SAAS,oBAAoB,gBAAgB;AA0B7C,MAAM,iBAAoC,CAAC;AAC3C,MAAM,gBAAgB,MAAM,MAAM;AAClC,MAAM,mBAAmB,MAAM;AAYxB,MAAM,eAE8B;AAAA,EACzC,CACE,OACA,iBACG;AACH,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,CAAC,yBAAyB,UAAU,IACxC,2BAA2B,cAAc;AAE3C,UAAM,UAAU,WAAW,WAAW;AACtC,UAAM,iBAAiB,SAAS;AAChC,UAAM,cAAc;AAAA,MAClB,OAAO,CAAC,aAAa,oBAAoB,MAAM,QAAQ,IAAI;AAAA,MAC3D,MAAO,OAAO,YAAY,IAAI,IAAI;AAAA,IACpC;AACA,UAAM,UAAU,SAAS,WAAW;AAEpC,UAAM,WAAW;AAAA,MACf,SAAS,aAAa;AAAA,MACtB,SAAS,mBAAmB;AAAA,IAC9B;AAEA,QAAI,SAAS,WAAW,GAAG;AACzB,aAAO;AAAA,IACT;AAEA,UAAM,QAAQ,SAAS,IAAI,CAAC,UAC1B;AAAA,MAAC;AAAA;AAAA,QAEC,SAAQ;AAAA,QAEP,gBAAM;AAAA;AAAA,MAHF,GAAG,MAAM,iBAAiB,SAAS,CAAC,IAAI,MAAM,OAAO;AAAA,IAI5D,CACD;AAED,UAAM,cAAc;AAAA,MAClB,IAAI;AAAA,MACJ,aAAa;AAAA,MACb;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,GAAG;AAAA,IACL;AAEA,QAAI,OAAO,UAAa,OAAO,MAAM;AACnC,YAAM,UAAU;AAChB,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACJ,GAAI;AAAA,UACJ,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,OAAM;AAAA,QACN,SAAQ;AAAA,QACR,SAAS;AAAA,QACR,GAAI;AAAA,QACJ,GAAG;AAAA,QAEJ,8BAAC,QAAK,eAAc,UAAS,KAAK,GAC/B,iBACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEC,aAA+D,cAC9D;",
   "names": []
 }

package/esm/forms/form/context/FormContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/form/context/FormContext.ts"],
-  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { FormRuntime } from '../runtime/createFormRuntime.js';\n\n/**\n * Carries the enclosing form runtime down to the controls that register with\n * it. `undefined` when a control is rendered outside any `<Form>` \u2014 controls\n * degrade gracefully to standalone behavior in that case.\n * @internal\n */\nexport interface FormContextValue {\n  /** The runtime the nearest `<Form>` created. */\n  runtime: FormRuntime;\n  /** The nearest `<Form>`'s `id`, if it set one. */\n  formId?: string;\n}\n\n/**\n * @internal\n */\nexport const FormContext = createContext<FormContextValue | undefined>(\n  undefined,\n);\n"],
-  "mappings": "AAAA,SAAS,qBAAqB;AAoBvB,MAAM,cAAc;AAAA,EACzB;AACF;",
+  "sourcesContent": ["import { createContext } from 'react';\n\nimport type { FormRuntime } from '../runtime/createFormRuntime.js';\n\n/**\n * Carries the enclosing form runtime down to the controls that register with\n * it. `undefined` when a control is rendered outside any `<Form>` \u2014 controls\n * degrade gracefully to standalone behavior in that case.\n * @internal\n */\nexport interface FormContextValue {\n  /** The runtime the nearest `<Form>` created. */\n  runtime: FormRuntime;\n  /** The nearest `<Form>`'s `id`, if it set one. */\n  formId?: string;\n  /** Stable ID shared with `FormMessages` so fields can point aria-describedby at it. */\n  formMessagesId: string;\n}\n\n/**\n * @internal\n */\nexport const FormContext = createContext<FormContextValue | undefined>(\n  undefined,\n);\n"],
+  "mappings": "AAAA,SAAS,qBAAqB;AAsBvB,MAAM,cAAc;AAAA,EACzB;AACF;",
   "names": []
 }

package/esm/forms/forms-core/components/field-set/FieldSet.css CHANGED Viewed

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

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

@@ -1,6 +1,6 @@
 import "./FieldSet.css";
-var fieldset = "_1dphm0f0-3-11-3";
-var legend = "_1dphm0f1-3-11-3";
+var fieldset = "_1dphm0f0-3-12-0";
+var legend = "_1dphm0f1-3-12-0";
 export {
   fieldset,
   legend

package/esm/forms/forms-core/components/field-set/FieldSet.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/field-set/FieldSet.css.ts"],
-  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-11-3';\nexport var legend = '_1dphm0f1-3-11-3';"],
+  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-12-0';\nexport var legend = '_1dphm0f1-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,SAAS;",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./FormField.css";
-var formField = "_mvcxum0-3-11-3";
+var formField = "_mvcxum0-3-12-0";
 export {
   formField
 };

package/esm/forms/forms-core/components/form-field/FormField.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormField.css.ts"],
-  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-11-3';"],
+  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-12-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field/FormFieldMessageContextProvider.js CHANGED Viewed

@@ -2,11 +2,13 @@ import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
   useCallback,
+  useContext,
   useEffect,
   useReducer,
   useMemo
 } from "react";
 import { useId } from "../../../../core/hooks/useId.js";
+import { FormContext } from "../../../form/context/FormContext.js";
 import { FormFieldMessageContext } from "../../contexts/FormFieldMessageContext.js";
 import { useFormFieldContext } from "../../hooks/useFormFieldContext.js";
 import { useFormFieldMessagesContext } from "../../hooks/useFormFieldMessagesContext.js";
@@ -16,6 +18,8 @@ import {
 } from "../../state/formfield-messages-state-reducer.js";
 const FormFieldMessageContextProvider = (formFieldProps) => {
   const generatedId = useId();
+  const messagesContainerId = useId();
+  const formContext = useContext(FormContext);
   const {
     children,
     id: propId = generatedId,
@@ -75,15 +79,26 @@ const FormFieldMessageContextProvider = (formFieldProps) => {
       state: {
         ...state,
         showError: (propShowError ?? false) || state.showError
-      }
+      },
+      fieldMessagesContainerId: messagesContainerId,
+      formMessagesContainerId: formContext?.formMessagesId,
+      // A control can route its native/Strato messages to the form-wide outlet via
+      // `_messageTarget`. When the field is not among the targets, those messages are
+      // dropped from the inline render here (a pure render-time filter, so they never
+      // flash inline first). Validity is unaffected, and consumer-authored errors
+      // (source 'custom') always stay at the field. With no enclosing <Form>, 'form'
+      // falls back to the field, so nothing is suppressed.
+      routesAwayFromField: formContext !== void 0 && state.messageTarget !== void 0 && !state.messageTarget.includes("field")
     }),
     [
+      formContext,
       formFieldState.disabled,
       legacyFormFieldId,
       propDisabled,
       dispatch,
       state,
-      propShowError
+      propShowError,
+      messagesContainerId
     ]
   );
   return /* @__PURE__ */ jsx(FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children });

package/esm/forms/forms-core/components/form-field/FormFieldMessageContextProvider.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormFieldMessageContextProvider.tsx"],
-  "sourcesContent": ["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useReducer,\n  type JSXElementConstructor,\n  type ComponentProps,\n  useMemo,\n} from 'react';\n\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { FormFieldMessageContext } from '../../contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../state/formfield-messages-state-reducer.js';\nimport type { FormFieldMessageContextState } from '../../types/formfield-messages.types.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\ntype FormFieldMessageContextProviderProps = WithChildren &\n  DOMProps &\n  Pick<SharedFormFieldProps, 'disabled'> & {\n    /** interim solution for the segmentSelector until we introduce proper group errors. */\n    showError?: boolean;\n  };\n\n/**\n * Provides the FormFieldMessages context and handles default values properly, to easily reuse it when needed.\n * @internal\n */\nexport const FormFieldMessageContextProvider = /* @__PURE__ */ (\n  formFieldProps: FormFieldMessageContextProviderProps,\n) => {\n  const generatedId = useId();\n  const {\n    children,\n    id: propId = generatedId,\n    disabled: propDisabled,\n    showError: propShowError,\n  }: FormFieldMessageContextProviderProps = formFieldProps;\n\n  const formFieldState = useFormFieldContext();\n\n  const formFieldMessageReducerCB = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [],\n  );\n\n  const legacyFormFieldId =\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    formFieldState.formFieldId ?? formFieldState.controlId ?? propId;\n\n  const [state, dispatch] = useReducer(formFieldMessageReducerCB, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: false,\n    isTouched: false,\n    isValid: undefined,\n    formFieldId: legacyFormFieldId,\n    formControlId: formFieldState.formControlId ?? legacyFormFieldId,\n    memberFormControlIds: formFieldState.memberFormControlIds,\n  });\n\n  const memberFormControlIdsKey =\n    formFieldState.memberFormControlIds.join('\\u0000');\n\n  useEffect(() => {\n    if (formFieldState.formControlId === undefined) {\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.SETFORMCONTROLID,\n      payload: { formControlId: formFieldState.formControlId },\n    });\n  }, [formFieldState.formControlId]);\n\n  useEffect(() => {\n    for (const formControlId of formFieldState.memberFormControlIds) {\n      dispatch({\n        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,\n        payload: { formControlId },\n      });\n    }\n\n    return () => {\n      for (const formControlId of formFieldState.memberFormControlIds) {\n        dispatch({\n          type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,\n          payload: { formControlId },\n        });\n      }\n    };\n    // memberFormControlIdsKey captures the actual id list while avoiding an\n    // effect loop from the context array identity changing after each registration.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [memberFormControlIdsKey]);\n\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      disabled: formFieldState.disabled || propDisabled,\n      controlId: legacyFormFieldId,\n      dispatch,\n      state: {\n        ...state,\n        showError: (propShowError ?? false) || state.showError,\n      },\n    }),\n    [\n      formFieldState.disabled,\n      legacyFormFieldId,\n      propDisabled,\n      dispatch,\n      state,\n      propShowError,\n    ],\n  );\n\n  return (\n    <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n      {children}\n    </FormFieldMessageContext.Provider>\n  );\n};\n\n/**\n * Function to ensure that a component with props that have generics in their type is always wrapped within a `MessageContextProvider`\n * for form validation outside of a `FormField`.\n * @internal\n */\nexport function withFormFieldMessageContextProviderWithGenerics<\n  ComponentType extends JSXElementConstructor<\n    FormControlBaseProps<TOnChange, TFocusElement>\n  >,\n  TFocusElement extends Element = Element,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TOnChange extends (...args: any[]) => void = (...args: any[]) => void,\n>(OriginalComponent: ComponentType) {\n  type Props = ComponentProps<ComponentType>;\n  type RefType = Props extends { ref?: infer R } ? R : never;\n\n  const WrappedComponent = forwardRef<RefType, Props>((props, forwardedRef) => {\n    const { dispatch } = useFormFieldMessagesContext();\n\n    if (dispatch !== undefined) {\n      // the cast to any was necessary because the RefType and Props type cannot be easily/correctly inferred when we have generics\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return <OriginalComponent ref={forwardedRef} {...(props as any)} />;\n    }\n\n    const { disabled, id } = props;\n\n    return (\n      <FormFieldMessageContextProvider disabled={disabled} id={id}>\n        {/* the cast to any was necessary because the RefType and Props type cannot be easily/correctly inferred when we have generics */}\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <OriginalComponent ref={forwardedRef} {...(props as any)} />\n      </FormFieldMessageContextProvider>\n    );\n  });\n\n  // The cast ensures the returned component retains generics when used in JSX\n  return WrappedComponent as ComponentType;\n}\n\n/**\n * Function to ensure that an element is always wrapped within a MessageContextProvider for form validation outside of a `FormField`.\n * @internal\n */\nexport function withFormFieldMessageContextProvider<\n  PropType extends FormControlBaseProps<TOnChange, TFocusElement>,\n  RefType,\n  TFocusElement extends Element = Element,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TOnChange extends (...args: any[]) => void = (...args: any[]) => void,\n>(OriginalComponent: JSXElementConstructor<PropType>) {\n  const WithFormFieldMessageContextProvider = forwardRef<RefType, PropType>(\n    (props, forwardedRef) => {\n      const { dispatch } = useFormFieldMessagesContext();\n\n      if (dispatch !== undefined) {\n        return <OriginalComponent ref={forwardedRef} {...props} />;\n      }\n\n      const { disabled, id } = props;\n\n      return (\n        <FormFieldMessageContextProvider disabled={disabled} id={id}>\n          <OriginalComponent ref={forwardedRef} {...props} />\n        </FormFieldMessageContextProvider>\n      );\n    },\n  );\n\n  return WithFormFieldMessageContextProvider;\n}\n\n(\n  FormFieldMessageContextProvider as typeof FormFieldMessageContextProvider & {\n    displayName: string;\n  }\n).displayName = 'FormFieldMessageContextProvider';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useReducer,\n  type JSXElementConstructor,\n  type ComponentProps,\n  useMemo,\n} from 'react';\n\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport type { FormControlBaseProps } from '../../../../core/types/form-control-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { FormContext } from '../../../form/context/FormContext.js';\nimport { FormFieldMessageContext } from '../../contexts/FormFieldMessageContext.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../hooks/useFormFieldMessagesContext.js';\nimport {\n  FormFieldMessagesAction,\n  formFieldMessagesReducer,\n  type FormFieldMessagesReducerAction,\n} from '../../state/formfield-messages-state-reducer.js';\nimport type { FormFieldMessageContextState } from '../../types/formfield-messages.types.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\ntype FormFieldMessageContextProviderProps = WithChildren &\n  DOMProps &\n  Pick<SharedFormFieldProps, 'disabled'> & {\n    /** interim solution for the segmentSelector until we introduce proper group errors. */\n    showError?: boolean;\n  };\n\n/**\n * Provides the FormFieldMessages context and handles default values properly, to easily reuse it when needed.\n * @internal\n */\nexport const FormFieldMessageContextProvider = /* @__PURE__ */ (\n  formFieldProps: FormFieldMessageContextProviderProps,\n) => {\n  const generatedId = useId();\n  const messagesContainerId = useId();\n  const formContext = useContext(FormContext);\n  const {\n    children,\n    id: propId = generatedId,\n    disabled: propDisabled,\n    showError: propShowError,\n  }: FormFieldMessageContextProviderProps = formFieldProps;\n\n  const formFieldState = useFormFieldContext();\n\n  const formFieldMessageReducerCB = useCallback(\n    (\n      state: FormFieldMessageContextState,\n      action: FormFieldMessagesReducerAction,\n    ) => formFieldMessagesReducer(state, action),\n    [],\n  );\n\n  const legacyFormFieldId =\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    formFieldState.formFieldId ?? formFieldState.controlId ?? propId;\n\n  const [state, dispatch] = useReducer(formFieldMessageReducerCB, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: false,\n    isTouched: false,\n    isValid: undefined,\n    formFieldId: legacyFormFieldId,\n    formControlId: formFieldState.formControlId ?? legacyFormFieldId,\n    memberFormControlIds: formFieldState.memberFormControlIds,\n  });\n\n  const memberFormControlIdsKey =\n    formFieldState.memberFormControlIds.join('\\u0000');\n\n  useEffect(() => {\n    if (formFieldState.formControlId === undefined) {\n      return;\n    }\n\n    dispatch({\n      type: FormFieldMessagesAction.SETFORMCONTROLID,\n      payload: { formControlId: formFieldState.formControlId },\n    });\n  }, [formFieldState.formControlId]);\n\n  useEffect(() => {\n    for (const formControlId of formFieldState.memberFormControlIds) {\n      dispatch({\n        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,\n        payload: { formControlId },\n      });\n    }\n\n    return () => {\n      for (const formControlId of formFieldState.memberFormControlIds) {\n        dispatch({\n          type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,\n          payload: { formControlId },\n        });\n      }\n    };\n    // memberFormControlIdsKey captures the actual id list while avoiding an\n    // effect loop from the context array identity changing after each registration.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [memberFormControlIdsKey]);\n\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      disabled: formFieldState.disabled || propDisabled,\n      controlId: legacyFormFieldId,\n      dispatch,\n      state: {\n        ...state,\n        showError: (propShowError ?? false) || state.showError,\n      },\n      fieldMessagesContainerId: messagesContainerId,\n      formMessagesContainerId: formContext?.formMessagesId,\n      // A control can route its native/Strato messages to the form-wide outlet via\n      // `_messageTarget`. When the field is not among the targets, those messages are\n      // dropped from the inline render here (a pure render-time filter, so they never\n      // flash inline first). Validity is unaffected, and consumer-authored errors\n      // (source 'custom') always stay at the field. With no enclosing <Form>, 'form'\n      // falls back to the field, so nothing is suppressed.\n      routesAwayFromField:\n        formContext !== undefined &&\n        state.messageTarget !== undefined &&\n        !state.messageTarget.includes('field'),\n    }),\n    [\n      formContext,\n      formFieldState.disabled,\n      legacyFormFieldId,\n      propDisabled,\n      dispatch,\n      state,\n      propShowError,\n      messagesContainerId,\n    ],\n  );\n\n  return (\n    <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n      {children}\n    </FormFieldMessageContext.Provider>\n  );\n};\n\n/**\n * Function to ensure that a component with props that have generics in their type is always wrapped within a `MessageContextProvider`\n * for form validation outside of a `FormField`.\n * @internal\n */\nexport function withFormFieldMessageContextProviderWithGenerics<\n  ComponentType extends JSXElementConstructor<\n    FormControlBaseProps<TOnChange, TFocusElement>\n  >,\n  TFocusElement extends Element = Element,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TOnChange extends (...args: any[]) => void = (...args: any[]) => void,\n>(OriginalComponent: ComponentType) {\n  type Props = ComponentProps<ComponentType>;\n  type RefType = Props extends { ref?: infer R } ? R : never;\n\n  const WrappedComponent = forwardRef<RefType, Props>((props, forwardedRef) => {\n    const { dispatch } = useFormFieldMessagesContext();\n\n    if (dispatch !== undefined) {\n      // the cast to any was necessary because the RefType and Props type cannot be easily/correctly inferred when we have generics\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return <OriginalComponent ref={forwardedRef} {...(props as any)} />;\n    }\n\n    const { disabled, id } = props;\n\n    return (\n      <FormFieldMessageContextProvider disabled={disabled} id={id}>\n        {/* the cast to any was necessary because the RefType and Props type cannot be easily/correctly inferred when we have generics */}\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <OriginalComponent ref={forwardedRef} {...(props as any)} />\n      </FormFieldMessageContextProvider>\n    );\n  });\n\n  // The cast ensures the returned component retains generics when used in JSX\n  return WrappedComponent as ComponentType;\n}\n\n/**\n * Function to ensure that an element is always wrapped within a MessageContextProvider for form validation outside of a `FormField`.\n * @internal\n */\nexport function withFormFieldMessageContextProvider<\n  PropType extends FormControlBaseProps<TOnChange, TFocusElement>,\n  RefType,\n  TFocusElement extends Element = Element,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TOnChange extends (...args: any[]) => void = (...args: any[]) => void,\n>(OriginalComponent: JSXElementConstructor<PropType>) {\n  const WithFormFieldMessageContextProvider = forwardRef<RefType, PropType>(\n    (props, forwardedRef) => {\n      const { dispatch } = useFormFieldMessagesContext();\n\n      if (dispatch !== undefined) {\n        return <OriginalComponent ref={forwardedRef} {...props} />;\n      }\n\n      const { disabled, id } = props;\n\n      return (\n        <FormFieldMessageContextProvider disabled={disabled} id={id}>\n          <OriginalComponent ref={forwardedRef} {...props} />\n        </FormFieldMessageContextProvider>\n      );\n    },\n  );\n\n  return WithFormFieldMessageContextProvider;\n}\n\n(\n  FormFieldMessageContextProvider as typeof FormFieldMessageContextProvider & {\n    displayName: string;\n  }\n).displayName = 'FormFieldMessageContextProvider';\n"],
+  "mappings": "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",
   "names": ["state"]
 }

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

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

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

@@ -1,7 +1,7 @@
 import "./FormFieldMessageItem.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-11-3", variantClassNames: { variant: { hint: "_16z6rg11-3-11-3", error: "_16z6rg12-3-11-3" }, disabled: { true: "_16z6rg13-3-11-3" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-11-3";
+var formFieldMessageItem = _7a468({ defaultClassName: "_16z6rg10-3-12-0", variantClassNames: { variant: { hint: "_16z6rg11-3-12-0", error: "_16z6rg12-3-12-0" }, disabled: { true: "_16z6rg13-3-12-0" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-12-0";
 export {
   formFieldMessageItem,
   formFieldMessageItemText

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css.ts"],
-  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-11-3',variantClassNames:{variant:{hint:'_16z6rg11-3-11-3',error:'_16z6rg12-3-11-3'},disabled:{true:'_16z6rg13-3-11-3'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-11-3';"],
+  "sourcesContent": ["import './FormFieldMessageItem.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var formFieldMessageItem = _7a468({defaultClassName:'_16z6rg10-3-12-0',variantClassNames:{variant:{hint:'_16z6rg11-3-12-0',error:'_16z6rg12-3-12-0'},disabled:{true:'_16z6rg13-3-12-0'}},defaultVariants:{variant:'hint',disabled:false},compoundVariants:[]});\nexport var formFieldMessageItemText = '_16z6rg14-3-12-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,SAAQ,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,EAAC,SAAQ,QAAO,UAAS,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC7P,IAAI,2BAA2B;",
   "names": []
 }

package/esm/forms/forms-core/components/form-field-messages/FormFieldMessages.css CHANGED Viewed

@@ -1,9 +1,9 @@
-._1l9bja60-3-11-3 {
+._1l9bja60-3-12-0 {
   display: flex;
 }
-._1l9bja60-3-11-3:empty {
+._1l9bja60-3-12-0:empty {
   display: none;
 }
-._1l9bja60-3-11-3[aria-hidden='true'] {
+._1l9bja60-3-12-0[aria-hidden='true'] {
   display: none;
 }