@dynatrace/strato-components 3.10.4 → 3.11.0

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

@@ -5,9 +5,9 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import "./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-0";
+var dateTimeInputRoot = "_5u9o250-3-11-0";
+var expression = "_5u9o252-3-11-0";
 export {
   dateTimeInput,
   dateTimeInputRoot,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o251-3-10-4';\nexport var dateTimeInputRoot = '_5u9o250-3-10-4';\nexport var expression = '_5u9o252-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o251-3-11-0';\nexport var dateTimeInputRoot = '_5u9o250-3-11-0';\nexport var expression = '_5u9o252-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,oBAAoB;AACxB,IAAI,aAAa;",
   "names": []
 }

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

@@ -1,49 +1,49 @@
-._1vlwkc20-3-10-4 {
+._1vlwkc20-3-11-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);
   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-0);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-10-4);
-  background: var(--_bx32h3-3-10-4);
+  color: var(--_bx32h0-3-11-0);
+  background: var(--_bx32h3-3-11-0);
   flex: 1 1 auto;
   position: relative;
 }
-._1vlwkc20-3-10-4._1vlwkc20-3-10-4 {
+._1vlwkc20-3-11-0._1vlwkc20-3-11-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc20-3-10-4:has(._1i883gjh-3-10-4) {
+._1vlwkc20-3-11-0:has(._1i883gjd-3-11-0) {
   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-0:has(._1i883gjd-3-11-0:hover) {
+  --_bx32h3-3-11-0: var(--_bx32h2-3-11-0);
 }
-._1vlwkc20-3-10-4:has(._1i883gjh-3-10-4:focus-visible) {
-  box-shadow: var(--_bx32h4-3-10-4, none);
+._1vlwkc20-3-11-0:has(._1i883gjd-3-11-0:focus-visible) {
+  box-shadow: var(--_bx32h4-3-11-0, 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-0 ._1vlwkc20-3-11-0, ._1jgl8s50-3-11-0 ._1vlwkc20-3-11-0:hover, ._1jgl8s50-3-11-0 ._1vlwkc20-3-11-0:active {
+  --_bx32h3-3-11-0: var(--dt-colors-background-surface-default, #fff);
 }
-._1vlwkc22-3-10-4 {
+._1vlwkc22-3-11-0 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-10-4 {
-  --_bx32h3-3-10-4: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1vlwkc23-3-11-0 {
+  --_bx32h3-3-11-0: 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-0 ._1vlwkc23-3-11-0, ._1jgl8s50-3-11-0 ._1vlwkc23-3-11-0:hover, ._1jgl8s50-3-11-0 ._1vlwkc23-3-11-0:active {
+  --_bx32h4-3-11-0: 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-0 {
+  --_bx32h3-3-11-0: 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-0 ._1vlwkc24-3-11-0, ._1jgl8s50-3-11-0 ._1vlwkc24-3-11-0:hover, ._1jgl8s50-3-11-0 ._1vlwkc24-3-11-0:active {
+  --_bx32h4-3-11-0: 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-0 {
   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-0._1vlwkc25-3-11-0 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc25-3-10-4::-webkit-scrollbar {
+._1vlwkc25-3-11-0::-webkit-scrollbar {
   display: none;
 }
-._1vlwkc26-3-10-4._1vlwkc26-3-10-4 {
+._1vlwkc26-3-11-0._1vlwkc26-3-11-0 {
   flex-shrink: 0;
   overflow-x: visible;
 }
-._1vlwkc27-3-10-4 {
+._1vlwkc27-3-11-0 {
   flex-shrink: 0;
 }
-._1vlwkc27-3-10-4::selection {
+._1vlwkc27-3-11-0::selection {
   background: transparent;
 }

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

@@ -18,6 +18,7 @@ import { useMinMax, useMinMaxStoreSync } from "../../core/time/useMinMax.js";
 import { validate } from "../../core/time/validation.js";
 import { getTimeOffsetFromInitialValue } from "../calendar/utils/helpers.js";
 import { useFormControl } from "../forms-core/hooks/useFormControl.js";
+import { useMinMaxLogger } from "../forms-core/hooks/useMinMaxLogger.js";
 import {
   FormFieldMessagesAction
 } from "../forms-core/state/formfield-messages-state-reducer.js";
@@ -119,6 +120,7 @@ const DateTimeRangePicker = forwardRef(
       []
     );
     const { min, max } = useMinMax(propMin, propMax);
+    useMinMaxLogger(min, max, "DateTimeRangePicker");
     const calendarRef = useRef(null);
     const dateTimeFromRef = useRef(null);
     const dateTimeRangePickerRef = useRef(null);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.tsx"],
-  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimeRangePickerRoot } from './DateTimeRangePickerRoot.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimeRangePickerActions } from '../../core/time/timeframeStore/actions/dateTimeRangePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../../core/time/timeframeStore/dateTimeRangePicker.types.js';\nimport { DateTimeRangePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.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 { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../forms-core/time/timeParser.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype DateTimeRangePickerStore = StoreApi<\n  DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions\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: DateTimeRangePickerStore,\n  memoedValue: {\n    from: TimeValue | null;\n    to: TimeValue | null;\n  } | null,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimeRangePickerRef: RefObject<DateTimeRangePickerRef | null>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          formerError: state.calendarError,\n          ref: dateTimeRangePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'dateTimePicker',\n          required: state.required,\n        });\n\n        const value = removePrecisionFromTimeFrame(\n          memoedValue,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'range',\n          state.min,\n          state.max,\n          precision,\n        );\n\n        return {\n          ...state,\n          dateTimeRangePickerTimeframe: value,\n          calendarValue: value,\n          calendarError: error,\n          dateTimeRangePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    precision,\n    dateTimeRangePickerRef,\n  ]);\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeFrame(\n        state.dateTimeRangePickerTimeframe,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        dateTimeRangePickerTimeframe: value,\n        calendarValue: value,\n        required,\n      };\n    });\n  }, [precision, formatString, store, required]);\n}\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision = 'minutes',\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      onBlur,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, 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\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const { formatString } = useDateTimeMessages({ precision });\n\n    const [initialState] = useState<DateTimeRangePickerTimeframeStates>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimeRangePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      });\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        timeOffset,\n        formatString,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimeRangePickerTimeframeStates,\n        DateTimeRangePickerTimeframeStoreActions\n      >(\n        initialState,\n        getDateTimeRangePickerActions(\n          isControlled,\n          formFieldMessagesDispatch,\n          onChangeProp,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimeRangePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimeRangePickerTimeframeStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimeRangePickerTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimeRangePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'dateTimePicker',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimeRangePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<DateTimeRangePickerRef>([\n      dateTimeRangePickerRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <DateTimeRangePickerStoreProvider store={store}>\n        <DateTimeRangePickerRoot\n          {...remainingProps}\n          ref={mergedRef}\n          formControl={formControl}\n          onBlur={(event) => {\n            onBlur?.(event);\n\n            if (!event.target.contains(document.activeElement)) {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n            }\n          }}\n        />\n      </DateTimeRangePickerStoreProvider>\n    );\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Dispatch,\n  type RefObject,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport type { StoreApi } from 'zustand';\n\nimport { DateTimeRangePickerRoot } from './DateTimeRangePickerRoot.js';\nimport type {\n  DateTimeInputRef,\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { useCallbackRef } from '../../core/hooks/useCallbackRef.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport type { Precision } from '../../core/time/shared.types.js';\nimport { getDateTimeRangePickerActions } from '../../core/time/timeframeStore/actions/dateTimeRangePicker.js';\nimport { createTimeframeStore } from '../../core/time/timeframeStore/createTimeframeStore.js';\nimport type {\n  DateTimeRangePickerTimeframeStates,\n  DateTimeRangePickerTimeframeStoreActions,\n} from '../../core/time/timeframeStore/dateTimeRangePicker.types.js';\nimport { DateTimeRangePickerStoreProvider } from '../../core/time/timeframeStore/timeframeStoreProvider.js';\nimport { useDateTimeMessages } from '../../core/time/useDateTimeMessages.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 { getTimeOffsetFromInitialValue } from '../calendar/utils/helpers.js';\nimport { useFormControl } from '../forms-core/hooks/useFormControl.js';\nimport { useMinMaxLogger } from '../forms-core/hooks/useMinMaxLogger.js';\nimport {\n  FormFieldMessagesAction,\n  type FormFieldMessagesReducerAction,\n} from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\nimport {\n  removePrecisionFromTimeFrame,\n  mapToPartialTimeframe,\n} from '../forms-core/time/timeParser.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\n\ntype DateTimeRangePickerStore = StoreApi<\n  DateTimeRangePickerTimeframeStates & DateTimeRangePickerTimeframeStoreActions\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: DateTimeRangePickerStore,\n  memoedValue: {\n    from: TimeValue | null;\n    to: TimeValue | null;\n  } | null,\n  isControlled: boolean,\n  precision: Exclude<Precision, 'day'>,\n  formatString: string | undefined,\n  required: boolean | undefined,\n  formFieldMessagesDispatch:\n    | Dispatch<FormFieldMessagesReducerAction>\n    | undefined,\n  dateTimeRangePickerRef: RefObject<DateTimeRangePickerRef | null>,\n) {\n  // Sync the controlled value into the store whenever it changes.\n  useEffect(() => {\n    isControlled &&\n      store.setState((state) => {\n        const error = validate(memoedValue ?? null, state.min, state.max, {\n          formMessageDispatch: formFieldMessagesDispatch,\n          precision: state.precision,\n          showError: false,\n          checkOrder: true,\n          formerError: state.calendarError,\n          ref: dateTimeRangePickerRef,\n          expectedFormat: state.formatString,\n          valueMode: 'dateTimePicker',\n          required: state.required,\n        });\n\n        const value = removePrecisionFromTimeFrame(\n          memoedValue,\n          state.precision,\n        );\n        const timeOffset = getTimeOffsetFromInitialValue(\n          value,\n          'range',\n          state.min,\n          state.max,\n          precision,\n        );\n\n        return {\n          ...state,\n          dateTimeRangePickerTimeframe: value,\n          calendarValue: value,\n          calendarError: error,\n          dateTimeRangePickerError: error,\n          timeOffset,\n        };\n      });\n  }, [\n    formFieldMessagesDispatch,\n    isControlled,\n    memoedValue,\n    store,\n    precision,\n    dateTimeRangePickerRef,\n  ]);\n\n  // Sync precision and formatString into the store whenever they change.\n  useEffect(() => {\n    store.setState((state) => {\n      const value = removePrecisionFromTimeFrame(\n        state.dateTimeRangePickerTimeframe,\n        precision,\n      );\n\n      return {\n        ...state,\n        precision,\n        formatString,\n        dateTimeRangePickerTimeframe: value,\n        calendarValue: value,\n        required,\n      };\n    });\n  }, [precision, formatString, store, required]);\n}\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>(\n  (\n    {\n      value: propValue,\n      defaultValue: propDefaultValue,\n      onChange,\n      min: propMin = GRAIL_MIN_DATE,\n      max: propMax = GRAIL_MAX_DATE,\n      precision = 'minutes',\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      onBlur,\n      ...remainingProps\n    },\n    forwardedRef,\n  ) => {\n    const [isControlled] = useState(propValue !== undefined);\n    const onChangeProp = useCallbackRef(onChange);\n\n    const memoedValue = useMemo(\n      () => mapToPartialTimeframe(propValue, precision),\n      [precision, propValue],\n    );\n    const memoedDefaultValue = useMemo(\n      () => mapToPartialTimeframe(propDefaultValue, 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\n    // Keep min and max updated at midnight\n    const { min, max } = useMinMax(propMin, propMax);\n    useMinMaxLogger(min, max, 'DateTimeRangePicker');\n\n    const calendarRef = useRef<\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n    >(null);\n    const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n    const dateTimeRangePickerRef = useRef<DateTimeRangePickerRef>(null);\n\n    const formControl = useFormControl({\n      propDisabled,\n      propRequired,\n      propId,\n      propAriaDisabled,\n      propReadOnly,\n      controlState,\n    });\n    const { required, messageDispatch: formFieldMessagesDispatch } =\n      formControl;\n\n    const { formatString } = useDateTimeMessages({ precision });\n\n    const [initialState] = useState<DateTimeRangePickerTimeframeStates>(() => {\n      const value = isControlled ? memoedValue : memoedDefaultValue;\n      const timeOffset = getTimeOffsetFromInitialValue(\n        value,\n        'range',\n        min,\n        max,\n        precision,\n      );\n\n      const error = validate(value, min, max, {\n        formMessageDispatch: formFieldMessagesDispatch,\n        precision,\n        showError: false,\n        checkOrder: true,\n        ref: dateTimeRangePickerRef,\n        expectedFormat: formatString,\n        valueMode: 'dateTimePicker',\n        required,\n      });\n\n      return {\n        calendarValue: value,\n        dateTimeRangePickerTimeframe: value,\n        min,\n        max,\n        precision,\n        calendarRef,\n        dateTimeFromRef,\n        dateTimeRangePickerRef,\n        calendarError: error,\n        dateTimeRangePickerError: error,\n        timeOffset,\n        formatString,\n        required,\n      };\n    });\n\n    const [store] = useState(() =>\n      createTimeframeStore<\n        DateTimeRangePickerTimeframeStates,\n        DateTimeRangePickerTimeframeStoreActions\n      >(\n        initialState,\n        getDateTimeRangePickerActions(\n          isControlled,\n          formFieldMessagesDispatch,\n          onChangeProp,\n        ),\n      ),\n    );\n\n    useSyncPropsAndState(\n      store,\n      memoedValue,\n      isControlled,\n      precision,\n      formatString,\n      required,\n      formFieldMessagesDispatch,\n      dateTimeRangePickerRef,\n    );\n\n    // Keep min and max updated at midnight\n    useMinMaxStoreSync(\n      store,\n      min,\n      max,\n      useCallback(\n        (\n          state: DateTimeRangePickerTimeframeStates,\n          min: TimeValue | null,\n          max: TimeValue | null,\n        ) => {\n          const error = validate(state.dateTimeRangePickerTimeframe, min, max, {\n            formMessageDispatch: formFieldMessagesDispatch,\n            formerError: state.calendarError,\n            precision: state.precision,\n            showError: false,\n            checkOrder: true,\n            ref: dateTimeRangePickerRef,\n            expectedFormat: state.formatString,\n            valueMode: 'dateTimePicker',\n            required: state.required,\n          });\n          return { calendarError: error, dateTimeRangePickerError: error };\n        },\n        [formFieldMessagesDispatch],\n      ),\n    );\n\n    const mergedRef = useMergeRefs<DateTimeRangePickerRef>([\n      dateTimeRangePickerRef,\n      forwardedRef,\n    ]);\n\n    return (\n      <DateTimeRangePickerStoreProvider store={store}>\n        <DateTimeRangePickerRoot\n          {...remainingProps}\n          ref={mergedRef}\n          formControl={formControl}\n          onBlur={(event) => {\n            onBlur?.(event);\n\n            if (!event.target.contains(document.activeElement)) {\n              formFieldMessagesDispatch?.({\n                type: FormFieldMessagesAction.SETISTOUCHED,\n                payload: { isTouched: true },\n              });\n            }\n          }}\n        />\n      </DateTimeRangePickerStoreProvider>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": ["min", "max"]
 }

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

@@ -5,10 +5,10 @@ import "../spin-buttons/SpinButton.css";
 import "../date-time-picker/DateTimePicker.css";
 import "./DateTimeRangePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dateTimeInput = "_1vlwkc26-3-10-4";
-var dateTimeRange = _7a468({ 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-0";
+var dateTimeRange = _7a468({ defaultClassName: "_1vlwkc20-3-11-0", variantClassNames: { showError: { true: "_1vlwkc21-3-11-0" }, disabled: { true: "_1vlwkc22-3-11-0" }, readOnly: { true: "_1vlwkc23-3-11-0" } }, defaultVariants: {}, compoundVariants: [[{ showError: true, readOnly: true }, "_1vlwkc24-3-11-0"]] });
+var scrollContainer = "_1vlwkc25-3-11-0";
+var timeframeSeparator = "_1vlwkc27-3-11-0";
 export {
   dateTimeInput,
   dateTimeRange,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-10-4';\nexport var dateTimeRange = _7a468({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']]});\nexport var scrollContainer = '_1vlwkc25-3-10-4';\nexport var timeframeSeparator = '_1vlwkc27-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport '../../styles/field.css';\nimport '../../styles/textStyle.css';\nimport '../spin-buttons/SpinButton.css';\nimport '../date-time-picker/DateTimePicker.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeInput = '_1vlwkc26-3-11-0';\nexport var dateTimeRange = _7a468({defaultClassName:'_1vlwkc20-3-11-0',variantClassNames:{showError:{true:'_1vlwkc21-3-11-0'},disabled:{true:'_1vlwkc22-3-11-0'},readOnly:{true:'_1vlwkc23-3-11-0'}},defaultVariants:{},compoundVariants:[[{showError:true,readOnly:true},'_1vlwkc24-3-11-0']]});\nexport var scrollContainer = '_1vlwkc25-3-11-0';\nexport var timeframeSeparator = '_1vlwkc27-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB;AACpB,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,GAAE,UAAS,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,WAAU,MAAK,UAAS,KAAI,GAAE,kBAAkB,CAAC,EAAC,CAAC;AACxR,IAAI,kBAAkB;AACtB,IAAI,qBAAqB;",
   "names": []
 }

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

@@ -25,6 +25,7 @@ import { Button } from "../../buttons/button/Button.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useBehavioralTrackingProps } from "../../core/hooks/useBehavioralTrackingProps.js";
 import { useFocusRing } from "../../core/hooks/useFocusRing.js";
+import { useId } from "../../core/hooks/useId.js";
 import { useDateTimeRangePickerStore } from "../../core/time/timeframeStore/useTimeframeStore.js";
 import {
   formatTimeValidationMessage,
@@ -43,6 +44,7 @@ import {
 import { focusDateTimeInput } from "../date-time-picker/utils/focusDateTimeInput.js";
 import { FormFieldMessageContext } from "../forms-core/contexts/FormFieldMessageContext.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
+import { useContainerFocus } from "../hooks/useContainerFocus.js";
 import { useCustomMessageEmitter } from "../validation/useCustomMessageEmitter.js";
 import { useValidationStateEmitter } from "../validation/useValidationStateEmitter.js";
 import { getValidationState } from "../validation/validation-builders.js";
@@ -94,8 +96,10 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     "data-dtrum-allow": dataDtrumAllow,
     placeholder: placeholderProp,
     onBlur,
+    onFocus,
     formControl,
     onValidityChange,
+    shouldSuppressBlur,
     ...remainingProps
   } = props;
   const {
@@ -106,7 +110,6 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     ariaDisabled,
     inputProps,
     showError,
-    messageState,
     messageDispatch: formMessageDispatch
   } = formControl;
   const [behavioralTrackingProps] = useBehavioralTrackingProps(remainingProps);
@@ -116,6 +119,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
   const touchedContainerRef = useRef(null);
   const dateTimeToRef = useRef(null);
   const dateRangeSelectorRef = useRef(null);
+  const ownerId = useId();
   const [hasInputContent, setHasInputContent] = useState(false);
   const setValue = useDateTimeRangePickerStore(
     (state) => state.setDateTimeRangePickerTimeframe
@@ -140,35 +144,31 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     dateTimeToRef
   });
   const intl = useIntl();
-  const { isTouched } = messageState;
   const lastValidationErrorRef = useRef(void 0);
   const _emitValidationState = useValidationStateEmitter(onValidityChange);
-  const emitValidationState = useCustomMessageEmitter(
-    _emitValidationState,
-    () => {
-      const key = getErrorKey();
+  const buildValidationState = useCallback(
+    (trigger, key) => {
+      if (key === void 0) {
+        return { status: "done", trigger, errors: [] };
+      }
       return getValidationState(
-        key !== void 0 ? getValidityStateKeyForTimeError(key) : void 0,
-        "manual",
-        getValidationMessage(key),
+        getValidityStateKeyForTimeError(key),
+        trigger,
+        formatTimeValidationMessage(key, intl, {
+          value,
+          min,
+          max,
+          precision,
+          expectedFormat: formatString
+        }),
         id ? [id] : []
       );
-    }
-  );
-  const getValidationMessage = useCallback(
-    (errorKey) => {
-      if (!errorKey) {
-        return void 0;
-      }
-      return formatTimeValidationMessage(errorKey, intl, {
-        value,
-        min,
-        max,
-        precision,
-        expectedFormat: formatString
-      });
     },
-    [intl, value, min, max, precision, formatString]
+    [intl, value, min, max, precision, formatString, id]
+  );
+  const emitValidationState = useCustomMessageEmitter(
+    _emitValidationState,
+    () => buildValidationState("manual", getErrorKey())
   );
   useImperativeHandle(
     forwardedRef,
@@ -202,12 +202,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
           payload: { isTouched: true }
         });
         emitValidationState(
-          getValidationState(
-            lastValidationErrorRef.current !== void 0 ? 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>.
@@ -227,13 +222,9 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
           type: FormFieldMessagesAction.SETISTOUCHED,
           payload: { isTouched: true }
         });
-        const state = getValidationState(
-          lastValidationErrorRef.current !== void 0 ? getValidityStateKeyForTimeError(lastValidationErrorRef.current) : void 0,
-          "manual",
-          getValidationMessage(lastValidationErrorRef.current),
-          id ? [id] : []
+        return emitValidationState(
+          buildValidationState("manual", lastValidationErrorRef.current)
         );
-        return emitValidationState(state);
       }
     }),
     [
@@ -246,7 +237,7 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
       required,
       dateTimeFromRef,
       emitValidationState,
-      getValidationMessage
+      buildValidationState
     ]
   );
   const getErrorKey = useCallback(
@@ -260,17 +251,18 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
     }),
     [value, min, max, precision, formatString, required]
   );
+  const { containerClassName, ...containerFocusProps } = useContainerFocus({
+    onFocus,
+    onBlur,
+    disabled,
+    overlayOwnerId: ownerId,
+    emitValidationState,
+    getBlurValidationState: () => buildValidationState("blur", getErrorKey()),
+    shouldSuppressBlur
+  });
   useEffect(() => {
-    const key = getErrorKey();
-    emitValidationState(
-      getValidationState(
-        key !== void 0 ? getValidityStateKeyForTimeError(key) : void 0,
-        "change",
-        getValidationMessage(key),
-        id ? [id] : []
-      )
-    );
-  }, [value, id, getErrorKey, emitValidationState, getValidationMessage]);
+    emitValidationState(buildValidationState("change", getErrorKey()));
+  }, [value, emitValidationState, buildValidationState, getErrorKey]);
   const { focusClassName } = useFocusRing({
     focusWithin: true,
     ignoreModality: true,
@@ -444,10 +436,11 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
       flexDirection: "column",
       "data-testid": dataTestId,
       style: consumerStyle,
-      className: consumerClassName,
+      className: clsx(containerClassName, consumerClassName),
       ...ariaProps,
       ...behavioralTrackingProps,
       "data-dt-component": COMPONENT_NAME,
+      ...containerFocusProps,
       children: /* @__PURE__ */ jsx(FormFieldMessageContext.Provider, { value: formFieldMessageContextValue, children: /* @__PURE__ */ jsxs(InputGroup, { style: { gridTemplateColumns: "1fr auto" }, children: [
         /* @__PURE__ */ jsxs(
           Flex,
@@ -477,25 +470,6 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
             onCopyCapture: onTimeframeCopyCapture,
             onCutCapture,
             onPasteCapture,
-            onBlur: (event) => {
-              requestAnimationFrame(() => {
-                onBlur?.(event);
-              });
-              if (touchedContainerRef.current?.contains(event.relatedTarget)) {
-                return;
-              }
-              if (!isTouched) {
-                const blurKey = getErrorKey();
-                emitValidationState(
-                  getValidationState(
-                    blurKey !== void 0 ? getValidityStateKeyForTimeError(blurKey) : void 0,
-                    "blur",
-                    getValidationMessage(blurKey),
-                    id ? [id] : []
-                  )
-                );
-              }
-            },
             onInput: () => {
               setHasInputContent(
                 !!dateTimeFromRef.current?.expressionInputRef?.textContent || !!dateTimeToRef.current?.expressionInputRef?.textContent
@@ -576,13 +550,8 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
               !readOnly && !disabledOrAriaDisabled && (value && (value.from?.value !== "" || value.to?.value !== "") || hasInputContent) && /* @__PURE__ */ jsx(
                 Button,
                 {
-                  onFocus: () => {
-                    formMessageDispatch?.({
-                      type: FormFieldMessagesAction.SETISTOUCHED,
-                      payload: { isTouched: true }
-                    });
-                  },
                   onClick: () => {
+                    dateTimeFromRef.current?.expressionInputRef?.focus();
                     setValue(null);
                     if (dateTimeFromRef.current?.expressionInputRef) {
                       dateTimeFromRef.current.expressionInputRef.textContent = "";
@@ -591,9 +560,6 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
                       dateTimeToRef.current.expressionInputRef.textContent = "";
                     }
                     setHasInputContent(false);
-                    requestAnimationFrame(() => {
-                      dateTimeFromRef.current?.expressionInputRef?.focus();
-                    });
                   },
                   onKeyDown: (e) => {
                     if (e.key === "Enter") {
@@ -619,7 +585,8 @@ const DateTimeRangePickerRoot = forwardRef((props, forwardedRef) => {
             readOnly,
             error: showError,
             "data-dtrum-mask": dataDtrumMask,
-            "data-dtrum-allow": dataDtrumAllow
+            "data-dtrum-allow": dataDtrumAllow,
+            overlayOwnerId: ownerId
           }
         )
       ] }) })