@dynatrace/strato-components 3.5.0 → 3.6.0

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

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

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-5-0";
-var dateSelector = "_1i883gjg-3-5-0";
-var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj7-3-5-0", variantClassNames: { readOnly: { true: "_1i883gj8-3-5-0" }, showError: { true: "_1i883gj9-3-5-0" }, disabled: { true: "_1i883gja-3-5-0" }, type: { date: "_1i883gjb-3-5-0", time: "_1i883gjc-3-5-0", datetime: "_1i883gjd-3-5-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-5-0"]] });
-var spinButtonGroup = "_1i883gjf-3-5-0 _da9a8v0-3-5-0 _da9a8v2-3-5-0 _da9a8v3-3-5-0 _da9a8vb-3-5-0";
-var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-5-0)";
-var spinButtonSelectionColorVar = "var(--_1i883gj5-3-5-0)";
+var clearIconButton = "_1i883gjh-3-6-0";
+var dateSelector = "_1i883gjg-3-6-0";
+var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj7-3-6-0", variantClassNames: { readOnly: { true: "_1i883gj8-3-6-0" }, showError: { true: "_1i883gj9-3-6-0" }, disabled: { true: "_1i883gja-3-6-0" }, type: { date: "_1i883gjb-3-6-0", time: "_1i883gjc-3-6-0", datetime: "_1i883gjd-3-6-0" } }, defaultVariants: {}, compoundVariants: [[{ readOnly: true, showError: true }, "_1i883gje-3-6-0"]] });
+var spinButtonGroup = "_1i883gjf-3-6-0 _da9a8v0-3-6-0 _da9a8v2-3-6-0 _da9a8v3-3-6-0 _da9a8vb-3-6-0";
+var spinButtonSelectionBackgroundColorVar = "var(--_1i883gj6-3-6-0)";
+var spinButtonSelectionColorVar = "var(--_1i883gj5-3-6-0)";

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

@@ -57,6 +57,7 @@ var import_formfield_messages_state_reducer = require("../forms-core/state/formf
 var import_useInputHint = require("../hooks/useInputHint.js");
 var import_focusDateTimeInput = require("./utils/focusDateTimeInput.js");
 var import_expression_trigger_helpers = require("../date-time-range-picker/expression-trigger-helpers.js");
+var import_helpers = require("../date-time-range-picker/helpers.js");
 var import_selection_copy_helpers = require("../date-time-range-picker/selection-copy-helpers.js");
 var import_useSelectionInteractionHandlers = require("../date-time-range-picker/useSelectionInteractionHandlers.js");
 const COMPONENT_NAME = "DateTimePicker";
@@ -198,6 +199,9 @@ const DateTimePickerRoot = (0, import_react.forwardRef)((props, forwardedRef) =>
         event.stopPropagation();
         return;
       }
+      if ((0, import_helpers.isContentModifyingKey)(event)) {
+        dateInputRef.current?.clearPasteUndo();
+      }
       handleSelectionKeyDown(event);
     },
     [disabled, readOnly, handleSelectionKeyDown, dateInputRef]

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

@@ -1,5 +1,5 @@
-import type { DateSelectorProps, DateTimePickerProps, DateTimePickerType } from '../types.js';
 import type { TimeValue } from '../../../core/types/time.js';
+import type { DateSelectorProps, DateTimePickerProps, DateTimePickerType } from '../types.js';
 /**
  * Hook to provide the validation and 2way binding between the iso date and the rendered spinbuttons.
  */

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

@@ -24,12 +24,13 @@ var import_tz = require("@date-fns/tz");
 var import_date_fns = require("date-fns");
 var import_react = require("react");
 var import_user_preferences = require("@dynatrace-sdk/user-preferences");
+var import_useDateTimeFormat = require("./useDateTimeFormat.js");
+var import_useSpinButtons = require("./useSpinButtons.js");
 var import_useAriaLabelingProps = require("../../../core/hooks/useAriaLabelingProps.js");
 var import_usePrevious = require("../../../core/hooks/usePrevious.js");
 var import_useFormFieldMessagesContext = require("../../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_timeParser = require("../../forms-core/time/timeParser.js");
-var import_useDateTimeFormat = require("./useDateTimeFormat.js");
-var import_useSpinButtons = require("./useSpinButtons.js");
+var import_focusDateTimeInput = require("../utils/focusDateTimeInput.js");
 function useDateTimePicker(props) {
   const {
     type,
@@ -97,9 +98,7 @@ function useDateTimePicker(props) {
       value: isoDateTime ?? import_tz.TZDateMini.tz(timezone).toISOString(),
       onChange: (newIsoString) => {
         applyDateTime(newIsoString, /* @__PURE__ */ new Set(["year", "month", "day"]));
-        requestAnimationFrame(
-          () => handlers.get("hour")?.element.current?.focus()
-        );
+        (0, import_focusDateTimeInput.focusElementWithRetry)(() => handlers.get("hour")?.element.current);
       },
       disabled: disabled || readOnly,
       error: false

package/forms/date-time-picker/utils/focusDateTimeInput.d.ts

@@ -9,3 +9,12 @@ export declare const focusDateTimeInput: (event: ReactFocusEvent | ReactMouseEve
  * @internal
  */
 export declare const focusTimeInput: (dateTimeFromRef: RefObject<DateTimeInputRef | null>) => void;
+/**
+ * Repeatedly attempts to focus an element using requestAnimationFrame until
+ * focus succeeds or max attempts are reached. This handles race conditions
+ * where popover close animations restore focus to the trigger element.
+ * @param getElement - getter that returns the element to focus
+ * @param dateTimeRef - optional ref to fall back to via {@link focusDateTimeInput} if all attempts fail
+ * @internal
+ */
+export declare const focusElementWithRetry: (getElement: () => HTMLElement | null | undefined, dateTimeRef?: RefObject<DateTimeInputRef | null>) => void;

package/forms/date-time-picker/utils/focusDateTimeInput.js

@@ -18,6 +18,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var focusDateTimeInput_exports = {};
 __export(focusDateTimeInput_exports, {
   focusDateTimeInput: () => focusDateTimeInput,
+  focusElementWithRetry: () => focusElementWithRetry,
   focusTimeInput: () => focusTimeInput
 });
 module.exports = __toCommonJS(focusDateTimeInput_exports);
@@ -107,3 +108,25 @@ const focusTimeInput = (dateTimeFromRef) => {
   }
   focusDateTimeInput(null, dateTimeFromRef);
 };
+const MAX_FOCUS_ATTEMPTS = 3;
+const focusElementWithRetry = (getElement, dateTimeRef) => {
+  let attempts = 0;
+  const tryFocus = () => {
+    attempts++;
+    const element = getElement();
+    if (element) {
+      element.focus();
+      if (document.activeElement === element) {
+        return;
+      }
+    }
+    if (attempts < MAX_FOCUS_ATTEMPTS) {
+      requestAnimationFrame(tryFocus);
+      return;
+    }
+    if (dateTimeRef) {
+      focusDateTimeInput(null, dateTimeRef);
+    }
+  };
+  requestAnimationFrame(tryFocus);
+};

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

@@ -1,4 +1,4 @@
-._1uftu980-3-5-0 {
+._1uftu980-3-6-0 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;

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

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

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

@@ -1,33 +1,33 @@
-._5u9o250-3-5-0 {
+._5u9o250-3-6-0 {
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
 }
-._5u9o250-3-5-0::-webkit-scrollbar {
+._5u9o250-3-6-0::-webkit-scrollbar {
   display: none;
 }
-._5u9o252-3-5-0 {
+._5u9o252-3-6-0 {
   outline: none;
 }
-._5u9o252-3-5-0:not(:focus-visible) {
+._5u9o252-3-6-0:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o252-3-5-0:empty::before {
+._5u9o252-3-6-0: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-5-0 ._5u9o252-3-5-0:empty::before {
+._1vlwkc21-3-6-0 ._5u9o252-3-6-0:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-5-0 ._5u9o252-3-5-0:empty::before {
+._1vlwkc22-3-6-0 ._5u9o252-3-6-0:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-5-0._1vlwkc21-3-5-0 ._5u9o252-3-5-0:empty::before {
+._1vlwkc22-3-6-0._1vlwkc21-3-6-0 ._5u9o252-3-6-0:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }
-._5u9o252-3-5-0::selection {
-  color: var(--_1i883gj5-3-5-0);
-  background-color: var(--_1i883gj6-3-5-0);
+._5u9o252-3-6-0::selection {
+  color: var(--_1i883gj5-3-6-0);
+  background-color: var(--_1i883gj6-3-6-0);
 }

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

@@ -129,7 +129,9 @@ const DateTimeInput = (0, import_react.forwardRef)(
       expressionOnBlurHandler,
       expressionOnKeyDownHandler,
       onPaste,
+      pasteText,
       onPasteUndoKeyDown,
+      clearPasteUndo,
       value,
       valueType,
       spinButtons,
@@ -150,6 +152,8 @@ const DateTimeInput = (0, import_react.forwardRef)(
         spinButtonHandlers,
         focus,
         setExpressionValue: switchToExpressionMode,
+        clearPasteUndo,
+        pasteText,
         focusLast() {
           if (valueType === "expression") {
             expressionInputRef.current?.focus();

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

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

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

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

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

@@ -25,14 +25,13 @@ var import_react = require("react");
 var import_DateTimeRangePickerRoot = require("./DateTimeRangePickerRoot.js");
 var import_useCallbackRef = require("../../core/hooks/useCallbackRef.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
-var import_helpers = require("../../core/time/helpers.js");
 var import_dateTimeRangePicker = require("../../core/time/timeframeStore/actions/dateTimeRangePicker.js");
 var import_createTimeframeStore = require("../../core/time/timeframeStore/createTimeframeStore.js");
 var import_timeframeStoreProvider = require("../../core/time/timeframeStore/timeframeStoreProvider.js");
 var import_useDateTimeMessages = require("../../core/time/useDateTimeMessages.js");
 var import_useMinMax = require("../../core/time/useMinMax.js");
 var import_validation = require("../../core/time/validation.js");
-var import_helpers2 = require("../calendar/utils/helpers.js");
+var import_helpers = require("../calendar/utils/helpers.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useSyncedFormControlProps = require("../forms-core/hooks/useSyncedFormControlProps.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
@@ -52,12 +51,11 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
         valueMode: "dateTimePicker",
         required: state.required
       });
-      const valueWithPrecision = (0, import_timeParser.removePrecisionFromTimeFrame)(
+      const value = (0, import_timeParser.removePrecisionFromTimeFrame)(
         memoedValue,
         state.precision
       );
-      const value = (0, import_helpers.isFullTimeframe)(valueWithPrecision) ? valueWithPrecision : null;
-      const timeOffset = (0, import_helpers2.getTimeOffsetFromInitialValue)(
+      const timeOffset = (0, import_helpers.getTimeOffsetFromInitialValue)(
         value,
         "range",
         state.min,
@@ -83,11 +81,10 @@ function useSyncPropsAndState(store, memoedValue, isControlled, precision, forma
   ]);
   (0, import_react.useEffect)(() => {
     store.setState((state) => {
-      const valueWithPrecision = (0, import_timeParser.removePrecisionFromTimeFrame)(
+      const value = (0, import_timeParser.removePrecisionFromTimeFrame)(
         state.dateTimeRangePickerTimeframe,
         precision
       );
-      const value = (0, import_helpers.isFullTimeframe)(valueWithPrecision) ? valueWithPrecision : null;
       return {
         ...state,
         precision,
@@ -141,9 +138,8 @@ const DateTimeRangePicker = (0, import_react.forwardRef)(
       propReadOnly
     });
     const [initialState] = (0, import_react.useState)(() => {
-      const _value = isControlled ? memoedValue : memoedDefaultValue;
-      const value = (0, import_helpers.isFullTimeframe)(_value) ? _value : null;
-      const timeOffset = (0, import_helpers2.getTimeOffsetFromInitialValue)(
+      const value = isControlled ? memoedValue : memoedDefaultValue;
+      const timeOffset = (0, import_helpers.getTimeOffsetFromInitialValue)(
         value,
         "range",
         min,

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

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