npm - @dynatrace/strato-components - Versions diffs - 3.8.0 → 3.9.0 - Mend

@dynatrace/strato-components 3.8.0 → 3.9.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 (2397) 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 { 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 { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { SpinButtonHandler } from '../spin-buttons/spin-button-group/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,\n  Omit<DateTimeRangePickerProps, 'value' | 'defaultValue' | 'onChange'>\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    disabled: propDisabled,\n    readOnly = false,\n    name,\n    style: consumerStyle,\n    className: consumerClassName,\n    required: propRequired,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    placeholder: placeholderProp,\n    onBlur,\n    onValidityChange,\n    ...remainingProps\n  }: Omit<\n    DateTimeRangePickerProps,\n    'value' | 'defaultValue' | 'onChange'\n  > = props;\n  const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);\n  const ariaProps = useAriaLabelingProps(props);\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 [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 { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\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 {\n    state: { showError, isTouched },\n    dispatch: formMessageDispatch,\n  } = useFormFieldMessagesContext();\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>();\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => {\n      const key = getErrorKey();\n      return getValidationState(\n        key !== undefined ? getValidityStateKeyForTimeError(key) : undefined,\n        'manual',\n        getValidationMessage(key),\n        id ? [id] : [],\n      );\n    },\n  );\n\n  const getValidationMessage = useCallback(\n    (errorKey: TimeErrorKey | undefined): string | undefined => {\n      if (!errorKey) {\n        return undefined;\n      }\n      return formatTimeValidationMessage(errorKey, intl, {\n        value,\n        min,\n        max,\n        precision,\n        expectedFormat: formatString,\n      });\n    },\n    [intl, value, min, max, precision, formatString],\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          getValidationState(\n            lastValidationErrorRef.current !== undefined\n              ? getValidityStateKeyForTimeError(lastValidationErrorRef.current)\n              : undefined,\n            'manual',\n            getValidationMessage(lastValidationErrorRef.current),\n            id ? [id] : [],\n          ),\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        const state = getValidationState(\n          lastValidationErrorRef.current !== undefined\n            ? getValidityStateKeyForTimeError(lastValidationErrorRef.current)\n            : undefined,\n          'manual',\n          getValidationMessage(lastValidationErrorRef.current),\n          id ? [id] : [],\n        );\n        return emitValidationState(state);\n      },\n    }),\n    [\n      value,\n      min,\n      max,\n      formMessageDispatch,\n      precision,\n      formatString,\n      required,\n      dateTimeFromRef,\n      emitValidationState,\n      getValidationMessage,\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  // Surface validation state on every value change (`change` trigger).\n  useEffect(() => {\n    const key = getErrorKey();\n    emitValidationState(\n      getValidationState(\n        key !== undefined ? getValidityStateKeyForTimeError(key) : undefined,\n        'change',\n        getValidationMessage(key),\n        id ? [id] : [],\n      ),\n    );\n  }, [value, id, getErrorKey, emitValidationState, getValidationMessage]);\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={consumerClassName}\n      {...ariaProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\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            onBlur={(event) => {\n              // onFocus synchronously redirects focus from the container to a spin button,\n              // causing a spurious onBlur; rAF defers the call until focus has settled.\n              requestAnimationFrame(() => {\n                onBlur?.(event);\n              });\n              if (touchedContainerRef.current?.contains(event.relatedTarget)) {\n                return;\n              }\n              // Surface the validation state only on the first touch; later\n              // updates are reported via the `change` trigger.\n              if (!isTouched) {\n                const blurKey = getErrorKey();\n                emitValidationState(\n                  getValidationState(\n                    blurKey !== undefined\n                      ? getValidityStateKeyForTimeError(blurKey)\n                      : undefined,\n                    'blur',\n                    getValidationMessage(blurKey),\n                    id ? [id] : [],\n                  ),\n                );\n              }\n            }}\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                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                  onFocus={() => {\n                    formMessageDispatch?.({\n                      type: FormFieldMessagesAction.SETISTOUCHED,\n                      payload: { isTouched: true },\n                    });\n                  }}\n                  onClick={() => {\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                    requestAnimationFrame(() => {\n                      dateTimeFromRef.current?.expressionInputRef?.focus();\n                    });\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          />\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 { 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 { SpinButtonHandler } from '../spin-buttons/spin-button-group/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,\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  }\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    formControl,\n    onValidityChange,\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 [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 { isTouched } = messageState;\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>();\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => {\n      const key = getErrorKey();\n      return getValidationState(\n        key !== undefined ? getValidityStateKeyForTimeError(key) : undefined,\n        'manual',\n        getValidationMessage(key),\n        id ? [id] : [],\n      );\n    },\n  );\n\n  const getValidationMessage = useCallback(\n    (errorKey: TimeErrorKey | undefined): string | undefined => {\n      if (!errorKey) {\n        return undefined;\n      }\n      return formatTimeValidationMessage(errorKey, intl, {\n        value,\n        min,\n        max,\n        precision,\n        expectedFormat: formatString,\n      });\n    },\n    [intl, value, min, max, precision, formatString],\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          getValidationState(\n            lastValidationErrorRef.current !== undefined\n              ? getValidityStateKeyForTimeError(lastValidationErrorRef.current)\n              : undefined,\n            'manual',\n            getValidationMessage(lastValidationErrorRef.current),\n            id ? [id] : [],\n          ),\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        const state = getValidationState(\n          lastValidationErrorRef.current !== undefined\n            ? getValidityStateKeyForTimeError(lastValidationErrorRef.current)\n            : undefined,\n          'manual',\n          getValidationMessage(lastValidationErrorRef.current),\n          id ? [id] : [],\n        );\n        return emitValidationState(state);\n      },\n    }),\n    [\n      value,\n      min,\n      max,\n      formMessageDispatch,\n      precision,\n      formatString,\n      required,\n      dateTimeFromRef,\n      emitValidationState,\n      getValidationMessage,\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  // Surface validation state on every value change (`change` trigger).\n  useEffect(() => {\n    const key = getErrorKey();\n    emitValidationState(\n      getValidationState(\n        key !== undefined ? getValidityStateKeyForTimeError(key) : undefined,\n        'change',\n        getValidationMessage(key),\n        id ? [id] : [],\n      ),\n    );\n  }, [value, id, getErrorKey, emitValidationState, getValidationMessage]);\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={consumerClassName}\n      {...ariaProps}\n      {...behavioralTrackingProps}\n      data-dt-component={COMPONENT_NAME}\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            onBlur={(event) => {\n              // onFocus synchronously redirects focus from the container to a spin button,\n              // causing a spurious onBlur; rAF defers the call until focus has settled.\n              requestAnimationFrame(() => {\n                onBlur?.(event);\n              });\n              if (touchedContainerRef.current?.contains(event.relatedTarget)) {\n                return;\n              }\n              // Surface the validation state only on the first touch; later\n              // updates are reported via the `change` trigger.\n              if (!isTouched) {\n                const blurKey = getErrorKey();\n                emitValidationState(\n                  getValidationState(\n                    blurKey !== undefined\n                      ? getValidityStateKeyForTimeError(blurKey)\n                      : undefined,\n                    'blur',\n                    getValidationMessage(blurKey),\n                    id ? [id] : [],\n                  ),\n                );\n              }\n            }}\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                  onFocus={() => {\n                    formMessageDispatch?.({\n                      type: FormFieldMessagesAction.SETISTOUCHED,\n                      payload: { isTouched: true },\n                    });\n                  }}\n                  onClick={() => {\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                    requestAnimationFrame(() => {\n                      dateTimeFromRef.current?.expressionInputRef?.focus();\n                    });\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          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,4 @@
-._1dphm0f0-3-8-0 {
+._1dphm0f0-3-9-0 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-8-0 {
+._1dphm0f1-3-9-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-8-0";
-var legend = "_1dphm0f1-3-8-0";
+var fieldset = "_1dphm0f0-3-9-0";
+var legend = "_1dphm0f1-3-9-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-8-0';\nexport var legend = '_1dphm0f1-3-8-0';"],
+  "sourcesContent": ["import './FieldSet.css';\nexport var fieldset = '_1dphm0f0-3-9-0';\nexport var legend = '_1dphm0f1-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;AACf,IAAI,SAAS;",
   "names": []
 }

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

@@ -18,6 +18,8 @@ const FormField = /* @__PURE__ */ forwardRef((formFieldProps, forwardedRef) => {
     disabled,
     required,
     readOnly,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    controlId: _controlId,
     className: consumerClassName,
     style: consumerStyle,
     "data-testid": dataTestId,
@@ -30,7 +32,7 @@ const FormField = /* @__PURE__ */ forwardRef((formFieldProps, forwardedRef) => {
   return /* @__PURE__ */ jsx(
     FormFieldContextProvider,
     {
-      controlId: propId,
+      formFieldId: propId,
       disabled,
       ariaDisabled: _parseBoolean(ariaDisabledProp),
       required,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormField.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport * as styles from './FormField.sty.js';\nimport { FormFieldContextProvider } from './FormFieldContextProvider.js';\nimport { FormFieldMessageContextProvider } from './FormFieldMessageContextProvider.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { AriaDisabledProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\nconst COMPONENT_NAME = 'FormField';\n\n/**\n * @public\n */\nexport interface FormFieldProps\n  extends WithChildren,\n    SharedFormFieldProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    DOMProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `FormField` component is the outermost layout component of an input\n * component (for example `TextInput`), providing support for displaying a\n * sibling `label` element alongside.\n *\n * It also features responsive design: small containers show the label elements\n * aligned on top of the input. In comparison, wider containers show input elements\n * with their label aligned to the left.\n *\n * The form field is child-agnostic.\n * @public\n */\nexport const FormField = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  FormFieldProps\n>((formFieldProps, forwardedRef) => {\n  const generatedId = useId();\n  const {\n    children,\n    id: propId = generatedId,\n    disabled,\n    required,\n    readOnly,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: FormFieldProps = formFieldProps;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <FormFieldContextProvider\n      controlId={propId}\n      disabled={disabled}\n      ariaDisabled={_parseBoolean(ariaDisabledProp)}\n      required={required}\n      readOnly={readOnly}\n    >\n      <FormFieldMessageContextProvider>\n        <Flex\n          ref={forwardedRef}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          className={clsx(styles.formField, consumerClassName)}\n          gap={4}\n          flexDirection=\"column\"\n          style={consumerStyle}\n          {...mergeProps(restProps, behavioralTrackingProps)}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {children}\n        </Flex>\n      </FormFieldMessageContextProvider>\n    </FormFieldContextProvider>\n  );\n});\n\n(FormField as typeof FormField & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
-  "mappings": "AA+EQ;AA/ER,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,YAAY,YAAY;AACxB,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAChD,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AAQtB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,YAAY;AAGrB,MAAM,iBAAiB;AA2BhB,MAAM,YAA4B,2BAGvC,CAAC,gBAAgB,iBAAiB;AAClC,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,IAAI,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAoB;AAEpB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX;AAAA,MACA,cAAc,cAAc,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,MAEA,8BAAC,mCACC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,WAAW,KAAK,OAAO,WAAW,iBAAiB;AAAA,UACnD,KAAK;AAAA,UACL,eAAc;AAAA,UACd,OAAO;AAAA,UACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,UACjD,qBAAmB;AAAA,UAElB;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,UAAyD,cACxD;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport * as styles from './FormField.sty.js';\nimport { FormFieldContextProvider } from './FormFieldContextProvider.js';\nimport { FormFieldMessageContextProvider } from './FormFieldMessageContextProvider.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { AriaDisabledProps } from '../../../../core/types/a11y-props.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../../../core/types/data-props.js';\nimport { DOMProps } from '../../../../core/types/dom.js';\nimport { MaskingProps } from '../../../../core/types/masking-props.js';\nimport { StylingProps } from '../../../../core/types/styling-props.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { mergeProps } from '../../../../core/utils/merge-props.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\nconst COMPONENT_NAME = 'FormField';\n\n/**\n * @public\n */\nexport interface FormFieldProps\n  extends WithChildren,\n    SharedFormFieldProps,\n    StylingProps,\n    DataTestId,\n    MaskingProps,\n    DOMProps,\n    AriaDisabledProps,\n    BehaviorTrackingProps {}\n\n/**\n * The `FormField` component is the outermost layout component of an input\n * component (for example `TextInput`), providing support for displaying a\n * sibling `label` element alongside.\n *\n * It also features responsive design: small containers show the label elements\n * aligned on top of the input. In comparison, wider containers show input elements\n * with their label aligned to the left.\n *\n * The form field is child-agnostic.\n * @public\n */\nexport const FormField = /* @__PURE__ */ forwardRef<\n  HTMLDivElement,\n  FormFieldProps\n>((formFieldProps, forwardedRef) => {\n  const generatedId = useId();\n  const {\n    children,\n    id: propId = generatedId,\n    disabled,\n    required,\n    readOnly,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    controlId: _controlId,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  }: FormFieldProps = formFieldProps;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  return (\n    <FormFieldContextProvider\n      formFieldId={propId}\n      disabled={disabled}\n      ariaDisabled={_parseBoolean(ariaDisabledProp)}\n      required={required}\n      readOnly={readOnly}\n    >\n      <FormFieldMessageContextProvider>\n        <Flex\n          ref={forwardedRef}\n          data-testid={dataTestId}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          className={clsx(styles.formField, consumerClassName)}\n          gap={4}\n          flexDirection=\"column\"\n          style={consumerStyle}\n          {...mergeProps(restProps, behavioralTrackingProps)}\n          data-dt-component={COMPONENT_NAME}\n        >\n          {children}\n        </Flex>\n      </FormFieldMessageContextProvider>\n    </FormFieldContextProvider>\n  );\n});\n\n(FormField as typeof FormField & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "mappings": "AAiFQ;AAjFR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,YAAY,YAAY;AACxB,SAAS,gCAAgC;AACzC,SAAS,uCAAuC;AAChD,SAAS,kCAAkC;AAC3C,SAAS,aAAa;AAQtB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,YAAY;AAGrB,MAAM,iBAAiB;AA2BhB,MAAM,YAA4B,2BAGvC,CAAC,gBAAgB,iBAAiB;AAClC,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,IAAI,SAAS;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA,IACpB,iBAAiB;AAAA,IACjB,GAAG;AAAA,EACL,IAAoB;AAEpB,QAAM,CAAC,yBAAyB,SAAS,IACvC,2BAA2B,cAAc;AAE3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,MACb;AAAA,MACA,cAAc,cAAc,gBAAgB;AAAA,MAC5C;AAAA,MACA;AAAA,MAEA,8BAAC,mCACC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,WAAW,KAAK,OAAO,WAAW,iBAAiB;AAAA,UACnD,KAAK;AAAA,UACL,eAAc;AAAA,UACd,OAAO;AAAA,UACN,GAAG,WAAW,WAAW,uBAAuB;AAAA,UACjD,qBAAmB;AAAA,UAElB;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,UAAyD,cACxD;",
   "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-8-0";
+var formField = "_mvcxum0-3-9-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-8-0';"],
+  "sourcesContent": ["import './FormField.css';\nexport var formField = '_mvcxum0-3-9-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,YAAY;",
   "names": []
 }

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

@@ -1,15 +1,17 @@
 import { jsx } from "react/jsx-runtime";
-import { useReducer } from "react";
+import { useCallback, useMemo, useReducer, useState } from "react";
 import { useId } from "../../../../core/hooks/useId.js";
 import { parseBoolean as _parseBoolean } from "../../../../core/utils/parse-boolean.js";
-import { _FormFieldContext as FormFieldContext } from "../../contexts/FormFieldContext.js";
+import {
+  _FormFieldContext as FormFieldContext
+} from "../../contexts/FormFieldContext.js";
 import { useFormFieldContext } from "../../hooks/useFormFieldContext.js";
 import { _formFieldReducer } from "../../state/formfield-state-reducer.js";
 const FormFieldContextProvider = (props) => {
   const generatedId = useId();
   const {
     children,
-    controlId: propId = generatedId,
+    formFieldId: propFormFieldId = generatedId,
     disabled: propDisabled,
     required: propRequired,
     ariaDisabled: ariaDisabledProp,
@@ -21,20 +23,84 @@ const FormFieldContextProvider = (props) => {
     readOnly: contextReadOnly
   } = useFormFieldContext();
   const [formFieldState, formFieldDispatch] = useReducer(_formFieldReducer, {});
-  return /* @__PURE__ */ jsx(
-    FormFieldContext.Provider,
-    {
-      value: {
-        controlId: formFieldState.controlId || propId,
-        disabled: formFieldState.disabled ?? propDisabled ?? contextDisabled,
-        required: formFieldState.required ?? propRequired,
-        readOnly: formFieldState.readOnly ?? propReadOnly ?? contextReadOnly,
-        dispatch: formFieldDispatch,
-        ariaDisabled: formFieldState.ariaDisabled ?? _parseBoolean(ariaDisabledProp) ?? contextAriaDisabled
-      },
-      children
-    }
+  const [registeredControlIds, setRegisteredControlIds] = useState(
+    []
   );
+  const [memberFormControlIds, setMemberFormControlIds] = useState(
+    []
+  );
+  const [formFieldLabelIds, setFormFieldLabelIds] = useState([]);
+  const registerFormControlId = useCallback((id) => {
+    setRegisteredControlIds(
+      (currentIds) => currentIds.includes(id) ? currentIds : [...currentIds, id]
+    );
+    return () => {
+      setRegisteredControlIds(
+        (currentIds) => currentIds.filter((currentId) => currentId !== id)
+      );
+    };
+  }, []);
+  const registerMemberFormControlId = useCallback((id) => {
+    setMemberFormControlIds(
+      (currentIds) => currentIds.includes(id) ? currentIds : [...currentIds, id]
+    );
+    return () => {
+      setMemberFormControlIds(
+        (currentIds) => currentIds.filter((currentId) => currentId !== id)
+      );
+    };
+  }, []);
+  const registerFormFieldLabelId = useCallback((id) => {
+    setFormFieldLabelIds(
+      (currentIds) => currentIds.includes(id) ? currentIds : [...currentIds, id]
+    );
+    return () => {
+      setFormFieldLabelIds(
+        (currentIds) => currentIds.filter((currentId) => currentId !== id)
+      );
+    };
+  }, []);
+  const formFieldId = propFormFieldId;
+  const formControlId = registeredControlIds[0];
+  const formFieldLabelId = formFieldLabelIds[0];
+  const contextValue = useMemo(
+    () => ({
+      controlId: formFieldId,
+      formFieldId,
+      formControlId,
+      memberFormControlIds,
+      registerFormControlId,
+      registerMemberFormControlId,
+      formFieldLabelId,
+      registerFormFieldLabelId,
+      disabled: formFieldState.disabled ?? propDisabled ?? contextDisabled,
+      required: formFieldState.required ?? propRequired,
+      readOnly: formFieldState.readOnly ?? propReadOnly ?? contextReadOnly,
+      dispatch: formFieldDispatch,
+      ariaDisabled: formFieldState.ariaDisabled ?? _parseBoolean(ariaDisabledProp) ?? contextAriaDisabled
+    }),
+    [
+      ariaDisabledProp,
+      contextAriaDisabled,
+      contextDisabled,
+      contextReadOnly,
+      formControlId,
+      formFieldId,
+      formFieldLabelId,
+      formFieldState.ariaDisabled,
+      formFieldState.disabled,
+      formFieldState.readOnly,
+      formFieldState.required,
+      propDisabled,
+      propReadOnly,
+      propRequired,
+      registerFormControlId,
+      registerFormFieldLabelId,
+      registerMemberFormControlId,
+      memberFormControlIds
+    ]
+  );
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: contextValue, children });
 };
 FormFieldContextProvider.displayName = "FormFieldContextProvider";
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/forms/forms-core/components/form-field/FormFieldContextProvider.tsx"],
-  "sourcesContent": ["import { useReducer } from 'react';\n\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport { _FormFieldContext as FormFieldContext } from '../../contexts/FormFieldContext.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { _formFieldReducer } from '../../state/formfield-state-reducer.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\n/**\n * Provides the FormField context and handles default values properly, to easily reuse it when needed.\n * @internal\n */\nexport const FormFieldContextProvider = /* @__PURE__ */ (\n  props: SharedFormFieldProps & WithChildren,\n) => {\n  const generatedId = useId();\n  const {\n    children,\n    controlId: propId = generatedId,\n    disabled: propDisabled,\n    required: propRequired,\n    ariaDisabled: ariaDisabledProp,\n    readOnly: propReadOnly,\n  }: SharedFormFieldProps & WithChildren = props;\n  // read disabled from context (could be used inside a fieldset)\n  const {\n    disabled: contextDisabled,\n    ariaDisabled: contextAriaDisabled,\n    readOnly: contextReadOnly,\n  } = useFormFieldContext();\n\n  const [formFieldState, formFieldDispatch] = useReducer(_formFieldReducer, {});\n\n  return (\n    <FormFieldContext.Provider\n      value={{\n        controlId: formFieldState.controlId || propId,\n        disabled: formFieldState.disabled ?? propDisabled ?? contextDisabled,\n        required: formFieldState.required ?? propRequired,\n        readOnly: formFieldState.readOnly ?? propReadOnly ?? contextReadOnly,\n        dispatch: formFieldDispatch,\n        ariaDisabled:\n          formFieldState.ariaDisabled ??\n          _parseBoolean(ariaDisabledProp) ??\n          contextAriaDisabled,\n      }}\n    >\n      {children}\n    </FormFieldContext.Provider>\n  );\n};\n\n(\n  FormFieldContextProvider as typeof FormFieldContextProvider & {\n    displayName: string;\n  }\n).displayName = 'FormFieldContextProvider';\n"],
-  "mappings": "AAoCI;AApCJ,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AAEtB,SAAS,gBAAgB,qBAAqB;AAC9C,SAAS,qBAAqB,wBAAwB;AACtD,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAO3B,MAAM,2BAA2C,CACtD,UACG;AACH,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,WAAW,SAAS;AAAA,IACpB,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,IAAyC;AAEzC,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,IAAI,oBAAoB;AAExB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,WAAW,mBAAmB,CAAC,CAAC;AAE5E,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,OAAO;AAAA,QACL,WAAW,eAAe,aAAa;AAAA,QACvC,UAAU,eAAe,YAAY,gBAAgB;AAAA,QACrD,UAAU,eAAe,YAAY;AAAA,QACrC,UAAU,eAAe,YAAY,gBAAgB;AAAA,QACrD,UAAU;AAAA,QACV,cACE,eAAe,gBACf,cAAc,gBAAgB,KAC9B;AAAA,MACJ;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAGE,yBAGA,cAAc;",
+  "sourcesContent": ["import { useCallback, useMemo, useReducer, useState } from 'react';\n\nimport { useId } from '../../../../core/hooks/useId.js';\nimport { WithChildren } from '../../../../core/types/with-children.js';\nimport { parseBoolean as _parseBoolean } from '../../../../core/utils/parse-boolean.js';\nimport {\n  _FormFieldContext as FormFieldContext,\n  type SharedFormFieldContextProps,\n} from '../../contexts/FormFieldContext.js';\nimport { useFormFieldContext } from '../../hooks/useFormFieldContext.js';\nimport { _formFieldReducer } from '../../state/formfield-state-reducer.js';\nimport type { SharedFormFieldProps } from '../../types/formfield.types.js';\n\ntype FormFieldContextProviderProps = WithChildren &\n  Omit<SharedFormFieldProps, 'controlId'> & {\n    /** Legacy FormField id fallback for form controls. */\n    formFieldId?: string;\n  };\n\n/**\n * Provides the FormField context and handles default values properly, to easily reuse it when needed.\n * @internal\n */\nexport const FormFieldContextProvider = /* @__PURE__ */ (\n  props: FormFieldContextProviderProps,\n) => {\n  const generatedId = useId();\n  const {\n    children,\n    formFieldId: propFormFieldId = generatedId,\n    disabled: propDisabled,\n    required: propRequired,\n    ariaDisabled: ariaDisabledProp,\n    readOnly: propReadOnly,\n  }: FormFieldContextProviderProps = props;\n  // read disabled from context (could be used inside a fieldset)\n  const {\n    disabled: contextDisabled,\n    ariaDisabled: contextAriaDisabled,\n    readOnly: contextReadOnly,\n  } = useFormFieldContext();\n\n  const [formFieldState, formFieldDispatch] = useReducer(_formFieldReducer, {});\n  // Internal registration bookkeeping \u2014 an array so multiple controls can\n  // register/unregister cleanly even though only the first is exposed as the\n  // logical `formControlId`. Not surfaced on the context.\n  const [registeredControlIds, setRegisteredControlIds] = useState<string[]>(\n    [],\n  );\n  const [memberFormControlIds, setMemberFormControlIds] = useState<string[]>(\n    [],\n  );\n  const [formFieldLabelIds, setFormFieldLabelIds] = useState<string[]>([]);\n\n  const registerFormControlId = useCallback((id: string) => {\n    setRegisteredControlIds((currentIds) =>\n      currentIds.includes(id) ? currentIds : [...currentIds, id],\n    );\n\n    return () => {\n      setRegisteredControlIds((currentIds) =>\n        currentIds.filter((currentId) => currentId !== id),\n      );\n    };\n  }, []);\n\n  const registerMemberFormControlId = useCallback((id: string) => {\n    setMemberFormControlIds((currentIds) =>\n      currentIds.includes(id) ? currentIds : [...currentIds, id],\n    );\n\n    return () => {\n      setMemberFormControlIds((currentIds) =>\n        currentIds.filter((currentId) => currentId !== id),\n      );\n    };\n  }, []);\n\n  const registerFormFieldLabelId = useCallback((id: string) => {\n    setFormFieldLabelIds((currentIds) =>\n      currentIds.includes(id) ? currentIds : [...currentIds, id],\n    );\n\n    return () => {\n      setFormFieldLabelIds((currentIds) =>\n        currentIds.filter((currentId) => currentId !== id),\n      );\n    };\n  }, []);\n\n  const formFieldId = propFormFieldId;\n  const formControlId = registeredControlIds[0];\n  const formFieldLabelId = formFieldLabelIds[0];\n\n  const contextValue = useMemo<SharedFormFieldContextProps>(\n    () => ({\n      controlId: formFieldId,\n      formFieldId,\n      formControlId,\n      memberFormControlIds,\n      registerFormControlId,\n      registerMemberFormControlId,\n      formFieldLabelId,\n      registerFormFieldLabelId,\n      disabled: formFieldState.disabled ?? propDisabled ?? contextDisabled,\n      required: formFieldState.required ?? propRequired,\n      readOnly: formFieldState.readOnly ?? propReadOnly ?? contextReadOnly,\n      dispatch: formFieldDispatch,\n      ariaDisabled:\n        formFieldState.ariaDisabled ??\n        _parseBoolean(ariaDisabledProp) ??\n        contextAriaDisabled,\n    }),\n    [\n      ariaDisabledProp,\n      contextAriaDisabled,\n      contextDisabled,\n      contextReadOnly,\n      formControlId,\n      formFieldId,\n      formFieldLabelId,\n      formFieldState.ariaDisabled,\n      formFieldState.disabled,\n      formFieldState.readOnly,\n      formFieldState.required,\n      propDisabled,\n      propReadOnly,\n      propRequired,\n      registerFormControlId,\n      registerFormFieldLabelId,\n      registerMemberFormControlId,\n      memberFormControlIds,\n    ],\n  );\n\n  return (\n    <FormFieldContext.Provider value={contextValue}>\n      {children}\n    </FormFieldContext.Provider>\n  );\n};\n\n(\n  FormFieldContextProvider as typeof FormFieldContextProvider & {\n    displayName: string;\n  }\n).displayName = 'FormFieldContextProvider';\n"],
+  "mappings": "AAwII;AAxIJ,SAAS,aAAa,SAAS,YAAY,gBAAgB;AAE3D,SAAS,aAAa;AAEtB,SAAS,gBAAgB,qBAAqB;AAC9C;AAAA,EACE,qBAAqB;AAAA,OAEhB;AACP,SAAS,2BAA2B;AACpC,SAAS,yBAAyB;AAa3B,MAAM,2BAA2C,CACtD,UACG;AACH,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,aAAa,kBAAkB;AAAA,IAC/B,UAAU;AAAA,IACV,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,IAAmC;AAEnC,QAAM;AAAA,IACJ,UAAU;AAAA,IACV,cAAc;AAAA,IACd,UAAU;AAAA,EACZ,IAAI,oBAAoB;AAExB,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,WAAW,mBAAmB,CAAC,CAAC;AAI5E,QAAM,CAAC,sBAAsB,uBAAuB,IAAI;AAAA,IACtD,CAAC;AAAA,EACH;AACA,QAAM,CAAC,sBAAsB,uBAAuB,IAAI;AAAA,IACtD,CAAC;AAAA,EACH;AACA,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAAmB,CAAC,CAAC;AAEvE,QAAM,wBAAwB,YAAY,CAAC,OAAe;AACxD;AAAA,MAAwB,CAAC,eACvB,WAAW,SAAS,EAAE,IAAI,aAAa,CAAC,GAAG,YAAY,EAAE;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX;AAAA,QAAwB,CAAC,eACvB,WAAW,OAAO,CAAC,cAAc,cAAc,EAAE;AAAA,MACnD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,8BAA8B,YAAY,CAAC,OAAe;AAC9D;AAAA,MAAwB,CAAC,eACvB,WAAW,SAAS,EAAE,IAAI,aAAa,CAAC,GAAG,YAAY,EAAE;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX;AAAA,QAAwB,CAAC,eACvB,WAAW,OAAO,CAAC,cAAc,cAAc,EAAE;AAAA,MACnD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,2BAA2B,YAAY,CAAC,OAAe;AAC3D;AAAA,MAAqB,CAAC,eACpB,WAAW,SAAS,EAAE,IAAI,aAAa,CAAC,GAAG,YAAY,EAAE;AAAA,IAC3D;AAEA,WAAO,MAAM;AACX;AAAA,QAAqB,CAAC,eACpB,WAAW,OAAO,CAAC,cAAc,cAAc,EAAE;AAAA,MACnD;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc;AACpB,QAAM,gBAAgB,qBAAqB,CAAC;AAC5C,QAAM,mBAAmB,kBAAkB,CAAC;AAE5C,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU,eAAe,YAAY,gBAAgB;AAAA,MACrD,UAAU,eAAe,YAAY;AAAA,MACrC,UAAU,eAAe,YAAY,gBAAgB;AAAA,MACrD,UAAU;AAAA,MACV,cACE,eAAe,gBACf,cAAc,gBAAgB,KAC9B;AAAA,IACJ;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe;AAAA,MACf,eAAe;AAAA,MACf,eAAe;AAAA,MACf,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,iBAAiB,UAAjB,EAA0B,OAAO,cAC/B,UACH;AAEJ;AAGE,yBAGA,cAAc;",
   "names": []
 }

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

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
   useCallback,
+  useEffect,
   useReducer,
   useMemo
 } from "react";
@@ -10,6 +11,7 @@ import { FormFieldMessageContext } from "../../contexts/FormFieldMessageContext.
 import { useFormFieldContext } from "../../hooks/useFormFieldContext.js";
 import { useFormFieldMessagesContext } from "../../hooks/useFormFieldMessagesContext.js";
 import {
+  FormFieldMessagesAction,
   formFieldMessagesReducer
 } from "../../state/formfield-messages-state-reducer.js";
 const FormFieldMessageContextProvider = (formFieldProps) => {
@@ -17,35 +19,71 @@ const FormFieldMessageContextProvider = (formFieldProps) => {
   const {
     children,
     id: propId = generatedId,
-    disabled: propDisabled
+    disabled: propDisabled,
+    showError: propShowError
   } = formFieldProps;
   const formFieldState = useFormFieldContext();
   const formFieldMessageReducerCB = useCallback(
     (state2, action) => formFieldMessagesReducer(state2, action),
     []
   );
+  const legacyFormFieldId = (
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    formFieldState.formFieldId ?? formFieldState.controlId ?? propId
+  );
   const [state, dispatch] = useReducer(formFieldMessageReducerCB, {
     customMessages: [],
     formControlMessages: [],
     showError: false,
     isTouched: false,
     isValid: void 0,
-    controlIds: [formFieldState.controlId ?? propId]
+    formFieldId: legacyFormFieldId,
+    formControlId: formFieldState.formControlId ?? legacyFormFieldId,
+    memberFormControlIds: formFieldState.memberFormControlIds
   });
+  const memberFormControlIdsKey = formFieldState.memberFormControlIds.join("\0");
+  useEffect(() => {
+    if (formFieldState.formControlId === void 0) {
+      return;
+    }
+    dispatch({
+      type: FormFieldMessagesAction.SETFORMCONTROLID,
+      payload: { formControlId: formFieldState.formControlId }
+    });
+  }, [formFieldState.formControlId]);
+  useEffect(() => {
+    for (const formControlId of formFieldState.memberFormControlIds) {
+      dispatch({
+        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,
+        payload: { formControlId }
+      });
+    }
+    return () => {
+      for (const formControlId of formFieldState.memberFormControlIds) {
+        dispatch({
+          type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,
+          payload: { formControlId }
+        });
+      }
+    };
+  }, [memberFormControlIdsKey]);
   const formFieldMessageContextValue = useMemo(
     () => ({
       disabled: formFieldState.disabled || propDisabled,
-      controlId: formFieldState.controlId || propId,
+      controlId: legacyFormFieldId,
       dispatch,
-      state
+      state: {
+        ...state,
+        showError: (propShowError ?? false) || state.showError
+      }
     }),
     [
       formFieldState.disabled,
-      formFieldState.controlId,
+      legacyFormFieldId,
       propDisabled,
-      propId,
       dispatch,
-      state
+      state,
+      propShowError
     ]
   );
   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  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  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\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  }: 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 [state, dispatch] = useReducer(formFieldMessageReducerCB, {\n    customMessages: [],\n    formControlMessages: [],\n    showError: false,\n    isTouched: false,\n    isValid: undefined,\n    controlIds: [formFieldState.controlId ?? propId],\n  });\n\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      disabled: formFieldState.disabled || propDisabled,\n      controlId: formFieldState.controlId || propId,\n      dispatch,\n      state,\n    }),\n    [\n      formFieldState.disabled,\n      formFieldState.controlId,\n      propDisabled,\n      propId,\n      dispatch,\n      state,\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<FormControlBaseProps>,\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,\n  RefType,\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": "AA8EI;AA9EJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EAGA;AAAA,OACK;AAEP,SAAS,aAAa;AAItB,SAAS,+BAA+B;AACxC,SAAS,2BAA2B;AACpC,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,OAEK;AAYA,MAAM,kCAAkD,CAC7D,mBACG;AACH,QAAM,cAAc,MAAM;AAC1B,QAAM;AAAA,IACJ;AAAA,IACA,IAAI,SAAS;AAAA,IACb,UAAU;AAAA,EACZ,IAA0C;AAE1C,QAAM,iBAAiB,oBAAoB;AAE3C,QAAM,4BAA4B;AAAA,IAChC,CACEA,QACA,WACG,yBAAyBA,QAAO,MAAM;AAAA,IAC3C,CAAC;AAAA,EACH;AAEA,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,2BAA2B;AAAA,IAC9D,gBAAgB,CAAC;AAAA,IACjB,qBAAqB,CAAC;AAAA,IACtB,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY,CAAC,eAAe,aAAa,MAAM;AAAA,EACjD,CAAC;AAED,QAAM,+BAA+B;AAAA,IACnC,OAAO;AAAA,MACL,UAAU,eAAe,YAAY;AAAA,MACrC,WAAW,eAAe,aAAa;AAAA,MACvC;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE,eAAe;AAAA,MACf,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SACE,oBAAC,wBAAwB,UAAxB,EAAiC,OAAO,8BACtC,UACH;AAEJ;AAOO,SAAS,gDAEd,mBAAkC;AAIlC,QAAM,mBAAmB,WAA2B,CAAC,OAAO,iBAAiB;AAC3E,UAAM,EAAE,SAAS,IAAI,4BAA4B;AAEjD,QAAI,aAAa,QAAW;AAG1B,aAAO,oBAAC,qBAAkB,KAAK,cAAe,GAAI,OAAe;AAAA,IACnE;AAEA,UAAM,EAAE,UAAU,GAAG,IAAI;AAEzB,WACE,oBAAC,mCAAgC,UAAoB,IAGnD,8BAAC,qBAAkB,KAAK,cAAe,GAAI,OAAe,GAC5D;AAAA,EAEJ,CAAC;AAGD,SAAO;AACT;AAMO,SAAS,oCAGd,mBAAoD;AACpD,QAAM,sCAAsC;AAAA,IAC1C,CAAC,OAAO,iBAAiB;AACvB,YAAM,EAAE,SAAS,IAAI,4BAA4B;AAEjD,UAAI,aAAa,QAAW;AAC1B,eAAO,oBAAC,qBAAkB,KAAK,cAAe,GAAG,OAAO;AAAA,MAC1D;AAEA,YAAM,EAAE,UAAU,GAAG,IAAI;AAEzB,aACE,oBAAC,mCAAgC,UAAoB,IACnD,8BAAC,qBAAkB,KAAK,cAAe,GAAG,OAAO,GACnD;AAAA,IAEJ;AAAA,EACF;AAEA,SAAO;AACT;AAGE,gCAGA,cAAc;",
+  "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<FormControlBaseProps>,\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,\n  RefType,\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"]
 }