@dynatrace/strato-components 3.10.4 → 3.11.0

package/forms/date-time-picker/DateTimePicker.css

@@ -1,121 +1,85 @@
-._1i883gj7-3-10-4 {
-  --_1i883gj0-3-10-4: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-10-4: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-10-4: var(--_1i883gj0-3-10-4);
-  --_1i883gj3-3-10-4: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1i883gj4-3-10-4: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-  --_1i883gj5-3-10-4: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-10-4: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj4-3-11-0 {
+  --_1i883gj0-3-11-0: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-11-0: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-11-0: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj3-3-11-0: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1jgl8s50-3-10-4 ._1i883gj7-3-10-4 {
-  --_1i883gj3-3-10-4: var(--dt-colors-background-surface-default, #fff);
-}
-._1i883gj8-3-10-4 {
-  --_1i883gj5-3-10-4: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj6-3-10-4: var(--dt-colors-background-field-neutral-accent, #5b5c81);
-  --_1i883gj2-3-10-4: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-10-4: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-10-4: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+._1i883gj5-3-11-0 {
   cursor: default;
 }
-._1jgl8s50-3-10-4 ._1i883gj8-3-10-4 {
-  --_1i883gj3-3-10-4: var(--dt-colors-background-surface-default, #fff);
-  --_1i883gj4-3-10-4: var(--dt-colors-background-surface-default, #fff);
-}
-._1i883gj9-3-10-4 {
-  --_1i883gj0-3-10-4: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-10-4: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj3-3-10-4: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1i883gj4-3-10-4: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
-  --_1i883gj5-3-10-4: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj6-3-10-4: var(--dt-colors-background-field-critical-accent, #c62239);
-}
-._1jgl8s50-3-10-4 ._1i883gj9-3-10-4 {
-  --_1i883gj3-3-10-4: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-}
-._1i883gja-3-10-4 {
-  --_1i883gj0-3-10-4: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-10-4: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-10-4: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-10-4: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj5-3-10-4: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
-  --_1i883gj6-3-10-4: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj6-3-11-0 {
+  --_1i883gj0-3-11-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-11-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj2-3-11-0: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj3-3-11-0: var(--dt-colors-background-field-critical-accent, #c62239);
+}
+._1i883gj7-3-11-0 {
+  --_1i883gj0-3-11-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-11-0: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj2-3-11-0: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
   cursor: not-allowed;
 }
-._1i883gjc-3-10-4 {
+._1i883gj9-3-11-0 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gje-3-10-4 {
-  --_1i883gj2-3-10-4: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj3-3-10-4: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1i883gj4-3-10-4: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-}
-._1jgl8s50-3-10-4 ._1i883gje-3-10-4 {
-  --_1i883gj3-3-10-4: var(--dt-colors-background-surface-default, #fff);
-}
-._1i883gjf-3-10-4 {
+._1i883gjb-3-11-0 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-10-4);
+  color: var(--_1i883gj1-3-11-0);
   white-space-collapse: preserve;
 }
-._1i883gjg-3-10-4 {
+._1i883gjc-3-11-0 {
   padding: var(--dt-spacings-size-6, 6px) var(--dt-spacings-size-8, 8px);
   border-radius: 0;
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
-  color: var(--_1i883gj2-3-10-4);
-  background-color: var(--_1i883gj3-3-10-4);
-}
-._1i883gjg-3-10-4:hover {
-  background-color: var(--_1i883gj4-3-10-4);
 }
-._r47o0w0-3-10-4 ._r47o0w1-3-10-4 {
-  color: var(--_1i883gj0-3-10-4);
+._r47o0w0-3-11-0 ._r47o0w1-3-11-0 {
+  color: var(--_1i883gj0-3-11-0);
 }
-._r47o0w0-3-10-4 ._r47o0w1-3-10-4::before {
-  color: var(--_1i883gj1-3-10-4);
+._r47o0w0-3-11-0 ._r47o0w1-3-11-0::before {
+  color: var(--_1i883gj1-3-11-0);
 }
-._r47o0w0-3-10-4 ._r47o0w1-3-10-4:focus {
-  background-color: var(--_1i883gj6-3-10-4);
-  color: var(--_1i883gj5-3-10-4);
+._r47o0w0-3-11-0 ._r47o0w1-3-11-0:focus {
+  background-color: var(--_1i883gj3-3-11-0);
+  color: var(--_1i883gj2-3-11-0);
 }
-._r47o0w0-3-10-4 ._r47o0w1-3-10-4:focus::before {
-  color: var(--_1i883gj5-3-10-4);
+._r47o0w0-3-11-0 ._r47o0w1-3-11-0:focus::before {
+  color: var(--_1i883gj2-3-11-0);
 }
-._r47o0w0-3-10-4 *::selection {
+._r47o0w0-3-11-0 *::selection {
   background-color: transparent;
 }
-._r47o0w0-3-10-4 ._r47o0w1-3-10-4:focus::selection, ._r47o0w0-3-10-4 ._r47o0w1-3-10-4:focus *::selection {
+._r47o0w0-3-11-0 ._r47o0w1-3-11-0:focus::selection, ._r47o0w0-3-11-0 ._r47o0w1-3-11-0:focus *::selection {
   background-color: transparent;
-  color: var(--_1i883gj5-3-10-4);
+  color: var(--_1i883gj2-3-11-0);
 }
-._r47o0w0-3-10-4 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-10-4[data-drag-selected]::before {
-  background-color: var(--_1i883gj6-3-10-4);
-  color: var(--_1i883gj5-3-10-4);
+._r47o0w0-3-11-0 [data-drag-selected], [role="textbox"][data-drag-selected], ._r47o0w1-3-11-0[data-drag-selected]::before {
+  background-color: var(--_1i883gj3-3-11-0);
+  color: var(--_1i883gj2-3-11-0);
 }
-._r47o0w0-3-10-4 [data-drag-selected]::selection, ._r47o0w0-3-10-4 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
+._r47o0w0-3-11-0 [data-drag-selected]::selection, ._r47o0w0-3-11-0 [data-drag-selected] *::selection, [role="textbox"][data-drag-selected]::selection, [role="textbox"][data-drag-selected] *::selection {
   background-color: transparent;
 }
-[data-shift-selection=true] ._r47o0w1-3-10-4:focus {
+[data-shift-selection=true] ._r47o0w1-3-11-0:focus {
   background-color: transparent;
-  color: var(--_1i883gj0-3-10-4);
+  color: var(--_1i883gj0-3-11-0);
   caret-color: auto;
 }
-[data-shift-selection=true] ._r47o0w1-3-10-4:focus::before {
-  color: var(--_1i883gj1-3-10-4);
+[data-shift-selection=true] ._r47o0w1-3-11-0:focus::before {
+  color: var(--_1i883gj1-3-11-0);
 }
-._1i883gjh-3-10-4 {
+._1i883gjd-3-11-0 {
   position: absolute;
   top: var(--dt-spacings-size-4, 4px);
   right: var(--dt-spacings-size-4, 4px);
 }
-._1i883gjh-3-10-4:is(button._1i883gjh-3-10-4._1i883gjh-3-10-4) {
+._1i883gjd-3-11-0:is(button._1i883gjd-3-11-0._1i883gjd-3-11-0) {
   border-radius: var(--dt-borders-radius-field-subdued, 3px);
 }
-._1jgl8s50-3-10-4 ._1i883gjh-3-10-4._1i883gjh-3-10-4._1i883gjh-3-10-4 {
+._1jgl8s50-3-11-0 ._1i883gjd-3-11-0._1i883gjd-3-11-0._1i883gjd-3-11-0 {
   position: absolute;
   margin: var(--dt-spacings-size-0, 0);
   z-index: 0;

package/forms/date-time-picker/DateTimePicker.css.d.ts

@@ -1,29 +1,11 @@
 declare const colorVar: `var(--${string})`;
 declare const colorPlaceholderVar: `var(--${string})`;
-declare const colorDateSelectorVar: `var(--${string})`;
-declare const backgroundColorVar: `var(--${string})`;
-declare const backgroundColorHoverVar: `var(--${string})`;
 export declare const spinButtonSelectionColorVar: `var(--${string})`;
 export declare const spinButtonSelectionBackgroundColorVar: `var(--${string})`;
 export declare const dateTimePicker: import("@vanilla-extract/recipes").RuntimeFn<{
     readOnly: {
         true: {
-            vars: {
-                [spinButtonSelectionColorVar]: string;
-                [spinButtonSelectionBackgroundColorVar]: string;
-                [colorDateSelectorVar]: string;
-                [backgroundColorVar]: string;
-                [backgroundColorHoverVar]: string;
-            };
             cursor: "default";
-            selectors: {
-                [x: string]: {
-                    vars: {
-                        [backgroundColorVar]: string;
-                        [backgroundColorHoverVar]: string;
-                    };
-                };
-            };
         };
     };
     showError: {
@@ -31,18 +13,9 @@ export declare const dateTimePicker: import("@vanilla-extract/recipes").RuntimeF
             vars: {
                 [colorVar]: string;
                 [colorPlaceholderVar]: string;
-                [backgroundColorVar]: string;
-                [backgroundColorHoverVar]: string;
                 [spinButtonSelectionColorVar]: string;
                 [spinButtonSelectionBackgroundColorVar]: string;
             };
-            selectors: {
-                [x: string]: {
-                    vars: {
-                        [backgroundColorVar]: string;
-                    };
-                };
-            };
         };
     };
     disabled: {
@@ -50,10 +23,7 @@ export declare const dateTimePicker: import("@vanilla-extract/recipes").RuntimeF
             vars: {
                 [colorVar]: string;
                 [colorPlaceholderVar]: string;
-                [backgroundColorVar]: string;
-                [backgroundColorHoverVar]: string;
                 [spinButtonSelectionColorVar]: string;
-                [spinButtonSelectionBackgroundColorVar]: string;
             };
             cursor: "not-allowed";
         };

package/forms/date-time-picker/DateTimePicker.sty.js

@@ -30,9 +30,9 @@ var import_textStyle_css_ts_vanilla = require("../../styles/textStyle.css");
 var import_SpinButton_css_ts_vanilla = require("../spin-buttons/SpinButton.css");
 var import_DateTimePicker_css_ts_vanilla = require("./DateTimePicker.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var clearIconButton = "_1i883gjh-3-10-4";
-var dateSelector = "_1i883gjg-3-10-4";
-var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj7-3-10-4", variantClassNames: { readOnly: { true: "_1i883gj8-3-10-4" }, showError: { true: "_1i883gj9-3-10-4" }, disabled: { true: "_1i883gja-3-10-4" }, type: { date: "_1i883gjb-3-10-4", time: "_1i883gjc-3-10-4", datetime: "_1i883gjd-3-10-4" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-10-4"]] });
-var spinButtonGroup = "_1i883gjf-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v3-3-10-4 _da9a8vb-3-10-4";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-10-4)";
-var spinButtonSelectionColorVar = "var(--_1i883gj5-3-10-4)";
+var clearIconButton = "_1i883gjd-3-11-0";
+var dateSelector = "_1i883gjc-3-11-0";
+var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj4-3-11-0", variantClassNames: { readOnly: { true: "_1i883gj5-3-11-0" }, showError: { true: "_1i883gj6-3-11-0" }, disabled: { true: "_1i883gj7-3-11-0" }, type: { date: "_1i883gj8-3-11-0", time: "_1i883gj9-3-11-0", datetime: "_1i883gja-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var spinButtonGroup = "_1i883gjb-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj3-3-11-0)";
+var spinButtonSelectionColorVar = "var(--_1i883gj2-3-11-0)";

package/forms/date-time-picker/DateTimePickerRoot.js

@@ -42,6 +42,7 @@ var import_Button = require("../../buttons/button/Button.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useBehavioralTrackingProps = require("../../core/hooks/useBehavioralTrackingProps.js");
 var import_useFocusRing = require("../../core/hooks/useFocusRing.js");
+var import_useId = require("../../core/hooks/useId.js");
 var import_useTimeframeStore = require("../../core/time/timeframeStore/useTimeframeStore.js");
 var import_validation = require("../../core/time/validation.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
@@ -57,6 +58,7 @@ var import_useSelectionInteractionHandlers = require("../date-time-range-picker/
 var import_FormFieldMessageBaseItem = require("../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
 var import_useMinMaxLogger = require("../forms-core/hooks/useMinMaxLogger.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
+var import_useContainerFocus = require("../hooks/useContainerFocus.js");
 var import_useCustomMessageEmitter = require("../validation/useCustomMessageEmitter.js");
 var import_useValidationStateEmitter = require("../validation/useValidationStateEmitter.js");
 var import_validation_builders = require("../validation/validation-builders.js");
@@ -73,6 +75,8 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     type = "datetime",
     formControl,
     onValidityChange,
+    onFocus,
+    onBlur,
     ...remainingProps
   } = props;
   const {
@@ -85,7 +89,6 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     hintProps,
     hint,
     showError,
-    messageState,
     messageDispatch: formFieldDispatch
   } = formControl;
   const [behavioralTrackingProps] = (0, import_useBehavioralTrackingProps.useBehavioralTrackingProps)(remainingProps);
@@ -107,8 +110,8 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
   const dateSelectorRef = (0, import_react.useRef)(null);
   const [hasInputContent, setHasInputContent] = (0, import_react.useState)(false);
   (0, import_useMinMaxLogger.useMinMaxLogger)(min, max, "DateTimePicker");
+  const ownerId = (0, import_useId.useId)();
   const touchedContainerRef = (0, import_react.useRef)(null);
-  const { isTouched } = messageState;
   const disabledOrAriaDisabled = disabled || ariaDisabled || false;
   const ariaLabelingProps = (0, import_useAriaLabelingProps.useAriaLabelingProps)(remainingProps);
   const showDateSelector = type !== "time";
@@ -155,6 +158,14 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
     },
     [intl, value, min, max, precision, formatString, id]
   );
+  const { containerClassName, ...containerFocusProps } = (0, import_useContainerFocus.useContainerFocus)({
+    onFocus,
+    onBlur,
+    disabled,
+    overlayOwnerId: ownerId,
+    emitValidationState,
+    getBlurValidationState: () => buildValidationState("blur", dateTimePickerError)
+  });
   (0, import_react.useImperativeHandle)(
     forwardedRef,
     () => ({
@@ -194,24 +205,6 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
       buildValidationState
     ]
   );
-  const onBlurTouched = (0, import_react.useCallback)(
-    (e) => {
-      if (!touchedContainerRef.current?.contains(e.relatedTarget)) {
-        formFieldDispatch?.({
-          type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-          payload: { isTouched: true }
-        });
-        emitValidationState(buildValidationState("blur", dateTimePickerError));
-      }
-    },
-    [
-      formFieldDispatch,
-      isTouched,
-      dateTimePickerError,
-      emitValidationState,
-      buildValidationState
-    ]
-  );
   (0, import_react.useEffect)(() => {
     if (value === null && dateInputRef.current?.expressionInputRef && dateInputRef.current.expressionInputRef.textContent !== "" && dateInputRef.current.element?.getAttribute("data-valuetype") !== "expression") {
       dateInputRef.current.expressionInputRef.textContent = "";
@@ -275,8 +268,9 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
       ref: rootRef,
-      className: consumerClassName,
+      className: (0, import_clsx.default)(containerClassName, consumerClassName),
       style: consumerStyle,
+      ...containerFocusProps,
       ...behavioralTrackingProps,
       "data-dt-component": COMPONENT_NAME,
       children: [
@@ -312,10 +306,11 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
                     import_InputGroup_css.inputGroupClassName
                   ),
                   tabIndex: disabled ? void 0 : 0,
-                  onBlur: onBlurTouched,
                   onInput: () => {
                     setHasInputContent(
-                      !!dateInputRef.current?.expressionInputRef?.textContent
+                      !!dateInputRef.current?.expressionInputRef?.textContent || Array.from(
+                        dateInputRef.current?.spinButtonHandlers?.values() ?? []
+                      ).some((h) => h?.element.current?.textContent)
                     );
                   },
                   onMouseDown,
@@ -361,21 +356,14 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
                     !readOnly && !disabledOrAriaDisabled && (value !== null && value.value !== "" || hasInputContent) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                       import_Button.Button,
                       {
-                        onFocus: () => {
-                          formFieldDispatch?.({
-                            type: import_formfield_messages_state_reducer.FormFieldMessagesAction.SETISTOUCHED,
-                            payload: { isTouched: true }
-                          });
-                        },
                         onClick: () => {
-                          setValue(null);
-                          if (dateInputRef.current?.expressionInputRef) {
+                          dateInputRef.current?.expressionInputRef?.focus();
+                          if (dateInputRef.current?.expressionInputRef && dateInputRef.current.expressionInputRef.textContent !== "") {
                             dateInputRef.current.expressionInputRef.textContent = "";
+                          } else {
+                            setValue(null);
                           }
                           setHasInputContent(false);
-                          requestAnimationFrame(() => {
-                            dateInputRef.current?.expressionInputRef?.focus();
-                          });
                         },
                         onKeyDown: (e) => {
                           if (e.key === "Enter") {
@@ -403,7 +391,8 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
                   error: showError,
                   className: (0, import_clsx.default)(styles.dateSelector, import_InputGroup_css.inputGroupClassName),
                   "data-dtrum-mask": dataDtrumMask,
-                  "data-dtrum-allow": dataDtrumAllow
+                  "data-dtrum-allow": dataDtrumAllow,
+                  overlayOwnerId: ownerId
                 }
               )
             ]

package/forms/date-time-picker/hooks/useDateTimePicker.js

@@ -51,11 +51,66 @@ function useDateTimePicker(props) {
   const [isoDateTime, setIsoDateTime] = (0, import_react.useState)(
     (0, import_timeParser.getTimeValue)(value ?? void 0, precision)?.absoluteDate ?? null
   );
-  const pendingIsoDateTimeRef = (0, import_react.useRef)(isoDateTime);
+  const dispatchedValuesRef = (0, import_react.useRef)(/* @__PURE__ */ new Set([value]));
+  const latestDispatchedValueRef = (0, import_react.useRef)(value);
+  const lastDispatchedIsoRef = (0, import_react.useRef)(
+    (0, import_timeParser.getTimeValue)(value ?? void 0, precision)?.absoluteDate ?? null
+  );
+  const spinButtonChangeHandledRef = (0, import_react.useRef)(false);
+  const hasPendingClearRef = (0, import_react.useRef)(false);
   const { toParts, emptyParts } = (0, import_useDateTimeFormat.useDateTimeFormat)(type, precision);
   const {
     state: { isValid: isValidFormControl }
   } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
+  const dispatchDateTimeChange = (0, import_react.useCallback)(
+    (newDateTime) => {
+      spinButtonChangeHandledRef.current = true;
+      let newKey;
+      if (!newDateTime) {
+        newKey = null;
+      } else if (!(0, import_date_fns.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 = (0, import_timeParser.removePrecision)(newKey, precisionMode);
+        dispatched.add(dispatchedValue);
+        latestDispatchedValueRef.current = dispatchedValue;
+        setIsoDateTime(newKey);
+        onChange?.((0, import_timeParser.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 = (0, import_react.useCallback)(() => {
+    hasPendingClearRef.current = true;
+  }, []);
   const { spinButtons, dateTime, updateParts, handlers, parts, toDateTime } = (0, import_useSpinButtons.useSpinButtons)(
     isoDateTime,
     type,
@@ -63,7 +118,9 @@ function useDateTimePicker(props) {
     isDisabled,
     readOnly,
     ariaLabelPrefix,
-    value
+    value,
+    dispatchDateTimeChange,
+    onPartClear
   );
   const prevDateTime = (0, import_usePrevious.usePrevious)(dateTime);
   const minDateTime = (0, import_react.useMemo)(() => {
@@ -126,40 +183,33 @@ function useDateTimePicker(props) {
     [parts]
   );
   (0, import_react.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 (!(0, import_date_fns.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?.((0, import_timeParser.getTimeValue)(newIsoDateTime ?? null, precision) ?? null);
-  }, [dateTime, prevDateTime]);
+    dispatchDateTimeChange(dateTime);
+  });
   (0, import_react.useEffect)(() => {
-    if ((0, import_timeParser.removePrecision)(
-      pendingIsoDateTimeRef.current ?? "",
-      type === "date" ? "day" : precision
-    ) !== value) {
-      applyDateTime(
-        (0, import_timeParser.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 = (0, import_timeParser.getTimeValue)(value ?? void 0, precision)?.absoluteDate ?? null;
+    applyDateTime(appliedIso);
+    lastDispatchedIsoRef.current = appliedIso;
   }, [value]);
   return {
     isoDateTime,

package/forms/date-time-picker/hooks/useSpinButtons.d.ts

@@ -4,7 +4,7 @@ import type { DateTimePickerProps } from '../types.js';
 /**
  * Returns a list of preconfigured spinbuttons for a given datetime and format configuration.
  */
-export declare function useSpinButtons(isoDateTime: TimeValue | string | null, type: DateTimePickerProps['type'], precision: DateTimePickerProps['precision'], isDisabled: boolean, isReadonly: boolean, ariaLabelPrefix: string | undefined, value?: TimeValue | string | null): {
+export declare function useSpinButtons(isoDateTime: TimeValue | string | null, type: DateTimePickerProps['type'], precision: DateTimePickerProps['precision'], isDisabled: boolean, isReadonly: boolean, ariaLabelPrefix: string | undefined, value?: TimeValue | string | null, onPartChange?: (dateTime: Date | null | undefined) => void, onPartClear?: () => void): {
     spinButtons: (string | import("react").JSX.Element | null)[];
     dateTime: Date | null;
     updateParts: (updatedParts: Intl.DateTimeFormatPart[]) => void;

package/forms/date-time-picker/hooks/useSpinButtons.js

@@ -37,7 +37,7 @@ var import_helpers = require("../../forms-core/time/helpers.js");
 var import_timeParser = require("../../forms-core/time/timeParser.js");
 var import_SpinButtonGroup = require("../../spin-buttons/spin-button-group/SpinButtonGroup.js");
 var import_useDateTimeFormat = require("./useDateTimeFormat.js");
-function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ariaLabelPrefix, value) {
+function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ariaLabelPrefix, value, onPartChange, onPartClear) {
   const intl = (0, import_react_intl.useIntl)();
   const prefix = ariaLabelPrefix ? `${ariaLabelPrefix} ` : "";
   const { toParts, toDateTime, emptyParts } = (0, import_useDateTimeFormat.useDateTimeFormat)(
@@ -60,46 +60,65 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     [parts]
   );
   const precisionRef = (0, import_react2.useRef)(precision);
+  const partsRef = (0, import_react2.useRef)(parts);
+  partsRef.current = parts;
+  const computeDateTimeFromParts = (0, import_react2.useCallback)(
+    (newParts, previousPrecision) => {
+      const newDateTime = toDateTime(newParts);
+      if (!newDateTime || !(0, import_date_fns.isValid)(newDateTime)) {
+        return newDateTime;
+      }
+      if (precision === previousPrecision && precision === "milliseconds") {
+        return newDateTime;
+      }
+      const anchor = new import_tz.TZDateMini(
+        (0, import_timeParser.getTimeValue)(value, precision)?.absoluteDate ?? (0, import_date_fns.startOfDay)(import_tz.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 import_tz.TZDateMini(
+        (0, import_date_time.replaceSecondFractions)(
+          newDateTime.toISOString(),
+          milliseconds.toString()
+        ),
+        timezone
+      );
+    },
+    [toDateTime, precision, value, timezone]
+  );
   const dateTime = (0, import_react2.useMemo)(() => {
-    const newDateTime = toDateTime(parts);
-    if (!newDateTime || !(0, import_date_fns.isValid)(newDateTime)) {
-      return newDateTime;
-    }
-    if (precision === precisionRef.current && precision === "milliseconds") {
-      return newDateTime;
-    }
-    const date = new import_tz.TZDateMini(
-      (0, import_timeParser.getTimeValue)(value, precision)?.absoluteDate ?? (0, import_date_fns.startOfDay)(import_tz.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 import_tz.TZDateMini(
-      (0, import_date_time.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 && (0, import_date_fns.isValid)(dateTime) ? (0, import_date_fns.getDaysInMonth)(dateTime) : 31;
   const updatePart = (0, import_react2.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,
@@ -452,9 +471,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) => {