@dynatrace/strato-components 3.8.0 → 3.9.1

package/esm/forms/_base-input/BaseInput.js

@@ -20,7 +20,6 @@ import { getPlaceholderMessage } from "./baseInputMessages.js";
 import { ClearButton } from "./ClearButton.js";
 import { BaseInputContext } from "./contexts/BaseInputContext.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
-import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { useSplitProps } from "../../core/hooks/useSplitProps.js";
 import { isSlot } from "../../core/utils/is-slot.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
@@ -29,15 +28,13 @@ import { Flex } from "../../layouts/flex/Flex.js";
 import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js";
 import { InputGroup } from "../../layouts/input-group/InputGroup.js";
 import { InternalBaseItem as BaseItem } from "../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js";
-import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
+import { useFormControl } from "../forms-core/hooks/useFormControl.js";
 import {
   getI18nValidationState,
   useFormFieldValidation
 } from "../forms-core/hooks/useFormFieldValidation.js";
-import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
 import { useAutofillEvent } from "../hooks/useAutofillEvent.js";
-import { useInputHint } from "../hooks/useInputHint.js";
 import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
 import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
 function getSlots(children) {
@@ -83,6 +80,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     required: propRequired,
     "aria-disabled": ariaDisabledProp,
     variant = "default",
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
     controlState,
     readOnly: propReadOnly,
     "data-testid": dataTestId,
@@ -109,21 +107,26 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     ...remainingProps
   } = props;
   const inputValue = value ?? "";
-  const { disabled, required, id, ariaDisabled, readOnly } = useSyncedFormControlProps({
+  const {
+    id,
+    disabled,
+    required,
+    readOnly,
+    ariaDisabled,
+    inputProps,
+    hintProps,
+    hint,
+    showError,
+    messageDispatch
+  } = useFormControl({
+    propId,
     propDisabled,
     propRequired,
-    propId,
     propAriaDisabled: ariaDisabledProp,
-    propReadOnly
+    propReadOnly,
+    controlState
   });
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
-  const [hasFormControlError, hint] = useFormControlState(controlState);
-  const { inputProps, hintProps } = useInputHint({
-    hint,
-    hasError: hasFormControlError
-  });
-  const { state, dispatch } = useFormFieldMessagesContext();
-  const hasError = hasFormControlError || state.showError;
   const { isAutoFilled, onAnimationStart } = useAutofillEvent();
   const inputRef = useRef(null);
   const wrapperRef = useRef(null);
@@ -133,7 +136,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
     () => getI18nValidationState(intl, inputRef.current, "manual")
   );
   const { focusProps, focusClassName } = useFocusRing({
-    color: hasError && !(disabled || ariaDisabled) ? "critical" : "neutral",
+    color: showError && !(disabled || ariaDisabled) ? "critical" : "neutral",
     ignoreModality: true,
     disabled
   });
@@ -170,7 +173,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       },
       validate() {
         inputRef.current?.checkValidity();
-        dispatch?.({
+        messageDispatch?.({
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
@@ -181,7 +184,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
       // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
       validateAsync: async () => {
         inputRef.current?.checkValidity();
-        dispatch?.({
+        messageDispatch?.({
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
@@ -190,11 +193,11 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         );
       }
     }),
-    [dispatch, emitValidationState, intl]
+    [messageDispatch, emitValidationState, intl]
   );
   const context = useMemo(
-    () => ({ variant, hasError, disabled, ariaDisabled }),
-    [variant, hasError, disabled, ariaDisabled]
+    () => ({ variant, hasError: showError, disabled, ariaDisabled }),
+    [variant, showError, disabled, ariaDisabled]
   );
   const slots = useMemo(() => getSlots(children), [children]);
   const hasInnerPrefix = slots.prefix.rest.length > 0;
@@ -228,7 +231,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
               )}1fr${" auto".repeat(slots.suffix.buttons.length)}`
             },
             className: clsx(styles.wrapper, styles.variant[variant], {
-              [styles.hasError]: hasError,
+              [styles.hasError]: showError,
               [styles.disabled]: disabledOrAriaDisabled,
               [styles.readOnly]: readOnly
             }),
@@ -311,7 +314,7 @@ const BaseInputRoot = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
         controlState && hint && /* @__PURE__ */ jsx(
           BaseItem,
           {
-            variant: hasError ? "error" : "hint",
+            variant: showError ? "error" : "hint",
             disabled: disabledOrAriaDisabled,
             ...hintProps,
             children: hint

package/esm/forms/_base-input/BaseInput.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.tsx"],
-  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { BaseInputProps } from './base-input.types.js';\nimport * as styles from './BaseInput.sty.js';\nimport { BaseInputButton } from './BaseInputButton.js';\nimport {\n  BaseInputPrefix,\n  BaseInputReservedSuffix,\n  BaseInputSuffix,\n} from './BaseInputContent.js';\nimport { getPlaceholderMessage } from './baseInputMessages.js';\nimport { ClearButton } from './ClearButton.js';\nimport { BaseInputContext } from './contexts/BaseInputContext.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { useSplitProps } from '../../core/hooks/useSplitProps.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { InternalBaseItem as BaseItem } from '../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getI18nValidationState,\n  useFormFieldValidation,\n} 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 { useAutofillEvent } from '../hooks/useAutofillEvent.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\ntype SlotContent = {\n  buttons: ReactElement[];\n  rest: ReactNode[];\n  props: Record<string, unknown>;\n};\n\nfunction getSlots(children: ReactNode) {\n  const validSlots = Children.toArray(children).filter(\n    isValidElement<PropsWithChildren>,\n  );\n\n  let prefix: SlotContent = { buttons: [], rest: [], props: {} };\n  let suffix: SlotContent = { buttons: [], rest: [], props: {} };\n  let reservedSuffix: SlotContent = { buttons: [], rest: [], props: {} };\n\n  for (const slot of validSlots) {\n    const buttons: SlotContent['buttons'] = [];\n    const rest: SlotContent['rest'] = [];\n\n    const slotChildren = Children.toArray(slot.props.children);\n\n    for (const child of slotChildren) {\n      if (isSlot(child, BaseInputButton)) {\n        buttons.push(child);\n      } else {\n        rest.push(child);\n      }\n    }\n\n    const { children: _children, ...slotProps } = slot.props;\n\n    if (slot.type === BaseInputPrefix) {\n      prefix = { buttons, rest, props: slotProps };\n    }\n    if (slot.type === BaseInputSuffix) {\n      suffix = { buttons, rest, props: slotProps };\n    }\n    if (slot.type === BaseInputReservedSuffix) {\n      reservedSuffix = { buttons, rest, props: slotProps };\n    }\n  }\n\n  return { prefix, suffix, reservedSuffix };\n}\n\nconst BaseInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  BaseInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage(props.type),\n  );\n\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    variant = 'default',\n    controlState,\n    readOnly: propReadOnly,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    onClear,\n    onValidityChange,\n    type,\n    placeholder = defaultPlaceholder,\n    value,\n    pattern,\n    max,\n    min,\n    step,\n    maxLength,\n    minLength,\n    ...remainingProps\n  } = props;\n\n  // assures that always an empty string is set\n  const inputValue = value ?? '';\n\n  const { disabled, required, id, ariaDisabled, readOnly } =\n    useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled: ariaDisabledProp,\n      propReadOnly,\n    });\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const [hasFormControlError, 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: hasFormControlError,\n  });\n\n  const { state, dispatch } = useFormFieldMessagesContext();\n\n  const hasError = hasFormControlError || state.showError;\n\n  const { isAutoFilled, onAnimationStart } = useAutofillEvent();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getI18nValidationState(intl, inputRef.current, 'manual'),\n  );\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: hasError && !(disabled || ariaDisabled) ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const { onChange, onBlur, onInvalid, ariaProps } = useFormFieldValidation(\n    inputRef,\n    {\n      required,\n      pattern,\n      max,\n      min,\n      step,\n      maxLength,\n      minLength,\n      type,\n      value: inputValue as string,\n    },\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n    undefined,\n    _emitValidationState,\n  );\n  const eventListener = { onChange, onBlur, onInvalid };\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlRef<HTMLDivElement> => ({\n      element: wrapperRef.current,\n      inputRef: inputRef.current,\n      focus() {\n        inputRef.current?.focus();\n      },\n      validate() {\n        inputRef.current?.checkValidity();\n        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          getI18nValidationState(intl, inputRef.current, 'manual'),\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        dispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, inputRef.current, 'manual'),\n        );\n      },\n    }),\n    [dispatch, emitValidationState, intl],\n  );\n\n  const context = useMemo(\n    () => ({ variant, hasError, disabled, ariaDisabled }),\n    [variant, hasError, disabled, ariaDisabled],\n  );\n  const slots = useMemo(() => getSlots(children), [children]);\n  const hasInnerPrefix = slots.prefix.rest.length > 0;\n  const hasInnerSuffix = slots.suffix.rest.length > 0;\n  const hasInnerReservedSuffix = slots.reservedSuffix.rest.length > 0;\n  const hasOnClear = onClear !== undefined;\n  const showClearButton =\n    hasOnClear && inputValue !== '' && !hasInnerReservedSuffix;\n\n  const {\n    matchedProps: dataAttributesProps,\n    remainingProps: remainingInputProps,\n  } = useSplitProps(remainingProps, [(key: string) => key.startsWith('data-')]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={wrapperRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...dataAttributesProps}\n    >\n      <InputGroup\n        style={{\n          gridAutoColumns: `${'auto '.repeat(\n            slots.prefix.buttons.length,\n          )}1fr${' auto'.repeat(slots.suffix.buttons.length)}`,\n        }}\n        className={clsx(styles.wrapper, styles.variant[variant], {\n          [styles.hasError]: hasError,\n          [styles.disabled]: disabledOrAriaDisabled,\n          [styles.readOnly]: readOnly,\n        })}\n      >\n        <BaseInputContext.Provider value={context}>\n          {slots.prefix.buttons}\n          <div\n            className={clsx(\n              styles.container,\n              inputGroupClassName,\n              focusClassName,\n              {\n                [styles.isAutoFilled]: isAutoFilled,\n                [`${styles.containerPadding.none}`]:\n                  hasInnerReservedSuffix && hasInnerPrefix,\n                [`${styles.containerPadding.rightNone}`]:\n                  hasInnerReservedSuffix && !hasInnerPrefix,\n                [`${styles.containerPadding.leftUnset}`]: hasInnerPrefix,\n                [`${styles.containerPadding.rightUnset}`]: hasInnerSuffix,\n              },\n            )}\n            onClick={() => inputRef.current?.focus()} // clicking on the icons should focus the input\n          >\n            {hasInnerPrefix && (\n              <BaseInputPrefix {...slots.prefix.props}>\n                {slots.prefix.rest}\n              </BaseInputPrefix>\n            )}\n\n            <input\n              id={id}\n              ref={inputRef}\n              required={required}\n              disabled={!!disabled}\n              aria-disabled={ariaDisabled}\n              onAnimationStart={onAnimationStart}\n              readOnly={readOnly}\n              className={styles.input}\n              placeholder={placeholder}\n              type={type}\n              value={inputValue}\n              pattern={pattern}\n              max={max}\n              min={min}\n              step={step}\n              maxLength={maxLength}\n              minLength={minLength}\n              {..._mergeProps(\n                remainingInputProps,\n                focusProps,\n                controlState\n                  ? { 'aria-label': ariaLabelProp, ...inputProps }\n                  : ariaProps,\n                !controlState ? eventListener : {}, // escape hatch to not interfere with the old implementation\n              )}\n            />\n            {hasInnerSuffix && (\n              <BaseInputSuffix {...slots.suffix.props}>\n                {slots.suffix.rest}\n              </BaseInputSuffix>\n            )}\n            {!readOnly && (\n              <>\n                {hasInnerReservedSuffix ? (\n                  <>\n                    {hasInnerSuffix && (\n                      <Divider\n                        orientation=\"vertical\"\n                        className={styles.divider}\n                      />\n                    )}\n                    {slots.reservedSuffix.rest}\n                  </>\n                ) : (\n                  <>\n                    {hasInnerSuffix && showClearButton && (\n                      <Divider\n                        orientation=\"vertical\"\n                        className={styles.divider}\n                      />\n                    )}\n                    {showClearButton && <ClearButton onClear={onClear} />}\n                  </>\n                )}\n              </>\n            )}\n          </div>\n          {slots.suffix.buttons}\n        </BaseInputContext.Provider>\n      </InputGroup>\n      {controlState && hint && (\n        <BaseItem\n          variant={hasError ? 'error' : 'hint'}\n          disabled={disabledOrAriaDisabled}\n          {...hintProps}\n        >\n          {hint}\n        </BaseItem>\n      )}\n    </Flex>\n  );\n});\n\n/**\n * Base component used internally for our input components.\n * @internal\n */\nexport const BaseInput = Object.assign(BaseInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  ReservedSuffix: BaseInputReservedSuffix,\n  Button: BaseInputButton,\n});\n\n(BaseInput as typeof BaseInput & { displayName: string }).displayName =\n  'BaseInput';\n"],
-  "mappings": "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",
+  "sourcesContent": ["\uFEFFimport clsx from 'clsx';\nimport {\n  Children,\n  forwardRef,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport type { BaseInputProps } from './base-input.types.js';\nimport * as styles from './BaseInput.sty.js';\nimport { BaseInputButton } from './BaseInputButton.js';\nimport {\n  BaseInputPrefix,\n  BaseInputReservedSuffix,\n  BaseInputSuffix,\n} from './BaseInputContent.js';\nimport { getPlaceholderMessage } from './baseInputMessages.js';\nimport { ClearButton } from './ClearButton.js';\nimport { BaseInputContext } from './contexts/BaseInputContext.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useSplitProps } from '../../core/hooks/useSplitProps.js';\nimport { isSlot } from '../../core/utils/is-slot.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Divider } from '../../layouts/divider/Divider.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { 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 { useAutofillEvent } from '../hooks/useAutofillEvent.js';\nimport type { FormControlRef } from '../shared-types.js';\nimport { useCustomMessageEmitter } from '../validation/useCustomMessageEmitter.js';\nimport { useValidationStateEmitter } from '../validation/useValidationStateEmitter.js';\n\ntype SlotContent = {\n  buttons: ReactElement[];\n  rest: ReactNode[];\n  props: Record<string, unknown>;\n};\n\nfunction getSlots(children: ReactNode) {\n  const validSlots = Children.toArray(children).filter(\n    isValidElement<PropsWithChildren>,\n  );\n\n  let prefix: SlotContent = { buttons: [], rest: [], props: {} };\n  let suffix: SlotContent = { buttons: [], rest: [], props: {} };\n  let reservedSuffix: SlotContent = { buttons: [], rest: [], props: {} };\n\n  for (const slot of validSlots) {\n    const buttons: SlotContent['buttons'] = [];\n    const rest: SlotContent['rest'] = [];\n\n    const slotChildren = Children.toArray(slot.props.children);\n\n    for (const child of slotChildren) {\n      if (isSlot(child, BaseInputButton)) {\n        buttons.push(child);\n      } else {\n        rest.push(child);\n      }\n    }\n\n    const { children: _children, ...slotProps } = slot.props;\n\n    if (slot.type === BaseInputPrefix) {\n      prefix = { buttons, rest, props: slotProps };\n    }\n    if (slot.type === BaseInputSuffix) {\n      suffix = { buttons, rest, props: slotProps };\n    }\n    if (slot.type === BaseInputReservedSuffix) {\n      reservedSuffix = { buttons, rest, props: slotProps };\n    }\n  }\n\n  return { prefix, suffix, reservedSuffix };\n}\n\nconst BaseInputRoot = /* @__PURE__ */ forwardRef<\n  FormControlRef<HTMLDivElement>,\n  BaseInputProps\n>((props, forwardedRef) => {\n  const intl = useIntl();\n\n  const defaultPlaceholder = intl.formatMessage(\n    getPlaceholderMessage(props.type),\n  );\n\n  const {\n    children,\n    id: propId,\n    disabled: propDisabled,\n    required: propRequired,\n    'aria-disabled': ariaDisabledProp,\n    variant = 'default',\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    readOnly: propReadOnly,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    className: consumerClassName,\n    style: consumerStyle,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    onClear,\n    onValidityChange,\n    type,\n    placeholder = defaultPlaceholder,\n    value,\n    pattern,\n    max,\n    min,\n    step,\n    maxLength,\n    minLength,\n    ...remainingProps\n  } = props;\n\n  // assures that always an empty string is set\n  const inputValue = value ?? '';\n\n  const {\n    id,\n    disabled,\n    required,\n    readOnly,\n    ariaDisabled,\n    inputProps,\n    hintProps,\n    hint,\n    showError,\n    messageDispatch,\n  } = useFormControl({\n    propId,\n    propDisabled,\n    propRequired,\n    propAriaDisabled: ariaDisabledProp,\n    propReadOnly,\n    controlState,\n  });\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const { isAutoFilled, onAnimationStart } = useAutofillEvent();\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const _emitValidationState = useValidationStateEmitter(onValidityChange);\n  const emitValidationState = useCustomMessageEmitter(\n    _emitValidationState,\n    () => getI18nValidationState(intl, inputRef.current, 'manual'),\n  );\n\n  const { focusProps, focusClassName } = useFocusRing({\n    color: showError && !(disabled || ariaDisabled) ? 'critical' : 'neutral',\n    ignoreModality: true,\n    disabled,\n  });\n\n  const { onChange, onBlur, onInvalid, ariaProps } = useFormFieldValidation(\n    inputRef,\n    {\n      required,\n      pattern,\n      max,\n      min,\n      step,\n      maxLength,\n      minLength,\n      type,\n      value: inputValue as string,\n    },\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n    undefined,\n    _emitValidationState,\n  );\n  const eventListener = { onChange, onBlur, onInvalid };\n\n  useImperativeHandle(\n    forwardedRef,\n    (): FormControlRef<HTMLDivElement> => ({\n      element: wrapperRef.current,\n      inputRef: inputRef.current,\n      focus() {\n        inputRef.current?.focus();\n      },\n      validate() {\n        inputRef.current?.checkValidity();\n        messageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        emitValidationState(\n          getI18nValidationState(intl, inputRef.current, 'manual'),\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        messageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n        return emitValidationState(\n          getI18nValidationState(intl, inputRef.current, 'manual'),\n        );\n      },\n    }),\n    [messageDispatch, emitValidationState, intl],\n  );\n\n  const context = useMemo(\n    () => ({ variant, hasError: showError, disabled, ariaDisabled }),\n    [variant, showError, disabled, ariaDisabled],\n  );\n  const slots = useMemo(() => getSlots(children), [children]);\n  const hasInnerPrefix = slots.prefix.rest.length > 0;\n  const hasInnerSuffix = slots.suffix.rest.length > 0;\n  const hasInnerReservedSuffix = slots.reservedSuffix.rest.length > 0;\n  const hasOnClear = onClear !== undefined;\n  const showClearButton =\n    hasOnClear && inputValue !== '' && !hasInnerReservedSuffix;\n\n  const {\n    matchedProps: dataAttributesProps,\n    remainingProps: remainingInputProps,\n  } = useSplitProps(remainingProps, [(key: string) => key.startsWith('data-')]);\n\n  return (\n    <Flex\n      gap={4}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      data-dtrum-mask={dataDtrumMask}\n      data-dtrum-allow={dataDtrumAllow}\n      ref={wrapperRef}\n      className={consumerClassName}\n      style={consumerStyle}\n      {...dataAttributesProps}\n    >\n      <InputGroup\n        style={{\n          gridAutoColumns: `${'auto '.repeat(\n            slots.prefix.buttons.length,\n          )}1fr${' auto'.repeat(slots.suffix.buttons.length)}`,\n        }}\n        className={clsx(styles.wrapper, styles.variant[variant], {\n          [styles.hasError]: showError,\n          [styles.disabled]: disabledOrAriaDisabled,\n          [styles.readOnly]: readOnly,\n        })}\n      >\n        <BaseInputContext.Provider value={context}>\n          {slots.prefix.buttons}\n          <div\n            className={clsx(\n              styles.container,\n              inputGroupClassName,\n              focusClassName,\n              {\n                [styles.isAutoFilled]: isAutoFilled,\n                [`${styles.containerPadding.none}`]:\n                  hasInnerReservedSuffix && hasInnerPrefix,\n                [`${styles.containerPadding.rightNone}`]:\n                  hasInnerReservedSuffix && !hasInnerPrefix,\n                [`${styles.containerPadding.leftUnset}`]: hasInnerPrefix,\n                [`${styles.containerPadding.rightUnset}`]: hasInnerSuffix,\n              },\n            )}\n            onClick={() => inputRef.current?.focus()} // clicking on the icons should focus the input\n          >\n            {hasInnerPrefix && (\n              <BaseInputPrefix {...slots.prefix.props}>\n                {slots.prefix.rest}\n              </BaseInputPrefix>\n            )}\n\n            <input\n              id={id}\n              ref={inputRef}\n              required={required}\n              disabled={!!disabled}\n              aria-disabled={ariaDisabled}\n              onAnimationStart={onAnimationStart}\n              readOnly={readOnly}\n              className={styles.input}\n              placeholder={placeholder}\n              type={type}\n              value={inputValue}\n              pattern={pattern}\n              max={max}\n              min={min}\n              step={step}\n              maxLength={maxLength}\n              minLength={minLength}\n              {..._mergeProps(\n                remainingInputProps,\n                focusProps,\n                controlState\n                  ? { 'aria-label': ariaLabelProp, ...inputProps }\n                  : ariaProps,\n                !controlState ? eventListener : {}, // escape hatch to not interfere with the old implementation\n              )}\n            />\n            {hasInnerSuffix && (\n              <BaseInputSuffix {...slots.suffix.props}>\n                {slots.suffix.rest}\n              </BaseInputSuffix>\n            )}\n            {!readOnly && (\n              <>\n                {hasInnerReservedSuffix ? (\n                  <>\n                    {hasInnerSuffix && (\n                      <Divider\n                        orientation=\"vertical\"\n                        className={styles.divider}\n                      />\n                    )}\n                    {slots.reservedSuffix.rest}\n                  </>\n                ) : (\n                  <>\n                    {hasInnerSuffix && showClearButton && (\n                      <Divider\n                        orientation=\"vertical\"\n                        className={styles.divider}\n                      />\n                    )}\n                    {showClearButton && <ClearButton onClear={onClear} />}\n                  </>\n                )}\n              </>\n            )}\n          </div>\n          {slots.suffix.buttons}\n        </BaseInputContext.Provider>\n      </InputGroup>\n      {controlState && 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/**\n * Base component used internally for our input components.\n * @internal\n */\nexport const BaseInput = Object.assign(BaseInputRoot, {\n  Prefix: BaseInputPrefix,\n  Suffix: BaseInputSuffix,\n  ReservedSuffix: BaseInputReservedSuffix,\n  Button: BaseInputButton,\n});\n\n(BaseInput as typeof BaseInput & { displayName: string }).displayName =\n  'BaseInput';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/_base-input/BaseInput.sty.js

@@ -3,17 +3,17 @@ import "../../styles/field.css";
 import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
-var container = "_1a8lqy98-3-8-0";
-var containerPadding = { none: "_1a8lqy99-3-8-0", rightNone: "_1a8lqy9a-3-8-0", rightUnset: "_1a8lqy9b-3-8-0", leftUnset: "_1a8lqy9c-3-8-0" };
-var disabled = "_1a8lqy92-3-8-0";
-var divider = "_1a8lqy9f-3-8-0";
-var hasError = "_1a8lqy91-3-8-0";
-var input = "_1a8lqy9d-3-8-0 _yfwka33-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0";
-var isAutoFilled = "_1a8lqy9g-3-8-0";
-var readOnly = "_1a8lqy93-3-8-0";
-var reservedSuffixButton = "_1a8lqy9e-3-8-0";
-var variant = { "default": "_1a8lqy94-3-8-0", minimal: "_1a8lqy95-3-8-0" };
-var wrapper = "_1a8lqy90-3-8-0";
+var container = "_1a8lqy98-3-9-1";
+var containerPadding = { none: "_1a8lqy99-3-9-1", rightNone: "_1a8lqy9a-3-9-1", rightUnset: "_1a8lqy9b-3-9-1", leftUnset: "_1a8lqy9c-3-9-1" };
+var disabled = "_1a8lqy92-3-9-1";
+var divider = "_1a8lqy9f-3-9-1";
+var hasError = "_1a8lqy91-3-9-1";
+var input = "_1a8lqy9d-3-9-1 _yfwka33-3-9-1 _da9a8v0-3-9-1 _da9a8v2-3-9-1 _da9a8v3-3-9-1 _da9a8vb-3-9-1";
+var isAutoFilled = "_1a8lqy9g-3-9-1";
+var readOnly = "_1a8lqy93-3-9-1";
+var reservedSuffixButton = "_1a8lqy9e-3-9-1";
+var variant = { "default": "_1a8lqy94-3-9-1", minimal: "_1a8lqy95-3-9-1" };
+var wrapper = "_1a8lqy90-3-9-1";
 export {
   container,
   containerPadding,

package/esm/forms/_base-input/BaseInput.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInput.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var container = '_1a8lqy98-3-8-0';\nexport var containerPadding = {none:'_1a8lqy99-3-8-0',rightNone:'_1a8lqy9a-3-8-0',rightUnset:'_1a8lqy9b-3-8-0',leftUnset:'_1a8lqy9c-3-8-0'};\nexport var disabled = '_1a8lqy92-3-8-0';\nexport var divider = '_1a8lqy9f-3-8-0';\nexport var hasError = '_1a8lqy91-3-8-0';\nexport var input = '_1a8lqy9d-3-8-0 _yfwka33-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0';\nexport var isAutoFilled = '_1a8lqy9g-3-8-0';\nexport var readOnly = '_1a8lqy93-3-8-0';\nexport var reservedSuffixButton = '_1a8lqy9e-3-8-0';\nexport var variant = {'default':'_1a8lqy94-3-8-0',minimal:'_1a8lqy95-3-8-0'};\nexport var wrapper = '_1a8lqy90-3-8-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nexport var container = '_1a8lqy98-3-9-1';\nexport var containerPadding = {none:'_1a8lqy99-3-9-1',rightNone:'_1a8lqy9a-3-9-1',rightUnset:'_1a8lqy9b-3-9-1',leftUnset:'_1a8lqy9c-3-9-1'};\nexport var disabled = '_1a8lqy92-3-9-1';\nexport var divider = '_1a8lqy9f-3-9-1';\nexport var hasError = '_1a8lqy91-3-9-1';\nexport var input = '_1a8lqy9d-3-9-1 _yfwka33-3-9-1 _da9a8v0-3-9-1 _da9a8v2-3-9-1 _da9a8v3-3-9-1 _da9a8vb-3-9-1';\nexport var isAutoFilled = '_1a8lqy9g-3-9-1';\nexport var readOnly = '_1a8lqy93-3-9-1';\nexport var reservedSuffixButton = '_1a8lqy9e-3-9-1';\nexport var variant = {'default':'_1a8lqy94-3-9-1',minimal:'_1a8lqy95-3-9-1'};\nexport var wrapper = '_1a8lqy90-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,YAAY;AAChB,IAAI,mBAAmB,EAAC,MAAK,mBAAkB,WAAU,mBAAkB,YAAW,mBAAkB,WAAU,kBAAiB;AACnI,IAAI,WAAW;AACf,IAAI,UAAU;AACd,IAAI,WAAW;AACf,IAAI,QAAQ;AACZ,IAAI,eAAe;AACnB,IAAI,WAAW;AACf,IAAI,uBAAuB;AAC3B,IAAI,UAAU,EAAC,WAAU,mBAAkB,SAAQ,kBAAiB;AACpE,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/_base-input/BaseInputContent.css

@@ -1,27 +1,27 @@
-._o6rxr70-3-8-0 {
+._o6rxr70-3-9-1 {
   white-space: nowrap;
   overflow: hidden;
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);
 }
-._1a8lqy91-3-8-0 ._o6rxr70-3-8-0 {
+._1a8lqy91-3-9-1 ._o6rxr70-3-9-1 {
   color: var(--dt-colors-icon-critical-default, #bb0731);
 }
-._1a8lqy92-3-8-0 ._o6rxr70-3-8-0 {
+._1a8lqy92-3-9-1 ._o6rxr70-3-9-1 {
   color: var(--dt-colors-icon-neutral-disabled, #595a7d80);
 }
-._o6rxr70-3-8-0:has(svg):not(:has(span)) {
+._o6rxr70-3-9-1:has(svg):not(:has(span)) {
   overflow: inherit;
 }
-._o6rxr70-3-8-0 > * {
+._o6rxr70-3-9-1 > * {
   overflow: hidden;
   text-overflow: ellipsis;
   display: inline-block;
 }
-._o6rxr70-3-8-0 svg {
+._o6rxr70-3-9-1 svg {
   box-sizing: content-box;
   align-items: stretch;
   flex-shrink: 0;
 }
-._o6rxr70-3-8-0 svg:first-of-type {
+._o6rxr70-3-9-1 svg:first-of-type {
   align-self: center;
 }

package/esm/forms/_base-input/BaseInputContent.sty.js

@@ -4,7 +4,7 @@ import "../../styles/textStyle.css";
 import "../hooks/useAutofillEvent.css";
 import "./BaseInput.css";
 import "./BaseInputContent.css";
-var content = "_o6rxr70-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0";
+var content = "_o6rxr70-3-9-1 _da9a8v0-3-9-1 _da9a8v2-3-9-1 _da9a8v3-3-9-1 _da9a8vb-3-9-1";
 export {
   content
 };

package/esm/forms/_base-input/BaseInputContent.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/_base-input/BaseInputContent.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../hooks/useAutofillEvent.css';\nimport './BaseInput.css';\nimport './BaseInputContent.css';\nexport var content = '_o6rxr70-3-9-1 _da9a8v0-3-9-1 _da9a8v2-3-9-1 _da9a8v3-3-9-1 _da9a8vb-3-9-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/calendar/Calendar.css

@@ -1,24 +1,24 @@
-._xm8mdk0-3-8-0 {
+._xm8mdk0-3-9-1 {
   width: 248px;
 }
-._xm8mdk1-3-8-0 {
+._xm8mdk1-3-9-1 {
   cursor: not-allowed;
 }
-._xm8mdk2-3-8-0 {
+._xm8mdk2-3-9-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._xm8mdk3-3-8-0 {
+._xm8mdk3-3-9-1 {
   all: revert;
   width: 100%;
   border-collapse: collapse;
   border: 0;
   border-spacing: 0;
 }
-._xm8mdk4-3-8-0 {
+._xm8mdk4-3-9-1 {
   pointer-events: none;
 }
-._xm8mdk5-3-8-0 {
+._xm8mdk5-3-9-1 {
   background: revert;
   border: 0;
   display: grid;
@@ -26,16 +26,16 @@
   justify-items: center;
   align-items: center;
 }
-._xm8mdk6-3-8-0 {
+._xm8mdk6-3-9-1 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
-._xm8mdk7-3-8-0 {
+._xm8mdk7-3-9-1 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-._xm8mdk8-3-8-0 {
+._xm8mdk8-3-9-1 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-._xm8mdk9-3-8-0 {
+._xm8mdk9-3-9-1 {
   border: 0;
   width: 100%;
   margin-top: var(--dt-spacings-size-2, 2px);
@@ -43,91 +43,91 @@
   padding: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdka-3-8-0 {
-  --_1jljrbf0-3-8-0: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1jljrbf1-3-8-0: var(--dt-colors-border-primary-accent, #464cce);
+._xm8mdka-3-9-1 {
+  --_1jljrbf0-3-9-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1jljrbf1-3-9-1: var(--dt-colors-border-primary-accent, #464cce);
 }
-._xm8mdkb-3-8-0 {
-  --_1jljrbf0-3-8-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1jljrbf1-3-8-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+._xm8mdkb-3-9-1 {
+  --_1jljrbf0-3-9-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1jljrbf1-3-9-1: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._xm8mdkc-3-8-0 {
-  --_1jljrbf0-3-8-0: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1jljrbf1-3-8-0: var(--dt-colors-border-critical-accent, #bb0731);
+._xm8mdkc-3-9-1 {
+  --_1jljrbf0-3-9-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1jljrbf1-3-9-1: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._xm8mdkd-3-8-0 {
-  --_1jljrbf0-3-8-0: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._xm8mdkd-3-9-1 {
+  --_1jljrbf0-3-9-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._xm8mdkf-3-8-0 {
-  --_1jljrbf0-3-8-0: var(--dt-colors-background-field-primary-disabled, #e4e5eb80);
-  --_1jljrbf1-3-8-0: var(--dt-colors-border-primary-disabled, #dadbe480);
+._xm8mdkf-3-9-1 {
+  --_1jljrbf0-3-9-1: var(--dt-colors-background-field-primary-disabled, #e4e5eb80);
+  --_1jljrbf1-3-9-1: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._xm8mdkg-3-8-0 {
-  --_1jljrbf0-3-8-0: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1jljrbf1-3-8-0: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._xm8mdkg-3-9-1 {
+  --_1jljrbf0-3-9-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1jljrbf1-3-9-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._xm8mdkh-3-8-0 {
-  --_1jljrbf0-3-8-0: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1jljrbf1-3-8-0: var(--dt-colors-border-critical-disabled, #dadbe480);
+._xm8mdkh-3-9-1 {
+  --_1jljrbf0-3-9-1: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_1jljrbf1-3-9-1: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._xm8mdki-3-8-0 {
+._xm8mdki-3-9-1 {
   position: relative;
   z-index: 0;
 }
-._xm8mdki-3-8-0::before {
+._xm8mdki-3-9-1::before {
   content: "";
   position: absolute;
   top: 0;
-  background: var(--_1jljrbf0-3-8-0);
+  background: var(--_1jljrbf0-3-9-1);
   height: 100%;
   z-index: -1;
 }
-._xm8mdkj-3-8-0 {
-  background: var(--_1jljrbf0-3-8-0);
+._xm8mdkj-3-9-1 {
+  background: var(--_1jljrbf0-3-9-1);
 }
-._xm8mdkj-3-8-0::before {
+._xm8mdkj-3-9-1::before {
   right: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(var(--dt-spacings-size-4, 4px) / 2);
 }
-._xm8mdkj-3-8-0:last-child::before {
+._xm8mdkj-3-9-1:last-child::before {
   background: none;
 }
-._xm8mdkk-3-8-0 {
-  background: var(--_1jljrbf0-3-8-0);
+._xm8mdkk-3-9-1 {
+  background: var(--_1jljrbf0-3-9-1);
 }
-._xm8mdkk-3-8-0::before {
+._xm8mdkk-3-9-1::before {
   left: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(var(--dt-spacings-size-4, 4px) / 2);
 }
-._xm8mdkk-3-8-0:first-child::before {
+._xm8mdkk-3-9-1:first-child::before {
   background: none;
 }
-._xm8mdkl-3-8-0::before {
+._xm8mdkl-3-9-1::before {
   left: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(100% + (var(--dt-spacings-size-4, 4px)));
-  background: var(--_1jljrbf0-3-8-0);
+  background: var(--_1jljrbf0-3-9-1);
 }
-._xm8mdkl-3-8-0:first-child::before {
+._xm8mdkl-3-9-1:first-child::before {
   left: 0;
   width: calc(100% + (var(--dt-spacings-size-4, 4px) / 2));
   border-top-left-radius: var(--dt-borders-radius-field-default, 6px);
   border-bottom-left-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdkl-3-8-0:last-child::before {
+._xm8mdkl-3-9-1:last-child::before {
   width: calc(100% + (var(--dt-spacings-size-4, 4px) / 2));
   border-top-right-radius: var(--dt-borders-radius-field-default, 6px);
   border-bottom-right-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdkm-3-8-0 {
+._xm8mdkm-3-9-1 {
   background: none;
 }
-._xm8mdkn-3-8-0 {
+._xm8mdkn-3-9-1 {
   width: 100%;
   border-collapse: collapse;
   border: 0;
   border-spacing: 0;
 }
-._xm8mdko-3-8-0 {
+._xm8mdko-3-9-1 {
   padding-top: var(--dt-spacings-size-8, 8px);
   display: flex;
   justify-content: flex-end;

package/esm/forms/calendar/Calendar.js

@@ -20,8 +20,7 @@ import { createTimeframeStore } from "../../core/time/timeframeStore/createTimef
 import { CalendarStoreProvider } from "../../core/time/timeframeStore/timeframeStoreProvider.js";
 import { useMinMax, useMinMaxStoreSync } from "../../core/time/useMinMax.js";
 import { validate } from "../../core/time/validation.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 { CALENDAR_ERROR_MESSAGES } from "./calendarMessages.js";
 function useSyncPropsAndState(store, memoedValue, isControlled, type, precision, min, max, formFieldMessageDispatch, calendarRef) {
   const valueMode = type === "single" ? "single" : "timeframeSelector";
@@ -109,6 +108,8 @@ function RefAwareCalendar(props, forwardedRef) {
     readOnly: propReadOnly,
     id: propId,
     "aria-disabled": propAriaDisabled,
+    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321
+    controlState,
     precision = "minutes",
     type = "single",
     ...remainingProps
@@ -126,13 +127,20 @@ function RefAwareCalendar(props, forwardedRef) {
     []
   );
   const calendarRef = useRef(null);
-  const { dispatch: formFieldMessageDispatch } = useFormFieldMessagesContext();
-  const { disabled, required, id, ariaDisabled, readOnly } = useSyncedFormControlProps({
+  const {
+    disabled,
+    required,
+    id,
+    ariaDisabled,
+    readOnly,
+    messageDispatch: formFieldMessageDispatch
+  } = useFormControl({
     propDisabled,
     propRequired,
     propId,
     propAriaDisabled,
-    propReadOnly
+    propReadOnly,
+    controlState
   });
   const [store] = useState(() => {
     const value = isControlled ? memoedValue : memoedDefaultValue;

package/esm/forms/calendar/Calendar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/Calendar.tsx"],
-  "sourcesContent": ["import {\n  type Dispatch,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Ref,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport type { CalendarProps } from './Calendar.types.js';\nimport { CalendarRoot } from './CalendarRoot.js';\nimport type { CalendarType } from './types/calendarConfiguration.js';\nimport {\n  convertToCalendarStructure,\n  getTimeOffsetFromInitialValue,\n} from './utils/helpers.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isFullTimeframe } from '../../core/time/helpers.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getCalendarActions } from '../../core/time/timeframeStore/actions/calendar.js';\nimport type {\n  CalendarTimeframeState,\n  CalendarTimeframeStoreActions,\n} from '../../core/time/timeframeStore/calendar.types.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport { CalendarStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type TimeValue } from '../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport type { FormFieldMessagesReducerAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport { CALENDAR_ERROR_MESSAGES } from './calendarMessages.js';\n\ntype CalendarStore = StoreApi<\n  CalendarTimeframeState & CalendarTimeframeStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: CalendarStore,\n  memoedValue: CalendarTimeframeState['calendarValue'],\n  isControlled: boolean,\n  type: CalendarType,\n  precision: Exclude<Precision, 'day'>,\n  min: TimeValue | null,\n  max: TimeValue | null,\n  formFieldMessageDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  calendarRef: CalendarTimeframeState['calendarRef'],\n) {\n  const valueMode = type === 'single' ? 'single' : 'timeframeSelector';\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          const error = validate(memoedValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessageDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: calendarRef,\n            valueMode,\n            errorMessages: CALENDAR_ERROR_MESSAGES,\n          });\n\n          const timeOffset = getTimeOffsetFromInitialValue(\n            memoedValue,\n            type,\n            min,\n            max,\n            precision,\n          );\n\n          const valueWithPrecision = convertToCalendarStructure(\n            type,\n            memoedValue,\n            min,\n            max,\n            precision,\n          );\n\n          if (type === 'single') {\n            return {\n              calendarValue: valueWithPrecision,\n              calendarError: error,\n              timeOffset,\n            };\n          }\n\n          const value = isFullTimeframe(valueWithPrecision)\n            ? valueWithPrecision\n            : null;\n\n          return {\n            calendarValue: value,\n            calendarError: error,\n            timeOffset,\n          };\n        });\n    },\n    // calendarRef is a stable ref \u2014 no need to include it in deps\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessageDispatch,\n      isControlled,\n      memoedValue,\n      store,\n      min,\n      max,\n      precision,\n      type,\n    ],\n  );\n\n  // Sync precision, type, min, and max into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = convertToCalendarStructure(\n        type,\n        state.calendarValue,\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        calendarValue: value,\n      };\n    });\n  }, [precision, store, min, max, type]);\n}\n\nfunction RefAwareCalendar<Type extends CalendarType = 'single'>(\n  props: CalendarProps<Type>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    value: propValue,\n    defaultValue: propDefaultValue,\n    onChange,\n    min: propMin,\n    max: propMax,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    id: propId,\n    'aria-disabled': propAriaDisabled,\n    precision = 'minutes',\n    type = 'single',\n    ...remainingProps\n  } = props;\n\n  const [isControlled] = useState(propValue !== undefined);\n  const onChangeProp = useCallbackRef(onChange);\n\n  // Keep min and max updated at midnight\n  const { min, max } = useMinMax(propMin, propMax);\n\n  const memoedValue = useMemo(() => {\n    return convertToCalendarStructure(type, propValue, min, max, precision);\n  }, [precision, propValue, min, max, type]);\n  const memoedDefaultValue = useMemo(\n    () =>\n      convertToCalendarStructure(type, propDefaultValue, min, max, precision),\n    /** We're ignoring updates to defaultValue as it only considers the initial state. */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n  const calendarRef = useRef<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >(null);\n\n  const { dispatch: formFieldMessageDispatch } = useFormFieldMessagesContext();\n\n  const { disabled, required, id, ariaDisabled, readOnly } =\n    useSyncedFormControlProps({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n    });\n\n  const [store] = useState(() => {\n    const value = isControlled ? memoedValue : memoedDefaultValue;\n\n    const error = validate(value, min, max, {\n      formMessageDispatch: formFieldMessageDispatch,\n      precision,\n      showError: false,\n      checkOrder: true,\n      ref: calendarRef,\n      valueMode: type === 'single' ? 'single' : 'timeframeSelector',\n      required: required,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n    const timeOffset = getTimeOffsetFromInitialValue(\n      value,\n      type,\n      min,\n      max,\n      precision,\n    );\n\n    const initialState = {\n      calendarValue: value,\n      min,\n      max,\n      precision,\n      isFullDay: false,\n      calendarRef,\n      required,\n      calendarError: error,\n      timeOffset,\n    };\n\n    const actions = getCalendarActions<Type>(\n      isControlled,\n      type,\n      formFieldMessageDispatch,\n      onChangeProp,\n    );\n    return createTimeframeStore<\n      CalendarTimeframeState,\n      CalendarTimeframeStoreActions\n    >(initialState, actions);\n  });\n\n  useSyncPropsAndState(\n    store,\n    memoedValue,\n    isControlled,\n    type,\n    precision,\n    min,\n    max,\n    formFieldMessageDispatch,\n    calendarRef,\n  );\n\n  // Keep min and max updated at midnight\n  useMinMaxStoreSync(\n    store,\n    min,\n    max,\n    useCallback(\n      (\n        state: CalendarTimeframeState,\n        min: TimeValue | null,\n        max: TimeValue | null,\n      ) => ({\n        calendarError: validate(state.calendarValue, min, max, {\n          formMessageDispatch: formFieldMessageDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: calendarRef,\n          valueMode: type === 'single' ? 'single' : 'timeframeSelector',\n          required: required,\n          errorMessages: CALENDAR_ERROR_MESSAGES,\n        }),\n      }),\n      [formFieldMessageDispatch],\n    ),\n  );\n\n  const mergedRef = useMergeRefs([calendarRef, forwardedRef]);\n\n  return (\n    <CalendarStoreProvider store={store}>\n      <CalendarRoot\n        {...remainingProps}\n        id={id}\n        ref={mergedRef}\n        aria-disabled={ariaDisabled}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        type={type}\n      />\n    </CalendarStoreProvider>\n  );\n}\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nexport const Calendar = forwardRef(RefAwareCalendar);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Dispatch,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type Ref,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport type { CalendarProps } from './Calendar.types.js';\nimport { CalendarRoot } from './CalendarRoot.js';\nimport type { CalendarType } from './types/calendarConfiguration.js';\nimport {\n  convertToCalendarStructure,\n  getTimeOffsetFromInitialValue,\n} from './utils/helpers.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { isFullTimeframe } from '../../core/time/helpers.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getCalendarActions } from '../../core/time/timeframeStore/actions/calendar.js';\nimport type {\n  CalendarTimeframeState,\n  CalendarTimeframeStoreActions,\n} from '../../core/time/timeframeStore/calendar.types.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport { CalendarStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useMinMax, useMinMaxStoreSync } from '../../core/time/useMinMax.js';\nimport { validate } from '../../core/time/validation.js';\nimport { type TimeValue } from '../../core/types/time.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport type { FormFieldMessagesReducerAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport { CALENDAR_ERROR_MESSAGES } from './calendarMessages.js';\n\ntype CalendarStore = StoreApi<\n  CalendarTimeframeState & CalendarTimeframeStoreActions\n>;\n\n/**\n * Extracts the prop-to-store syncing effects into a dedicated hook so the\n * component body stays focused on wiring rather than implementation details.\n *\n * According to the zustand maintainer, the recommended way to keep a zustand\n * store in sync with React props is via useEffect.\n * see https://github.com/pmndrs/zustand/discussions/1390#discussion-4505803\n */\nfunction useSyncPropsAndState(\n  store: CalendarStore,\n  memoedValue: CalendarTimeframeState['calendarValue'],\n  isControlled: boolean,\n  type: CalendarType,\n  precision: Exclude<Precision, 'day'>,\n  min: TimeValue | null,\n  max: TimeValue | null,\n  formFieldMessageDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  calendarRef: CalendarTimeframeState['calendarRef'],\n) {\n  const valueMode = type === 'single' ? 'single' : 'timeframeSelector';\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(\n    () => {\n      isControlled &&\n        store.setState((state) => {\n          const error = validate(memoedValue, state.min, state.max, {\n            formMessageDispatch: formFieldMessageDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: calendarRef,\n            valueMode,\n            errorMessages: CALENDAR_ERROR_MESSAGES,\n          });\n\n          const timeOffset = getTimeOffsetFromInitialValue(\n            memoedValue,\n            type,\n            min,\n            max,\n            precision,\n          );\n\n          const valueWithPrecision = convertToCalendarStructure(\n            type,\n            memoedValue,\n            min,\n            max,\n            precision,\n          );\n\n          if (type === 'single') {\n            return {\n              calendarValue: valueWithPrecision,\n              calendarError: error,\n              timeOffset,\n            };\n          }\n\n          const value = isFullTimeframe(valueWithPrecision)\n            ? valueWithPrecision\n            : null;\n\n          return {\n            calendarValue: value,\n            calendarError: error,\n            timeOffset,\n          };\n        });\n    },\n    // calendarRef is a stable ref \u2014 no need to include it in deps\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      formFieldMessageDispatch,\n      isControlled,\n      memoedValue,\n      store,\n      min,\n      max,\n      precision,\n      type,\n    ],\n  );\n\n  // Sync precision, type, min, and max into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = convertToCalendarStructure(\n        type,\n        state.calendarValue,\n        min,\n        max,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        calendarValue: value,\n      };\n    });\n  }, [precision, store, min, max, type]);\n}\n\nfunction RefAwareCalendar<Type extends CalendarType = 'single'>(\n  props: CalendarProps<Type>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    value: propValue,\n    defaultValue: propDefaultValue,\n    onChange,\n    min: propMin,\n    max: propMax,\n    disabled: propDisabled,\n    required: propRequired,\n    readOnly: propReadOnly,\n    id: propId,\n    'aria-disabled': propAriaDisabled,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated -- APPDEV-18321\n    controlState,\n    precision = 'minutes',\n    type = 'single',\n    ...remainingProps\n  } = props;\n\n  const [isControlled] = useState(propValue !== undefined);\n  const onChangeProp = useCallbackRef(onChange);\n\n  // Keep min and max updated at midnight\n  const { min, max } = useMinMax(propMin, propMax);\n\n  const memoedValue = useMemo(() => {\n    return convertToCalendarStructure(type, propValue, min, max, precision);\n  }, [precision, propValue, min, max, type]);\n  const memoedDefaultValue = useMemo(\n    () =>\n      convertToCalendarStructure(type, propDefaultValue, min, max, precision),\n    /** We're ignoring updates to defaultValue as it only considers the initial state. */\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n  const calendarRef = useRef<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >(null);\n\n  const {\n    disabled,\n    required,\n    id,\n    ariaDisabled,\n    readOnly,\n    messageDispatch: formFieldMessageDispatch,\n  } = useFormControl({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled,\n    propReadOnly,\n    controlState,\n  });\n\n  const [store] = useState(() => {\n    const value = isControlled ? memoedValue : memoedDefaultValue;\n\n    const error = validate(value, min, max, {\n      formMessageDispatch: formFieldMessageDispatch,\n      precision,\n      showError: false,\n      checkOrder: true,\n      ref: calendarRef,\n      valueMode: type === 'single' ? 'single' : 'timeframeSelector',\n      required: required,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n    const timeOffset = getTimeOffsetFromInitialValue(\n      value,\n      type,\n      min,\n      max,\n      precision,\n    );\n\n    const initialState = {\n      calendarValue: value,\n      min,\n      max,\n      precision,\n      isFullDay: false,\n      calendarRef,\n      required,\n      calendarError: error,\n      timeOffset,\n    };\n\n    const actions = getCalendarActions<Type>(\n      isControlled,\n      type,\n      formFieldMessageDispatch,\n      onChangeProp,\n    );\n    return createTimeframeStore<\n      CalendarTimeframeState,\n      CalendarTimeframeStoreActions\n    >(initialState, actions);\n  });\n\n  useSyncPropsAndState(\n    store,\n    memoedValue,\n    isControlled,\n    type,\n    precision,\n    min,\n    max,\n    formFieldMessageDispatch,\n    calendarRef,\n  );\n\n  // Keep min and max updated at midnight\n  useMinMaxStoreSync(\n    store,\n    min,\n    max,\n    useCallback(\n      (\n        state: CalendarTimeframeState,\n        min: TimeValue | null,\n        max: TimeValue | null,\n      ) => ({\n        calendarError: validate(state.calendarValue, min, max, {\n          formMessageDispatch: formFieldMessageDispatch,\n          precision,\n          showError: false,\n          checkOrder: true,\n          ref: calendarRef,\n          valueMode: type === 'single' ? 'single' : 'timeframeSelector',\n          required: required,\n          errorMessages: CALENDAR_ERROR_MESSAGES,\n        }),\n      }),\n      [formFieldMessageDispatch],\n    ),\n  );\n\n  const mergedRef = useMergeRefs([calendarRef, forwardedRef]);\n\n  return (\n    <CalendarStoreProvider store={store}>\n      <CalendarRoot\n        {...remainingProps}\n        id={id}\n        ref={mergedRef}\n        aria-disabled={ariaDisabled}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        type={type}\n      />\n    </CalendarStoreProvider>\n  );\n}\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nexport const Calendar = forwardRef(RefAwareCalendar);\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }