@dynatrace/strato-components 3.10.4 → 3.11.1

package/forms/date-time-picker/types.d.ts

@@ -29,7 +29,7 @@ export type DateTimePickerTypeProps = {
 /**
  * @public
  */
-export type DateTimePickerProps = FormControlProps<TimeValue | string | null, (value: TimeValue | string | null) => void> & StylingProps & DataTestId & MaskingProps & DateTimePickerTypeProps & BehaviorTrackingProps & {
+export type DateTimePickerProps = FormControlProps<TimeValue | string | null, (value: TimeValue | string | null) => void, HTMLDivElement> & StylingProps & DataTestId & MaskingProps & DateTimePickerTypeProps & BehaviorTrackingProps & {
     /**
      * Earliest allowed ISOString and timestamp for validation.
      */
@@ -54,6 +54,8 @@ export interface DateSelectorProps extends StylingProps, DataTestId, MaskingProp
     error: boolean;
     /** Determines whether the input is in read-only mode. */
     readOnly?: boolean;
+    /** Placed on the overlay wrapper so the parent can identify it for focus boundary tracking. */
+    overlayOwnerId?: string;
 }
 /**
  * Imperative handle to provide methods to interact with the calendar widget.

package/forms/date-time-range-picker/DateRangeSelector.css

@@ -1,4 +1,4 @@
-._1uftu980-3-10-4 {
+._1uftu980-3-11-1 {
   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);
   transition-property: color, background-color, transform;

package/forms/date-time-range-picker/DateRangeSelector.js

@@ -58,6 +58,7 @@ const DateRangeSelector = (0, import_react.forwardRef)((props, forwardedRef) =>
     "data-dtrum-mask": dataDtrumMask,
     "data-dtrum-allow": dataDtrumAllow,
     "aria-disabled": ariaDisabledProp,
+    overlayOwnerId,
     ...remainingProps
   } = props;
   const [open, setOpen] = (0, import_react.useState)(false);
@@ -156,6 +157,9 @@ const DateRangeSelector = (0, import_react.forwardRef)((props, forwardedRef) =>
         }),
         "data-dtrum-mask": dataDtrumMask,
         "data-dtrum-allow": dataDtrumAllow,
+        overlayContainerProps: {
+          "data-dt-owner": overlayOwnerId
+        },
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormFieldMessageContext.FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CalendarRoot.CalendarRoot, { type: "range", "aria-disabled": ariaDisabledProp }) })
       }
     )

package/forms/date-time-range-picker/DateRangeSelector.sty.js

@@ -21,4 +21,4 @@ __export(DateRangeSelector_css_exports, {
 });
 module.exports = __toCommonJS(DateRangeSelector_css_exports);
 var import_DateRangeSelector_css_ts_vanilla = require("./DateRangeSelector.css");
-var selector = "_1uftu980-3-10-4";
+var selector = "_1uftu980-3-11-1";

package/forms/date-time-range-picker/DateTimeInput.css

@@ -1,33 +1,33 @@
-._5u9o250-3-10-4 {
+._5u9o250-3-11-1 {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-._5u9o250-3-10-4::-webkit-scrollbar {
+._5u9o250-3-11-1::-webkit-scrollbar {
   display: none;
 }
-._5u9o252-3-10-4 {
+._5u9o252-3-11-1 {
   outline: none;
 }
-._5u9o252-3-10-4:not(:focus-visible) {
+._5u9o252-3-11-1:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o252-3-10-4:empty::before {
+._5u9o252-3-11-1:empty::before {
   content: var(--data-placeholder);
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1vlwkc21-3-10-4 ._5u9o252-3-10-4:empty::before {
+._1vlwkc21-3-11-1 ._5u9o252-3-11-1:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-10-4 ._5u9o252-3-10-4:empty::before {
+._1vlwkc22-3-11-1 ._5u9o252-3-11-1:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-10-4._1vlwkc21-3-10-4 ._5u9o252-3-10-4:empty::before {
+._1vlwkc22-3-11-1._1vlwkc21-3-11-1 ._5u9o252-3-11-1:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._5u9o252-3-10-4::selection {
-  color: var(--_1i883gj5-3-10-4);
-  background-color: var(--_1i883gj6-3-10-4);
+._5u9o252-3-11-1::selection {
+  color: var(--_1i883gj2-3-11-1);
+  background-color: var(--_1i883gj3-3-11-1);
 }

package/forms/date-time-range-picker/DateTimeInput.sty.js

@@ -29,6 +29,6 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_DateTimeInput_css_ts_vanilla = require("./DateTimeInput.css");
-var dateTimeInput = "_5u9o251-3-10-4";
-var dateTimeInputRoot = "_5u9o250-3-10-4";
-var expression = "_5u9o252-3-10-4";
+var dateTimeInput = "_5u9o251-3-11-1";
+var dateTimeInputRoot = "_5u9o250-3-11-1";
+var expression = "_5u9o252-3-11-1";

package/forms/date-time-range-picker/DateTimeRangePicker.css

@@ -1,49 +1,49 @@
-._1vlwkc20-3-10-4 {
+._1vlwkc20-3-11-1 {
   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);
   transition-property: color, background-color, transform;
   padding-inline: var(--dt-spacings-size-12, 12px);
   padding-block: var(--dt-spacings-size-6, 6px);
   border-radius: var(--dt-borders-radius-field-default, 6px);
-  box-shadow: var(--_bx32h4-3-10-4);
+  box-shadow: var(--_bx32h4-3-11-1);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-10-4);
-  background: var(--_bx32h3-3-10-4);
+  color: var(--_bx32h0-3-11-1);
+  background: var(--_bx32h3-3-11-1);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-10-4._1vlwkc20-3-10-4 {
+._1vlwkc20-3-11-1._1vlwkc20-3-11-1 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-10-4:has(._1i883gjh-3-10-4) {
+._1vlwkc20-3-11-1:has(._1i883gjd-3-11-1) {
   padding-inline-end: var(--dt-spacings-size-32, 32px);
 }
-._1vlwkc20-3-10-4:has(._1i883gjh-3-10-4:hover) {
-  --_bx32h3-3-10-4: var(--_bx32h2-3-10-4);
+._1vlwkc20-3-11-1:has(._1i883gjd-3-11-1:hover) {
+  --_bx32h3-3-11-1: var(--_bx32h2-3-11-1);
 }
-._1vlwkc20-3-10-4:has(._1i883gjh-3-10-4:focus-visible) {
-  box-shadow: var(--_bx32h4-3-10-4, none);
+._1vlwkc20-3-11-1:has(._1i883gjd-3-11-1:focus-visible) {
+  box-shadow: var(--_bx32h4-3-11-1, none);
 }
-._1jgl8s50-3-10-4 ._1vlwkc20-3-10-4, ._1jgl8s50-3-10-4 ._1vlwkc20-3-10-4:hover, ._1jgl8s50-3-10-4 ._1vlwkc20-3-10-4:active {
-  --_bx32h3-3-10-4: var(--dt-colors-background-surface-default, #fff);
+._1jgl8s50-3-11-1 ._1vlwkc20-3-11-1, ._1jgl8s50-3-11-1 ._1vlwkc20-3-11-1:hover, ._1jgl8s50-3-11-1 ._1vlwkc20-3-11-1:active {
+  --_bx32h3-3-11-1: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-10-4 {
+._1vlwkc22-3-11-1 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-10-4 {
-  --_bx32h3-3-10-4: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-11-1 {
+  --_bx32h3-3-11-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
 }
-._1jgl8s50-3-10-4 ._1vlwkc23-3-10-4, ._1jgl8s50-3-10-4 ._1vlwkc23-3-10-4:hover, ._1jgl8s50-3-10-4 ._1vlwkc23-3-10-4:active {
-  --_bx32h4-3-10-4: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-1 ._1vlwkc23-3-11-1, ._1jgl8s50-3-11-1 ._1vlwkc23-3-11-1:hover, ._1jgl8s50-3-11-1 ._1vlwkc23-3-11-1:active {
+  --_bx32h4-3-11-1: var(--dt-box-shadows-field-neutral-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc24-3-10-4 {
-  --_bx32h3-3-10-4: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+._1vlwkc24-3-11-1 {
+  --_bx32h3-3-11-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
 }
-._1jgl8s50-3-10-4 ._1vlwkc24-3-10-4, ._1jgl8s50-3-10-4 ._1vlwkc24-3-10-4:hover, ._1jgl8s50-3-10-4 ._1vlwkc24-3-10-4:active {
-  --_bx32h4-3-10-4: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
+._1jgl8s50-3-11-1 ._1vlwkc24-3-11-1, ._1jgl8s50-3-11-1 ._1vlwkc24-3-11-1:hover, ._1jgl8s50-3-11-1 ._1vlwkc24-3-11-1:active {
+  --_bx32h4-3-11-1: var(--dt-box-shadows-field-critical-disabled, inset 0px 0px 0px 1px #2f2f4f0f, inset 0px -1px 0px #2f2f4f0a, 0px 1px 1px -1px #2d2e4e1f);
 }
-._1vlwkc25-3-10-4 {
+._1vlwkc25-3-11-1 {
   display: flex;
   flex: 1 1 auto;
   min-width: 0;
@@ -51,19 +51,19 @@
   overflow-y: hidden;
   scrollbar-width: none;
 }
-._1vlwkc25-3-10-4._1vlwkc25-3-10-4 {
+._1vlwkc25-3-11-1._1vlwkc25-3-11-1 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-10-4::-webkit-scrollbar {
+._1vlwkc25-3-11-1::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-10-4._1vlwkc26-3-10-4 {
+._1vlwkc26-3-11-1._1vlwkc26-3-11-1 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-10-4 {
+._1vlwkc27-3-11-1 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-10-4::selection {
+._1vlwkc27-3-11-1::selection {
   background: transparent;
 }

package/forms/date-time-range-picker/DateTimeRangePicker.js

@@ -33,6 +33,7 @@ var import_useMinMax = require("../../core/time/useMinMax.js");
 var import_validation = require("../../core/time/validation.js");
 var import_helpers = require("../calendar/utils/helpers.js");
 var import_useFormControl = require("../forms-core/hooks/useFormControl.js");
+var import_useMinMaxLogger = require("../forms-core/hooks/useMinMaxLogger.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
 var import_date_time = require("../forms-core/time/date-time.js");
 var import_timeParser = require("../forms-core/time/timeParser.js");
@@ -126,6 +127,7 @@ const DateTimeRangePicker = (0, import_react.forwardRef)(
       []
     );
     const { min, max } = (0, import_useMinMax.useMinMax)(propMin, propMax);
+    (0, import_useMinMaxLogger.useMinMaxLogger)(min, max, "DateTimeRangePicker");
     const calendarRef = (0, import_react.useRef)(null);
     const dateTimeFromRef = (0, import_react.useRef)(null);
     const dateTimeRangePickerRef = (0, import_react.useRef)(null);

package/forms/date-time-range-picker/DateTimeRangePicker.sty.js

@@ -30,7 +30,7 @@ var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css")
 var import_DateTimePicker_css_ts_vanilla = require("../date-time-picker/DateTimePicker.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dateTimeInput = "_1vlwkc26-3-10-4";
-var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-10-4", variantClassNames: { showError: { true: "_1vlwkc21-3-10-4" }, disabled: { true: "_1vlwkc22-3-10-4" }, readOnly: { true: "_1vlwkc23-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-10-4"]] });
-var scrollContainer = "_1vlwkc25-3-10-4";
-var timeframeSeparator = "_1vlwkc27-3-10-4";
+var dateTimeInput = "_1vlwkc26-3-11-1";
+var dateTimeRange = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1vlwkc20-3-11-1", variantClassNames: { showError: { true: "_1vlwkc21-3-11-1" }, disabled: { true: "_1vlwkc22-3-11-1" }, readOnly: { true: "_1vlwkc23-3-11-1" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-11-1"]] });
+var scrollContainer = "_1vlwkc25-3-11-1";
+var timeframeSeparator = "_1vlwkc27-3-11-1";

package/forms/date-time-range-picker/DateTimeRangePickerRoot.d.ts

@@ -3,5 +3,6 @@ import type { UseFormControlReturnType } from '../forms-core/hooks/useFormContro
 /**@internal */
 export declare const DateTimeRangePickerRoot: (props: Omit<DateTimeRangePickerProps, "aria-disabled" | "controlState" | "defaultValue" | "disabled" | "id" | "onChange" | "readOnly" | "required" | "value"> & {
     formControl: UseFormControlReturnType;
+    shouldSuppressBlur?: (relatedTarget: Element | null) => boolean;
 } & import("react").RefAttributes<DateTimeRangePickerRef | null>) => import("react").ReactElement | null;
 //# sourceMappingURL=DateTimeRangePickerRoot.d.ts.map

package/forms/date-time-range-picker/DateTimeRangePickerRoot.js

@@ -47,6 +47,7 @@ var import_Button = require("../../buttons/button/Button.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
+var import_useId = require("../../core/hooks/useId.js");
 var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
 var import_validation = require("../../core/time/validation.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
@@ -58,6 +59,7 @@ var import_DateTimePicker_css = require("../date-time-picker/DateTimePicker.sty.
 var import_focusDateTimeInput = require("../date-time-picker/utils/focusDateTimeInput.js");
 var import_FormFieldMessageContext = require("../forms-core/contexts/FormFieldMessageContext.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+var import_useContainerFocus = require("../hooks/useContainerFocus.js");
 var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
 var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 var import_validation_builders = require("../validation/validation-builders.js");
@@ -109,8 +111,10 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
     "data-dtrum-allow": dataDtrumAllow,
     placeholder: placeholderProp,
     onBlur,
+    onFocus,
     formControl,
     onValidityChange,
+    shouldSuppressBlur,
     ...remainingProps
   } = props;
   const {
@@ -121,7 +125,6 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
     ariaDisabled,
     inputProps,
     showError,
-    messageState,
     messageDispatch: formMessageDispatch
   } = formControl;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
@@ -131,6 +134,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
   const touchedContainerRef = (0, import_react.useRef)(null);
   const dateTimeToRef = (0, import_react.useRef)(null);
   const dateRangeSelectorRef = (0, import_react.useRef)(null);
+  const ownerId = (0, import_useId.useId)();
   const [hasInputContent, setHasInputContent] = (0, import_react.useState)(false);
   const setValue = (0, import_useTimeframeStore.useDateTimeRangePickerStore)(
     (state) => state.setDateTimeRangePickerTimeframe
@@ -155,35 +159,31 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
     dateTimeToRef
   });
   const intl = (0, import_react_intl.useIntl)();
-  const { isTouched } = messageState;
   const lastValidationErrorRef = (0, import_react.useRef)(void 0);
   const _emitValidationState = (0, import_useValidationStateEmitter.useValidationStateEmitter)(onValidityChange);
-  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
-    _emitValidationState,
-    () => {
-      const key = getErrorKey();
+  const buildValidationState = (0, import_react.useCallback)(
+    (trigger, key) => {
+      if (key === void 0) {
+        return { status: "done", trigger, errors: [] };
+      }
       return (0, import_validation_builders.getValidationState)(
-        key !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(key) : void 0,
-        "manual",
-        getValidationMessage(key),
+        (0, import_validation.getValidityStateKeyForTimeError)(key),
+        trigger,
+        (0, import_validation.formatTimeValidationMessage)(key, intl, {
+          value,
+          min,
+          max,
+          precision,
+          expectedFormat: formatString
+        }),
         id ? [id] : []
       );
-    }
-  );
-  const getValidationMessage = (0, import_react.useCallback)(
-    (errorKey) => {
-      if (!errorKey) {
-        return void 0;
-      }
-      return (0, import_validation.formatTimeValidationMessage)(errorKey, intl, {
-        value,
-        min,
-        max,
-        precision,
-        expectedFormat: formatString
-      });
     },
-    [intl, value, min, max, precision, formatString]
+    [intl, value, min, max, precision, formatString, id]
+  );
+  const emitValidationState = (0, import_useCustomMessageEmitter.useCustomMessageEmitter)(
+    _emitValidationState,
+    () => buildValidationState("manual", getErrorKey())
   );
   (0, import_react.useImperativeHandle)(
     forwardedRef,
@@ -217,12 +217,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
           payload: { isTouched: true }
         });
         emitValidationState(
-          (0, import_validation_builders.getValidationState)(
-            lastValidationErrorRef.current !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(lastValidationErrorRef.current) : void 0,
-            "manual",
-            getValidationMessage(lastValidationErrorRef.current),
-            id ? [id] : []
-          )
+          buildValidationState("manual", lastValidationErrorRef.current)
         );
       },
       // DEPRECATION: [APPDEV-18178] BREAKING-CHANGE: Remove validateAsync() and change validate() to return Promise<ValidationState>.
@@ -242,13 +237,9 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
           type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
-        const state = (0, import_validation_builders.getValidationState)(
-          lastValidationErrorRef.current !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(lastValidationErrorRef.current) : void 0,
-          "manual",
-          getValidationMessage(lastValidationErrorRef.current),
-          id ? [id] : []
+        return emitValidationState(
+          buildValidationState("manual", lastValidationErrorRef.current)
         );
-        return emitValidationState(state);
       }
     }),
     [
@@ -261,7 +252,7 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
       required,
       dateTimeFromRef,
       emitValidationState,
-      getValidationMessage
+      buildValidationState
     ]
   );
   const getErrorKey = (0, import_react.useCallback)(
@@ -275,17 +266,18 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
     }),
     [value, min, max, precision, formatString, required]
   );
+  const { containerClassName, ...containerFocusProps } = (0, import_useContainerFocus.useContainerFocus)({
+    onFocus,
+    onBlur,
+    disabled,
+    overlayOwnerId: ownerId,
+    emitValidationState,
+    getBlurValidationState: () => buildValidationState("blur", getErrorKey()),
+    shouldSuppressBlur
+  });
   (0, import_react.useEffect)(() => {
-    const key = getErrorKey();
-    emitValidationState(
-      (0, import_validation_builders.getValidationState)(
-        key !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(key) : void 0,
-        "change",
-        getValidationMessage(key),
-        id ? [id] : []
-      )
-    );
-  }, [value, id, getErrorKey, emitValidationState, getValidationMessage]);
+    emitValidationState(buildValidationState("change", getErrorKey()));
+  }, [value, emitValidationState, buildValidationState, getErrorKey]);
   const { focusClassName } = (0, import_useFocusRing.useFocusRing)({
     focusWithin: true,
     ignoreModality: true,
@@ -459,10 +451,11 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
       flexDirection: "column",
       "data-testid": dataTestId,
       style: consumerStyle,
-      className: consumerClassName,
+      className: (0, import_clsx.default)(containerClassName, consumerClassName),
       ...ariaProps,
       ...behavioralTrackingProps,
       "data-dt-component": COMPONENT_NAME,
+      ...containerFocusProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FormFieldMessageContext.FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_InputGroup.InputGroup, { style: { gridTemplateColumns: "1fr auto" }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           import_Flex.Flex,
@@ -492,25 +485,6 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
             onCopyCapture: import_selection_copy_helpers.onTimeframeCopyCapture,
             onCutCapture,
             onPasteCapture,
-            onBlur: (event) => {
-              requestAnimationFrame(() => {
-                onBlur?.(event);
-              });
-              if (touchedContainerRef.current?.contains(event.relatedTarget)) {
-                return;
-              }
-              if (!isTouched) {
-                const blurKey = getErrorKey();
-                emitValidationState(
-                  (0, import_validation_builders.getValidationState)(
-                    blurKey !== void 0 ? (0, import_validation.getValidityStateKeyForTimeError)(blurKey) : void 0,
-                    "blur",
-                    getValidationMessage(blurKey),
-                    id ? [id] : []
-                  )
-                );
-              }
-            },
             onInput: () => {
               setHasInputContent(
                 !!dateTimeFromRef.current?.expressionInputRef?.textContent || !!dateTimeToRef.current?.expressionInputRef?.textContent
@@ -591,13 +565,8 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
               !readOnly && !disabledOrAriaDisabled && (value && (value.from?.value !== "" || value.to?.value !== "") || hasInputContent) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_Button.Button,
                 {
-                  onFocus: () => {
-                    formMessageDispatch?.({
-                      type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-                      payload: { isTouched: true }
-                    });
-                  },
                   onClick: () => {
+                    dateTimeFromRef.current?.expressionInputRef?.focus();
                     setValue(null);
                     if (dateTimeFromRef.current?.expressionInputRef) {
                       dateTimeFromRef.current.expressionInputRef.textContent = "";
@@ -606,9 +575,6 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
                       dateTimeToRef.current.expressionInputRef.textContent = "";
                     }
                     setHasInputContent(false);
-                    requestAnimationFrame(() => {
-                      dateTimeFromRef.current?.expressionInputRef?.focus();
-                    });
                   },
                   onKeyDown: (e) => {
                     if (e.key === "Enter") {
@@ -634,7 +600,8 @@ const DateTimeRangePickerRoot = (0, import_react.forwardRef)((props, forwardedRe
             readOnly,
             error: showError,
             "data-dtrum-mask": dataDtrumMask,
-            "data-dtrum-allow": dataDtrumAllow
+            "data-dtrum-allow": dataDtrumAllow,
+            overlayOwnerId: ownerId
           }
         )
       ] }) })

package/forms/date-time-range-picker/hooks/useDateTimeInput.js

@@ -117,6 +117,8 @@ const useDateTimeInput = (props, expressionInputRef) => {
     !expressionInputRef.current?.textContent
   );
   const [inputValue, setInputValue] = (0, import_react.useState)("");
+  const lastInputValueRef = (0, import_react.useRef)(inputValue);
+  lastInputValueRef.current = inputValue;
   const pasteUndoRef = (0, import_react.useRef)(null);
   (0, import_react.useEffect)(() => {
     return () => {
@@ -147,7 +149,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
     value: spinButtonValue,
     onChange: (newIsoDateTime) => {
       const newValue = (0, import_timeParser.getTimeValue)(newIsoDateTime ?? void 0, precision);
-      if (newValue === void 0) {
+      if (newValue === null || newValue === void 0) {
         return;
       }
       if (isSwitchingToExpressionRef.current) {
@@ -163,6 +165,7 @@ const useDateTimeInput = (props, expressionInputRef) => {
         onChange?.(newValue);
         return;
       }
+      setInputValue(newValue.value);
       setValue(
         (prevValue) => (0, import_helpers.isEqualTimeValue)(prevValue, newValue) ? prevValue : newValue
       );
@@ -206,8 +209,15 @@ const useDateTimeInput = (props, expressionInputRef) => {
   (0, import_react.useEffect)(() => {
     const prevValue = prevValueRef.current;
     prevValueRef.current = value;
+    const applyInputValue = (next) => {
+      if (lastInputValueRef.current === next) {
+        return;
+      }
+      lastInputValueRef.current = next;
+      setInputValue(next);
+    };
     if (value?.type === "iso8601" && !spinButtonsEmpty) {
-      setInputValue(value.value);
+      applyInputValue(value.value);
     }
     if (!isControlled || typeof value === "string") {
       return;
@@ -219,15 +229,17 @@ const useDateTimeInput = (props, expressionInputRef) => {
       formatExpressionValue(null);
       const input = expressionInputRef.current?.textContent;
       setExpressionEmpty(input === "");
-      spinButtonHandlers.forEach((sb) => sb?.clearValue(true));
+      applyDateTime(null);
       lastValidAbsoluteDateRef.current = null;
       return;
     }
     if (value.absoluteDate === "") {
       return;
     }
-    setValueType(value.type);
-    setInputValue(value.value);
+    if (valueType !== value.type) {
+      setValueType(value.type);
+    }
+    applyInputValue(value.value);
     if (value.type === "expression") {
       if (!(0, import_helpers.isEqualTimeValue)(prevValue ?? null, value)) {
         formatExpressionValue(value);

package/forms/date-time-range-picker/types.d.ts

@@ -178,6 +178,8 @@ export interface DateRangeSelectorProps extends StylingProps, DataTestId, Maskin
     readOnly?: boolean;
     /** Determine if the trigger is in error state or not. */
     error: boolean;
+    /** Placed on the overlay container so the parent can identify it for focus boundary tracking. */
+    overlayOwnerId?: string;
 }
 /**
  * Imperative handle to provide methods to interact with the calendar widget.

package/forms/date-time-range-picker/useSelectionInteractionHandlers.js

@@ -34,6 +34,10 @@ function useSelectionInteractionHandlers(touchedContainerRef, onFocusInput, date
       if (event.button !== 0) {
         return;
       }
+      const active = document.activeElement;
+      if (active instanceof HTMLElement && active !== event.currentTarget && active.hasAttribute("contenteditable") && event.currentTarget.contains(active)) {
+        event.currentTarget.focus();
+      }
       contextMenuSelectionRef.current = null;
       (0, import_selection_helpers.consumePreRestoreEndpoints)(event.currentTarget);
       const root = event.currentTarget;

package/forms/form/hooks/useInternalFormRegistration.js

@@ -87,7 +87,9 @@ function useInternalFormRegistration(options) {
       (0, import_useFormFieldValidation.getI18nValidationState)(intl, controlRef?.current?.inputRef, trigger)
     );
   };
-  const resolvedId = id ?? formFieldContext.formFieldId ?? formFieldContext.controlId ?? generatedId;
+  const resolvedId = id ?? formFieldContext.formFieldId ?? // DEPRECATION: APPDEV-18319 - Remove deprecated `controlId`.
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  formFieldContext.controlId ?? generatedId;
   const wrappedValidateField = (0, import_react.useCallback)(
     async (validateOptions) => {
       suppressLiveValidityReportRef.current = true;

package/forms/forms-core/components/field-set/FieldSet.css

@@ -1,4 +1,4 @@
-._1dphm0f0-3-10-4 {
+._1dphm0f0-3-11-1 {
   appearance: none;
   margin: 0;
   border: none;
@@ -6,7 +6,7 @@
   min-width: 0;
   min-height: 0;
 }
-._1dphm0f1-3-10-4 {
+._1dphm0f1-3-11-1 {
   padding: 0;
   appearance: none;
   margin-bottom: var(--dt-spacings-size-12, 12px);

package/forms/forms-core/components/field-set/FieldSet.sty.js

@@ -22,5 +22,5 @@ __export(FieldSet_css_exports, {
 });
 module.exports = __toCommonJS(FieldSet_css_exports);
 var import_FieldSet_css_ts_vanilla = require("./FieldSet.css");
-var fieldset = "_1dphm0f0-3-10-4";
-var legend = "_1dphm0f1-3-10-4";
+var fieldset = "_1dphm0f0-3-11-1";
+var legend = "_1dphm0f1-3-11-1";

package/forms/forms-core/components/form-field/FormField.sty.js

@@ -21,4 +21,4 @@ __export(FormField_css_exports, {
 });
 module.exports = __toCommonJS(FormField_css_exports);
 var import_FormField_css_ts_vanilla = require("./FormField.css");
-var formField = "_mvcxum0-3-10-4";
+var formField = "_mvcxum0-3-11-1";

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.css

@@ -1,17 +1,17 @@
-._16z6rg10-3-10-4 {
+._16z6rg10-3-11-1 {
   font-size: var(--dt-typography-text-small-default-size, 12px);
   line-height: var(--dt-typography-text-small-default-line-height, 1.333333333);
 }
-._16z6rg11-3-10-4 {
+._16z6rg11-3-11-1 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._16z6rg12-3-10-4 {
+._16z6rg12-3-11-1 {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._16z6rg13-3-10-4 {
+._16z6rg13-3-11-1 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._16z6rg14-3-10-4 {
+._16z6rg14-3-11-1 {
   min-width: 0;
   overflow-wrap: break-word;
 }

package/forms/forms-core/components/form-field-messages/FormFieldMessageItem.sty.js

@@ -23,5 +23,5 @@ __export(FormFieldMessageItem_css_exports, {
 module.exports = __toCommonJS(FormFieldMessageItem_css_exports);
 var import_FormFieldMessageItem_css_ts_vanilla = require("./FormFieldMessageItem.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-10-4", variantClassNames: { variant: { hint: "_16z6rg11-3-10-4", error: "_16z6rg12-3-10-4" }, disabled: { true: "_16z6rg13-3-10-4" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
-var formFieldMessageItemText = "_16z6rg14-3-10-4";
+var formFieldMessageItem = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_16z6rg10-3-11-1", variantClassNames: { variant: { hint: "_16z6rg11-3-11-1", error: "_16z6rg12-3-11-1" }, disabled: { true: "_16z6rg13-3-11-1" } }, defaultVariants: { variant: "hint", disabled: false }, compoundVariants: [] });
+var formFieldMessageItemText = "_16z6rg14-3-11-1";