@dynatrace/strato-components 3.12.2 → 3.13.0

package/esm/forms/password-input/PasswordInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/password-input/PasswordInput.tsx"],
-  "sourcesContent": ["import {\n  type ChangeEvent,\n  type ReactNode,\n  forwardRef,\n  useRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon, ViewOffIcon } from '@dynatrace/strato-icons';\n\nimport {\n  PasswordInputTooltip,\n  type PasswordInputTooltipProps,\n} from './PasswordInputTooltip.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { getPlaceholderMessage } from '../_base-input/baseInputMessages.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nconst COMPONENT_NAME = 'PasswordInput';\n\n//#region Typings\n/**\n * The properties of the PasswordInput component.\n * @public\n */\nexport type PasswordInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'autoComplete'\n  | 'minLength'\n  | 'maxLength'\n  | 'pattern'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<\n    string,\n    (value: string, event?: ChangeEvent<HTMLInputElement>) => void,\n    HTMLInputElement\n  > &\n  WithChildren &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n  };\n\ntype PasswordInputSlots = {\n  tooltip: ReactElement<PasswordInputTooltipProps> | null;\n};\n//#endregion Typings\n\nfunction getTooltipSlot(children: ReactNode) {\n  const slots: PasswordInputSlots = {\n    tooltip: null,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, PasswordInputTooltip)) {\n      slots.tooltip = child;\n    } else if (child !== null && isDev()) {\n      // eslint-disable-next-line no-console\n      console.warn('The used child is not supported by the PasswordInput.');\n    }\n  }\n\n  return slots;\n}\n\nconst PasswordInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  PasswordInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage('password'),\n  );\n\n  const {\n    onChange,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    readOnly = false,\n    disabled,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    defaultValue,\n    value,\n    placeholder = defaultPlaceholder,\n    onValidityChange,\n    ...remainingProps\n  }: PasswordInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [hidden, setHidden] = useState(true);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n  });\n\n  const controlRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs<FormControlRef<HTMLDivElement> | null>([\n    forwardedRef,\n    controlRef,\n  ]);\n\n  const formControl = useInternalFormRegistration({\n    id: propId,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    value: internalValue ?? '',\n    controlRef,\n    onValidityChange,\n  });\n\n  const onInternalChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value, event);\n    setInternalValue(event.target.value);\n  };\n\n  const { tooltip } = getTooltipSlot(children);\n  const { showText, hideText, ...remainingTooltipProps } = tooltip?.props ?? {};\n  const tooltipBehavioralTrackingProps = extractBehaviorTrackingProps(\n    remainingTooltipProps,\n  );\n\n  const showTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Show password',\n    id: 'tgL6QEjmq+ArASFk',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to show the password',\n  });\n  const hideTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Hide password',\n    id: 'vMt3ZRHwBods5xzM',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to hide the password',\n  });\n  const dataDtProperties = `value:${hidden ? 'show' : 'hide'}`;\n\n  const showTooltipText = showText ?? showTooltipDefaultText;\n  const hideTooltipText = hideText ?? hideTooltipDefaultText;\n\n  return (\n    <BaseInput\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      id={formControl.id}\n      value={internalValue}\n      role=\"textbox\"\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState={controlState}\n      name={name}\n      form={_form}\n      type={hidden ? 'password' : 'text'}\n      onChange={onInternalChange}\n      onValidityChange={formControl.onValidityChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={mergedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      readOnly={readOnly}\n      disabled={disabled}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      placeholder={placeholder}\n    >\n      <BaseInput.Suffix>\n        <BaseInput.Button\n          onClick={() => setHidden(!hidden)}\n          tooltipText={hidden ? showTooltipText : hideTooltipText}\n          tooltipBehavioralTrackingProps={tooltipBehavioralTrackingProps}\n          aria-label={hidden ? showTooltipText : hideTooltipText}\n          id={remainingTooltipProps.id}\n          aria-disabled={ariaDisabledProp}\n          data-dt-children-name=\"ShowHidePassword\"\n          data-dt-properties={dataDtProperties}\n          disabled={readOnly ? false : disabled}\n        >\n          {hidden ? <ViewIcon /> : <ViewOffIcon />}\n        </BaseInput.Button>\n      </BaseInput.Suffix>\n    </BaseInput>\n  );\n});\n\n/**\n * The `PasswordInput` component can be used to hide user input.\n * Always use a `PasswordInput` when your app asks for sensitive data,\n * such as a password. Users can click on the eye icon to hide or show their data.\n * @public\n */\nexport const PasswordInput = Object.assign(PasswordInputRoot, {\n  Tooltip: PasswordInputTooltip,\n});\n\n(PasswordInput as typeof PasswordInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "sourcesContent": ["import {\n  type ChangeEvent,\n  type ReactNode,\n  forwardRef,\n  useRef,\n  useState,\n  type ReactElement,\n  Children,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ViewIcon, ViewOffIcon } from '@dynatrace/strato-icons';\n\nimport {\n  PasswordInputTooltip,\n  type PasswordInputTooltipProps,\n} from './PasswordInputTooltip.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { extractBehaviorTrackingProps } from '../../core/utils/extract-behavior-tracking-props.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps } from '../../core/utils/merge-props.js';\nimport type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { getPlaceholderMessage } from '../_base-input/baseInputMessages.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nconst COMPONENT_NAME = 'PasswordInput';\n\n//#region Typings\n/**\n * The properties of the PasswordInput component.\n * @public\n */\nexport type PasswordInputProps = Pick<\n  BaseInputProps,\n  | 'placeholder'\n  | 'autoComplete'\n  | 'minLength'\n  | 'maxLength'\n  | 'pattern'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'className'\n  | 'style'\n  | 'data-testid'\n  | 'data-dtrum-mask'\n  | 'data-dtrum-allow'\n> &\n  FormControlProps<\n    string,\n    (value: string, event?: ChangeEvent<HTMLInputElement>) => void,\n    HTMLInputElement\n  > &\n  WithChildren &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n  };\n\ntype PasswordInputSlots = {\n  tooltip: ReactElement<PasswordInputTooltipProps> | null;\n};\n//#endregion Typings\n\nfunction getTooltipSlot(children: ReactNode) {\n  const slots: PasswordInputSlots = {\n    tooltip: null,\n  };\n\n  for (const child of Children.toArray(children)) {\n    if (isSlot(child, PasswordInputTooltip)) {\n      slots.tooltip = child;\n    } else if (child !== null && isDev()) {\n      // oxlint-disable-next-line no-console\n      console.warn('The used child is not supported by the PasswordInput.');\n    }\n  }\n\n  return slots;\n}\n\nconst PasswordInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  PasswordInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage('password'),\n  );\n\n  const {\n    onChange,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    readOnly = false,\n    disabled,\n    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n    controlState,\n    children,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    defaultValue,\n    value,\n    placeholder = defaultPlaceholder,\n    onValidityChange,\n    ...remainingProps\n  }: PasswordInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [hidden, setHidden] = useState(true);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n  });\n\n  const controlRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs<FormControlRef<HTMLDivElement> | null>([\n    forwardedRef,\n    controlRef,\n  ]);\n\n  const formControl = useInternalFormRegistration({\n    id: propId,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    value: internalValue ?? '',\n    controlRef,\n    onValidityChange,\n  });\n\n  const onInternalChange = (event: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event.target.value, event);\n    setInternalValue(event.target.value);\n  };\n\n  const { tooltip } = getTooltipSlot(children);\n  const { showText, hideText, ...remainingTooltipProps } = tooltip?.props ?? {};\n  const tooltipBehavioralTrackingProps = extractBehaviorTrackingProps(\n    remainingTooltipProps,\n  );\n\n  const showTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Show password',\n    id: 'tgL6QEjmq+ArASFk',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to show the password',\n  });\n  const hideTooltipDefaultText = intl.formatMessage({\n    defaultMessage: 'Hide password',\n    id: 'vMt3ZRHwBods5xzM',\n    description:\n      'Text in a tooltip shown when hovering the password input icon to hide the password',\n  });\n  const dataDtProperties = `value:${hidden ? 'show' : 'hide'}`;\n\n  const showTooltipText = showText ?? showTooltipDefaultText;\n  const hideTooltipText = hideText ?? hideTooltipDefaultText;\n\n  return (\n    <BaseInput\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      id={formControl.id}\n      value={internalValue}\n      role=\"textbox\"\n      // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n      controlState={controlState}\n      name={name}\n      form={_form}\n      type={hidden ? 'password' : 'text'}\n      onChange={onInternalChange}\n      onValidityChange={formControl.onValidityChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={mergedRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      readOnly={readOnly}\n      disabled={disabled}\n      aria-disabled={ariaDisabledProp}\n      data-dt-component={COMPONENT_NAME}\n      placeholder={placeholder}\n    >\n      <BaseInput.Suffix>\n        <BaseInput.Button\n          onClick={() => setHidden(!hidden)}\n          tooltipText={hidden ? showTooltipText : hideTooltipText}\n          tooltipBehavioralTrackingProps={tooltipBehavioralTrackingProps}\n          aria-label={hidden ? showTooltipText : hideTooltipText}\n          id={remainingTooltipProps.id}\n          aria-disabled={ariaDisabledProp}\n          data-dt-children-name=\"ShowHidePassword\"\n          data-dt-properties={dataDtProperties}\n          disabled={readOnly ? false : disabled}\n        >\n          {hidden ? <ViewIcon /> : <ViewOffIcon />}\n        </BaseInput.Button>\n      </BaseInput.Suffix>\n    </BaseInput>\n  );\n});\n\n/**\n * The `PasswordInput` component can be used to hide user input.\n * Always use a `PasswordInput` when your app asks for sensitive data,\n * such as a password. Users can click on the eye icon to hide or show their data.\n * @public\n */\nexport const PasswordInput = Object.assign(PasswordInputRoot, {\n  Tooltip: PasswordInputTooltip,\n});\n\n(PasswordInput as typeof PasswordInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
   "mappings": "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",
   "names": []
 }

package/esm/forms/radio/Radio.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/Radio.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { AriaLabelingProps } 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 type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldContext } from '../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'Radio';\n\n// #region Typings\n/**\n * Properties for the Radio component\n * @public\n */\nexport type RadioProps = Pick<\n  FormControlProps<string, never, HTMLLabelElement>,\n  'disabled' | 'value' | 'onFocus' | 'onBlur'\n> &\n  DOMProps &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n  };\n//#endregion\n\n/**\n * Use the `Radio` to let users select one option from a small group of mutually exclusive choices. The choices are presented so users can compare all options at once.\n * @public\n */\nexport const Radio = /* @__PURE__ */ forwardRef<FormControlRef, RadioProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      disabled: propDisabled,\n      id = fallbackId,\n      children,\n      value,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n      onFocus,\n      onBlur,\n      ...remainingProps\n    }: RadioProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n    const { registerMemberFormControlId } = useFormFieldContext();\n\n    const radioGroupContext = useContext(RadioGroupContext);\n\n    if (isDev() && !radioGroupContext) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        '<Radio /> can only be used as a child element of <RadioGroup />',\n      );\n    }\n\n    const {\n      isDisabled,\n      ariaDisabled,\n      controlState,\n      hasError,\n      readOnly,\n      name: groupName,\n      form: groupForm,\n      required: groupRequired,\n      value: groupValue,\n      onChange,\n      onValidityChange,\n    } = radioGroupContext || {};\n\n    // Imperative Handle Construction\n    const radioLabelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: radioLabelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (controlState !== undefined) {\n            return;\n          }\n\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          if (controlState !== undefined) {\n            return getValidationState(inputRef.current, 'manual');\n          }\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return getValidationState(inputRef.current, 'manual');\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { groupRequired, groupValue: String(groupValue) },\n      {\n        'aria-label': ariaLabelProp,\n        'aria-labelledby': ariaLabelledByProp,\n        'aria-describedby': ariaDescribedByProp,\n        'aria-details': ariaDetailsProp,\n      },\n      id,\n      onValidityChange,\n    );\n\n    /** Register every single input to ensure grouped validity reaches all native controls. */\n    useEffect(\n      () => registerMemberFormControlId(id),\n      [id, registerMemberFormControlId],\n    );\n\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,\n        payload: { formControlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,\n          payload: { formControlId: id },\n        });\n    }, [id, messagesContextDispatch]);\n\n    const disabled = propDisabled ?? isDisabled;\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const checked = value === groupValue;\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLLabelElement>({\n        onFocus,\n        onBlur,\n        disabled,\n      });\n\n    function handleChange(e: ChangeEvent<HTMLInputElement>) {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(e.target.value);\n      !controlState && validationOnChange?.();\n    }\n\n    let variant: 'accent' | 'emphasized' | 'default' = 'default';\n    let color: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (checked) {\n      variant = 'accent';\n    } else if (hasError) {\n      variant = 'emphasized';\n    }\n\n    if (hasError) {\n      color = 'critical';\n    } else if (!readOnly && checked) {\n      color = 'primary';\n    }\n\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      color,\n      disabled,\n    });\n\n    return (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={radioLabelRef}\n        className={clsx(\n          styles.label,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n            [styles.checked]: checked,\n          },\n          consumerClassName,\n          containerClassName,\n        )}\n        style={consumerStyle}\n        {...containerProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            checked={checked}\n            name={groupName}\n            form={groupForm}\n            value={value}\n            type=\"radio\"\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            required={groupRequired}\n            id={id}\n            onChange={handleChange}\n            onInvalid={(e) => {\n              if (controlState) {\n                e.preventDefault(); // Prevents the browser validation pop-up\n                return;\n              }\n\n              validationOnInvalid(e);\n            }}\n            readOnly={readOnly}\n            {..._mergeProps(\n              restProps,\n              focusProps,\n              controlState ? {} : ariaProps,\n            )}\n          />\n        </VisuallyHidden>\n        <div\n          className={clsx(\n            styles.knob({\n              disabled: disabledOrAriaDisabled,\n              checked,\n              isFocusVisible,\n              hasError,\n              readOnly,\n            }),\n            fieldColorsCSS({\n              disabled: disabledOrAriaDisabled,\n              variant,\n              color,\n            }),\n            focusClassName,\n          )}\n        >\n          <svg\n            className={clsx(\n              styles.innerKnob,\n              fieldColorsCSS({\n                color: hasError ? 'critical' : 'primary',\n                disabled: disabledOrAriaDisabled,\n                variant: 'accent',\n              }),\n            )}\n            viewBox=\"0 0 100 100\"\n          >\n            <circle r={isFocusVisible ? '20' : '25'} cx=\"50\" cy=\"50\" />\n          </svg>\n        </div>\n        <Text as=\"span\" textStyle=\"base\">\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\n(Radio as typeof Radio & { displayName: string }).displayName = COMPONENT_NAME;\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useId } from '../../core/hooks/useId.js';\nimport { AriaLabelingProps } 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 type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\nimport { WithChildren } from '../../core/types/with-children.js';\nimport { isDev } from '../../core/utils/is-node-environment.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { Text } from '../../typography/text/Text.js';\nimport { useFormFieldContext } from '../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { getValidationState } from '../validation/validation-builders.js';\n\nconst COMPONENT_NAME = 'Radio';\n\n// #region Typings\n/**\n * Properties for the Radio component\n * @public\n */\nexport type RadioProps = Pick<\n  FormControlProps<string, never, HTMLLabelElement>,\n  'disabled' | 'value' | 'onFocus' | 'onBlur'\n> &\n  DOMProps &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  AriaLabelingProps &\n  BehaviorTrackingProps & {\n    /**\n     * Handler that is called when the element's focus status changes.\n     * @deprecated Use onFocus/onBlur instead.\n     */\n    onFocusChange?: (isFocused: boolean) => void;\n  };\n//#endregion\n\n/**\n * Use the `Radio` to let users select one option from a small group of mutually exclusive choices. The choices are presented so users can compare all options at once.\n * @public\n */\nexport const Radio = /* @__PURE__ */ forwardRef<FormControlRef, RadioProps>(\n  (props, forwardedRef) => {\n    const fallbackId = useId();\n    const {\n      disabled: propDisabled,\n      id = fallbackId,\n      children,\n      value,\n      className: consumerClassName,\n      style: consumerStyle,\n      'data-testid': dataTestId,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n      onFocus,\n      onBlur,\n      ...remainingProps\n    }: RadioProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { dispatch: messagesContextDispatch } = useFormFieldMessagesContext();\n    const { registerMemberFormControlId } = useFormFieldContext();\n\n    const radioGroupContext = useContext(RadioGroupContext);\n\n    if (isDev() && !radioGroupContext) {\n      // oxlint-disable-next-line no-console\n      console.warn(\n        '<Radio /> can only be used as a child element of <RadioGroup />',\n      );\n    }\n\n    const {\n      isDisabled,\n      ariaDisabled,\n      controlState,\n      hasError,\n      readOnly,\n      name: groupName,\n      form: groupForm,\n      required: groupRequired,\n      value: groupValue,\n      onChange,\n      onValidityChange,\n    } = radioGroupContext || {};\n\n    // Imperative Handle Construction\n    const radioLabelRef = useRef<HTMLLabelElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef<HTMLLabelElement> => {\n      return {\n        element: radioLabelRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (controlState !== undefined) {\n            return;\n          }\n\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          if (controlState !== undefined) {\n            return getValidationState(inputRef.current, 'manual');\n          }\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return getValidationState(inputRef.current, 'manual');\n        },\n      };\n    });\n\n    const {\n      onChange: validationOnChange,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { groupRequired, groupValue: String(groupValue) },\n      {\n        'aria-label': ariaLabelProp,\n        'aria-labelledby': ariaLabelledByProp,\n        'aria-describedby': ariaDescribedByProp,\n        'aria-details': ariaDetailsProp,\n      },\n      id,\n      onValidityChange,\n    );\n\n    /** Register every single input to ensure grouped validity reaches all native controls. */\n    useEffect(\n      () => registerMemberFormControlId(id),\n      [id, registerMemberFormControlId],\n    );\n\n    useEffect(() => {\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.ADDMEMBERFORMCONTROLID,\n        payload: { formControlId: id },\n      });\n\n      return () =>\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.REMOVEMEMBERFORMCONTROLID,\n          payload: { formControlId: id },\n        });\n    }, [id, messagesContextDispatch]);\n\n    const disabled = propDisabled ?? isDisabled;\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n    const checked = value === groupValue;\n\n    const { containerClassName, ...containerProps } =\n      useContainerFocus<HTMLLabelElement>({\n        onFocus,\n        onBlur,\n        disabled,\n      });\n\n    function handleChange(e: ChangeEvent<HTMLInputElement>) {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(e.target.value);\n      !controlState && validationOnChange?.();\n    }\n\n    let variant: 'accent' | 'emphasized' | 'default' = 'default';\n    let color: 'critical' | 'primary' | 'neutral' = 'neutral';\n\n    if (checked) {\n      variant = 'accent';\n    } else if (hasError) {\n      variant = 'emphasized';\n    }\n\n    if (hasError) {\n      color = 'critical';\n    } else if (!readOnly && checked) {\n      color = 'primary';\n    }\n\n    const { focusProps, focusClassName, isFocusVisible } = useFocusRing({\n      color,\n      disabled,\n    });\n\n    return (\n      <label\n        data-testid={dataTestId}\n        htmlFor={id}\n        ref={radioLabelRef}\n        className={clsx(\n          styles.label,\n          {\n            [styles.disabled]: disabledOrAriaDisabled,\n            [styles.checked]: checked,\n          },\n          consumerClassName,\n          containerClassName,\n        )}\n        style={consumerStyle}\n        {...containerProps}\n        {...behavioralTrackingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <VisuallyHidden>\n          <input\n            ref={inputRef}\n            checked={checked}\n            name={groupName}\n            form={groupForm}\n            value={value}\n            type=\"radio\"\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            required={groupRequired}\n            id={id}\n            onChange={handleChange}\n            onInvalid={(e) => {\n              if (controlState) {\n                e.preventDefault(); // Prevents the browser validation pop-up\n                return;\n              }\n\n              validationOnInvalid(e);\n            }}\n            readOnly={readOnly}\n            {..._mergeProps(\n              restProps,\n              focusProps,\n              controlState ? {} : ariaProps,\n            )}\n          />\n        </VisuallyHidden>\n        <div\n          className={clsx(\n            styles.knob({\n              disabled: disabledOrAriaDisabled,\n              checked,\n              isFocusVisible,\n              hasError,\n              readOnly,\n            }),\n            fieldColorsCSS({\n              disabled: disabledOrAriaDisabled,\n              variant,\n              color,\n            }),\n            focusClassName,\n          )}\n        >\n          <svg\n            className={clsx(\n              styles.innerKnob,\n              fieldColorsCSS({\n                color: hasError ? 'critical' : 'primary',\n                disabled: disabledOrAriaDisabled,\n                variant: 'accent',\n              }),\n            )}\n            viewBox=\"0 0 100 100\"\n          >\n            <circle r={isFocusVisible ? '20' : '25'} cx=\"50\" cy=\"50\" />\n          </svg>\n        </div>\n        <Text as=\"span\" textStyle=\"base\">\n          {children}\n        </Text>\n      </label>\n    );\n  },\n);\n\n(Radio as typeof Radio & { displayName: string }).displayName = COMPONENT_NAME;\n"],
   "mappings": "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",
   "names": []
 }

package/esm/forms/radio/RadioGroup.js

@@ -32,7 +32,7 @@ const RadioGroupRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     _form,
     _messageTarget,
     defaultValue,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
     onChange,
     onValidityChange,

package/esm/forms/radio/RadioGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/RadioGroup.tsx"],
-  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.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 { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../forms-core/hooks/useFormFieldContext.js';\nimport { getI18nValidationState } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\n// #region Typings\n/**\n * Properties for the RadioGroup component\n * @public\n */\nexport type RadioGroupProps = FormControlProps<\n  string,\n  (value: string, event?: FocusEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  MaskingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n  };\n// #endregion\n\nconst RadioGroupRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef,\n  RadioGroupProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    value,\n    name,\n    _form,\n    _messageTarget,\n    defaultValue,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    onChange,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    readOnly: propReadOnly,\n    required: propRequired,\n    'aria-disabled': propAriaDisabled,\n    'aria-describedby': ariaDescribedby,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RadioGroupProps = props;\n\n  const {\n    id,\n    disabled,\n    required,\n    readOnly: _readOnly,\n    ariaDisabled,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled,\n    propReadOnly,\n    controlState,\n  });\n  const readOnly = !!_readOnly;\n  const { formFieldLabelId } = useFormFieldContext();\n  const groupLabelledby =\n    ariaLabelledby ?? (ariaLabel === undefined ? formFieldLabelId : undefined);\n\n  const [controllableState, setControllableState] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const intl = useIntl();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () =>\n      getI18nValidationState(\n        intl,\n        wrapperRef.current?.querySelector('input'),\n        'manual',\n      ),\n  );\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => controllableState ?? null,\n    focus: () => {\n      const checkedInput = wrapperRef.current?.querySelector(\n        'input:checked',\n      ) as HTMLInputElement | null;\n      (\n        checkedInput ??\n        (wrapperRef.current?.querySelector('input') as HTMLInputElement | null)\n      )?.focus();\n    },\n    validateField: ({ reveal, trigger }) => {\n      wrapperRef.current\n        ?.querySelectorAll('input')\n        ?.forEach((input) => input.checkValidity());\n      if (reveal) {\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const firstInput = wrapperRef.current?.querySelector(\n        'input',\n      ) as HTMLInputElement | null;\n      return Promise.resolve(\n        emitValidationState(getI18nValidationState(intl, firstInput, trigger)),\n      );\n    },\n    resetValidation: () => {\n      wrapperRef.current\n        ?.querySelectorAll('input')\n        ?.forEach((input) => input.setCustomValidity(''));\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n    return {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          'input:checked',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        if (controlState !== undefined) {\n          return;\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        emitValidationState(getI18nValidationState(intl, firstInput, 'manual'));\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        if (controlState !== undefined) {\n          return emitValidationState(\n            getI18nValidationState(intl, firstInput, 'manual'),\n          );\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, firstInput, 'manual'),\n        );\n      },\n    };\n  });\n\n  if (isDev() && name === undefined) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      'RadioGroup: The \"name\" prop is missing, which is necessary to link the radio buttons correctly.',\n    );\n  }\n\n  const radioGroupContextValue = useMemo(\n    () => ({\n      name,\n      form: _form,\n      isDisabled: disabled,\n      ariaDisabled,\n      hasError: showError,\n      value: controllableState,\n      onChange: setControllableState,\n      readOnly,\n      required,\n      controlState,\n      onValidityChange: emitValidationState,\n    }),\n    [\n      name,\n      _form,\n      disabled,\n      ariaDisabled,\n      showError,\n      controllableState,\n      setControllableState,\n      readOnly,\n      required,\n      controlState,\n      emitValidationState,\n    ],\n  );\n\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled,\n      emitValidationState,\n    });\n\n  return (\n    <div\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"vertical\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      aria-disabled={propAriaDisabled}\n      aria-labelledby={groupLabelledby}\n      ref={wrapperRef}\n      className={clsx(containerClassName, consumerClassName, styles.group, {\n        [styles.readOnly]: readOnly,\n        [styles.hasError]: showError,\n      })}\n      style={consumerStyle}\n      id={id}\n      aria-describedby={\n        [ariaDescribedby, inputProps['aria-describedby']]\n          .filter(Boolean)\n          .join(' ') || undefined\n      }\n      aria-invalid={inputProps['aria-invalid']}\n      {...containerProps}\n      {...remainingProps}\n    >\n      <RadioGroupContext.Provider value={radioGroupContextValue}>\n        <Flex flexDirection=\"column\" gap={8}>\n          {children}\n        </Flex>\n      </RadioGroupContext.Provider>\n      {hint && (\n        <BaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </div>\n  );\n});\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a 'RadioGroup' component.\n * @public\n */\nexport const RadioGroup = withFormFieldMessageContextProvider<\n  RadioGroupProps,\n  FormControlRef,\n  HTMLDivElement\n>(RadioGroupRoot);\n\n(RadioGroup as typeof RadioGroup & { displayName: string }).displayName =\n  'RadioGroup';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type FocusEvent,\n  forwardRef,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { RadioGroupContext } from './RadioGroupContext.js';\nimport * as styles from './styles.sty.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.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 { isDev } from '../../core/utils/is-node-environment.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport { withFormFieldMessageContextProvider } from '../forms-core/components/form-field/FormFieldMessageContextProvider.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useFormFieldContext } from '../forms-core/hooks/useFormFieldContext.js';\nimport { getI18nValidationState } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useContainerFocus } from '../hooks/useContainerFocus.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\nimport type { ValidationState } from '../validation/types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\n// #region Typings\n/**\n * Properties for the RadioGroup component\n * @public\n */\nexport type RadioGroupProps = FormControlProps<\n  string,\n  (value: string, event?: FocusEvent<HTMLInputElement>) => void | never,\n  HTMLDivElement\n> &\n  StylingProps &\n  WithChildren &\n  DataTestId &\n  MaskingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n  };\n// #endregion\n\nconst RadioGroupRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef,\n  RadioGroupProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    value,\n    name,\n    _form,\n    _messageTarget,\n    defaultValue,\n    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n    controlState,\n    onChange,\n    onValidityChange,\n    onFocus,\n    onBlur,\n    readOnly: propReadOnly,\n    required: propRequired,\n    'aria-disabled': propAriaDisabled,\n    'aria-describedby': ariaDescribedby,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    ...remainingProps\n  }: RadioGroupProps = props;\n\n  const {\n    id,\n    disabled,\n    required,\n    readOnly: _readOnly,\n    ariaDisabled,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageDispatch: messagesContextDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled,\n    propReadOnly,\n    controlState,\n  });\n  const readOnly = !!_readOnly;\n  const { formFieldLabelId } = useFormFieldContext();\n  const groupLabelledby =\n    ariaLabelledby ?? (ariaLabel === undefined ? formFieldLabelId : undefined);\n\n  const [controllableState, setControllableState] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const intl = useIntl();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const formValidityChangeRef = useRef<\n    ((state: ValidationState) => void) | undefined\n  >(undefined);\n  const _emitValidationState = useValidationStateEmitter((state) =>\n    formValidityChangeRef.current?.(state),\n  );\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () =>\n      getI18nValidationState(\n        intl,\n        wrapperRef.current?.querySelector('input'),\n        'manual',\n      ),\n  );\n\n  const formControl = useInternalFormRegistration({\n    id,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    onValidityChange,\n    getValue: () => controllableState ?? null,\n    focus: () => {\n      const checkedInput = wrapperRef.current?.querySelector(\n        'input:checked',\n      ) as HTMLInputElement | null;\n      (\n        checkedInput ??\n        (wrapperRef.current?.querySelector('input') as HTMLInputElement | null)\n      )?.focus();\n    },\n    validateField: ({ reveal, trigger }) => {\n      wrapperRef.current\n        ?.querySelectorAll('input')\n        ?.forEach((input) => input.checkValidity());\n      if (reveal) {\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n      const firstInput = wrapperRef.current?.querySelector(\n        'input',\n      ) as HTMLInputElement | null;\n      return Promise.resolve(\n        emitValidationState(getI18nValidationState(intl, firstInput, trigger)),\n      );\n    },\n    resetValidation: () => {\n      wrapperRef.current\n        ?.querySelectorAll('input')\n        ?.forEach((input) => input.setCustomValidity(''));\n      messagesContextDispatch?.({\n        type: FormFieldMessagesAction.SETISTOUCHED,\n        payload: { isTouched: false, resetShowError: true },\n      });\n    },\n  });\n  formValidityChangeRef.current = formControl.onValidityChange;\n\n  useImperativeHandle(forwardedRef, (): FormControlRef<HTMLDivElement> => {\n    return {\n      element: wrapperRef.current,\n      focus() {\n        const checkedInput = wrapperRef.current?.querySelector(\n          'input:checked',\n        ) as HTMLInputElement;\n        (\n          checkedInput ??\n          (wrapperRef.current?.querySelector('input') as HTMLInputElement)\n        )?.focus();\n      },\n      validate() {\n        if (controlState !== undefined) {\n          return;\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        emitValidationState(getI18nValidationState(intl, firstInput, 'manual'));\n      },\n      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n      validateAsync: async () => {\n        const firstInput = wrapperRef.current?.querySelector(\n          'input',\n        ) as HTMLInputElement | null;\n        if (controlState !== undefined) {\n          return emitValidationState(\n            getI18nValidationState(intl, firstInput, 'manual'),\n          );\n        }\n        wrapperRef.current\n          ?.querySelectorAll('input')\n          ?.forEach((i) => i.checkValidity());\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, firstInput, 'manual'),\n        );\n      },\n    };\n  });\n\n  if (isDev() && name === undefined) {\n    // oxlint-disable-next-line no-console\n    console.warn(\n      'RadioGroup: The \"name\" prop is missing, which is necessary to link the radio buttons correctly.',\n    );\n  }\n\n  const radioGroupContextValue = useMemo(\n    () => ({\n      name,\n      form: _form,\n      isDisabled: disabled,\n      ariaDisabled,\n      hasError: showError,\n      value: controllableState,\n      onChange: setControllableState,\n      readOnly,\n      required,\n      controlState,\n      onValidityChange: emitValidationState,\n    }),\n    [\n      name,\n      _form,\n      disabled,\n      ariaDisabled,\n      showError,\n      controllableState,\n      setControllableState,\n      readOnly,\n      required,\n      controlState,\n      emitValidationState,\n    ],\n  );\n\n  const { containerClassName, ...containerProps } =\n    useContainerFocus<HTMLDivElement>({\n      onFocus,\n      onBlur,\n      disabled,\n      emitValidationState,\n    });\n\n  return (\n    <div\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-orientation=\"vertical\"\n      role=\"radiogroup\"\n      aria-live=\"polite\"\n      aria-label={ariaLabel}\n      aria-disabled={propAriaDisabled}\n      aria-labelledby={groupLabelledby}\n      ref={wrapperRef}\n      className={clsx(containerClassName, consumerClassName, styles.group, {\n        [styles.readOnly]: readOnly,\n        [styles.hasError]: showError,\n      })}\n      style={consumerStyle}\n      id={id}\n      aria-describedby={\n        [ariaDescribedby, inputProps['aria-describedby']]\n          .filter(Boolean)\n          .join(' ') || undefined\n      }\n      aria-invalid={inputProps['aria-invalid']}\n      {...containerProps}\n      {...remainingProps}\n    >\n      <RadioGroupContext.Provider value={radioGroupContextValue}>\n        <Flex flexDirection=\"column\" gap={8}>\n          {children}\n        </Flex>\n      </RadioGroupContext.Provider>\n      {hint && (\n        <BaseItem\n          variant={showError ? 'error' : 'hint'}\n          disabled={disabled || ariaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </div>\n  );\n});\n\n/**\n * Radio buttons allow users to select one option from\n * a group of related options. To group options, wrap the\n * `Radio` components inside a 'RadioGroup' component.\n * @public\n */\nexport const RadioGroup = withFormFieldMessageContextProvider<\n  RadioGroupProps,\n  FormControlRef,\n  HTMLDivElement\n>(RadioGroupRoot);\n\n(RadioGroup as typeof RadioGroup & { displayName: string }).displayName =\n  'RadioGroup';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/radio/RadioGroupContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/RadioGroupContext.tsx"],
-  "sourcesContent": ["import { type FocusEvent, createContext } from 'react';\n\nimport type { FormControlState } from '../../core/types/form-control-state.js';\nimport type { ValidationState } from '../validation/types.js';\n\ntype RadioGroupContextType = {\n  /** The name of the radio group. */\n  name?: string;\n  /**\n   * Internal: associates the group's radios with a `_Form` rendered outside\n   * their React subtree via the native `form` attribute. Unstable.\n   * @internal\n   */\n  form?: string;\n  /** Whether the radio group is invalid. */\n  hasError?: boolean;\n  /** The currently selected value. */\n  value: string | undefined | null;\n  /** Whether the radio group is disabled. */\n  isDisabled?: boolean;\n  /** Whether the radio group is aria-disabled. */\n  ariaDisabled?: boolean;\n  /** Whether the radio group is readOnly. */\n  readOnly?: boolean;\n  /**\n   * Whether the radio group is required.\n   * @defaultValue false\n   * */\n  required?: boolean;\n  /** Handler that is called when the value of the group changes. */\n  onChange?: (value: string, event?: FocusEvent<HTMLInputElement>) => void;\n  /** Describes an enhanced representation of a control validity state and hints about its error for the end user. */\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  controlState?: FormControlState;\n  /**\n   * Called when validation state changes. Fires automatically on blur or change,\n   * and when triggered manually via `validate()` or `validateAsync()`.\n   */\n  onValidityChange?: (state: ValidationState) => void;\n};\n\n/** Context describing the state of a RadioGroup */\nexport const RadioGroupContext = createContext<\n  RadioGroupContextType | undefined\n>(undefined);\n"],
+  "sourcesContent": ["import { type FocusEvent, createContext } from 'react';\n\nimport type { FormControlState } from '../../core/types/form-control-state.js';\nimport type { ValidationState } from '../validation/types.js';\n\ntype RadioGroupContextType = {\n  /** The name of the radio group. */\n  name?: string;\n  /**\n   * Internal: associates the group's radios with a `_Form` rendered outside\n   * their React subtree via the native `form` attribute. Unstable.\n   * @internal\n   */\n  form?: string;\n  /** Whether the radio group is invalid. */\n  hasError?: boolean;\n  /** The currently selected value. */\n  value: string | undefined | null;\n  /** Whether the radio group is disabled. */\n  isDisabled?: boolean;\n  /** Whether the radio group is aria-disabled. */\n  ariaDisabled?: boolean;\n  /** Whether the radio group is readOnly. */\n  readOnly?: boolean;\n  /**\n   * Whether the radio group is required.\n   * @defaultValue false\n   * */\n  required?: boolean;\n  /** Handler that is called when the value of the group changes. */\n  onChange?: (value: string, event?: FocusEvent<HTMLInputElement>) => void;\n  /** Describes an enhanced representation of a control validity state and hints about its error for the end user. */\n  // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n  controlState?: FormControlState;\n  /**\n   * Called when validation state changes. Fires automatically on blur or change,\n   * and when triggered manually via `validate()` or `validateAsync()`.\n   */\n  onValidityChange?: (state: ValidationState) => void;\n};\n\n/** Context describing the state of a RadioGroup */\nexport const RadioGroupContext = createContext<\n  RadioGroupContextType | undefined\n>(undefined);\n"],
   "mappings": "AAAA,SAA0B,qBAAqB;AA0CxC,MAAM,oBAAoB,cAE/B,MAAS;",
   "names": []
 }

package/esm/forms/radio/styles.css

@@ -1,12 +1,12 @@
-._h96idu0-3-12-2 {
+._h96idu0-3-13-0 {
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._h96idu1-3-12-2 {
+._h96idu1-3-13-0 {
   cursor: default;
 }
-._h96idu5-3-12-2 {
+._h96idu5-3-13-0 {
   display: flex;
   gap: var(--dt-spacings-size-8, 8px);
   position: relative;
@@ -15,14 +15,14 @@
   vertical-align: middle;
   cursor: pointer;
 }
-._h96idu5-3-12-2._h96idu3-3-12-2 {
+._h96idu5-3-13-0._h96idu3-3-13-0 {
   cursor: not-allowed;
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._h96idu1-3-12-2 ._h96idu5-3-12-2 {
+._h96idu1-3-13-0 ._h96idu5-3-13-0 {
   cursor: default;
 }
-._h96idu6-3-12-2 {
+._h96idu6-3-13-0 {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -31,38 +31,38 @@
   min-width: var(--dt-spacings-size-20, 20px);
   height: var(--dt-spacings-size-20, 20px);
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
-  background-color: var(--_bx32h3-3-12-2);
+  background-color: var(--_bx32h3-3-13-0);
 }
-._h96idu7-3-12-2 {
+._h96idu7-3-13-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96idue-3-12-2 {
+._h96idue-3-13-0 {
   background-color: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._h96idug-3-12-2 {
+._h96idug-3-13-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduh-3-12-2 {
+._h96iduh-3-13-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._h96idui-3-12-2 {
+._h96idui-3-13-0 {
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._h96iduj-3-12-2 {
+._h96iduj-3-13-0 {
   background-color: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
   box-shadow: inset 0 0 0 var(--dt-borders-width-default, 1px) var(--dt-colors-border-critical-accent, #bb0731);
 }
-._h96iduk-3-12-2 {
+._h96iduk-3-13-0 {
   height: 100%;
-  fill: var(--_bx32h1-3-12-2);
+  fill: var(--_bx32h1-3-13-0);
 }
-._h96idu5-3-12-2:not(._h96idu4-3-12-2) ._h96iduk-3-12-2 {
+._h96idu5-3-13-0:not(._h96idu4-3-13-0) ._h96iduk-3-13-0 {
   display: none;
 }
-._h96idu1-3-12-2 ._h96iduk-3-12-2 {
+._h96idu1-3-13-0 ._h96iduk-3-13-0 {
   fill: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._h96idu2-3-12-2._h96idu1-3-12-2 ._h96iduk-3-12-2 {
+._h96idu2-3-13-0._h96idu1-3-13-0 ._h96iduk-3-13-0 {
   fill: var(--dt-colors-icon-critical-default, #bb0731);
 }

package/esm/forms/radio/styles.sty.js

@@ -2,14 +2,14 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./styles.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checked = "_h96idu4-3-12-2";
-var disabled = "_h96idu3-3-12-2";
-var group = "_h96idu0-3-12-2";
-var hasError = "_h96idu2-3-12-2";
-var innerKnob = "_h96iduk-3-12-2";
-var knob = _7a468({ defaultClassName: "_h96idu6-3-12-2", variantClassNames: { disabled: { true: "_h96idu7-3-12-2" }, checked: { true: "_h96idu8-3-12-2", false: "_h96idu9-3-12-2" }, hasError: { true: "_h96idua-3-12-2", false: "_h96idub-3-12-2" }, isFocusVisible: { true: "_h96iduc-3-12-2", false: "_h96idud-3-12-2" }, readOnly: { true: "_h96idue-3-12-2", false: "_h96iduf-3-12-2" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-12-2"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-12-2"], [{ readOnly: true, disabled: false }, "_h96idui-3-12-2"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-12-2"]] });
-var label = "_h96idu5-3-12-2";
-var readOnly = "_h96idu1-3-12-2";
+var checked = "_h96idu4-3-13-0";
+var disabled = "_h96idu3-3-13-0";
+var group = "_h96idu0-3-13-0";
+var hasError = "_h96idu2-3-13-0";
+var innerKnob = "_h96iduk-3-13-0";
+var knob = _7a468({ defaultClassName: "_h96idu6-3-13-0", variantClassNames: { disabled: { true: "_h96idu7-3-13-0" }, checked: { true: "_h96idu8-3-13-0", false: "_h96idu9-3-13-0" }, hasError: { true: "_h96idua-3-13-0", false: "_h96idub-3-13-0" }, isFocusVisible: { true: "_h96iduc-3-13-0", false: "_h96idud-3-13-0" }, readOnly: { true: "_h96idue-3-13-0", false: "_h96iduf-3-13-0" } }, defaultVariants: {}, compoundVariants: [[{ checked: false, hasError: true, isFocusVisible: false, disabled: false, readOnly: false }, "_h96idug-3-13-0"], [{ checked: false, hasError: false, isFocusVisible: false, disabled: false, readOnly: false }, "_h96iduh-3-13-0"], [{ readOnly: true, disabled: false }, "_h96idui-3-13-0"], [{ readOnly: true, hasError: true, disabled: false }, "_h96iduj-3-13-0"]] });
+var label = "_h96idu5-3-13-0";
+var readOnly = "_h96idu1-3-13-0";
 export {
   checked,
   disabled,

package/esm/forms/radio/styles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/radio/styles.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu4-3-12-2';\nexport var disabled = '_h96idu3-3-12-2';\nexport var group = '_h96idu0-3-12-2';\nexport var hasError = '_h96idu2-3-12-2';\nexport var innerKnob = '_h96iduk-3-12-2';\nexport var knob = _7a468({defaultClassName:'_h96idu6-3-12-2',variantClassNames:{disabled:{true:'_h96idu7-3-12-2'},checked:{true:'_h96idu8-3-12-2',false:'_h96idu9-3-12-2'},hasError:{true:'_h96idua-3-12-2',false:'_h96idub-3-12-2'},isFocusVisible:{true:'_h96iduc-3-12-2',false:'_h96idud-3-12-2'},readOnly:{true:'_h96idue-3-12-2',false:'_h96iduf-3-12-2'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false,readOnly:false},'_h96idug-3-12-2'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false,readOnly:false},'_h96iduh-3-12-2'],[{readOnly:true,disabled:false},'_h96idui-3-12-2'],[{readOnly:true,hasError:true,disabled:false},'_h96iduj-3-12-2']]});\nexport var label = '_h96idu5-3-12-2';\nexport var readOnly = '_h96idu1-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './styles.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checked = '_h96idu4-3-13-0';\nexport var disabled = '_h96idu3-3-13-0';\nexport var group = '_h96idu0-3-13-0';\nexport var hasError = '_h96idu2-3-13-0';\nexport var innerKnob = '_h96iduk-3-13-0';\nexport var knob = _7a468({defaultClassName:'_h96idu6-3-13-0',variantClassNames:{disabled:{true:'_h96idu7-3-13-0'},checked:{true:'_h96idu8-3-13-0',false:'_h96idu9-3-13-0'},hasError:{true:'_h96idua-3-13-0',false:'_h96idub-3-13-0'},isFocusVisible:{true:'_h96iduc-3-13-0',false:'_h96idud-3-13-0'},readOnly:{true:'_h96idue-3-13-0',false:'_h96iduf-3-13-0'}},defaultVariants:{},compoundVariants:[[{checked:false,hasError:true,isFocusVisible:false,disabled:false,readOnly:false},'_h96idug-3-13-0'],[{checked:false,hasError:false,isFocusVisible:false,disabled:false,readOnly:false},'_h96iduh-3-13-0'],[{readOnly:true,disabled:false},'_h96idui-3-13-0'],[{readOnly:true,hasError:true,disabled:false},'_h96iduj-3-13-0']]});\nexport var label = '_h96idu5-3-13-0';\nexport var readOnly = '_h96idu1-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,WAAW;AACf,IAAI,YAAY;AAChB,IAAI,OAAO,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,SAAQ,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,gBAAe,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,SAAQ,OAAM,UAAS,MAAK,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,SAAQ,OAAM,UAAS,OAAM,gBAAe,OAAM,UAAS,OAAM,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,iBAAiB,CAAC,EAAC,CAAC;AAC9rB,IAAI,QAAQ;AACZ,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/search-input/SearchInput.css

@@ -1,6 +1,6 @@
-._1mumub80-3-12-2 {
+._1mumub80-3-13-0 {
   min-width: 192px;
 }
-._1mumub81-3-12-2 {
+._1mumub81-3-13-0 {
   min-width: 272px;
 }

package/esm/forms/search-input/SearchInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/SearchInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from 'react';\n\nimport { MagnifyingGlassIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SearchInput.sty.js';\nimport { Stepper } from './Stepper.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.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 type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport { BaseInputSuffix } from '../_base-input/BaseInputContent.js';\nimport { ClearButton } from '../_base-input/ClearButton.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\n\nconst COMPONENT_NAME = 'SearchInput';\n\n//#region Typings\n/**\n * The properties of the SearchInput component.\n * @public\n */\nexport type SearchInputProps = Pick<\n  BaseInputProps,\n  | 'variant'\n  | 'onBlur'\n  | 'autoComplete'\n  | 'placeholder'\n  | 'minLength'\n  | 'maxLength'\n> &\n  // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n  FormControlStateProps &\n  WithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  FormControlProps<string, (value: string) => void, HTMLInputElement> &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n  };\n\n//#endregion Typings\n\nconst SearchInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  SearchInputProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    onChange,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    value,\n    defaultValue,\n    placeholder,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    onValidityChange,\n    ...remainingProps\n  }: SearchInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const controlRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs<FormControlRef<HTMLDivElement> | null>([\n    forwardedRef,\n    controlRef,\n  ]);\n\n  const formControl = useInternalFormRegistration({\n    id: propId,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    value: internalValue ?? '',\n    controlRef,\n    onValidityChange,\n  });\n\n  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setInternalValue(e.target.value);\n    if (slots.stepper && e.target.value === '') {\n      const { onCurrentChange } = slots.stepper.props;\n      onCurrentChange(0);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (!slots.stepper) {\n      return;\n    }\n    if (e.key !== 'Enter') {\n      return;\n    }\n\n    e.preventDefault();\n    const { current, total, onCurrentChange } = slots.stepper.props;\n\n    if (e.shiftKey) {\n      onCurrentChange(current > 0 ? current - 1 : total - 1);\n    } else {\n      onCurrentChange(current < total - 1 ? current + 1 : 0);\n    }\n  };\n\n  const onClear = () => {\n    setInternalValue('');\n  };\n\n  const [slots] = useSlots(children, {\n    stepper: Stepper,\n  });\n\n  const isEmpty = internalValue === '' || internalValue === undefined;\n  const hasStepper = !!slots.stepper;\n\n  return (\n    <BaseInput\n      ref={mergedRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      {...(hasStepper ? { onKeyDown: handleKeyDown } : {})}\n      id={formControl.id}\n      name={name}\n      form={_form}\n      className={clsx(styles.searchInput({ hasStepper }), consumerClassName)}\n      type=\"search\"\n      value={internalValue}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleOnChange}\n      onValidityChange={formControl.onValidityChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      placeholder={placeholder}\n      data-dt-component={COMPONENT_NAME}\n      // The width of the input is handled via CSS and the parent elements,\n      // so we set it to the minimum here to prevent the default width behavior of inputs\n      size={1}\n    >\n      <BaseInput.Prefix>\n        <MagnifyingGlassIcon />\n      </BaseInput.Prefix>\n      {!isEmpty && (\n        <BaseInput.ReservedSuffix>\n          {slots.stepper}\n          <ClearButton onClear={onClear} />\n        </BaseInput.ReservedSuffix>\n      )}\n      {children}\n    </BaseInput>\n  );\n});\n\n/**\n * Use the `SearchInput` component for search queries.\n * It includes a built-in `Clear` button for quick resets.\n * @public\n */\nexport const SearchInput = Object.assign(SearchInputRoot, {\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n  Stepper,\n});\n\n(SearchInput as typeof SearchInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from 'react';\n\nimport { MagnifyingGlassIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './SearchInput.sty.js';\nimport { Stepper } from './Stepper.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useSlots } from '../../core/hooks/useSlots.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport type { FormControlStateProps } from '../../core/types/form-control-state.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 type { BaseInputProps } from '../_base-input/base-input.types.js';\nimport { BaseInput } from '../_base-input/BaseInput.js';\nimport { BaseInputButton } from '../_base-input/BaseInputButton.js';\nimport { BaseInputSuffix } from '../_base-input/BaseInputContent.js';\nimport { ClearButton } from '../_base-input/ClearButton.js';\nimport { useInternalFormRegistration } from '../form/hooks/useInternalFormRegistration.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport type { MessageTarget } from '../validation/message-routing.js';\n\nconst COMPONENT_NAME = 'SearchInput';\n\n//#region Typings\n/**\n * The properties of the SearchInput component.\n * @public\n */\nexport type SearchInputProps = Pick<\n  BaseInputProps,\n  | 'variant'\n  | 'onBlur'\n  | 'autoComplete'\n  | 'placeholder'\n  | 'minLength'\n  | 'maxLength'\n> &\n  // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321\n  FormControlStateProps &\n  WithChildren &\n  StylingProps &\n  DataTestId &\n  MaskingProps &\n  FormControlProps<string, (value: string) => void, HTMLInputElement> &\n  BehaviorTrackingProps & {\n    /**\n     * Internal: associates this control with a `_Form` rendered outside its\n     * React subtree via the native `form` attribute. Unstable.\n     * @internal\n     */\n    _form?: string;\n    /**\n     * Internal: routes this control's native/Strato validation messages to the\n     * field outlet (default), the enclosing form's outlet, or both. Unstable.\n     * @internal\n     */\n    _messageTarget?: MessageTarget | MessageTarget[];\n  };\n\n//#endregion Typings\n\nconst SearchInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  SearchInputProps\n>((props, forwardedRef) => {\n  const {\n    children,\n    onChange,\n    id: propId,\n    name,\n    _form,\n    _messageTarget,\n    value,\n    defaultValue,\n    placeholder,\n    required,\n    readOnly = false,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    className: consumerClassName,\n    onValidityChange,\n    ...remainingProps\n  }: SearchInputProps = props;\n\n  const [behavioralTrackingProps, restProps] =\n    useBehavioralTrackingProps(remainingProps);\n\n  const [internalValue, setInternalValue] = useControllableState({\n    defaultValue,\n    value,\n    onChange,\n  });\n\n  const controlRef = useRef<FormControlRef<HTMLDivElement>>(null);\n  const mergedRef = useMergeRefs<FormControlRef<HTMLDivElement> | null>([\n    forwardedRef,\n    controlRef,\n  ]);\n\n  const formControl = useInternalFormRegistration({\n    id: propId,\n    name,\n    form: _form,\n    messageTarget: _messageTarget,\n    value: internalValue ?? '',\n    controlRef,\n    onValidityChange,\n  });\n\n  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {\n    setInternalValue(e.target.value);\n    if (slots.stepper && e.target.value === '') {\n      const { onCurrentChange } = slots.stepper.props;\n      onCurrentChange(0);\n    }\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (!slots.stepper) {\n      return;\n    }\n    if (e.key !== 'Enter') {\n      return;\n    }\n\n    e.preventDefault();\n    const { current, total, onCurrentChange } = slots.stepper.props;\n\n    if (e.shiftKey) {\n      onCurrentChange(current > 0 ? current - 1 : total - 1);\n    } else {\n      onCurrentChange(current < total - 1 ? current + 1 : 0);\n    }\n  };\n\n  const onClear = () => {\n    setInternalValue('');\n  };\n\n  const [slots] = useSlots(children, {\n    stepper: Stepper,\n  });\n\n  const isEmpty = internalValue === '' || internalValue === undefined;\n  const hasStepper = !!slots.stepper;\n\n  return (\n    <BaseInput\n      ref={mergedRef}\n      {...mergeProps(restProps, behavioralTrackingProps)}\n      {...(hasStepper ? { onKeyDown: handleKeyDown } : {})}\n      id={formControl.id}\n      name={name}\n      form={_form}\n      className={clsx(styles.searchInput({ hasStepper }), consumerClassName)}\n      type=\"search\"\n      value={internalValue}\n      required={required}\n      readOnly={readOnly}\n      onChange={handleOnChange}\n      onValidityChange={formControl.onValidityChange}\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      aria-disabled={ariaDisabledProp}\n      placeholder={placeholder}\n      data-dt-component={COMPONENT_NAME}\n      // The width of the input is handled via CSS and the parent elements,\n      // so we set it to the minimum here to prevent the default width behavior of inputs\n      size={1}\n    >\n      <BaseInput.Prefix>\n        <MagnifyingGlassIcon />\n      </BaseInput.Prefix>\n      {!isEmpty && (\n        <BaseInput.ReservedSuffix>\n          {slots.stepper}\n          <ClearButton onClear={onClear} />\n        </BaseInput.ReservedSuffix>\n      )}\n      {children}\n    </BaseInput>\n  );\n});\n\n/**\n * Use the `SearchInput` component for search queries.\n * It includes a built-in `Clear` button for quick resets.\n * @public\n */\nexport const SearchInput = Object.assign(SearchInputRoot, {\n  Suffix: BaseInputSuffix,\n  Button: BaseInputButton,\n  Stepper,\n});\n\n(SearchInput as typeof SearchInput & { displayName: string }).displayName =\n  COMPONENT_NAME;\n"],
   "mappings": "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",
   "names": []
 }

package/esm/forms/search-input/SearchInput.sty.js

@@ -1,6 +1,6 @@
 import "./SearchInput.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var searchInput = _7a468({ defaultClassName: "_1mumub80-3-12-2", variantClassNames: { hasStepper: { true: "_1mumub81-3-12-2" } }, defaultVariants: {}, compoundVariants: [] });
+var searchInput = _7a468({ defaultClassName: "_1mumub80-3-13-0", variantClassNames: { hasStepper: { true: "_1mumub81-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   searchInput
 };

package/esm/forms/search-input/SearchInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/SearchInput.css.ts"],
-  "sourcesContent": ["import './SearchInput.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var searchInput = _7a468({defaultClassName:'_1mumub80-3-12-2',variantClassNames:{hasStepper:{true:'_1mumub81-3-12-2'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import './SearchInput.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var searchInput = _7a468({defaultClassName:'_1mumub80-3-13-0',variantClassNames:{hasStepper:{true:'_1mumub81-3-13-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,cAAc,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,YAAW,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/search-input/Stepper.css

@@ -1,21 +1,21 @@
-._s3yy5s0-3-12-2 {
+._s3yy5s0-3-13-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   align-items: center;
 }
-._s3yy5s1-3-12-2 {
+._s3yy5s1-3-13-0 {
   display: flex;
   gap: var(--dt-spacings-size-0, 0);
 }
-._s3yy5s2-3-12-2 {
+._s3yy5s2-3-13-0 {
   margin: 0;
 }
-._s3yy5s1-3-12-2 > ._s3yy5s2-3-12-2:first-child {
+._s3yy5s1-3-13-0 > ._s3yy5s2-3-13-0:first-child {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-._s3yy5s1-3-12-2 > ._s3yy5s2-3-12-2:last-child {
+._s3yy5s1-3-13-0 > ._s3yy5s2-3-13-0:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

package/esm/forms/search-input/Stepper.sty.js

@@ -5,9 +5,9 @@ import "../hooks/useAutofillEvent.css";
 import "../_base-input/BaseInput.css";
 import "../_base-input/BaseInputContent.css";
 import "./Stepper.css";
-var matchPositionIndicators = "_s3yy5s0-3-12-2 _o6rxr70-3-12-2 _da9a8v0-3-12-2 _da9a8v2-3-12-2 _da9a8v3-3-12-2 _da9a8vb-3-12-2";
-var stepperButton = "_s3yy5s2-3-12-2 _1a8lqy9e-3-12-2";
-var stepperButtons = "_s3yy5s1-3-12-2";
+var matchPositionIndicators = "_s3yy5s0-3-13-0 _o6rxr70-3-13-0 _da9a8v0-3-13-0 _da9a8v2-3-13-0 _da9a8v3-3-13-0 _da9a8vb-3-13-0";
+var stepperButton = "_s3yy5s2-3-13-0 _1a8lqy9e-3-13-0";
+var stepperButtons = "_s3yy5s1-3-13-0";
 export {
   matchPositionIndicators,
   stepperButton,

package/esm/forms/search-input/Stepper.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/search-input/Stepper.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport '../_base-input/BaseInput.css';\nimport '../_base-input/BaseInputContent.css';\nimport './Stepper.css';\nexport var matchPositionIndicators = '_s3yy5s0-3-12-2 _o6rxr70-3-12-2 _da9a8v0-3-12-2 _da9a8v2-3-12-2 _da9a8v3-3-12-2 _da9a8vb-3-12-2';\nexport var stepperButton = '_s3yy5s2-3-12-2 _1a8lqy9e-3-12-2';\nexport var stepperButtons = '_s3yy5s1-3-12-2';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport '../_base-input/BaseInput.css';\nimport '../_base-input/BaseInputContent.css';\nimport './Stepper.css';\nexport var matchPositionIndicators = '_s3yy5s0-3-13-0 _o6rxr70-3-13-0 _da9a8v0-3-13-0 _da9a8v2-3-13-0 _da9a8v3-3-13-0 _da9a8vb-3-13-0';\nexport var stepperButton = '_s3yy5s2-3-13-0 _1a8lqy9e-3-13-0';\nexport var stepperButtons = '_s3yy5s1-3-13-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,0BAA0B;AAC9B,IAAI,gBAAgB;AACpB,IAAI,iBAAiB;",
   "names": []
 }

package/esm/forms/select/Select.js

@@ -87,7 +87,7 @@ function SelectFwd(props, forwardedRef) {
   const {
     multiple = false,
     disabled: propsDisabled,
-    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    // oxlint-disable-next-line typescript/no-deprecated -- APPDEV-18321
     controlState,
     clearable = multiple,
     name,