npm - @dynatrace/strato-components - Versions diffs - 3.10.4 → 3.11.1 - Mend

@dynatrace/strato-components 3.10.4 → 3.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2535) hide show

package/esm/forms/date-time-picker/hooks/useDateTimePicker.js CHANGED Viewed

@@ -32,11 +32,66 @@ function useDateTimePicker(props) {
   const [isoDateTime, setIsoDateTime] = useState(
     getTimeValue(value ?? void 0, precision)?.absoluteDate ?? null
   );
-  const pendingIsoDateTimeRef = useRef(isoDateTime);
+  const dispatchedValuesRef = useRef(/* @__PURE__ */ new Set([value]));
+  const latestDispatchedValueRef = useRef(value);
+  const lastDispatchedIsoRef = useRef(
+    getTimeValue(value ?? void 0, precision)?.absoluteDate ?? null
+  );
+  const spinButtonChangeHandledRef = useRef(false);
+  const hasPendingClearRef = useRef(false);
   const { toParts, emptyParts } = useDateTimeFormat(type, precision);
   const {
     state: { isValid: isValidFormControl }
   } = useFormFieldMessagesContext();
+  const dispatchDateTimeChange = useCallback(
+    (newDateTime) => {
+      spinButtonChangeHandledRef.current = true;
+      let newKey;
+      if (!newDateTime) {
+        newKey = null;
+      } else if (!isValid(newDateTime)) {
+        newKey = "Invalid Date";
+      } else {
+        newKey = newDateTime.toISOString();
+      }
+      if (lastDispatchedIsoRef.current === newKey) {
+        spinButtonChangeHandledRef.current = false;
+        return;
+      }
+      lastDispatchedIsoRef.current = newKey;
+      const dispatched = dispatchedValuesRef.current;
+      if (newKey === null) {
+        dispatched.add(null);
+        latestDispatchedValueRef.current = null;
+        setIsoDateTime(null);
+        onChange?.(null);
+      } else if (newKey === "Invalid Date") {
+        dispatched.add("Invalid Date");
+        latestDispatchedValueRef.current = "Invalid Date";
+        setIsoDateTime(null);
+        onChange?.("Invalid Date");
+      } else {
+        const precisionMode = type === "date" ? "day" : precision;
+        const dispatchedValue = removePrecision(newKey, precisionMode);
+        dispatched.add(dispatchedValue);
+        latestDispatchedValueRef.current = dispatchedValue;
+        setIsoDateTime(newKey);
+        onChange?.(getTimeValue(newKey, precision) ?? null);
+      }
+      while (dispatched.size > 20) {
+        const oldest = dispatched.values().next();
+        if (!oldest.done) {
+          dispatched.delete(oldest.value);
+        } else {
+          break;
+        }
+      }
+    },
+    [onChange, precision, type]
+  );
+  const onPartClear = useCallback(() => {
+    hasPendingClearRef.current = true;
+  }, []);
   const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } = useSpinButtons(
     isoDateTime,
     type,
@@ -44,7 +99,9 @@ function useDateTimePicker(props) {
     isDisabled,
     readOnly,
     ariaLabelPrefix,
-    value
+    value,
+    dispatchDateTimeChange,
+    onPartClear
   );
   const prevDateTime = usePrevious(dateTime);
   const minDateTime = useMemo(() => {
@@ -107,40 +164,33 @@ function useDateTimePicker(props) {
     [parts]
   );
   useEffect(() => {
+    const handled = spinButtonChangeHandledRef.current;
+    spinButtonChangeHandledRef.current = false;
+    const clearPending = hasPendingClearRef.current;
+    hasPendingClearRef.current = false;
+    if (handled && !clearPending) {
+      return;
+    }
     const numericDateTime = +(dateTime || 0);
     const numericPrevDateTime = +(prevDateTime || 0);
     if (prevDateTime === void 0 || Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime) || numericDateTime === numericPrevDateTime) {
       return;
     }
-    if (dateTime === null) {
-      pendingIsoDateTimeRef.current = null;
-      setIsoDateTime(null);
-      onChange?.(null);
-      return;
-    }
-    if (!isValid(dateTime)) {
-      pendingIsoDateTimeRef.current = null;
-      setIsoDateTime(null);
-      onChange?.("Invalid Date");
-      return;
-    }
-    const newIsoDateTime = dateTime.toISOString();
-    if (isoDateTime === newIsoDateTime) {
-      return;
-    }
-    pendingIsoDateTimeRef.current = newIsoDateTime;
-    setIsoDateTime(newIsoDateTime);
-    onChange?.(getTimeValue(newIsoDateTime ?? null, precision) ?? null);
-  }, [dateTime, prevDateTime]);
+    dispatchDateTimeChange(dateTime);
+  });
   useEffect(() => {
-    if (removePrecision(
-      pendingIsoDateTimeRef.current ?? "",
-      type === "date" ? "day" : precision
-    ) !== value) {
-      applyDateTime(
-        getTimeValue(value ?? void 0, precision)?.absoluteDate ?? null
-      );
+    const dispatched = dispatchedValuesRef.current;
+    if (dispatched.has(value)) {
+      if (value === latestDispatchedValueRef.current) {
+        dispatched.clear();
+      } else {
+        dispatched.delete(value);
+      }
+      return;
     }
+    const appliedIso = getTimeValue(value ?? void 0, precision)?.absoluteDate ?? null;
+    applyDateTime(appliedIso);
+    lastDispatchedIsoRef.current = appliedIso;
   }, [value]);
   return {
     isoDateTime,

package/esm/forms/date-time-picker/hooks/useDateTimePicker.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useDateTimePicker.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isAfter, isBefore, isValid } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport { useSpinButtons } from './useSpinButtons.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getTimeValue,\n  removePrecision,\n} from '../../forms-core/time/timeParser.js';\nimport type {\n  DateSelectorProps,\n  DateTimePickerProps,\n  DateTimePickerType,\n} from '../types.js';\nimport { focusElementWithRetry } from '../utils/focusDateTimeInput.js';\n\n/**\n * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.\n */\nexport function useDateTimePicker(\n  // 'type' may be 'never', but for the hook we always want to accept it.\n  props: Omit<DateTimePickerProps, 'type'> & {\n    type?: DateTimePickerType;\n    valueType?: TimeValue['type'];\n    value: string | null;\n  },\n) {\n  const {\n    type,\n    precision,\n    min,\n    max,\n    disabled = false,\n    readOnly = false,\n    value: propValue,\n    onChange,\n    required,\n    valueType,\n  } = props;\n\n  // The spin buttons are only visible and interactive\n  // in 'iso8601' mode and should be disabled for expression input\n  const isDisabled = disabled || valueType !== 'iso8601';\n\n  const timezone = getTimezone();\n\n  // use the aria label of the datetime picker to prefix each spinbutton aria label\n  const { 'aria-label': ariaLabelPrefix } = useAriaLabelingProps(props);\n\n  const value = propValue === '' ? null : propValue;\n\n  const [isoDateTime, setIsoDateTime] = useState(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n\n  // Tracks the intended isoDateTime value synchronously, before React commits the\n  // new state. The TimeframeSelector's setDateTimeRangePickerTimeframe always updates\n  // the Zustand store synchronously inside the dateTime effect (before React commits\n  // isoDateTime). This triggers a subscriber re-render where spinButtonValue is already\n  // the new value but isoDateTime in the closure is still the old stale value. The\n  // controlled value effect would then call applyDateTime unnecessarily, resetting the\n  // spinbutton cursor to position 0 so that the next digit typed would be rejected as\n  // too long (candidate \"00020\" exceeds the 4-digit max). By updating this ref before\n  // calling setIsoDateTime, the controlled value effect always compares against the\n  // correct pending value regardless of when Zustand triggers its re-render.\n  const pendingIsoDateTimeRef = useRef(isoDateTime);\n  const { toParts, emptyParts } = useDateTimeFormat(type, precision);\n  const {\n    state: { isValid: isValidFormControl },\n  } = useFormFieldMessagesContext();\n  const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } =\n    useSpinButtons(\n      isoDateTime,\n      type,\n      precision,\n      isDisabled,\n      readOnly,\n      ariaLabelPrefix,\n      value,\n    );\n  const prevDateTime = usePrevious(dateTime);\n\n  const minDateTime = useMemo(() => {\n    const candidate =\n      min !== undefined ? new TZDateMini(min, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [min, timezone]);\n  const maxDateTime = useMemo(() => {\n    const candidate =\n      max !== undefined ? new TZDateMini(max, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [max, timezone]);\n\n  /**\n   * Callback to apply a given iso date to the currently rendered spinbuttons\n   * Accepts a pass filter to apply the iso datetime to only a subset of the spinbuttons.\n   * Returns true, if the iso date was applied successfully. False otherwise.\n   */\n  const applyDateTime = useCallback(\n    (\n      isoDateTime: string | null,\n      passFilter?: Set<Intl.DateTimeFormatPart['type']>,\n    ) => {\n      if (isoDateTime === null) {\n        updateParts(emptyParts);\n        return true;\n      }\n\n      const newDate = new TZDateMini(isoDateTime, timezone);\n\n      // Add timezone offset for type 'date' to have the correct date when there is no time information (2025-01-01Z).\n      newDate.setMinutes(\n        newDate.getMinutes() +\n          (type === 'date' ? newDate.getTimezoneOffset() : 0),\n      );\n\n      if (!isValid(newDate)) {\n        return false;\n      }\n      const newDateParts = toParts(newDate);\n      passFilter\n        ? updateParts(newDateParts.filter((p) => passFilter.has(p.type)))\n        : updateParts(newDateParts);\n\n      return true;\n    },\n    [emptyParts, timezone, toParts, type, updateParts],\n  );\n\n  const dateSelectorProps: DateSelectorProps = useMemo(\n    () => ({\n      value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),\n      onChange: (newIsoString: string) => {\n        // Only apply the date part of the iso date returned by the calendar.\n        // Don't touch the time values, but set the focus to the hour field in the next render cycle.\n        applyDateTime(newIsoString, new Set(['year', 'month', 'day']));\n        // Selecting a date in the calendar closes the overlay and restores the focus to the date picker trigger.\n        // In order to set the focus to the time spin buttons, we need to defer setting the focus.\n        focusElementWithRetry(() => handlers.get('hour')?.element.current);\n      },\n      disabled: disabled || readOnly,\n      error: false,\n    }),\n    [isoDateTime, timezone, disabled, readOnly, applyDateTime, handlers],\n  );\n\n  // Show the error state, if the value is outside of given bounds or the date object is invalid.\n  const error = useMemo(() => {\n    if (!isValidFormControl) {\n      return true;\n    }\n\n    if (!required && isoDateTime === null) {\n      return false;\n    }\n\n    return (\n      (dateTime === null ||\n        !isValid(dateTime) ||\n        (minDateTime && isBefore(dateTime, minDateTime)) ||\n        (maxDateTime && isAfter(dateTime, maxDateTime))) ??\n      false\n    );\n  }, [\n    isValidFormControl,\n    required,\n    isoDateTime,\n    dateTime,\n    minDateTime,\n    maxDateTime,\n  ]);\n\n  // true, if none of the content parts contains any content\n  const empty = useMemo(\n    () => !parts.some((part) => part.type !== 'literal' && part.value !== ''),\n    [parts],\n  );\n\n  // If the datetime is valid, convert to an ISO8601 datetime string.\n  useEffect(() => {\n    // Don't trigger an 'onChange' on initial render or if the value didn't actually change.\n    const numericDateTime = +(dateTime || 0);\n    const numericPrevDateTime = +(prevDateTime || 0);\n    if (\n      prevDateTime === undefined ||\n      (Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime)) ||\n      numericDateTime === numericPrevDateTime\n    ) {\n      return;\n    }\n\n    // propagate null dateTime to isoDateTime\n    if (dateTime === null) {\n      pendingIsoDateTimeRef.current = null;\n      setIsoDateTime(null);\n      onChange?.(null);\n      return;\n    }\n\n    // only allow valid datetime values\n    if (!isValid(dateTime)) {\n      pendingIsoDateTimeRef.current = null;\n      setIsoDateTime(null);\n      onChange?.('Invalid Date');\n      return;\n    }\n\n    const newIsoDateTime = dateTime.toISOString();\n\n    // ignore if nothing has changed\n    if (isoDateTime === newIsoDateTime) {\n      return;\n    }\n\n    // Update the ref synchronously before calling setIsoDateTime so that any\n    // Zustand subscriber re-render triggered synchronously by the onChange chain\n    // below already sees the correct pending value in the controlled value effect.\n    pendingIsoDateTimeRef.current = newIsoDateTime;\n    setIsoDateTime(newIsoDateTime);\n    onChange?.(getTimeValue(newIsoDateTime ?? null, precision) ?? null);\n\n    // Don't run on an onChange callback update.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [dateTime, prevDateTime]);\n\n  // If the controlled value has changed, apply the new value to the spinbuttons\n  // Don't combine with the above effect. This effect needs to be run in the next render cycle.\n  useEffect(() => {\n    // only apply if value is different (prevents issues while typing and prefixing with 0)\n    if (\n      removePrecision(\n        pendingIsoDateTimeRef.current ?? '',\n        type === 'date' ? 'day' : precision,\n      ) !== value\n    ) {\n      applyDateTime(\n        getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n      );\n    }\n\n    // Only run if the controlled prop value is updated.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return {\n    isoDateTime,\n    spinButtons,\n    handlers,\n    dateSelectorProps,\n    error,\n    empty,\n    applyDateTime,\n    firstSpinButtonHandler: handlers.get(parts[0]?.type),\n    dateTime,\n    toDateTime,\n    parts,\n  };\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { isAfter, isBefore, isValid } from 'date-fns';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport { useSpinButtons } from './useSpinButtons.js';\nimport { useAriaLabelingProps } from '../../../core/hooks/useAriaLabelingProps.js';\nimport { usePrevious } from '../../../core/hooks/usePrevious.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  getTimeValue,\n  removePrecision,\n} from '../../forms-core/time/timeParser.js';\nimport type {\n  DateSelectorProps,\n  DateTimePickerProps,\n  DateTimePickerType,\n} from '../types.js';\nimport { focusElementWithRetry } from '../utils/focusDateTimeInput.js';\n\n/**\n * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.\n */\nexport function useDateTimePicker(\n  // 'type' may be 'never', but for the hook we always want to accept it.\n  props: Omit<DateTimePickerProps, 'type'> & {\n    type?: DateTimePickerType;\n    valueType?: TimeValue['type'];\n    value: string | null;\n  },\n) {\n  const {\n    type,\n    precision,\n    min,\n    max,\n    disabled = false,\n    readOnly = false,\n    value: propValue,\n    onChange,\n    required,\n    valueType,\n  } = props;\n\n  // The spin buttons are only visible and interactive\n  // in 'iso8601' mode and should be disabled for expression input\n  const isDisabled = disabled || valueType !== 'iso8601';\n\n  const timezone = getTimezone();\n\n  // use the aria label of the datetime picker to prefix each spinbutton aria label\n  const { 'aria-label': ariaLabelPrefix } = useAriaLabelingProps(props);\n\n  const value = propValue === '' ? null : propValue;\n\n  const [isoDateTime, setIsoDateTime] = useState(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n\n  // Values we dispatched to onChange but the parent hasn't echoed back yet.\n  // The controlled-value effect uses this set to skip echoes of our own\n  // dispatches, which would otherwise reset the spin button cursor.\n  const dispatchedValuesRef = useRef(new Set<string | null>([value]));\n  // Newest dispatched value; its echo marks the round-trip as settled.\n  const latestDispatchedValueRef = useRef<string | null>(value);\n  // Last ISO key sent to onChange. Dedupes back-to-back dispatches when\n  // dateTime is unchanged (INVALID_DATE singleton) and keeps the sync\n  // keyDown path aligned with the passive effect.\n  const lastDispatchedIsoRef = useRef<string | null>(\n    getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null,\n  );\n  const spinButtonChangeHandledRef = useRef(false);\n  // Set to true by updatePart when a clear (partValue === '') occurs; ensures\n  // the passive effect runs even when a prior sync dispatch already set\n  // spinButtonChangeHandledRef, so bulk \"non-empty + clear\" batches don't lose\n  // the final null/'Invalid Date' onChange.\n  const hasPendingClearRef = useRef(false);\n  const { toParts, emptyParts } = useDateTimeFormat(type, precision);\n  const {\n    state: { isValid: isValidFormControl },\n  } = useFormFieldMessagesContext();\n  const dispatchDateTimeChange = useCallback(\n    (newDateTime: Date | null | undefined) => {\n      spinButtonChangeHandledRef.current = true;\n\n      let newKey: string | null;\n      if (!newDateTime) {\n        newKey = null;\n      } else if (!isValid(newDateTime)) {\n        newKey = 'Invalid Date';\n      } else {\n        newKey = newDateTime.toISOString();\n      }\n\n      if (lastDispatchedIsoRef.current === newKey) {\n        spinButtonChangeHandledRef.current = false;\n        return;\n      }\n      lastDispatchedIsoRef.current = newKey;\n\n      const dispatched = dispatchedValuesRef.current;\n      if (newKey === null) {\n        dispatched.add(null);\n        latestDispatchedValueRef.current = null;\n        setIsoDateTime(null);\n        onChange?.(null);\n      } else if (newKey === 'Invalid Date') {\n        dispatched.add('Invalid Date');\n        latestDispatchedValueRef.current = 'Invalid Date';\n        setIsoDateTime(null);\n        onChange?.('Invalid Date');\n      } else {\n        const precisionMode = type === 'date' ? 'day' : precision;\n        const dispatchedValue = removePrecision(newKey, precisionMode);\n        dispatched.add(dispatchedValue);\n        latestDispatchedValueRef.current = dispatchedValue;\n        setIsoDateTime(newKey);\n        onChange?.(getTimeValue(newKey, precision) ?? null);\n      }\n\n      // Defensive size cap: evict the oldest entry if the set grows beyond the\n      // limit. This bounds memory usage when the parent permanently drops echoes\n      // for the latest dispatch (which is the only trigger for bulk-clear).\n      // Evicting an orphaned entry is safe in practice \u2014 it just means a later\n      // external write matching that value will re-apply rather than be skipped.\n      // JavaScript Set preserves insertion order so values().next() is oldest.\n      while (dispatched.size > 20) {\n        const oldest = dispatched.values().next();\n        if (!oldest.done) {\n          dispatched.delete(oldest.value);\n        } else {\n          break;\n        }\n      }\n    },\n    [onChange, precision, type],\n  );\n\n  const onPartClear = useCallback(() => {\n    hasPendingClearRef.current = true;\n  }, []);\n\n  const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } =\n    useSpinButtons(\n      isoDateTime,\n      type,\n      precision,\n      isDisabled,\n      readOnly,\n      ariaLabelPrefix,\n      value,\n      dispatchDateTimeChange,\n      onPartClear,\n    );\n  const prevDateTime = usePrevious(dateTime);\n\n  const minDateTime = useMemo(() => {\n    const candidate =\n      min !== undefined ? new TZDateMini(min, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [min, timezone]);\n  const maxDateTime = useMemo(() => {\n    const candidate =\n      max !== undefined ? new TZDateMini(max, timezone) : undefined;\n    return isValid(candidate) ? candidate : undefined;\n  }, [max, timezone]);\n\n  /**\n   * Callback to apply a given iso date to the currently rendered spinbuttons\n   * Accepts a pass filter to apply the iso datetime to only a subset of the spinbuttons.\n   * Returns true, if the iso date was applied successfully. False otherwise.\n   */\n  const applyDateTime = useCallback(\n    (\n      isoDateTime: string | null,\n      passFilter?: Set<Intl.DateTimeFormatPart['type']>,\n    ) => {\n      if (isoDateTime === null) {\n        updateParts(emptyParts);\n        return true;\n      }\n\n      const newDate = new TZDateMini(isoDateTime, timezone);\n\n      // Add timezone offset for type 'date' to have the correct date when there is no time information (2025-01-01Z).\n      newDate.setMinutes(\n        newDate.getMinutes() +\n          (type === 'date' ? newDate.getTimezoneOffset() : 0),\n      );\n\n      if (!isValid(newDate)) {\n        return false;\n      }\n      const newDateParts = toParts(newDate);\n      passFilter\n        ? updateParts(newDateParts.filter((p) => passFilter.has(p.type)))\n        : updateParts(newDateParts);\n\n      return true;\n    },\n    [emptyParts, timezone, toParts, type, updateParts],\n  );\n\n  const dateSelectorProps: DateSelectorProps = useMemo(\n    () => ({\n      value: isoDateTime ?? TZDateMini.tz(timezone).toISOString(),\n      onChange: (newIsoString: string) => {\n        // Only apply the date part of the iso date returned by the calendar.\n        // Don't touch the time values, but set the focus to the hour field in the next render cycle.\n        applyDateTime(newIsoString, new Set(['year', 'month', 'day']));\n        // Selecting a date in the calendar closes the overlay and restores the focus to the date picker trigger.\n        // In order to set the focus to the time spin buttons, we need to defer setting the focus.\n        focusElementWithRetry(() => handlers.get('hour')?.element.current);\n      },\n      disabled: disabled || readOnly,\n      error: false,\n    }),\n    [isoDateTime, timezone, disabled, readOnly, applyDateTime, handlers],\n  );\n\n  // Show the error state, if the value is outside of given bounds or the date object is invalid.\n  const error = useMemo(() => {\n    if (!isValidFormControl) {\n      return true;\n    }\n\n    if (!required && isoDateTime === null) {\n      return false;\n    }\n\n    return (\n      (dateTime === null ||\n        !isValid(dateTime) ||\n        (minDateTime && isBefore(dateTime, minDateTime)) ||\n        (maxDateTime && isAfter(dateTime, maxDateTime))) ??\n      false\n    );\n  }, [\n    isValidFormControl,\n    required,\n    isoDateTime,\n    dateTime,\n    minDateTime,\n    maxDateTime,\n  ]);\n\n  // true, if none of the content parts contains any content\n  const empty = useMemo(\n    () => !parts.some((part) => part.type !== 'literal' && part.value !== ''),\n    [parts],\n  );\n\n  // Dispatches dateTime changes from non-spinbutton paths (calendar,\n  // applyDateTime). The `handled` flag skips this effect when the sync\n  // keyDown path already dispatched; the numeric guards drop no-op re-fires\n  // when the memo returns a new reference for the same value.\n  // `clearPending` overrides `handled`: if a clear happened in the same batch\n  // as a sync dispatch (e.g. Backspace on a filled field), the effect must\n  // still run to coalesce and dispatch the resulting null/'Invalid Date'.\n  useEffect(() => {\n    const handled = spinButtonChangeHandledRef.current;\n    spinButtonChangeHandledRef.current = false;\n    const clearPending = hasPendingClearRef.current;\n    hasPendingClearRef.current = false;\n    if (handled && !clearPending) {\n      return;\n    }\n    const numericDateTime = +(dateTime || 0);\n    const numericPrevDateTime = +(prevDateTime || 0);\n    if (\n      prevDateTime === undefined ||\n      (Number.isNaN(numericDateTime) && Number.isNaN(numericPrevDateTime)) ||\n      numericDateTime === numericPrevDateTime\n    ) {\n      return;\n    }\n    dispatchDateTimeChange(dateTime);\n  });\n\n  // If the controlled value has changed, apply the new value to the spinbuttons.\n  // Don't combine with the above effect, this needs to run in the next render cycle.\n  //\n  // Known limitation (out-of-order echoes): if the parent echoes the latest dispatch\n  // before an earlier one (e.g. async state updates delivered out of order), the\n  // dispatched.clear() below fires early and discards the still-pending earlier entry.\n  // The earlier echo then falls through to applyDateTime, momentarily re-applying a\n  // stale intermediate value. In practice this requires out-of-order controlled-prop\n  // updates which React's batching makes unlikely; a generation-counter approach would\n  // eliminate this but is not warranted at the current risk level.\n  useEffect(() => {\n    const dispatched = dispatchedValuesRef.current;\n\n    if (dispatched.has(value)) {\n      // Echo of our newest dispatch: clear the whole Set so entries the\n      // parent coalesced away can't linger and later block a legitimate\n      // external write. Stale (non-latest) echoes only remove their own entry.\n      if (value === latestDispatchedValueRef.current) {\n        dispatched.clear();\n      } else {\n        dispatched.delete(value);\n      }\n      return;\n    }\n\n    const appliedIso =\n      getTimeValue(value ?? undefined, precision)?.absoluteDate ?? null;\n    applyDateTime(appliedIso);\n    // Reset so a subsequent user edit to the same value isn't silently dropped\n    // by the dedup guard in dispatchDateTimeChange.\n    lastDispatchedIsoRef.current = appliedIso;\n\n    // Only run if the controlled prop value is updated.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [value]);\n\n  return {\n    isoDateTime,\n    spinButtons,\n    handlers,\n    dateSelectorProps,\n    error,\n    empty,\n    applyDateTime,\n    firstSpinButtonHandler: handlers.get(parts[0]?.type),\n    dateTime,\n    toDateTime,\n    parts,\n  };\n}\n"],
+  "mappings": "AAAA,SAAS,kBAAkB;AAC3B,SAAS,SAAS,UAAU,eAAe;AAC3C,SAAS,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AAElE,SAAS,mBAAmB;AAE5B,SAAS,yBAAyB;AAClC,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,mBAAmB;AAE5B,SAAS,mCAAmC;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAMP,SAAS,6BAA6B;AAK/B,SAAS,kBAEd,OAKA;AACA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAIJ,QAAM,aAAa,YAAY,cAAc;AAE7C,QAAM,WAAW,YAAY;AAG7B,QAAM,EAAE,cAAc,gBAAgB,IAAI,qBAAqB,KAAK;AAEpE,QAAM,QAAQ,cAAc,KAAK,OAAO;AAExC,QAAM,CAAC,aAAa,cAAc,IAAI;AAAA,IACpC,aAAa,SAAS,QAAW,SAAS,GAAG,gBAAgB;AAAA,EAC/D;AAKA,QAAM,sBAAsB,OAAO,oBAAI,IAAmB,CAAC,KAAK,CAAC,CAAC;AAElE,QAAM,2BAA2B,OAAsB,KAAK;AAI5D,QAAM,uBAAuB;AAAA,IAC3B,aAAa,SAAS,QAAW,SAAS,GAAG,gBAAgB;AAAA,EAC/D;AACA,QAAM,6BAA6B,OAAO,KAAK;AAK/C,QAAM,qBAAqB,OAAO,KAAK;AACvC,QAAM,EAAE,SAAS,WAAW,IAAI,kBAAkB,MAAM,SAAS;AACjE,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,mBAAmB;AAAA,EACvC,IAAI,4BAA4B;AAChC,QAAM,yBAAyB;AAAA,IAC7B,CAAC,gBAAyC;AACxC,iCAA2B,UAAU;AAErC,UAAI;AACJ,UAAI,CAAC,aAAa;AAChB,iBAAS;AAAA,MACX,WAAW,CAAC,QAAQ,WAAW,GAAG;AAChC,iBAAS;AAAA,MACX,OAAO;AACL,iBAAS,YAAY,YAAY;AAAA,MACnC;AAEA,UAAI,qBAAqB,YAAY,QAAQ;AAC3C,mCAA2B,UAAU;AACrC;AAAA,MACF;AACA,2BAAqB,UAAU;AAE/B,YAAM,aAAa,oBAAoB;AACvC,UAAI,WAAW,MAAM;AACnB,mBAAW,IAAI,IAAI;AACnB,iCAAyB,UAAU;AACnC,uBAAe,IAAI;AACnB,mBAAW,IAAI;AAAA,MACjB,WAAW,WAAW,gBAAgB;AACpC,mBAAW,IAAI,cAAc;AAC7B,iCAAyB,UAAU;AACnC,uBAAe,IAAI;AACnB,mBAAW,cAAc;AAAA,MAC3B,OAAO;AACL,cAAM,gBAAgB,SAAS,SAAS,QAAQ;AAChD,cAAM,kBAAkB,gBAAgB,QAAQ,aAAa;AAC7D,mBAAW,IAAI,eAAe;AAC9B,iCAAyB,UAAU;AACnC,uBAAe,MAAM;AACrB,mBAAW,aAAa,QAAQ,SAAS,KAAK,IAAI;AAAA,MACpD;AAQA,aAAO,WAAW,OAAO,IAAI;AAC3B,cAAM,SAAS,WAAW,OAAO,EAAE,KAAK;AACxC,YAAI,CAAC,OAAO,MAAM;AAChB,qBAAW,OAAO,OAAO,KAAK;AAAA,QAChC,OAAO;AACL;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,UAAU,WAAW,IAAI;AAAA,EAC5B;AAEA,QAAM,cAAc,YAAY,MAAM;AACpC,uBAAmB,UAAU;AAAA,EAC/B,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,aAAa,UAAU,aAAa,UAAU,OAAO,WAAW,IACtE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF,QAAM,eAAe,YAAY,QAAQ;AAEzC,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,YACJ,QAAQ,SAAY,IAAI,WAAW,KAAK,QAAQ,IAAI;AACtD,WAAO,QAAQ,SAAS,IAAI,YAAY;AAAA,EAC1C,GAAG,CAAC,KAAK,QAAQ,CAAC;AAClB,QAAM,cAAc,QAAQ,MAAM;AAChC,UAAM,YACJ,QAAQ,SAAY,IAAI,WAAW,KAAK,QAAQ,IAAI;AACtD,WAAO,QAAQ,SAAS,IAAI,YAAY;AAAA,EAC1C,GAAG,CAAC,KAAK,QAAQ,CAAC;AAOlB,QAAM,gBAAgB;AAAA,IACpB,CACEA,cACA,eACG;AACH,UAAIA,iBAAgB,MAAM;AACxB,oBAAY,UAAU;AACtB,eAAO;AAAA,MACT;AAEA,YAAM,UAAU,IAAI,WAAWA,cAAa,QAAQ;AAGpD,cAAQ;AAAA,QACN,QAAQ,WAAW,KAChB,SAAS,SAAS,QAAQ,kBAAkB,IAAI;AAAA,MACrD;AAEA,UAAI,CAAC,QAAQ,OAAO,GAAG;AACrB,eAAO;AAAA,MACT;AACA,YAAM,eAAe,QAAQ,OAAO;AACpC,mBACI,YAAY,aAAa,OAAO,CAAC,MAAM,WAAW,IAAI,EAAE,IAAI,CAAC,CAAC,IAC9D,YAAY,YAAY;AAE5B,aAAO;AAAA,IACT;AAAA,IACA,CAAC,YAAY,UAAU,SAAS,MAAM,WAAW;AAAA,EACnD;AAEA,QAAM,oBAAuC;AAAA,IAC3C,OAAO;AAAA,MACL,OAAO,eAAe,WAAW,GAAG,QAAQ,EAAE,YAAY;AAAA,MAC1D,UAAU,CAAC,iBAAyB;AAGlC,sBAAc,cAAc,oBAAI,IAAI,CAAC,QAAQ,SAAS,KAAK,CAAC,CAAC;AAG7D,8BAAsB,MAAM,SAAS,IAAI,MAAM,GAAG,QAAQ,OAAO;AAAA,MACnE;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,OAAO;AAAA,IACT;AAAA,IACA,CAAC,aAAa,UAAU,UAAU,UAAU,eAAe,QAAQ;AAAA,EACrE;AAGA,QAAM,QAAQ,QAAQ,MAAM;AAC1B,QAAI,CAAC,oBAAoB;AACvB,aAAO;AAAA,IACT;AAEA,QAAI,CAAC,YAAY,gBAAgB,MAAM;AACrC,aAAO;AAAA,IACT;AAEA,YACG,aAAa,QACZ,CAAC,QAAQ,QAAQ,KAChB,eAAe,SAAS,UAAU,WAAW,KAC7C,eAAe,QAAQ,UAAU,WAAW,MAC/C;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,QAAM,QAAQ;AAAA,IACZ,MAAM,CAAC,MAAM,KAAK,CAAC,SAAS,KAAK,SAAS,aAAa,KAAK,UAAU,EAAE;AAAA,IACxE,CAAC,KAAK;AAAA,EACR;AASA,YAAU,MAAM;AACd,UAAM,UAAU,2BAA2B;AAC3C,+BAA2B,UAAU;AACrC,UAAM,eAAe,mBAAmB;AACxC,uBAAmB,UAAU;AAC7B,QAAI,WAAW,CAAC,cAAc;AAC5B;AAAA,IACF;AACA,UAAM,kBAAkB,EAAE,YAAY;AACtC,UAAM,sBAAsB,EAAE,gBAAgB;AAC9C,QACE,iBAAiB,UAChB,OAAO,MAAM,eAAe,KAAK,OAAO,MAAM,mBAAmB,KAClE,oBAAoB,qBACpB;AACA;AAAA,IACF;AACA,2BAAuB,QAAQ;AAAA,EACjC,CAAC;AAYD,YAAU,MAAM;AACd,UAAM,aAAa,oBAAoB;AAEvC,QAAI,WAAW,IAAI,KAAK,GAAG;AAIzB,UAAI,UAAU,yBAAyB,SAAS;AAC9C,mBAAW,MAAM;AAAA,MACnB,OAAO;AACL,mBAAW,OAAO,KAAK;AAAA,MACzB;AACA;AAAA,IACF;AAEA,UAAM,aACJ,aAAa,SAAS,QAAW,SAAS,GAAG,gBAAgB;AAC/D,kBAAc,UAAU;AAGxB,yBAAqB,UAAU;AAAA,EAIjC,GAAG,CAAC,KAAK,CAAC;AAEV,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,wBAAwB,SAAS,IAAI,MAAM,CAAC,GAAG,IAAI;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": ["isoDateTime"]
 }

package/esm/forms/date-time-picker/hooks/useSpinButtons.js CHANGED Viewed

@@ -15,7 +15,7 @@ import {
 import { getTimeValue } from "../../forms-core/time/timeParser.js";
 import { SpinButtonGroup } from "../../spin-buttons/spin-button-group/SpinButtonGroup.js";
 import { useDateTimeFormat } from "./useDateTimeFormat.js";
-function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ariaLabelPrefix, value) {
+function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ariaLabelPrefix, value, onPartChange, onPartClear) {
   const intl = useIntl();
   const prefix = ariaLabelPrefix ? `${ariaLabelPrefix} ` : "";
   const { toParts, toDateTime, emptyParts } = useDateTimeFormat(
@@ -38,46 +38,65 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     [parts]
   );
   const precisionRef = useRef(precision);
+  const partsRef = useRef(parts);
+  partsRef.current = parts;
+  const computeDateTimeFromParts = useCallback(
+    (newParts, previousPrecision) => {
+      const newDateTime = toDateTime(newParts);
+      if (!newDateTime || !isValid(newDateTime)) {
+        return newDateTime;
+      }
+      if (precision === previousPrecision && precision === "milliseconds") {
+        return newDateTime;
+      }
+      const anchor = new TZDateMini(
+        getTimeValue(value, precision)?.absoluteDate ?? startOfDay(TZDateMini.tz(timezone)).toISOString(),
+        timezone
+      );
+      const milliseconds = anchor.getMilliseconds();
+      const seconds = anchor.getUTCSeconds();
+      if (precision !== previousPrecision || precision === "minutes" || precision === void 0) {
+        newDateTime.setUTCSeconds(seconds);
+      }
+      return new TZDateMini(
+        replaceSecondFractions(
+          newDateTime.toISOString(),
+          milliseconds.toString()
+        ),
+        timezone
+      );
+    },
+    [toDateTime, precision, value, timezone]
+  );
   const dateTime = useMemo(() => {
-    const newDateTime = toDateTime(parts);
-    if (!newDateTime || !isValid(newDateTime)) {
-      return newDateTime;
-    }
-    if (precision === precisionRef.current && precision === "milliseconds") {
-      return newDateTime;
-    }
-    const date = new TZDateMini(
-      getTimeValue(value, precision)?.absoluteDate ?? startOfDay(TZDateMini.tz(timezone)).toISOString(),
-      timezone
-    );
-    const milliseconds = date.getMilliseconds();
-    const seconds = date.getUTCSeconds();
-    if (precision !== precisionRef.current || precision === "minutes" || precision === void 0) {
-      newDateTime.setUTCSeconds(seconds);
-      precisionRef.current = precision;
-    }
-    return new TZDateMini(
-      replaceSecondFractions(
-        newDateTime.toISOString(),
-        milliseconds.toString()
-      ),
-      timezone
-    );
-  }, [toDateTime, parts, precision, value, timezone]);
+    const result = computeDateTimeFromParts(parts, precisionRef.current);
+    precisionRef.current = precision;
+    return result;
+  }, [computeDateTimeFromParts, parts, precision]);
   const daysInMonth = dateTime !== null && isValid(dateTime) ? getDaysInMonth(dateTime) : 31;
   const updatePart = useCallback(
-    (type2, value2) => {
-      setParts((prevParts) => {
-        const index = prevParts.findIndex((p) => p.type === type2);
-        if (index < 0 || prevParts[index].value === value2 || type2 === void 0) {
-          return prevParts;
-        }
-        const newParts = [...prevParts];
-        newParts[index] = { type: type2, value: value2 };
-        return newParts;
-      });
+    (partType, partValue) => {
+      if (partType === void 0) {
+        return;
+      }
+      const currentParts = partsRef.current;
+      const index = currentParts.findIndex((p) => p.type === partType);
+      if (index < 0 || currentParts[index].value === partValue) {
+        return;
+      }
+      const newParts = [...currentParts];
+      newParts[index] = { type: partType, value: partValue };
+      partsRef.current = newParts;
+      if (partValue !== "") {
+        onPartChange?.(
+          computeDateTimeFromParts(newParts, precisionRef.current)
+        );
+      } else {
+        onPartClear?.();
+      }
+      setParts(newParts);
     },
-    []
+    [computeDateTimeFromParts, onPartChange, onPartClear]
   );
   const sharedProps = {
     required: false,
@@ -433,9 +452,9 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
         if (part.value === "") {
           handler?.clearValue();
         } else if (handler?.type === "number") {
-          handler.applyText(part.value, true);
+          handler.applyText(part.value);
         } else if (handler?.type === "text") {
-          handler.searchValue(part.value[0], true);
+          handler.searchValue(part.value[0]);
         }
       });
       setParts((prevParts) => {

package/esm/forms/date-time-picker/hooks/useSpinButtons.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/date-time-picker/hooks/useSpinButtons.tsx"],
-  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { getDaysInMonth, isValid, startOfDay } from 'date-fns';\nimport { isNil } from 'lodash-es';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { getPlaceholder } from '../../../core/time/useDateTimeMessages.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { replaceSecondFractions } from '../../forms-core/time/date-time.js';\nimport {\n  convertDateOnlyToDateTime,\n  getDayPeriodValues,\n} from '../../forms-core/time/helpers.js';\nimport { getTimeValue } from '../../forms-core/time/timeParser.js';\nimport { SpinButtonGroup } from '../../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport type { NumberSpinButtonProps } from '../../spin-buttons/number-spin-button/types.js';\nimport type { TextSpinButtonProps } from '../../spin-buttons/text-spin-button/types.js';\n/**\n * Returns a list of preconfigured spinbuttons for a given datetime and format configuration.\n */\nexport function useSpinButtons(\n  isoDateTime: TimeValue | string | null,\n  type: DateTimePickerProps['type'],\n  precision: DateTimePickerProps['precision'],\n  isDisabled: boolean,\n  isReadonly: boolean,\n  ariaLabelPrefix: string | undefined,\n  value?: TimeValue | string | null,\n) {\n  const intl = useIntl();\n  const prefix = ariaLabelPrefix ? `${ariaLabelPrefix} ` : '';\n\n  const { toParts, toDateTime, emptyParts } = useDateTimeFormat(\n    type,\n    precision,\n  );\n  const timeValue = useMemo(() => getTimeValue(isoDateTime), [isoDateTime]);\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n  const timezone = getTimezone();\n\n  const [parts, setParts] = useState(\n    timeValue !== null && timeValue !== undefined\n      ? toParts(\n          new TZDateMini(\n            convertDateOnlyToDateTime(timeValue.absoluteDate, type),\n            timezone,\n          ),\n        )\n      : emptyParts,\n  );\n  const hasDayPeriod = useMemo(\n    () => parts.some((p) => p.type === 'dayPeriod'),\n    [parts],\n  );\n\n  const precisionRef = useRef(precision);\n\n  const dateTime = useMemo(() => {\n    const newDateTime = toDateTime(parts);\n    if (!newDateTime || !isValid(newDateTime)) {\n      return newDateTime;\n    }\n\n    if (precision === precisionRef.current && precision === 'milliseconds') {\n      return newDateTime;\n    }\n\n    const date = new TZDateMini(\n      getTimeValue(value, precision)?.absoluteDate ??\n        startOfDay(TZDateMini.tz(timezone)).toISOString(),\n      timezone,\n    );\n    const milliseconds = date.getMilliseconds();\n    const seconds = date.getUTCSeconds();\n\n    if (\n      precision !== precisionRef.current ||\n      precision === 'minutes' ||\n      precision === undefined\n    ) {\n      newDateTime.setUTCSeconds(seconds);\n      precisionRef.current = precision;\n    }\n\n    return new TZDateMini(\n      replaceSecondFractions(\n        newDateTime.toISOString(),\n        milliseconds.toString(),\n      ),\n      timezone,\n    );\n  }, [toDateTime, parts, precision, value, timezone]);\n\n  const daysInMonth =\n    dateTime !== null && isValid(dateTime) ? getDaysInMonth(dateTime) : 31;\n\n  const updatePart = useCallback(\n    (type: Intl.DateTimeFormatPart['type'] | undefined, value: string) => {\n      setParts((prevParts) => {\n        const index = prevParts.findIndex((p) => p.type === type);\n\n        // Ignore invalid part type or if value is unchanged\n        if (\n          index < 0 ||\n          prevParts[index].value === value ||\n          type === undefined\n        ) {\n          return prevParts;\n        }\n\n        // Clone the parts and update entry with new value\n        const newParts = [...prevParts];\n        newParts[index] = { type, value };\n        return newParts;\n      });\n    },\n    [],\n  );\n\n  const sharedProps = {\n    required: false,\n    disabled: isDisabled,\n    readOnly: isReadonly,\n    isCyclic: true,\n  };\n\n  const yearProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 4,\n    },\n    maxValue: 9999,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'year')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('year', value?.toString() ?? '');\n    },\n    'data-pattern': 'yyyy',\n  };\n\n  const monthProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 12,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'month')?.value ?? '0'),\n    onChange: (value) => {\n      const formerValue = parseInt(\n        parts.find((p) => p.type === 'month')?.value ?? '0',\n      );\n      if (value !== formerValue) {\n        updatePart('month', value?.toString() ?? '');\n      }\n    },\n    'data-pattern': 'MM',\n  };\n\n  const dayProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: daysInMonth,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'day')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('day', value?.toString() ?? '');\n    },\n    'data-pattern': 'dd',\n  };\n\n  const hourProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: hasDayPeriod ? 12 : 23,\n    minValue: hasDayPeriod ? 1 : 0,\n    value: parseInt(parts.find((p) => p.type === 'hour')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('hour', value?.toString() ?? '');\n    },\n    'data-pattern': parts.find((p) => p.type === 'dayPeriod') ? 'hh' : 'HH',\n  };\n\n  const minuteProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'minute')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('minute', value?.toString() ?? '');\n    },\n    'data-pattern': 'mm',\n  };\n\n  const secondsProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'second')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('second', value?.toString() ?? '');\n    },\n    'data-pattern': 'ss',\n  };\n\n  const fractionalSecondProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 3,\n    },\n    maxValue: 999,\n    minValue: 0,\n    value: parseInt(\n      parts.find((p) => p.type === 'fractionalSecond')?.value ?? '0',\n    ),\n    onChange: (value) => {\n      updatePart('fractionalSecond', value?.toString() ?? '');\n    },\n    'data-pattern': 'SSS',\n  };\n\n  const dayPeriodProps: TextSpinButtonProps = {\n    ...sharedProps,\n    options: dayPeriodValues,\n    value: parts.find((p) => p.type === 'dayPeriod')?.value,\n    onChange: (value) => {\n      if (value === null) {\n        updatePart?.('dayPeriod', '');\n        return;\n      }\n      updatePart?.('dayPeriod', value);\n    },\n    'data-pattern': 'aa',\n  };\n\n  const { spinButtons, handlers } = useMemo(() => {\n    // Keep a map of all the imperative handlers per spinbutton\n    const handlers = new Map<\n      Intl.DateTimeFormatPartTypes,\n      SpinButtonHandler | null\n    >();\n\n    const setHandler = (\n      handler: SpinButtonHandler | null,\n      type: Intl.DateTimeFormatPart['type'],\n    ) => {\n      handlers?.set?.(type, handler);\n    };\n\n    // Create an array of preconfigured spinbuttons for each datetime part.\n    const spinButtons = parts.map(({ type, value }, index) => {\n      switch (type) {\n        case 'year':\n          return (\n            <SpinButtonGroup.Number\n              {...yearProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                yearProps.value !== undefined\n                  ? yearProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}year',\n                  id: 'nZk5lg177+CQcO/Z',\n                  description: 'The aria label for the year input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'month':\n          return (\n            <SpinButtonGroup.Number\n              {...monthProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                monthProps.value !== undefined\n                  ? monthProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}month',\n                  id: 'LoBSMcHvTQEABp39',\n                  description: 'The aria label for the month input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'day':\n          return (\n            <SpinButtonGroup.Number\n              {...dayProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayProps.value !== undefined ? dayProps.value : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day',\n                  id: 'Dz8K7VMW5UFpwetG',\n                  description: 'The aria label for the day input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'hour':\n          return (\n            <SpinButtonGroup.Number\n              {...hourProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                hourProps.value !== undefined\n                  ? hourProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}hour',\n                  id: 'DXoXEb27LMuapbC4',\n                  description: 'The aria label for the hour input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'minute':\n          return (\n            <SpinButtonGroup.Number\n              {...minuteProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                minuteProps.value !== undefined\n                  ? minuteProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}minute',\n                  id: 'pGR/6J+2uPcvCSju',\n                  description: 'The aria label for the minute input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'second':\n          return (\n            <SpinButtonGroup.Number\n              {...secondsProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                secondsProps.value !== undefined\n                  ? secondsProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}second',\n                  id: 'WD6kswCbAgSXwMnO',\n                  description: 'The aria label for the second input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'fractionalSecond':\n          return (\n            <SpinButtonGroup.Number\n              {...fractionalSecondProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                fractionalSecondProps.value !== undefined\n                  ? fractionalSecondProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}millisecond',\n                  id: 'wa4ct2vRPvqd0Uif',\n                  description:\n                    'The aria label for the millisecond input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'dayPeriod':\n          return (\n            <SpinButtonGroup.Text\n              {...dayPeriodProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayPeriodProps.value !== undefined\n                  ? dayPeriodProps.value\n                  : value\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day period',\n                  id: 'a9uVGc0cPE1OqAJj',\n                  description:\n                    'The aria label for the day period (am/pm) input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              /* e.g. \"AM/PM\" - should be localized accordingly */\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'literal':\n          return isNil(value) ? null : (\n            // Show the whole literal but only use the first char as trigger.\n            <SpinButtonGroup.Separator\n              key={`${type}_${index}`}\n              trigger={value[0]}\n            >\n              {value}\n            </SpinButtonGroup.Separator>\n          );\n        default:\n          // For unknown part types, simply render the value as textnode in the DOM.\n          return value;\n      }\n    });\n\n    return { handlers, spinButtons };\n    // Do not recreate the spinbuttons on parts update. This prevents prefix issues when starting values with 0.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    isDisabled,\n    isReadonly,\n    updatePart,\n    daysInMonth,\n    hasDayPeriod,\n    parts.length,\n    yearProps.value,\n    monthProps.value,\n    dayProps.value,\n    hourProps.value,\n    minuteProps.value,\n    secondsProps.value,\n    fractionalSecondProps.value,\n    dayPeriodProps.value,\n  ]);\n\n  // Callback to push the given part values to the corresponding spinbuttons.\n  const updateParts = useCallback(\n    (updatedParts: Intl.DateTimeFormatPart[]) => {\n      const nonLiteralParts = updatedParts.filter(\n        ({ type }) => type !== 'literal',\n      );\n\n      const lookup = new Map(\n        nonLiteralParts.map(({ type, value }) => [type, value]),\n      );\n\n      // Apply the new values to the spinbuttons.\n      // Would not be necessary, if the spinbuttons would be controlled. But this is not possible because this\n      // interferes with the expected typing behavior for spinbuttons with format patterns like for this one used for the datetime parts.\n      nonLiteralParts.forEach((part) => {\n        const handler = handlers.get(part.type);\n        if (part.value === '') {\n          handler?.clearValue();\n        } else if (handler?.type === 'number') {\n          handler.applyText(part.value, true);\n        } else if (handler?.type === 'text') {\n          handler.searchValue(part.value[0], true);\n        }\n      });\n\n      // update the parts with new values\n      setParts((prevParts) => {\n        return prevParts.map((part) => {\n          const newValue = lookup.get(part.type);\n          return newValue !== undefined ? { ...part, value: newValue } : part;\n        });\n      });\n    },\n    [handlers],\n  );\n\n  // If the format, type or precision is changing, restore the prev. values when generating a set of new spinbuttons.\n  useEffect(() => {\n    setParts(() =>\n      dateTime === null || !isValid(dateTime) ? emptyParts : toParts(dateTime),\n    );\n    // Need to update the parts on precision change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [emptyParts, toDateTime, toParts, precision]);\n\n  return {\n    spinButtons,\n    dateTime,\n    updateParts,\n    handlers,\n    parts,\n    toDateTime,\n  };\n}\n"],
-  "mappings": "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",
-  "names": ["type", "value", "handlers", "spinButtons"]
+  "sourcesContent": ["import { TZDateMini } from '@date-fns/tz';\nimport { getDaysInMonth, isValid, startOfDay } from 'date-fns';\nimport { isNil } from 'lodash-es';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { getTimezone } from '@dynatrace-sdk/user-preferences';\n\nimport { getPlaceholder } from '../../../core/time/useDateTimeMessages.js';\nimport type { TimeValue } from '../../../core/types/time.js';\nimport { replaceSecondFractions } from '../../forms-core/time/date-time.js';\nimport {\n  convertDateOnlyToDateTime,\n  getDayPeriodValues,\n} from '../../forms-core/time/helpers.js';\nimport { getTimeValue } from '../../forms-core/time/timeParser.js';\nimport { SpinButtonGroup } from '../../spin-buttons/spin-button-group/SpinButtonGroup.js';\nimport type { SpinButtonHandler } from '../../spin-buttons/spin-button-group/types.js';\nimport type { DateTimePickerProps } from '../types.js';\nimport { useDateTimeFormat } from './useDateTimeFormat.js';\nimport type { NumberSpinButtonProps } from '../../spin-buttons/number-spin-button/types.js';\nimport type { TextSpinButtonProps } from '../../spin-buttons/text-spin-button/types.js';\n\n/**\n * Returns a list of preconfigured spinbuttons for a given datetime and format configuration.\n */\nexport function useSpinButtons(\n  isoDateTime: TimeValue | string | null,\n  type: DateTimePickerProps['type'],\n  precision: DateTimePickerProps['precision'],\n  isDisabled: boolean,\n  isReadonly: boolean,\n  ariaLabelPrefix: string | undefined,\n  value?: TimeValue | string | null,\n  onPartChange?: (dateTime: Date | null | undefined) => void,\n  onPartClear?: () => void,\n) {\n  const intl = useIntl();\n  const prefix = ariaLabelPrefix ? `${ariaLabelPrefix} ` : '';\n\n  const { toParts, toDateTime, emptyParts } = useDateTimeFormat(\n    type,\n    precision,\n  );\n  const timeValue = useMemo(() => getTimeValue(isoDateTime), [isoDateTime]);\n  const dayPeriodValues = useMemo(() => getDayPeriodValues(), []);\n  const timezone = getTimezone();\n\n  const [parts, setParts] = useState(\n    timeValue !== null && timeValue !== undefined\n      ? toParts(\n          new TZDateMini(\n            convertDateOnlyToDateTime(timeValue.absoluteDate, type),\n            timezone,\n          ),\n        )\n      : emptyParts,\n  );\n  const hasDayPeriod = useMemo(\n    () => parts.some((p) => p.type === 'dayPeriod'),\n    [parts],\n  );\n\n  const precisionRef = useRef(precision);\n\n  // Kept in sync each render so a follow-up updatePart in the same tick\n  // (bulk clear + applyText, key-repeat before commit) reads fresh parts.\n  const partsRef = useRef(parts);\n  partsRef.current = parts;\n\n  // Reconstructs a datetime from a parts array. Preserves the anchor value's\n  // seconds/milliseconds when the visible precision cannot express them, so\n  // that editing a coarser part does not zero out hidden sub-precision.\n  const computeDateTimeFromParts = useCallback(\n    (\n      newParts: Intl.DateTimeFormatPart[],\n      previousPrecision: DateTimePickerProps['precision'],\n    ): Date | null => {\n      const newDateTime = toDateTime(newParts);\n      if (!newDateTime || !isValid(newDateTime)) {\n        return newDateTime;\n      }\n      if (precision === previousPrecision && precision === 'milliseconds') {\n        return newDateTime;\n      }\n      const anchor = new TZDateMini(\n        getTimeValue(value, precision)?.absoluteDate ??\n          startOfDay(TZDateMini.tz(timezone)).toISOString(),\n        timezone,\n      );\n      const milliseconds = anchor.getMilliseconds();\n      const seconds = anchor.getUTCSeconds();\n      if (\n        precision !== previousPrecision ||\n        precision === 'minutes' ||\n        precision === undefined\n      ) {\n        newDateTime.setUTCSeconds(seconds);\n      }\n      return new TZDateMini(\n        replaceSecondFractions(\n          newDateTime.toISOString(),\n          milliseconds.toString(),\n        ),\n        timezone,\n      );\n    },\n    [toDateTime, precision, value, timezone],\n  );\n\n  const dateTime = useMemo(() => {\n    const result = computeDateTimeFromParts(parts, precisionRef.current);\n    precisionRef.current = precision;\n    return result;\n  }, [computeDateTimeFromParts, parts, precision]);\n\n  const daysInMonth =\n    dateTime !== null && isValid(dateTime) ? getDaysInMonth(dateTime) : 31;\n\n  const updatePart = useCallback(\n    (\n      partType: Intl.DateTimeFormatPart['type'] | undefined,\n      partValue: string,\n    ) => {\n      if (partType === undefined) {\n        return;\n      }\n      const currentParts = partsRef.current;\n      const index = currentParts.findIndex((p) => p.type === partType);\n      if (index < 0 || currentParts[index].value === partValue) {\n        return;\n      }\n\n      const newParts = [...currentParts];\n      newParts[index] = { type: partType, value: partValue };\n      partsRef.current = newParts;\n\n      // Skip sync dispatch on clear so the passive [dateTime] effect can\n      // coalesce a bulk clear into one final onChange, avoiding intermediate\n      // 'Invalid Date' echoes. Signal the pending clear so the passive effect\n      // runs even when a prior sync dispatch already set spinButtonChangeHandledRef.\n      if (partValue !== '') {\n        onPartChange?.(\n          computeDateTimeFromParts(newParts, precisionRef.current),\n        );\n      } else {\n        onPartClear?.();\n      }\n      setParts(newParts);\n    },\n    [computeDateTimeFromParts, onPartChange, onPartClear],\n  );\n\n  const sharedProps = {\n    required: false,\n    disabled: isDisabled,\n    readOnly: isReadonly,\n    isCyclic: true,\n  };\n\n  const yearProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 4,\n    },\n    maxValue: 9999,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'year')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('year', value?.toString() ?? '');\n    },\n    'data-pattern': 'yyyy',\n  };\n\n  const monthProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 12,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'month')?.value ?? '0'),\n    onChange: (value) => {\n      const formerValue = parseInt(\n        parts.find((p) => p.type === 'month')?.value ?? '0',\n      );\n      if (value !== formerValue) {\n        updatePart('month', value?.toString() ?? '');\n      }\n    },\n    'data-pattern': 'MM',\n  };\n\n  const dayProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: daysInMonth,\n    minValue: 1,\n    value: parseInt(parts.find((p) => p.type === 'day')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('day', value?.toString() ?? '');\n    },\n    'data-pattern': 'dd',\n  };\n\n  const hourProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: hasDayPeriod ? 12 : 23,\n    minValue: hasDayPeriod ? 1 : 0,\n    value: parseInt(parts.find((p) => p.type === 'hour')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('hour', value?.toString() ?? '');\n    },\n    'data-pattern': parts.find((p) => p.type === 'dayPeriod') ? 'hh' : 'HH',\n  };\n\n  const minuteProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'minute')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('minute', value?.toString() ?? '');\n    },\n    'data-pattern': 'mm',\n  };\n\n  const secondsProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 2,\n    },\n    maxValue: 59,\n    minValue: 0,\n    value: parseInt(parts.find((p) => p.type === 'second')?.value ?? '0'),\n    onChange: (value) => {\n      updatePart('second', value?.toString() ?? '');\n    },\n    'data-pattern': 'ss',\n  };\n\n  const fractionalSecondProps: NumberSpinButtonProps = {\n    ...sharedProps,\n    displayFormat: {\n      length: 3,\n    },\n    maxValue: 999,\n    minValue: 0,\n    value: parseInt(\n      parts.find((p) => p.type === 'fractionalSecond')?.value ?? '0',\n    ),\n    onChange: (value) => {\n      updatePart('fractionalSecond', value?.toString() ?? '');\n    },\n    'data-pattern': 'SSS',\n  };\n\n  const dayPeriodProps: TextSpinButtonProps = {\n    ...sharedProps,\n    options: dayPeriodValues,\n    value: parts.find((p) => p.type === 'dayPeriod')?.value,\n    onChange: (value) => {\n      if (value === null) {\n        updatePart?.('dayPeriod', '');\n        return;\n      }\n      updatePart?.('dayPeriod', value);\n    },\n    'data-pattern': 'aa',\n  };\n\n  const { spinButtons, handlers } = useMemo(() => {\n    // Keep a map of all the imperative handlers per spinbutton\n    const handlers = new Map<\n      Intl.DateTimeFormatPartTypes,\n      SpinButtonHandler | null\n    >();\n\n    const setHandler = (\n      handler: SpinButtonHandler | null,\n      type: Intl.DateTimeFormatPart['type'],\n    ) => {\n      handlers?.set?.(type, handler);\n    };\n\n    // Create an array of preconfigured spinbuttons for each datetime part.\n    const spinButtons = parts.map(({ type, value }, index) => {\n      switch (type) {\n        case 'year':\n          return (\n            <SpinButtonGroup.Number\n              {...yearProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                yearProps.value !== undefined\n                  ? yearProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}year',\n                  id: 'nZk5lg177+CQcO/Z',\n                  description: 'The aria label for the year input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'month':\n          return (\n            <SpinButtonGroup.Number\n              {...monthProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                monthProps.value !== undefined\n                  ? monthProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}month',\n                  id: 'LoBSMcHvTQEABp39',\n                  description: 'The aria label for the month input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'day':\n          return (\n            <SpinButtonGroup.Number\n              {...dayProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayProps.value !== undefined ? dayProps.value : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day',\n                  id: 'Dz8K7VMW5UFpwetG',\n                  description: 'The aria label for the day input of a date.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'hour':\n          return (\n            <SpinButtonGroup.Number\n              {...hourProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                hourProps.value !== undefined\n                  ? hourProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}hour',\n                  id: 'DXoXEb27LMuapbC4',\n                  description: 'The aria label for the hour input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'minute':\n          return (\n            <SpinButtonGroup.Number\n              {...minuteProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                minuteProps.value !== undefined\n                  ? minuteProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}minute',\n                  id: 'pGR/6J+2uPcvCSju',\n                  description: 'The aria label for the minute input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'second':\n          return (\n            <SpinButtonGroup.Number\n              {...secondsProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                secondsProps.value !== undefined\n                  ? secondsProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}second',\n                  id: 'WD6kswCbAgSXwMnO',\n                  description: 'The aria label for the second input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'fractionalSecond':\n          return (\n            <SpinButtonGroup.Number\n              {...fractionalSecondProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                fractionalSecondProps.value !== undefined\n                  ? fractionalSecondProps.value\n                  : parseInt(value)\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}millisecond',\n                  id: 'wa4ct2vRPvqd0Uif',\n                  description:\n                    'The aria label for the millisecond input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'dayPeriod':\n          return (\n            <SpinButtonGroup.Text\n              {...dayPeriodProps}\n              key={type}\n              ref={(handler: SpinButtonHandler | null) => {\n                setHandler(handler, type);\n              }}\n              value={\n                dayPeriodProps.value !== undefined\n                  ? dayPeriodProps.value\n                  : value\n              }\n              aria-label={intl.formatMessage(\n                {\n                  defaultMessage: '{prefix}day period',\n                  id: 'a9uVGc0cPE1OqAJj',\n                  description:\n                    'The aria label for the day period (am/pm) input of a time.',\n                },\n                {\n                  prefix,\n                },\n              )}\n              /* e.g. \"AM/PM\" - should be localized accordingly */\n              placeholder={getPlaceholder(type, intl.formatMessage)}\n            />\n          );\n        case 'literal':\n          return isNil(value) ? null : (\n            // Show the whole literal but only use the first char as trigger.\n            <SpinButtonGroup.Separator\n              key={`${type}_${index}`}\n              trigger={value[0]}\n            >\n              {value}\n            </SpinButtonGroup.Separator>\n          );\n        default:\n          // For unknown part types, simply render the value as textnode in the DOM.\n          return value;\n      }\n    });\n\n    return { handlers, spinButtons };\n    // Do not recreate the spinbuttons on parts update. This prevents prefix issues when starting values with 0.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    isDisabled,\n    isReadonly,\n    updatePart,\n    daysInMonth,\n    hasDayPeriod,\n    parts.length,\n    yearProps.value,\n    monthProps.value,\n    dayProps.value,\n    hourProps.value,\n    minuteProps.value,\n    secondsProps.value,\n    fractionalSecondProps.value,\n    dayPeriodProps.value,\n  ]);\n\n  // Callback to push the given part values to the corresponding spinbuttons.\n  const updateParts = useCallback(\n    (updatedParts: Intl.DateTimeFormatPart[]) => {\n      const nonLiteralParts = updatedParts.filter(\n        ({ type }) => type !== 'literal',\n      );\n\n      const lookup = new Map(\n        nonLiteralParts.map(({ type, value }) => [type, value]),\n      );\n\n      // Apply the new values to the spinbuttons.\n      // Would not be necessary, if the spinbuttons would be controlled. But this is not possible because this\n      // interferes with the expected typing behavior for spinbuttons with format patterns like for this one used for the datetime parts.\n      nonLiteralParts.forEach((part) => {\n        const handler = handlers.get(part.type);\n        if (part.value === '') {\n          handler?.clearValue();\n        } else if (handler?.type === 'number') {\n          handler.applyText(part.value);\n        } else if (handler?.type === 'text') {\n          handler.searchValue(part.value[0]);\n        }\n      });\n\n      // update the parts with new values\n      setParts((prevParts) => {\n        return prevParts.map((part) => {\n          const newValue = lookup.get(part.type);\n          return newValue !== undefined ? { ...part, value: newValue } : part;\n        });\n      });\n    },\n    [handlers],\n  );\n\n  // If the format, type or precision is changing, restore the prev. values when generating a set of new spinbuttons.\n  useEffect(() => {\n    setParts(() =>\n      dateTime === null || !isValid(dateTime) ? emptyParts : toParts(dateTime),\n    );\n    // Need to update the parts on precision change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [emptyParts, toDateTime, toParts, precision]);\n\n  return {\n    spinButtons,\n    dateTime,\n    updateParts,\n    handlers,\n    parts,\n    toDateTime,\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["value", "handlers", "type", "spinButtons"]
 }

package/esm/forms/date-time-range-picker/DateRangeSelector.css CHANGED Viewed

@@ -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/esm/forms/date-time-range-picker/DateRangeSelector.js CHANGED Viewed

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

package/esm/forms/date-time-range-picker/DateRangeSelector.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useMemo, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const clearCalendarValue = useDateTimeRangePickerStore(\n    (state) => state.clearCalendarValue,\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) {\n        clearCalendarValue?.();\n      }\n      setOpen(isOpen);\n    },\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  // with the visual refresh enabled, only pure error state should receive critical coloring\n  const isCritical = useVisualRefreshEnabled()\n    ? error && !disabled && !readOnly\n    : error;\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName)}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={isCritical ? 'critical' : 'neutral'}\n        disabled={disabled || readOnly}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-children-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { noop } from 'lodash-es';\nimport { forwardRef, useImperativeHandle, useMemo, useState } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { CalendarIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './DateRangeSelector.sty.js';\nimport type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';\nimport { Button } from '../../buttons/button/Button.js';\nimport { useFocusRing } from '../../core/hooks/useFocusRing.js';\nimport { useMergeRefs } from '../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../core/hooks/useVisualRefreshEnabled.js';\nimport { useDateTimeRangePickerStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { useOverlayWithTrigger } from '../../overlays/hooks/useOverlayWithTrigger.js';\nimport { Overlay } from '../../overlays/overlay/Overlay.js';\nimport { globalSprinkles } from '../../styles/safe-sprinkles.js';\nimport { CalendarRoot } from '../calendar/CalendarRoot.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\n\n/**\n * Calendar widget trigger and overlay component.\n */\nexport const DateRangeSelector = forwardRef<\n  DateRangeSelectorRef,\n  DateRangeSelectorProps\n>((props, forwardedRef) => {\n  const {\n    disabled,\n    readOnly,\n    error,\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    overlayOwnerId,\n    ...remainingProps\n  } = props;\n  const [open, setOpen] = useState(false);\n\n  const intl = useIntl();\n  const calendarTriggerLabel = intl.formatMessage({\n    defaultMessage: 'DateRangePicker calendar trigger',\n    id: 'K2M82PM/gcTo3fjq',\n    description: 'Text shown for the datetimerangepicker calendar trigger.',\n  });\n\n  const clearCalendarValue = useDateTimeRangePickerStore(\n    (state) => state.clearCalendarValue,\n  );\n\n  const {\n    targetRef,\n    triggerRef,\n    overlayRef,\n    overlayState,\n    overlayProps,\n    overlayTriggerProps,\n  } = useOverlayWithTrigger({\n    placement: 'bottom-end',\n    offset: 8,\n    shouldCloseOnBlur: false,\n    open,\n    onOpenChange: (isOpen) => {\n      if (!isOpen) {\n        clearCalendarValue?.();\n      }\n      setOpen(isOpen);\n    },\n    // the overlay should not open when disabled or readOnly\n    disabled: disabled || readOnly,\n  });\n\n  const rootRef = useMergeRefs<HTMLButtonElement | null>([\n    triggerRef,\n    targetRef,\n  ]);\n\n  useImperativeHandle(\n    forwardedRef,\n    (): DateRangeSelectorRef => ({\n      open: () => setOpen(true),\n      close: () => setOpen(false),\n    }),\n    [],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: false,\n    isMinimal: false,\n    disabled: disabled,\n    color: error ? 'critical' : 'neutral',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      dispatch: noop,\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        isDisabled: disabled,\n        showError: error,\n      },\n    }),\n    [error, disabled],\n  );\n\n  // with the visual refresh enabled, only pure error state should receive critical coloring\n  const isCritical = useVisualRefreshEnabled()\n    ? error && !disabled && !readOnly\n    : error;\n\n  return (\n    <>\n      <Button\n        ref={rootRef}\n        data-testid={dataTestId}\n        className={clsx(styles.selector, focusClassName, consumerClassName)}\n        style={consumerStyle}\n        aria-label={calendarTriggerLabel}\n        {...remainingProps}\n        {...overlayTriggerProps}\n        size=\"condensed\"\n        color={isCritical ? 'critical' : 'neutral'}\n        disabled={disabled || readOnly}\n        aria-disabled={ariaDisabledProp}\n        variant=\"emphasized\"\n        data-dt-children-name=\"ShowCalendar\"\n      >\n        <Button.Prefix>\n          <CalendarIcon />\n        </Button.Prefix>\n      </Button>\n      <Overlay\n        ref={overlayRef}\n        isOpen={overlayState.isOpen}\n        overlayProps={overlayProps}\n        className={globalSprinkles({\n          paddingLeft: 16,\n          paddingTop: 16,\n          paddingRight: 16,\n          paddingBottom: 16,\n        })}\n        data-dtrum-mask={dataDtrumMask}\n        data-dtrum-allow={dataDtrumAllow}\n        overlayContainerProps={{\n          'data-dt-owner': overlayOwnerId,\n        }}\n      >\n        <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n          <CalendarRoot type=\"range\" aria-disabled={ariaDisabledProp} />\n        </FormFieldMessageContext.Provider>\n      </Overlay>\n    </>\n  );\n});\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,5 +1,5 @@
 import "./DateRangeSelector.css";
-var selector = "_1uftu980-3-10-4";
+var selector = "_1uftu980-3-11-1";
 export {
   selector
 };

package/esm/forms/date-time-range-picker/DateRangeSelector.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateRangeSelector.css.ts"],
-  "sourcesContent": ["import './DateRangeSelector.css';\nexport var selector = '_1uftu980-3-10-4';"],
+  "sourcesContent": ["import './DateRangeSelector.css';\nexport var selector = '_1uftu980-3-11-1';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,WAAW;",
   "names": []
 }

package/esm/forms/date-time-range-picker/DateTimeInput.css CHANGED Viewed

@@ -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);
 }