@dynatrace/strato-components 3.7.1 → 3.8.0

package/forms/_base-input/BaseInput.js

@@ -37,6 +37,8 @@ var import_react_intl = require("react-intl");
 var styles = __toESM(require("./BaseInput.sty.js"));
 var import_BaseInputButton = require("./BaseInputButton.js");
 var import_BaseInputContent = require("./BaseInputContent.js");
+var import_baseInputMessages = require("./baseInputMessages.js");
+var import_ClearButton = require("./ClearButton.js");
 var import_BaseInputContext = require("./contexts/BaseInputContext.js");
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
@@ -54,8 +56,8 @@ var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFor
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_useAutofillEvent = require("../hooks/useAutofillEvent.js");
 var import_useInputHint = require("../hooks/useInputHint.js");
-var import_baseInputMessages = require("./baseInputMessages.js");
-var import_ClearButton = require("./ClearButton.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 function getSlots(children) {
   const validSlots = import_react.Children.toArray(children).filter(
     import_react.isValidElement
@@ -112,6 +114,7 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
     style: consumerStyle,
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     onClear,
+    onValidityChange,
     type,
     placeholder = defaultPlaceholder,
     value,
@@ -142,6 +145,11 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
   const { isAutoFilled, onAnimationStart } = (0, import_useAutofillEvent.useAutofillEvent)();
   const inputRef = (0, import_react.useRef)(null);
   const wrapperRef = (0, import_react.useRef)(null);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+  );
   const { focusProps, focusClassName } = (0, import_useFocusRing.useFocusRing)({
     color: hasError && !(disabled || ariaDisabled) ? "critical" : "neutral",
     ignoreModality: true,
@@ -165,7 +173,9 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
       "aria-labelledby": ariaLabelledByProp,
       "aria-describedby": ariaDescribedByProp,
       "aria-details": ariaDetailsProp
-    }
+    },
+    void 0,
+    _emitValidationState
   );
   const eventListener = { onChange, onBlur, onInvalid };
   (0, import_react.useImperativeHandle)(
@@ -182,9 +192,23 @@ const BaseInputRoot = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwa
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
+        emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+        );
+      },
+      // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+      validateAsync: async () => {
+        inputRef.current?.checkValidity();
+        dispatch?.({
+          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
+          payload: { isTouched: true }
+        });
+        return emitValidationState(
+          (0, import_useFormFieldValidation.getI18nValidationState)(intl, inputRef.current, "manual")
+        );
       }
     }),
-    [dispatch]
+    [dispatch, emitValidationState, intl]
   );
   const context = (0, import_react.useMemo)(
     () => ({ variant, hasError, disabled, ariaDisabled }),

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

@@ -35,14 +35,14 @@ var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
-var container = "_1a8lqy98-3-7-1";
-var containerPadding = { none: "_1a8lqy99-3-7-1", rightNone: "_1a8lqy9a-3-7-1", rightUnset: "_1a8lqy9b-3-7-1", leftUnset: "_1a8lqy9c-3-7-1" };
-var disabled = "_1a8lqy92-3-7-1";
-var divider = "_1a8lqy9f-3-7-1";
-var hasError = "_1a8lqy91-3-7-1";
-var input = "_1a8lqy9d-3-7-1 _yfwka33-3-7-1 _da9a8v0-3-7-1 _da9a8v2-3-7-1 _da9a8v3-3-7-1 _da9a8vb-3-7-1";
-var isAutoFilled = "_1a8lqy9g-3-7-1";
-var readOnly = "_1a8lqy93-3-7-1";
-var reservedSuffixButton = "_1a8lqy9e-3-7-1";
-var variant = { "default": "_1a8lqy94-3-7-1", minimal: "_1a8lqy95-3-7-1" };
-var wrapper = "_1a8lqy90-3-7-1";
+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";

package/forms/_base-input/BaseInputContent.css

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

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

@@ -26,4 +26,4 @@ var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_useAutofillEvent_css_ts_vanilla = require("../hooks/useAutofillEvent.css");
 var import_BaseInput_css_ts_vanilla = require("./BaseInput.css");
 var import_BaseInputContent_css_ts_vanilla = require("./BaseInputContent.css");
-var content = "_o6rxr70-3-7-1 _da9a8v0-3-7-1 _da9a8v2-3-7-1 _da9a8v3-3-7-1 _da9a8vb-3-7-1";
+var content = "_o6rxr70-3-8-0 _da9a8v0-3-8-0 _da9a8v2-3-8-0 _da9a8v3-3-8-0 _da9a8vb-3-8-0";

package/forms/_base-input/base-input.types.d.ts

@@ -4,6 +4,7 @@ import type { FormControlStateProps } from '../../core/types/form-control-state.
 import type { MaskingProps } from '../../core/types/masking-props.js';
 import type { StylingProps } from '../../core/types/styling-props.js';
 import type { WithChildren } from '../../core/types/with-children.js';
+import type { ValidationState } from '../validation/types.js';
 /**
  * Props used by all input components.
  * @public
@@ -19,4 +20,9 @@ export interface BaseInputProps extends ComponentPropsWithoutRef<'input'>, FormC
      * @deprecated Use `BaseInput.ReservedSuffix` to render a clear button instead.
      */
     onClear?: () => void;
+    /**
+     * Called when validation state changes. Fires automatically on blur or change,
+     * and when triggered manually via `validate()` or `validateAsync()`.
+     */
+    onValidityChange?: (state: ValidationState) => void;
 }

package/forms/calendar/Calendar.css

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

package/forms/calendar/Calendar.sty.js

@@ -33,15 +33,15 @@ __export(Calendar_css_exports, {
 module.exports = __toCommonJS(Calendar_css_exports);
 var import_Calendar_css_ts_vanilla = require("./Calendar.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var body = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk3-3-7-1", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk0-3-7-1", variantClassNames: { readOnly: { true: "_xm8mdk1-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var clearBackground = "_xm8mdkm-3-7-1";
-var dayRow = "_xm8mdk6-3-7-1";
-var disabled = "_xm8mdk2-3-7-1";
-var field = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk9-3-7-1", variantClassNames: { color: { primary: "_xm8mdka-3-7-1", neutral: "_xm8mdkb-3-7-1", critical: "_xm8mdkc-3-7-1" }, isIncompleteSelection: { true: "_xm8mdkd-3-7-1" }, isDisabled: { true: "_xm8mdke-3-7-1" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-7-1"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-7-1"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-7-1"]] });
-var footer = "_xm8mdko-3-7-1";
-var monthRow = "_xm8mdk7-3-7-1";
-var rangeField = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdki-3-7-1", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-7-1", last: "_xm8mdkk-3-7-1", inbetween: "_xm8mdkl-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
-var row = "_xm8mdk5-3-7-1";
-var weekdays = "_xm8mdkn-3-7-1";
-var yearRow = "_xm8mdk8-3-7-1";
+var body = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk3-3-8-0", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var calendar = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk0-3-8-0", variantClassNames: { readOnly: { true: "_xm8mdk1-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var clearBackground = "_xm8mdkm-3-8-0";
+var dayRow = "_xm8mdk6-3-8-0";
+var disabled = "_xm8mdk2-3-8-0";
+var field = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdk9-3-8-0", variantClassNames: { color: { primary: "_xm8mdka-3-8-0", neutral: "_xm8mdkb-3-8-0", critical: "_xm8mdkc-3-8-0" }, isIncompleteSelection: { true: "_xm8mdkd-3-8-0" }, isDisabled: { true: "_xm8mdke-3-8-0" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-8-0"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-8-0"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-8-0"]] });
+var footer = "_xm8mdko-3-8-0";
+var monthRow = "_xm8mdk7-3-8-0";
+var rangeField = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_xm8mdki-3-8-0", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-8-0", last: "_xm8mdkk-3-8-0", inbetween: "_xm8mdkl-3-8-0" } }, defaultVariants: {}, compoundVariants: [] });
+var row = "_xm8mdk5-3-8-0";
+var weekdays = "_xm8mdkn-3-8-0";
+var yearRow = "_xm8mdk8-3-8-0";

package/forms/calendar/CalendarRoot.d.ts

@@ -1,7 +1,7 @@
-import type { FormControlProps } from '../../core/types/form-control-props.js';
-import type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';
 import type { CalendarStrictValueType, CalendarValueType } from './Calendar.types.js';
+import type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';
 import { DataTestId } from '../../core/types/data-props.js';
+import type { FormControlProps } from '../../core/types/form-control-props.js';
 import { MaskingProps } from '../../core/types/masking-props.js';
 import { StylingProps } from '../../core/types/styling-props.js';
 /**

package/forms/calendar/CalendarRoot.js

@@ -33,15 +33,11 @@ module.exports = __toCommonJS(CalendarRoot_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
+var import_react_intl = require("react-intl");
 var import_CalendarHeader = require("./calendar-header/CalendarHeader.js");
-var import_calendarMessages = require("./calendarMessages.js");
-var import_VisuallyHidden = require("../../core/components/visually-hidden/VisuallyHidden.js");
-var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
-var import_validation = require("../../core/time/validation.js");
-var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
-var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
-var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var styles = __toESM(require("./Calendar.sty.js"));
+var import_calendarMessages = require("./calendarMessages.js");
+var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 var import_SetTimeToNowButton = require("./components/SetTimeToNowButton.js");
 var import_CalendarContext = require("./contexts/CalendarContext.js");
 var import_useCalendar = require("./hooks/useCalendar.js");
@@ -49,7 +45,14 @@ var import_useCalendarNavigation = require("./hooks/useCalendarNavigation.js");
 var import_SelectDayView = require("./views/SelectDayView.js");
 var import_SelectMonthView = require("./views/SelectMonthView.js");
 var import_SelectYearView = require("./views/SelectYearView.js");
+var import_VisuallyHidden = require("../../core/components/visually-hidden/VisuallyHidden.js");
 var import_helpers = require("../../core/time/helpers.js");
+var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
+var import_validation = require("../../core/time/validation.js");
+var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
+var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
+var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
 const COMPONENT_NAME = "Calendar";
 function renderView(view) {
   switch (view) {
@@ -79,6 +82,7 @@ function CalendarComponent(props, forwardedRef) {
     "aria-labelledby": ariaLabelledByProp,
     "aria-describedby": ariaDescribedByProp,
     "aria-details": ariaDetailsProp,
+    onValidityChange,
     ...remainingProps
   } = props;
   const calendarValue = (0, import_useTimeframeStore.useCalendarStore)((state2) => state2.calendarValue);
@@ -86,9 +90,15 @@ function CalendarComponent(props, forwardedRef) {
   const max = (0, import_useTimeframeStore.useCalendarStore)((state2) => state2.max);
   const error = (0, import_useTimeframeStore.useCalendarStore)((state2) => state2.calendarError);
   const precision = (0, import_useTimeframeStore.useCalendarStore)((state2) => state2.precision);
+  const intl = (0, import_react_intl.useIntl)();
   const calendarRef = (0, import_react.useRef)(null);
   const ref = (0, import_react.useRef)(null);
   const refTo = (0, import_react.useRef)(null);
+  const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => (0, import_useFormFieldValidation.getI18nValidationState)(intl, ref.current, "manual")
+  );
   const { uniqueId, state, dispatch } = (0, import_useCalendar.useCalendar)({
     type
   });
@@ -120,19 +130,49 @@ function CalendarComponent(props, forwardedRef) {
         return {
           element: calendarRef.current,
           inputRef: ref.current,
-          validate: refValidate
+          validate() {
+            refValidate();
+            emitValidationState(
+              (0, import_useFormFieldValidation.getI18nValidationState)(intl, ref.current, "manual")
+            );
+          },
+          // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+          validateAsync: async () => {
+            refValidate();
+            return emitValidationState(
+              (0, import_useFormFieldValidation.getI18nValidationState)(intl, ref.current, "manual")
+            );
+          }
         };
       }
       return {
         element: calendarRef.current,
-        inputRef: {
-          from: ref?.current,
-          to: refTo?.current
+        inputRef: { from: ref?.current, to: refTo?.current },
+        validate() {
+          refValidate();
+          const fromState = (0, import_useFormFieldValidation.getI18nValidationState)(intl, ref.current, "manual");
+          if (fromState.errors.length > 0) {
+            emitValidationState(fromState);
+            return;
+          }
+          emitValidationState(
+            (0, import_useFormFieldValidation.getI18nValidationState)(intl, refTo.current, "manual")
+          );
         },
-        validate: refValidate
+        // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
+        validateAsync: async () => {
+          refValidate();
+          const fromState = (0, import_useFormFieldValidation.getI18nValidationState)(intl, ref.current, "manual");
+          if (fromState.errors.length > 0) {
+            return emitValidationState(fromState);
+          }
+          return emitValidationState(
+            (0, import_useFormFieldValidation.getI18nValidationState)(intl, refTo.current, "manual")
+          );
+        }
       };
     },
-    [refValidate, type]
+    [refValidate, type, emitValidationState, intl]
   );
   const {
     ariaProps,
@@ -147,8 +187,13 @@ function CalendarComponent(props, forwardedRef) {
       "aria-labelledby": ariaLabelledByProp,
       "aria-describedby": ariaDescribedByProp,
       "aria-details": ariaDetailsProp
-    }
+    },
+    void 0,
+    _emitValidationState
   );
+  (0, import_react.useEffect)(() => {
+    validationOnChange();
+  }, [calendarValue, validationOnChange]);
   const labelRef = (0, import_react.useRef)(`calendar-body-label-${uniqueId}`);
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
   const getNativeProps = (suffix = "") => ({
@@ -167,12 +212,18 @@ function CalendarComponent(props, forwardedRef) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
+        role: "group",
         className: (0, import_clsx.default)(styles.calendar({ readOnly }), consumerClassName, {
           [styles.disabled]: disabledOrAriaDisabled
         }),
         "data-testid": dataTestId,
         ref: calendarRef,
         style: consumerStyle,
+        onBlur: (e) => {
+          if (!calendarRef.current?.contains(e.relatedTarget)) {
+            onBlur();
+          }
+        },
         ...remainingProps,
         "data-dt-component": COMPONENT_NAME,
         children: [

package/forms/calendar/components/CalendarItem.css

@@ -1,7 +1,7 @@
-._1basjc0-3-7-1 {
+._1basjc0-3-8-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1basjc1-3-7-1::after,._1basjc1-3-7-1::before {
+._1basjc1-3-8-0::after,._1basjc1-3-8-0::before {
   content: "";
   position: absolute;
   width: 4px;
@@ -11,11 +11,11 @@
   left: 50%;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1basjc1-3-7-1::before {
+._1basjc1-3-8-0::before {
   transform: translate(-50%, 50%) scale(2);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1basjc2-3-7-1 {
+._1basjc2-3-8-0 {
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   margin: var(--dt-spacings-size-0, 0);
@@ -23,9 +23,9 @@
   position: relative;
   z-index: 0;
 }
-._1basjc2-3-7-1::after {
-  background: var(--_1jljrbf1-3-7-1);
+._1basjc2-3-8-0::after {
+  background: var(--_1jljrbf1-3-8-0);
 }
-._1basjc3-3-7-1 {
+._1basjc3-3-8-0 {
   flex-grow: 1;
 }

package/forms/calendar/components/CalendarItem.sty.js

@@ -24,7 +24,7 @@ __export(CalendarItem_css_exports, {
 });
 module.exports = __toCommonJS(CalendarItem_css_exports);
 var import_CalendarItem_css_ts_vanilla = require("./CalendarItem.css");
-var calendarButton = "_1basjc2-3-7-1";
-var currentIndicator = "_1basjc1-3-7-1";
-var headerButton = "_1basjc3-3-7-1";
-var outOfScopeDay = "_1basjc0-3-7-1";
+var calendarButton = "_1basjc2-3-8-0";
+var currentIndicator = "_1basjc1-3-8-0";
+var headerButton = "_1basjc3-3-8-0";
+var outOfScopeDay = "_1basjc0-3-8-0";

package/forms/calendar/components/CalendarOutlineIcon.css

@@ -1,24 +1,24 @@
-._1uazq660-3-7-1 {
+._1uazq660-3-8-0 {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: visible;
-  fill: var(--_1jljrbf1-3-7-1);
+  fill: var(--_1jljrbf1-3-8-0);
 }
-._1uazq661-3-7-1 {
-  fill: var(--_1jljrbf1-3-7-1);
+._1uazq661-3-8-0 {
+  fill: var(--_1jljrbf1-3-8-0);
 }
-._1uazq662-3-7-1 {
+._1uazq662-3-8-0 {
   fill: var(--dt-colors-background-surface-default, #fff);
 }
-._1uazq663-3-7-1 {
-  fill: var(--_1jljrbf0-3-7-1);
+._1uazq663-3-8-0 {
+  fill: var(--_1jljrbf0-3-8-0);
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   opacity: 0;
   transition-property: opacity;
 }
-._1uazq664-3-7-1 {
+._1uazq664-3-8-0 {
   opacity: 1;
 }

package/forms/calendar/components/CalendarOutlineIcon.sty.js

@@ -25,8 +25,8 @@ __export(CalendarOutlineIcon_css_exports, {
 });
 module.exports = __toCommonJS(CalendarOutlineIcon_css_exports);
 var import_CalendarOutlineIcon_css_ts_vanilla = require("./CalendarOutlineIcon.css");
-var calendarIndicatorBackgroundCSS = "_1uazq662-3-7-1";
-var calendarIndicatorCSS = "_1uazq661-3-7-1";
-var calendarOutlineCSS = "_1uazq660-3-7-1";
-var calendarRangeCornersCSS = "_1uazq663-3-7-1";
-var calendarRangeCornorVisibleCSS = "_1uazq664-3-7-1";
+var calendarIndicatorBackgroundCSS = "_1uazq662-3-8-0";
+var calendarIndicatorCSS = "_1uazq661-3-8-0";
+var calendarOutlineCSS = "_1uazq660-3-8-0";
+var calendarRangeCornersCSS = "_1uazq663-3-8-0";
+var calendarRangeCornorVisibleCSS = "_1uazq664-3-8-0";

package/forms/calendar/variables.sty.js

@@ -21,5 +21,5 @@ __export(variables_css_exports, {
   rangeColor: () => rangeColor
 });
 module.exports = __toCommonJS(variables_css_exports);
-var borderColor = "var(--_1jljrbf1-3-7-1)";
-var rangeColor = "var(--_1jljrbf0-3-7-1)";
+var borderColor = "var(--_1jljrbf1-3-8-0)";
+var rangeColor = "var(--_1jljrbf0-3-8-0)";