@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/forms/checkbox/Checkbox.js

@@ -7,6 +7,7 @@ import {
   useImperativeHandle,
   useRef
 } from "react";
+import { useIntl } from "react-intl";
 import { CheckmarkSmallIcon, MinusIcon } from "@dynatrace/strato-icons";
 import {
   checkboxIconCSS,
@@ -17,7 +18,6 @@ import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHi
 import { useAriaLabelingProps as _useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useControllableState } from "../../core/hooks/useControllableState.js";
-import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { useSafeForwardProps as _useSafeForwardProps } from "../../core/hooks/useSafeForwardProps.js";
 import { focusRingStatic } from "../../core/styles/focusRingStatic.sty.js";
 import { mergeProps } from "../../core/utils/merge-props.js";
@@ -25,11 +25,14 @@ import { Flex } from "../../layouts/flex/Flex.js";
 import { fieldTokens as fieldColorsCSS } from "../../styles/field.sty.js";
 import { textStyle as textStyleCSS } from "../../styles/textStyle.sty.js";
 import { InternalBaseItem as BaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
-import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
-import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
-import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
+import { useFormControl } from "../forms-core/hooks/useFormControl.js";
+import {
+  getI18nValidationState,
+  useFormFieldValidation
+} from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
-import { useInputHint } from "../hooks/useInputHint.js";
+import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
+import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
 const COMPONENT_NAME = "Checkbox";
 const Checkbox = forwardRef(
   (props, forwardedRef) => {
@@ -42,8 +45,10 @@ const Checkbox = forwardRef(
       value,
       name,
       formValue,
+      onValidityChange,
       onChange,
       children,
+      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
       controlState,
       className: consumerClassName,
       style: consumerStyle,
@@ -56,28 +61,46 @@ const Checkbox = forwardRef(
     const [behavioralTrackingProps, restProps] = useBehavioralTrackingProps(remainingProps);
     const ariaLabelingProps = _useAriaLabelingProps(restProps);
     const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);
-    const { state: messagesContextState, dispatch: messagesContextDispatch } = useFormFieldMessagesContext();
     const {
+      id,
       disabled,
       required,
-      id,
       ariaDisabled,
-      readOnly: _readOnly
-    } = useSyncedFormControlProps({
+      readOnly: _readOnly,
+      inputProps,
+      hintProps,
+      hint,
+      showError,
+      messageState: messagesContextState,
+      messageDispatch: messagesContextDispatch
+    } = useFormControl({
+      propId,
       propDisabled,
       propRequired,
-      propId,
       propAriaDisabled: ariaDisabledProp,
-      propReadOnly
+      propReadOnly,
+      controlState
     });
+    const intl = useIntl();
     const rootRef = useRef(null);
     const inputRef = useRef(null);
+    const _emitValidationState = useValidationStateEmitter(onValidityChange);
+    const emitValidationState = useCustomMessageEmitter(
+      _emitValidationState,
+      () => getI18nValidationState(intl, inputRef.current, "manual")
+    );
     const {
       onChange: validationOnChange,
       onBlur: validationOnBlur,
       onInvalid: validationOnInvalid,
       ariaProps
-    } = useFormFieldValidation(inputRef, { required }, ariaLabelingProps);
+    } = useFormFieldValidation(
+      inputRef,
+      { required, value: String(value) },
+      ariaLabelingProps,
+      void 0,
+      _emitValidationState
+    );
     useImperativeHandle(forwardedRef, () => {
       return {
         element: rootRef.current,
@@ -92,7 +115,21 @@ const Checkbox = forwardRef(
               type: FormFieldMessagesAction.SETISTOUCHED,
               payload: { isTouched: true }
             });
+            emitValidationState(
+              getI18nValidationState(intl, inputRef.current, "manual")
+            );
           }
+        },
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          inputRef.current?.checkValidity();
+          messagesContextDispatch?.({
+            type: FormFieldMessagesAction.SETISTOUCHED,
+            payload: { isTouched: true }
+          });
+          return emitValidationState(
+            getI18nValidationState(intl, inputRef.current, "manual")
+          );
         }
       };
     });
@@ -102,12 +139,6 @@ const Checkbox = forwardRef(
     });
     const disabledOrAriaDisabled = disabled || ariaDisabled || false;
     const readOnly = !!_readOnly;
-    const [hasError, hint] = useFormControlState(controlState);
-    const { inputProps, hintProps } = useInputHint({
-      hint,
-      hasError
-    });
-    const showError = hasError || messagesContextState.showError;
     let focusRingColor = "neutral";
     if (showError) {
       focusRingColor = "critical";
@@ -122,12 +153,6 @@ const Checkbox = forwardRef(
       setState(newValue);
       onChange?.(newValue, e);
       validationOnChange();
-      if (!messagesContextState.isTouched) {
-        messagesContextDispatch?.({
-          type: FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-      }
     };
     useEffect(() => {
       if (inputRef.current) {

package/esm/forms/checkbox/Checkbox.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents } from '../../core/types/events.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 { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Checkboxes allow the user to select one or more options from a list of options.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      formValue,\n      onChange,\n      children,\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaLabelingProps = _useAriaLabelingProps(restProps);\n    const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const { state: messagesContextState, dispatch: messagesContextDispatch } =\n      useFormFieldMessagesContext();\n\n    const {\n      disabled,\n      required,\n      id,\n      ariaDisabled,\n      readOnly: _readOnly,\n    } = useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n\n    // Imperative Handle Construction\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(inputRef, { required }, ariaLabelingProps);\n\n    useImperativeHandle(forwardedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n          }\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\n\n    const [hasError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps, hintProps } = useInputHint({\n      hint,\n      hasError,\n    });\n\n    const showError = hasError || messagesContextState.showError;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(disabled || readOnly) && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n\n      if (!messagesContextState.isTouched) {\n        messagesContextDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      }\n    };\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = value === 'indeterminate';\n      }\n    }, [value]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...mergeProps(forwardProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-checked={state === 'indeterminate' ? 'mixed' : state}\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onBlur={(event) => {\n                  validationOnBlur(event);\n                }}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS({ readOnly, hasError: showError })}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  type ChangeEvent,\n  forwardRef,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CheckmarkSmallIcon, MinusIcon } from '@dynatrace/strato-icons';\n\nimport {\n  checkboxIconCSS,\n  checkboxKnobCSS,\n  checkboxLabelCSS,\n} from './Checkbox.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useBehavioralTrackingProps } from '../../core/hooks/useBehavioralTrackingProps.js';\nimport { useControllableState } from '../../core/hooks/useControllableState.js';\nimport { useSafeForwardProps as _useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { focusRingStatic } from '../../core/styles/focusRingStatic.sty.js';\nimport type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport type { FocusEvents } from '../../core/types/events.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 { mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { fieldTokens as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\nconst COMPONENT_NAME = 'Checkbox';\n\n// #region Typings\n/**\n * @public\n */\nexport type CheckboxProps = FormControlProps<\n  boolean | 'indeterminate',\n  (checked: boolean, event?: ChangeEvent<HTMLInputElement>) => void | never\n> &\n  FocusEvents &\n  StylingProps &\n  DataTestId &\n  WithChildren &\n  MaskingProps &\n  BehaviorTrackingProps & {\n    /**\n     * A string representing the value used for the checkbox.\n     * When submitted in a form, it is only submitted if checked, with the set value.\n     * If undefined, the string 'on' is submitted by default as per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-value.\n     */\n    formValue?: string;\n  };\n// #endregion\n\n/**\n * Checkboxes allow the user to select one or more options from a list of options.\n * @public\n */\nexport const Checkbox = forwardRef<FormControlRef, CheckboxProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled: propDisabled,\n      required: propRequired,\n      readOnly: propReadOnly,\n      id: propId,\n      defaultValue,\n      value,\n      name,\n      formValue,\n      onValidityChange,\n      onChange,\n      children,\n      // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n      controlState,\n      className: consumerClassName,\n      style: consumerStyle,\n      'aria-disabled': ariaDisabledProp,\n      'data-testid': dataTestId,\n      'data-dtrum-mask': dataDtrumMask,\n      'data-dtrum-allow': dataDtrumAllow,\n      ...remainingProps\n    }: CheckboxProps = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const ariaLabelingProps = _useAriaLabelingProps(restProps);\n    const forwardProps = _useSafeForwardProps(restProps, ariaLabelingProps);\n\n    const {\n      id,\n      disabled,\n      required,\n      ariaDisabled,\n      readOnly: _readOnly,\n      inputProps,\n      hintProps,\n      hint,\n      showError,\n      messageState: messagesContextState,\n      messageDispatch: messagesContextDispatch,\n    } = useFormControl({\n      propId,\n      propDisabled,\n      propRequired,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n      controlState,\n    });\n\n    // Imperative Handle Construction\n    const intl = useIntl();\n    const rootRef = useRef<HTMLDivElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const _emitValidationState = useValidationStateEmitter(onValidityChange);\n    const emitValidationState = useCustomMessageEmitter(\n      _emitValidationState,\n      () => getI18nValidationState(intl, inputRef.current, 'manual'),\n    );\n    const {\n      onChange: validationOnChange,\n      onBlur: validationOnBlur,\n      onInvalid: validationOnInvalid,\n      ariaProps,\n    } = useFormFieldValidation(\n      inputRef,\n      { required, value: String(value) },\n      ariaLabelingProps,\n      undefined,\n      _emitValidationState,\n    );\n\n    useImperativeHandle(forwardedRef, (): FormControlRef => {\n      return {\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        focus() {\n          inputRef.current?.focus();\n        },\n        validate() {\n          if (messagesContextState) {\n            inputRef.current?.checkValidity();\n            messagesContextDispatch?.({\n              type: FormFieldMessagesAction.SETISTOUCHED,\n              payload: { isTouched: true },\n            });\n            emitValidationState(\n              getI18nValidationState(intl, inputRef.current, 'manual'),\n            );\n          }\n        },\n        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.\n        validateAsync: async () => {\n          inputRef.current?.checkValidity();\n          messagesContextDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n          return emitValidationState(\n            getI18nValidationState(intl, inputRef.current, 'manual'),\n          );\n        },\n      };\n    });\n\n    const [state, setState] = useControllableState({\n      defaultValue,\n      value,\n    });\n\n    const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n    const readOnly = !!_readOnly;\n\n    let focusRingColor: 'neutral' | 'critical' | 'primary' = 'neutral';\n    if (showError) {\n      focusRingColor = 'critical';\n    } else if (!(disabled || readOnly) && state) {\n      focusRingColor = 'primary';\n    }\n\n    const handleOnChange = (e: ChangeEvent<HTMLInputElement>): void => {\n      if (readOnly) {\n        return;\n      }\n\n      const newValue = e.target.indeterminate ? true : e.target.checked;\n      setState(newValue);\n      onChange?.(newValue, e);\n      validationOnChange();\n    };\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = value === 'indeterminate';\n      }\n    }, [value]);\n\n    let fieldColorVariant: 'default' | 'accent' | 'emphasized' = 'default';\n    if (state === true || state === 'indeterminate') {\n      fieldColorVariant = 'accent';\n    } else if (showError || disabledOrAriaDisabled) {\n      fieldColorVariant = 'emphasized';\n    }\n\n    let fieldColorColor: 'neutral' | 'primary' | 'critical' = 'primary';\n    if (showError) {\n      fieldColorColor = 'critical';\n    } else if (state === false) {\n      fieldColorColor = 'neutral';\n    }\n\n    return (\n      <Flex\n        ref={rootRef}\n        data-testid={dataTestId}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        flexDirection=\"column\"\n        gap={4}\n        className={consumerClassName}\n        style={consumerStyle}\n        {...mergeProps(forwardProps, behavioralTrackingProps)}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <label\n          htmlFor={id}\n          className={clsx(\n            checkboxLabelCSS({\n              required: typeof children === 'string' && required,\n              disabled: disabledOrAriaDisabled,\n              readOnly,\n            }),\n            textStyleCSS({ fontStyle: 'text', textStyle: 'base' }),\n          )}\n        >\n          <div\n            className={clsx(\n              checkboxKnobCSS({\n                disabled: disabledOrAriaDisabled,\n                hasChildren: !!children,\n                hasError: showError,\n                checked: state === true || state === 'indeterminate',\n                readOnly,\n              }),\n              fieldColorsCSS({\n                variant: fieldColorVariant,\n                disabled: disabledOrAriaDisabled,\n                color: fieldColorColor,\n              }),\n              focusRingStatic({\n                when: 'focus-within-visible',\n                color: focusRingColor,\n                disabled,\n              }),\n            )}\n          >\n            <VisuallyHidden>\n              <input\n                id={id}\n                ref={inputRef}\n                type=\"checkbox\"\n                aria-checked={state === 'indeterminate' ? 'mixed' : state}\n                aria-required={required}\n                aria-disabled={ariaDisabled}\n                readOnly={readOnly}\n                name={name}\n                value={formValue}\n                disabled={disabled}\n                required={required}\n                checked={state === true}\n                onChange={handleOnChange}\n                onBlur={(event) => {\n                  validationOnBlur(event);\n                }}\n                onInvalid={validationOnInvalid}\n                {...(controlState ? inputProps : ariaProps)}\n              />\n            </VisuallyHidden>\n            <div className={checkboxIconCSS({ readOnly, hasError: showError })}>\n              <CheckboxIconSvg state={state} />\n            </div>\n          </div>\n          {children}\n        </label>\n        {hint && (\n          <BaseItem\n            variant={showError ? 'error' : 'hint'}\n            disabled={disabledOrAriaDisabled}\n            {...hintProps}\n          >\n            {hint}\n          </BaseItem>\n        )}\n      </Flex>\n    );\n  },\n);\n(Checkbox as typeof Checkbox & { displayName: string }).displayName =\n  COMPONENT_NAME;\n\ntype CheckboxIconProps = {\n  state: boolean | 'indeterminate';\n};\n\n/** Determines what svg to display based on the checked and indeterminate attributes. */\nconst CheckboxIconSvg = memo((props: CheckboxIconProps) => {\n  switch (props.state) {\n    case true:\n      return <CheckmarkSmallIcon />;\n    case 'indeterminate':\n      return <MinusIcon />;\n    case false:\n    default:\n      return null;\n  }\n});\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/checkbox/Checkbox.sty.js

@@ -2,9 +2,9 @@ import "../../core/components/app-root/AppRoot.css";
 import "../../styles/field.css";
 import "./Checkbox.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-7-1", variantClassNames: { readOnly: { true: "_qmw7spn-3-7-1" }, hasError: { true: "_qmw7spo-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-7-1"]] });
-var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-7-1", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-7-1", false: "_qmw7sp6-3-7-1" }, disabled: { true: "_qmw7sp7-3-7-1", false: "_qmw7sp8-3-7-1" }, hasError: { true: "_qmw7sp9-3-7-1", false: "_qmw7spa-3-7-1" }, checked: { true: "_qmw7spb-3-7-1", false: "_qmw7spc-3-7-1", indeterminate: "_qmw7spd-3-7-1", undefined: "_qmw7spe-3-7-1" }, readOnly: { true: "_qmw7spf-3-7-1" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-7-1"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-7-1"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-7-1"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-7-1"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-7-1"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-7-1"]] });
-var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-7-1", variantClassNames: { disabled: { true: "_qmw7sp1-3-7-1" }, required: { true: "_qmw7sp2-3-7-1" }, readOnly: { true: "_qmw7sp3-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var checkboxIconCSS = _7a468({ defaultClassName: "_qmw7spm-3-9-0", variantClassNames: { readOnly: { true: "_qmw7spn-3-9-0" }, hasError: { true: "_qmw7spo-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: true }, "_qmw7spp-3-9-0"]] });
+var checkboxKnobCSS = _7a468({ defaultClassName: "_qmw7sp4-3-9-0", variantClassNames: { hasChildren: { true: "_qmw7sp5-3-9-0", false: "_qmw7sp6-3-9-0" }, disabled: { true: "_qmw7sp7-3-9-0", false: "_qmw7sp8-3-9-0" }, hasError: { true: "_qmw7sp9-3-9-0", false: "_qmw7spa-3-9-0" }, checked: { true: "_qmw7spb-3-9-0", false: "_qmw7spc-3-9-0", indeterminate: "_qmw7spd-3-9-0", undefined: "_qmw7spe-3-9-0" }, readOnly: { true: "_qmw7spf-3-9-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, hasError: false, disabled: false }, "_qmw7spg-3-9-0"], [{ readOnly: true, hasError: true, disabled: false }, "_qmw7sph-3-9-0"], [{ disabled: true, hasError: true, checked: false }, "_qmw7spi-3-9-0"], [{ disabled: true, hasError: false, checked: false }, "_qmw7spj-3-9-0"], [{ disabled: false, hasError: true, checked: false }, "_qmw7spk-3-9-0"], [{ disabled: false, hasError: false, checked: false, readOnly: false }, "_qmw7spl-3-9-0"]] });
+var checkboxLabelCSS = _7a468({ defaultClassName: "_qmw7sp0-3-9-0", variantClassNames: { disabled: { true: "_qmw7sp1-3-9-0" }, required: { true: "_qmw7sp2-3-9-0" }, readOnly: { true: "_qmw7sp3-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   checkboxIconCSS,
   checkboxKnobCSS,

package/esm/forms/checkbox/Checkbox.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/checkbox/Checkbox.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = _7a468({defaultClassName:'_qmw7spm-3-7-1',variantClassNames:{readOnly:{true:'_qmw7spn-3-7-1'},hasError:{true:'_qmw7spo-3-7-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-7-1']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-7-1',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-7-1',false:'_qmw7sp6-3-7-1'},disabled:{true:'_qmw7sp7-3-7-1',false:'_qmw7sp8-3-7-1'},hasError:{true:'_qmw7sp9-3-7-1',false:'_qmw7spa-3-7-1'},checked:{true:'_qmw7spb-3-7-1',false:'_qmw7spc-3-7-1',indeterminate:'_qmw7spd-3-7-1',undefined:'_qmw7spe-3-7-1'},readOnly:{true:'_qmw7spf-3-7-1'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-7-1'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-7-1'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-7-1'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-7-1'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-7-1'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-7-1']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-7-1',variantClassNames:{disabled:{true:'_qmw7sp1-3-7-1'},required:{true:'_qmw7sp2-3-7-1'},readOnly:{true:'_qmw7sp3-3-7-1'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport './Checkbox.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var checkboxIconCSS = _7a468({defaultClassName:'_qmw7spm-3-9-0',variantClassNames:{readOnly:{true:'_qmw7spn-3-9-0'},hasError:{true:'_qmw7spo-3-9-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:true},'_qmw7spp-3-9-0']]});\nexport var checkboxKnobCSS = _7a468({defaultClassName:'_qmw7sp4-3-9-0',variantClassNames:{hasChildren:{true:'_qmw7sp5-3-9-0',false:'_qmw7sp6-3-9-0'},disabled:{true:'_qmw7sp7-3-9-0',false:'_qmw7sp8-3-9-0'},hasError:{true:'_qmw7sp9-3-9-0',false:'_qmw7spa-3-9-0'},checked:{true:'_qmw7spb-3-9-0',false:'_qmw7spc-3-9-0',indeterminate:'_qmw7spd-3-9-0',undefined:'_qmw7spe-3-9-0'},readOnly:{true:'_qmw7spf-3-9-0'}},defaultVariants:{},compoundVariants:[[{readOnly:true,hasError:false,disabled:false},'_qmw7spg-3-9-0'],[{readOnly:true,hasError:true,disabled:false},'_qmw7sph-3-9-0'],[{disabled:true,hasError:true,checked:false},'_qmw7spi-3-9-0'],[{disabled:true,hasError:false,checked:false},'_qmw7spj-3-9-0'],[{disabled:false,hasError:true,checked:false},'_qmw7spk-3-9-0'],[{disabled:false,hasError:false,checked:false,readOnly:false},'_qmw7spl-3-9-0']]});\nexport var checkboxLabelCSS = _7a468({defaultClassName:'_qmw7sp0-3-9-0',variantClassNames:{disabled:{true:'_qmw7sp1-3-9-0'},required:{true:'_qmw7sp2-3-9-0'},readOnly:{true:'_qmw7sp3-3-9-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAC7O,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,aAAY,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,UAAS,EAAC,MAAK,kBAAiB,OAAM,iBAAgB,GAAE,SAAQ,EAAC,MAAK,kBAAiB,OAAM,kBAAiB,eAAc,kBAAiB,WAAU,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,UAAS,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,MAAK,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,MAAK,UAAS,OAAM,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,MAAK,SAAQ,MAAK,GAAE,gBAAgB,GAAE,CAAC,EAAC,UAAS,OAAM,UAAS,OAAM,SAAQ,OAAM,UAAS,MAAK,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACv0B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,GAAE,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/forms/date-time-picker/DateSelector.js

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl";
 import { CalendarIcon } from "@dynatrace/strato-icons";
 import { Button } from "../../buttons/button/Button.js";
 import { useMergeRefs } from "../../core/hooks/useMergeRefs.js";
-import { isVisualRefreshEnabled } from "../../core/utils/is-visual-refresh-enabled.js";
+import { useVisualRefreshEnabled } from "../../core/hooks/useVisualRefreshEnabled.js";
 import { useOverlayWithTrigger } from "../../overlays/hooks/useOverlayWithTrigger.js";
 import { Overlay } from "../../overlays/overlay/Overlay.js";
 import { globalSprinkles } from "../../styles/safe-sprinkles.js";
@@ -72,7 +72,7 @@ const DateSelector = forwardRef(
           ...overlayTriggerProps,
           size: "condensed",
           color: error ? "critical" : "neutral",
-          variant: isVisualRefreshEnabled() ? "emphasized" : "default",
+          variant: useVisualRefreshEnabled() ? "emphasized" : "default",
           "data-dt-name": "ShowCalendar",
           children: /* @__PURE__ */ jsx(Button.Prefix, { children: /* @__PURE__ */ jsx(CalendarIcon, {}) })
         }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-picker/DateSelector.tsx"],
-  "sourcesContent": ["import { forwardRef, useImperativeHandle, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport type { DateSelectorProps, DateSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isVisualRefreshEnabled } from '../../core/utils/is-visual-refresh-enabled.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateSelector = forwardRef<DateSelectorRef, DateSelectorProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled,\n      error,\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    } = props;\n    const [open, setOpen] = useState(false);\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayState,\n      overlayProps,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-end',\n      offset: 8,\n      trapFocus: false,\n      shouldCloseOnBlur: false,\n      open,\n      onOpenChange: setOpen,\n      // the overlay should not open when disabled or readOnly\n      disabled: disabled || readOnly,\n    });\n\n    const rootRef = useMergeRefs<HTMLButtonElement>([triggerRef, targetRef]);\n    const intl = useIntl();\n    const calendarInputLabel = intl.formatMessage({\n      defaultMessage: 'Calendar for picking a date',\n      id: 'qpf+aqg3hXoviypu',\n      description:\n        'Aria label for the DateTimePicker calendar input used for form validation.',\n    });\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateSelectorRef => ({\n        open: () => setOpen(true),\n        close: () => setOpen(false),\n      }),\n      [],\n    );\n\n    const { state: formFieldState } = useFormFieldMessagesContext();\n\n    return (\n      <>\n        <Button\n          ref={rootRef}\n          data-testid={dataTestId}\n          className={consumerClassName}\n          aria-disabled={ariaDisabledProp}\n          style={consumerStyle}\n          {...remainingProps}\n          {...overlayTriggerProps}\n          size=\"condensed\"\n          color={error ? 'critical' : 'neutral'}\n          variant={isVisualRefreshEnabled() ? 'emphasized' : 'default'}\n          data-dt-name=\"ShowCalendar\"\n        >\n          <Button.Prefix>\n            <CalendarIcon />\n          </Button.Prefix>\n        </Button>\n        <Overlay\n          ref={overlayRef}\n          isOpen={overlayState.isOpen}\n          className={globalSprinkles({\n            paddingLeft: 16,\n            paddingTop: 16,\n            paddingRight: 16,\n            paddingBottom: 16,\n          })}\n          overlayProps={overlayProps}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Calendar overlay for picking a date',\n            id: 'A9Pdb5T48IHfEauq',\n            description: 'Aria label for the date time picker overlay.',\n          })}\n        >\n          {/* The Calendar should not consume any validation context to not dispatch any errors. We still want the errorstate to adjust the day highlighting. */}\n          <FormFieldMessageContext.Provider\n            value={{\n              state: {\n                customMessages: [],\n                formControlMessages: [],\n                showError: formFieldState.showError,\n              },\n            }}\n          >\n            <CalendarRoot\n              aria-label={calendarInputLabel}\n              aria-disabled={ariaDisabledProp}\n            />\n          </FormFieldMessageContext.Provider>\n        </Overlay>\n      </>\n    );\n  },\n);\n"],
-  "mappings": "AA0EM,mBAeM,KAfN;AA1EN,SAAS,YAAY,qBAAqB,gBAAgB;AAC1D,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,8BAA8B;AACvC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAKrC,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,sBAAsB;AAAA,MACxB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB;AAAA,MACA,cAAc;AAAA;AAAA,MAEd,UAAU,YAAY;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,aAAgC,CAAC,YAAY,SAAS,CAAC;AACvE,UAAM,OAAO,QAAQ;AACrB,UAAM,qBAAqB,KAAK,cAAc;AAAA,MAC5C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aACE;AAAA,IACJ,CAAC;AAED;AAAA,MACE;AAAA,MACA,OAAwB;AAAA,QACtB,MAAM,MAAM,QAAQ,IAAI;AAAA,QACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,EAAE,OAAO,eAAe,IAAI,4BAA4B;AAE9D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,WAAW;AAAA,UACX,iBAAe;AAAA,UACf,OAAO;AAAA,UACN,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,OAAO,QAAQ,aAAa;AAAA,UAC5B,SAAS,uBAAuB,IAAI,eAAe;AAAA,UACnD,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,QAAQ,aAAa;AAAA,UACrB,WAAW,gBAAgB;AAAA,YACzB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,eAAe;AAAA,UACjB,CAAC;AAAA,UACD;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,cAAY,KAAK,cAAc;AAAA,YAC7B,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,aAAa;AAAA,UACf,CAAC;AAAA,UAGD;AAAA,YAAC,wBAAwB;AAAA,YAAxB;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,kBACL,gBAAgB,CAAC;AAAA,kBACjB,qBAAqB,CAAC;AAAA,kBACtB,WAAW,eAAe;AAAA,gBAC5B;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,iBAAe;AAAA;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
+  "sourcesContent": ["import { forwardRef, useImperativeHandle, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport type { DateSelectorProps, DateSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateSelector = forwardRef<DateSelectorRef, DateSelectorProps>(\n  (props, forwardedRef) => {\n    const {\n      disabled,\n      error,\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    } = props;\n    const [open, setOpen] = useState(false);\n\n    const {\n      targetRef,\n      triggerRef,\n      overlayRef,\n      overlayState,\n      overlayProps,\n      overlayTriggerProps,\n    } = useOverlayWithTrigger({\n      placement: 'bottom-end',\n      offset: 8,\n      trapFocus: false,\n      shouldCloseOnBlur: false,\n      open,\n      onOpenChange: setOpen,\n      // the overlay should not open when disabled or readOnly\n      disabled: disabled || readOnly,\n    });\n\n    const rootRef = useMergeRefs<HTMLButtonElement>([triggerRef, targetRef]);\n    const intl = useIntl();\n    const calendarInputLabel = intl.formatMessage({\n      defaultMessage: 'Calendar for picking a date',\n      id: 'qpf+aqg3hXoviypu',\n      description:\n        'Aria label for the DateTimePicker calendar input used for form validation.',\n    });\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateSelectorRef => ({\n        open: () => setOpen(true),\n        close: () => setOpen(false),\n      }),\n      [],\n    );\n\n    const { state: formFieldState } = useFormFieldMessagesContext();\n\n    return (\n      <>\n        <Button\n          ref={rootRef}\n          data-testid={dataTestId}\n          className={consumerClassName}\n          aria-disabled={ariaDisabledProp}\n          style={consumerStyle}\n          {...remainingProps}\n          {...overlayTriggerProps}\n          size=\"condensed\"\n          color={error ? 'critical' : 'neutral'}\n          variant={useVisualRefreshEnabled() ? 'emphasized' : 'default'}\n          data-dt-name=\"ShowCalendar\"\n        >\n          <Button.Prefix>\n            <CalendarIcon />\n          </Button.Prefix>\n        </Button>\n        <Overlay\n          ref={overlayRef}\n          isOpen={overlayState.isOpen}\n          className={globalSprinkles({\n            paddingLeft: 16,\n            paddingTop: 16,\n            paddingRight: 16,\n            paddingBottom: 16,\n          })}\n          overlayProps={overlayProps}\n          data-dtrum-mask={dataDtrumMask}\n          data-dtrum-allow={dataDtrumAllow}\n          aria-label={intl.formatMessage({\n            defaultMessage: 'Calendar overlay for picking a date',\n            id: 'A9Pdb5T48IHfEauq',\n            description: 'Aria label for the date time picker overlay.',\n          })}\n        >\n          {/* The Calendar should not consume any validation context to not dispatch any errors. We still want the errorstate to adjust the day highlighting. */}\n          <FormFieldMessageContext.Provider\n            value={{\n              state: {\n                customMessages: [],\n                formControlMessages: [],\n                showError: formFieldState.showError,\n              },\n            }}\n          >\n            <CalendarRoot\n              aria-label={calendarInputLabel}\n              aria-disabled={ariaDisabledProp}\n            />\n          </FormFieldMessageContext.Provider>\n        </Overlay>\n      </>\n    );\n  },\n);\n"],
+  "mappings": "AA0EM,mBAeM,KAfN;AA1EN,SAAS,YAAY,qBAAqB,gBAAgB;AAC1D,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,6BAA6B;AACtC,SAAS,eAAe;AACxB,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAC7B,SAAS,+BAA+B;AACxC,SAAS,mCAAmC;AAKrC,MAAM,eAAe;AAAA,EAC1B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,iBAAiB;AAAA,MACjB,GAAG;AAAA,IACL,IAAI;AACJ,UAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,IAAI,sBAAsB;AAAA,MACxB,WAAW;AAAA,MACX,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,mBAAmB;AAAA,MACnB;AAAA,MACA,cAAc;AAAA;AAAA,MAEd,UAAU,YAAY;AAAA,IACxB,CAAC;AAED,UAAM,UAAU,aAAgC,CAAC,YAAY,SAAS,CAAC;AACvE,UAAM,OAAO,QAAQ;AACrB,UAAM,qBAAqB,KAAK,cAAc;AAAA,MAC5C,gBAAgB;AAAA,MAChB,IAAI;AAAA,MACJ,aACE;AAAA,IACJ,CAAC;AAED;AAAA,MACE;AAAA,MACA,OAAwB;AAAA,QACtB,MAAM,MAAM,QAAQ,IAAI;AAAA,QACxB,OAAO,MAAM,QAAQ,KAAK;AAAA,MAC5B;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,EAAE,OAAO,eAAe,IAAI,4BAA4B;AAE9D,WACE,iCACE;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,eAAa;AAAA,UACb,WAAW;AAAA,UACX,iBAAe;AAAA,UACf,OAAO;AAAA,UACN,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,MAAK;AAAA,UACL,OAAO,QAAQ,aAAa;AAAA,UAC5B,SAAS,wBAAwB,IAAI,eAAe;AAAA,UACpD,gBAAa;AAAA,UAEb,8BAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,QAAQ,aAAa;AAAA,UACrB,WAAW,gBAAgB;AAAA,YACzB,aAAa;AAAA,YACb,YAAY;AAAA,YACZ,cAAc;AAAA,YACd,eAAe;AAAA,UACjB,CAAC;AAAA,UACD;AAAA,UACA,mBAAiB;AAAA,UACjB,oBAAkB;AAAA,UAClB,cAAY,KAAK,cAAc;AAAA,YAC7B,gBAAgB;AAAA,YAChB,IAAI;AAAA,YACJ,aAAa;AAAA,UACf,CAAC;AAAA,UAGD;AAAA,YAAC,wBAAwB;AAAA,YAAxB;AAAA,cACC,OAAO;AAAA,gBACL,OAAO;AAAA,kBACL,gBAAgB,CAAC;AAAA,kBACjB,qBAAqB,CAAC;AAAA,kBACtB,WAAW,eAAe;AAAA,gBAC5B;AAAA,cACF;AAAA,cAEA;AAAA,gBAAC;AAAA;AAAA,kBACC,cAAY;AAAA,kBACZ,iBAAe;AAAA;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA,MACF;AAAA,OACF;AAAA,EAEJ;AACF;",
   "names": []
 }

package/esm/forms/date-time-picker/DateTimePicker.css

@@ -1,121 +1,121 @@
-._1i883gj7-3-7-1 {
-  --_1i883gj0-3-7-1: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-7-1: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-7-1: var(--_1i883gj0-3-7-1);
-  --_1i883gj3-3-7-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1i883gj4-3-7-1: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-  --_1i883gj5-3-7-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-7-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj7-3-9-0 {
+  --_1i883gj0-3-9-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-9-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-9-0: var(--_1i883gj0-3-9-0);
+  --_1i883gj3-3-9-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1i883gj4-3-9-0: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  --_1i883gj5-3-9-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj6-3-9-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1jgl8s50-3-7-1 ._1i883gj7-3-7-1 {
-  --_1i883gj3-3-7-1: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-9-0 ._1i883gj7-3-9-0 {
+  --_1i883gj3-3-9-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1i883gj8-3-7-1 {
-  --_1i883gj5-3-7-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-7-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
-  --_1i883gj2-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-7-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-7-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1i883gj8-3-9-0 {
+  --_1i883gj5-3-9-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj6-3-9-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+  --_1i883gj2-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-9-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-9-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
   cursor: default;
 }
-._1jgl8s50-3-7-1 ._1i883gj8-3-7-1 {
-  --_1i883gj3-3-7-1: var(--dt-colors-background-surface-default, #fff);
-  --_1i883gj4-3-7-1: var(--dt-colors-background-surface-default, #fff);
-}
-._1i883gj9-3-7-1 {
-  --_1i883gj0-3-7-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-7-1: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj3-3-7-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1i883gj4-3-7-1: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
-  --_1i883gj5-3-7-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj6-3-7-1: var(--dt-colors-background-field-critical-accent, #c62239);
-}
-._1jgl8s50-3-7-1 ._1i883gj9-3-7-1 {
-  --_1i883gj3-3-7-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._1i883gja-3-7-1 {
-  --_1i883gj0-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-7-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-7-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj5-3-7-1: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
-  --_1i883gj6-3-7-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1jgl8s50-3-9-0 ._1i883gj8-3-9-0 {
+  --_1i883gj3-3-9-0: var(--dt-colors-background-surface-default, #fff);
+  --_1i883gj4-3-9-0: var(--dt-colors-background-surface-default, #fff);
+}
+._1i883gj9-3-9-0 {
+  --_1i883gj0-3-9-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-9-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj3-3-9-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1i883gj4-3-9-0: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+  --_1i883gj5-3-9-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj6-3-9-0: var(--dt-colors-background-field-critical-accent, #c62239);
+}
+._1jgl8s50-3-9-0 ._1i883gj9-3-9-0 {
+  --_1i883gj3-3-9-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+}
+._1i883gja-3-9-0 {
+  --_1i883gj0-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-9-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-9-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj5-3-9-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+  --_1i883gj6-3-9-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: not-allowed;
 }
-._1i883gjc-3-7-1 {
+._1i883gjc-3-9-0 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gje-3-7-1 {
-  --_1i883gj2-3-7-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-7-1: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1i883gj4-3-7-1: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+._1i883gje-3-9-0 {
+  --_1i883gj2-3-9-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj3-3-9-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_1i883gj4-3-9-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-7-1 ._1i883gje-3-7-1 {
-  --_1i883gj3-3-7-1: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-9-0 ._1i883gje-3-9-0 {
+  --_1i883gj3-3-9-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1i883gjf-3-7-1 {
+._1i883gjf-3-9-0 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-7-1);
+  color: var(--_1i883gj1-3-9-0);
   white-space-collapse: preserve;
 }
-._1i883gjg-3-7-1 {
+._1i883gjg-3-9-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   border-radius: 0;
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
-  color: var(--_1i883gj2-3-7-1);
-  background-color: var(--_1i883gj3-3-7-1);
+  color: var(--_1i883gj2-3-9-0);
+  background-color: var(--_1i883gj3-3-9-0);
 }
-._1i883gjg-3-7-1:hover {
-  background-color: var(--_1i883gj4-3-7-1);
+._1i883gjg-3-9-0:hover {
+  background-color: var(--_1i883gj4-3-9-0);
 }
-._r47o0w0-3-7-1 ._r47o0w1-3-7-1 {
-  color: var(--_1i883gj0-3-7-1);
+._r47o0w0-3-9-0 ._r47o0w1-3-9-0 {
+  color: var(--_1i883gj0-3-9-0);
 }
-._r47o0w0-3-7-1 ._r47o0w1-3-7-1::before {
-  color: var(--_1i883gj1-3-7-1);
+._r47o0w0-3-9-0 ._r47o0w1-3-9-0::before {
+  color: var(--_1i883gj1-3-9-0);
 }
-._r47o0w0-3-7-1 ._r47o0w1-3-7-1:focus {
-  background-color: var(--_1i883gj6-3-7-1);
-  color: var(--_1i883gj5-3-7-1);
+._r47o0w0-3-9-0 ._r47o0w1-3-9-0:focus {
+  background-color: var(--_1i883gj6-3-9-0);
+  color: var(--_1i883gj5-3-9-0);
 }
-._r47o0w0-3-7-1 ._r47o0w1-3-7-1:focus::before {
-  color: var(--_1i883gj5-3-7-1);
+._r47o0w0-3-9-0 ._r47o0w1-3-9-0:focus::before {
+  color: var(--_1i883gj5-3-9-0);
 }
-._r47o0w0-3-7-1 *::selection {
+._r47o0w0-3-9-0 *::selection {
   background-color: transparent;
 }
-._r47o0w0-3-7-1 ._r47o0w1-3-7-1:focus::selection, ._r47o0w0-3-7-1 ._r47o0w1-3-7-1:focus *::selection {
+._r47o0w0-3-9-0 ._r47o0w1-3-9-0:focus::selection, ._r47o0w0-3-9-0 ._r47o0w1-3-9-0:focus *::selection {
   background-color: transparent;
-  color: var(--_1i883gj5-3-7-1);
+  color: var(--_1i883gj5-3-9-0);
 }
-._r47o0w0-3-7-1 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-7-1[data-drag-selected]::before {
-  background-color: var(--_1i883gj6-3-7-1);
-  color: var(--_1i883gj5-3-7-1);
+._r47o0w0-3-9-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-9-0[data-drag-selected]::before {
+  background-color: var(--_1i883gj6-3-9-0);
+  color: var(--_1i883gj5-3-9-0);
 }
-._r47o0w0-3-7-1 [data-drag-selected]::selection, ._r47o0w0-3-7-1 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+._r47o0w0-3-9-0 [data-drag-selected]::selection, ._r47o0w0-3-9-0 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
   background-color: transparent;
 }
-[data-shift-selection=true] ._r47o0w1-3-7-1:focus {
+[data-shift-selection=true] ._r47o0w1-3-9-0:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-7-1);
+  color: var(--_1i883gj0-3-9-0);
   caret-color: auto;
 }
-[data-shift-selection=true] ._r47o0w1-3-7-1:focus::before {
-  color: var(--_1i883gj1-3-7-1);
+[data-shift-selection=true] ._r47o0w1-3-9-0:focus::before {
+  color: var(--_1i883gj1-3-9-0);
 }
-._1i883gjh-3-7-1 {
+._1i883gjh-3-9-0 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjh-3-7-1:is(button._1i883gjh-3-7-1._1i883gjh-3-7-1) {
+._1i883gjh-3-9-0:is(button._1i883gjh-3-9-0._1i883gjh-3-9-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-7-1 ._1i883gjh-3-7-1._1i883gjh-3-7-1._1i883gjh-3-7-1 {
+._1jgl8s50-3-9-0 ._1i883gjh-3-9-0._1i883gjh-3-9-0._1i883gjh-3-9-0 {
   position: absolute;
   margin: var(--dt-spacings-size-0, 0);
   z-index: 0;

package/esm/forms/date-time-picker/DateTimePicker.js

@@ -22,8 +22,7 @@ import {
   getTimeValue
 } from "../../forms/forms-core/time/timeParser.js";
 import { getTimeOffsetFromInitialValue } from "../calendar/utils/helpers.js";
-import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
-import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
+import { useFormControl } from "../forms-core/hooks/useFormControl.js";
 import {
   GRAIL_MAX_DATE,
   GRAIL_MIN_DATE
@@ -42,7 +41,8 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
         checkOrder: true,
         ref: dateTimePickerRef,
         expectedFormat: state.formatString,
-        valueMode: "single"
+        valueMode: "single",
+        required
       });
       const value = removePrecisionFromTimeValue(
         memoedValue ?? null,
@@ -121,6 +121,8 @@ const DateTimePicker = forwardRef(
     readOnly: propReadOnly,
     id: propId,
     "aria-disabled": propAriaDisabled,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    controlState,
     type,
     ...remainingProps
   }, forwardedRef) => {
@@ -141,14 +143,15 @@ const DateTimePicker = forwardRef(
     const calendarRef = useRef(null);
     const dateTimeInputRef = useRef(null);
     const dateTimePickerRef = useRef(null);
-    const { dispatch: formFieldMessagesDispatch } = useFormFieldMessagesContext();
-    const { disabled, required, id, ariaDisabled, readOnly } = useSyncedFormControlProps({
+    const formControl = useFormControl({
       propDisabled,
       propRequired,
       propId,
       propAriaDisabled,
-      propReadOnly
+      propReadOnly,
+      controlState
     });
+    const { required, messageDispatch: formFieldMessagesDispatch } = formControl;
     const { formatString } = useDateTimeMessages({ precision });
     const [initialState] = useState(() => {
       const _value = isControlled ? memoedValue : memoedDefaultValue;
@@ -167,7 +170,8 @@ const DateTimePicker = forwardRef(
         checkOrder: true,
         ref: dateTimePickerRef,
         expectedFormat: formatString,
-        valueMode: "single"
+        valueMode: "single",
+        required
       });
       const calendarValue = toCalendarValue(value, precision);
       return {
@@ -176,12 +180,14 @@ const DateTimePicker = forwardRef(
         min,
         max,
         precision,
+        formatString,
         calendarRef,
         dateTimeInputRef,
         dateTimePickerRef,
         calendarError: error,
         dateTimePickerError: error,
-        timeOffset
+        timeOffset,
+        required
       };
     });
     const [store] = useState(
@@ -218,7 +224,8 @@ const DateTimePicker = forwardRef(
             checkOrder: true,
             ref: dateTimePickerRef,
             expectedFormat: state.formatString,
-            valueMode: "single"
+            valueMode: "single",
+            required: state.required
           });
           return { calendarError: error, dateTimePickerError: error };
         },
@@ -230,12 +237,8 @@ const DateTimePicker = forwardRef(
       DateTimePickerRoot,
       {
         ...remainingProps,
-        id,
         ref: mergedRef,
-        "aria-disabled": ariaDisabled,
-        disabled,
-        required,
-        readOnly,
+        formControl,
         type
       }
     ) });