@dynatrace/strato-components 3.1.3 → 3.2.1

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

@@ -1,69 +1,69 @@
-._1i883gj6-3-1-3 {
-  --_1i883gj0-3-1-3: var(--dt-colors-text-neutral-default, #2f2f4f);
-  --_1i883gj1-3-1-3: var(--dt-colors-text-neutral-subdued, #595a7d);
-  --_1i883gj2-3-1-3: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1i883gj3-3-1-3: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
-  --_1i883gj4-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj5-3-1-3: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj6-3-2-1 {
+  --_1i883gj0-3-2-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+  --_1i883gj1-3-2-1: var(--dt-colors-text-neutral-subdued, #595a7d);
+  --_1i883gj2-3-2-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1i883gj3-3-2-1: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
+  --_1i883gj4-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj5-3-2-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: text;
 }
-._1i883gj7-3-1-3 {
-  --_1i883gj4-3-1-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
-  --_1i883gj5-3-1-3: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj7-3-2-1 {
+  --_1i883gj4-3-2-1: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
+  --_1i883gj5-3-2-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: not-allowed;
 }
-._1i883gj8-3-1-3 {
-  --_1i883gj0-3-1-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj1-3-1-3: var(--dt-colors-text-critical-default, #bb0731);
-  --_1i883gj2-3-1-3: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1i883gj3-3-1-3: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
-  --_1i883gj4-3-1-3: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
-  --_1i883gj5-3-1-3: var(--dt-colors-background-field-critical-accent, #c62239);
+._1i883gj8-3-2-1 {
+  --_1i883gj0-3-2-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj1-3-2-1: var(--dt-colors-text-critical-default, #bb0731);
+  --_1i883gj2-3-2-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1i883gj3-3-2-1: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+  --_1i883gj4-3-2-1: var(--dt-colors-text-critical-on-accent-default, #f9f1f3);
+  --_1i883gj5-3-2-1: var(--dt-colors-background-field-critical-accent, #c62239);
 }
-._1i883gj9-3-1-3 {
-  --_1i883gj0-3-1-3: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj1-3-1-3: var(--dt-colors-text-neutral-disabled, #595a7d80);
-  --_1i883gj2-3-1-3: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj3-3-1-3: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1i883gj4-3-1-3: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
-  --_1i883gj5-3-1-3: var(--dt-colors-background-field-neutral-accent, #5b5c81);
+._1i883gj9-3-2-1 {
+  --_1i883gj0-3-2-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj1-3-2-1: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  --_1i883gj2-3-2-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj3-3-2-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1i883gj4-3-2-1: var(--dt-colors-text-neutral-on-accent-disabled, #f3f3f680);
+  --_1i883gj5-3-2-1: var(--dt-colors-background-field-neutral-accent, #5b5c81);
   cursor: not-allowed;
 }
-._1i883gjb-3-1-3 {
+._1i883gjb-3-2-1 {
   border-start-end-radius: var(--dt-borders-radius-field-default, 6px);
   border-end-end-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._1i883gjd-3-1-3 {
+._1i883gjd-3-2-1 {
   display: flex;
   flex: 1;
-  color: var(--_1i883gj1-3-1-3);
+  color: var(--_1i883gj1-3-2-1);
   white-space-collapse: preserve;
 }
-._1i883gje-3-1-3 {
+._1i883gje-3-2-1 {
   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(--_1i883gj0-3-1-3);
-  background-color: var(--_1i883gj2-3-1-3);
+  color: var(--_1i883gj0-3-2-1);
+  background-color: var(--_1i883gj2-3-2-1);
 }
-._1i883gje-3-1-3:hover {
-  background-color: var(--_1i883gj3-3-1-3);
+._1i883gje-3-2-1:hover {
+  background-color: var(--_1i883gj3-3-2-1);
 }
-._r47o0w0-3-1-3 ._r47o0w1-3-1-3 {
-  color: var(--_1i883gj0-3-1-3);
+._r47o0w0-3-2-1 ._r47o0w1-3-2-1 {
+  color: var(--_1i883gj0-3-2-1);
 }
-._r47o0w0-3-1-3 ._r47o0w1-3-1-3::before {
-  color: var(--_1i883gj1-3-1-3);
+._r47o0w0-3-2-1 ._r47o0w1-3-2-1::before {
+  color: var(--_1i883gj1-3-2-1);
 }
-._r47o0w0-3-1-3 ._r47o0w1-3-1-3:focus {
-  background-color: var(--_1i883gj5-3-1-3);
-  color: var(--_1i883gj4-3-1-3);
+._r47o0w0-3-2-1 ._r47o0w1-3-2-1:focus {
+  background-color: var(--_1i883gj5-3-2-1);
+  color: var(--_1i883gj4-3-2-1);
 }
-._r47o0w0-3-1-3 ._r47o0w1-3-1-3:focus::before {
-  color: var(--_1i883gj4-3-1-3);
+._r47o0w0-3-2-1 ._r47o0w1-3-2-1:focus::before {
+  color: var(--_1i883gj4-3-2-1);
 }
-._r47o0w0-3-1-3 *::selection {
-  color: var(--_1i883gj4-3-1-3);
-  background-color: var(--_1i883gj5-3-1-3);
+._r47o0w0-3-2-1 *::selection {
+  color: var(--_1i883gj4-3-2-1);
+  background-color: var(--_1i883gj5-3-2-1);
 }

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

@@ -6,4 +6,4 @@ import type { FormControlWithOverlayRef } from '../shared-types.js';
  * locale and timezone and formats the date and time accordingly.
  * @public
  */
-export declare const DateTimePicker: (props: DateTimePickerProps & import("react").RefAttributes<FormControlWithOverlayRef<HTMLSpanElement>>) => React.ReactElement | null;
+export declare const DateTimePicker: (props: DateTimePickerProps & import("react").RefAttributes<FormControlWithOverlayRef<HTMLSpanElement>>) => import("react").ReactElement | null;

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

@@ -50,6 +50,8 @@ var import_field_css = require("../../styles/field.sty.js");
 var import_DateTimeInput = require("../date-time-range-picker/DateTimeInput.js");
 var import_DateTimeRangePicker_css = require("../date-time-range-picker/DateTimeRangePicker.sty.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");
 var import_FormFieldMessageBaseItem = require("../forms-core/components/form-field-messages/FormFieldMessageBaseItem.js");
 var import_useDateTimeMessages = require("../forms-core/hooks/useDateTimeMessages.js");
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
@@ -211,6 +213,12 @@ const DateTimePicker = (0, import_react.forwardRef)((props, forwardedRef) => {
       dateInputRef.current.expressionInputRef.textContent = "";
     }
   }, [propValue]);
+  const { onMouseDown, onKeyDown } = (0, import_useSelectionInteractionHandlers.useSelectionInteractionHandlers)(
+    touchedContainerRef,
+    (0, import_react.useCallback)(() => {
+      (0, import_focusDateTimeInput.focusDateTimeInput)(null, dateInputRef);
+    }, [])
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_Flex.Flex,
     {
@@ -257,16 +265,14 @@ const DateTimePicker = (0, import_react.forwardRef)((props, forwardedRef) => {
                   ),
                   tabIndex: disabled ? void 0 : 0,
                   onBlur: onBlurTouched,
-                  onKeyDown: (e) => {
-                    if (e.target === touchedContainerRef.current) {
-                      (0, import_focusDateTimeInput.focusDateTimeInput)(null, dateInputRef);
-                    }
-                  },
+                  onMouseDown,
+                  onKeyDown,
                   onFocus: (e) => {
                     if (!rootRef.current?.contains(e.relatedTarget)) {
                       (0, import_focusDateTimeInput.focusDateTimeInput)(e, dateInputRef);
                     }
                   },
+                  onCopyCapture: import_selection_copy_helpers.onTimeframeCopyCapture,
                   children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_DateTimeInput.DateTimeInput,
                     {

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

@@ -48,6 +48,6 @@ export declare const dateTimePicker: import("@vanilla-extract/recipes").RuntimeF
         datetime: {};
     };
 }>;
-export declare const dateTimePickerSpinButtonGroup: string;
+export declare const spinButtonGroup: string;
 export declare const dateSelector: string;
 export {};

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

@@ -20,13 +20,13 @@ var DateTimePicker_css_exports = {};
 __export(DateTimePicker_css_exports, {
   dateSelector: () => dateSelector,
   dateTimePicker: () => dateTimePicker,
-  dateTimePickerSpinButtonGroup: () => dateTimePickerSpinButtonGroup
+  spinButtonGroup: () => spinButtonGroup
 });
 module.exports = __toCommonJS(DateTimePicker_css_exports);
 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 dateSelector = "_1i883gje-3-1-3";
-var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj6-3-1-3", variantClassNames: { readOnly: { true: "_1i883gj7-3-1-3" }, showError: { true: "_1i883gj8-3-1-3" }, disabled: { true: "_1i883gj9-3-1-3" }, type: { date: "_1i883gja-3-1-3", time: "_1i883gjb-3-1-3", datetime: "_1i883gjc-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
-var dateTimePickerSpinButtonGroup = "_1i883gjd-3-1-3 _da9a8v0-3-1-3 _da9a8v2-3-1-3 _da9a8v3-3-1-3 _da9a8vb-3-1-3";
+var dateSelector = "_1i883gje-3-2-1";
+var dateTimePicker = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1i883gj6-3-2-1", variantClassNames: { readOnly: { true: "_1i883gj7-3-2-1" }, showError: { true: "_1i883gj8-3-2-1" }, disabled: { true: "_1i883gj9-3-2-1" }, type: { date: "_1i883gja-3-2-1", time: "_1i883gjb-3-2-1", datetime: "_1i883gjc-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var spinButtonGroup = "_1i883gjd-3-2-1 _da9a8v0-3-2-1 _da9a8v2-3-2-1 _da9a8v3-3-2-1 _da9a8vb-3-2-1";

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

@@ -117,7 +117,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "year")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("year", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "yyyy"
   };
   const monthProps = {
     ...sharedProps,
@@ -134,7 +135,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
       if (value2 !== formerValue) {
         updatePart("month", value2?.toString() ?? "");
       }
-    }
+    },
+    "data-pattern": "MM"
   };
   const dayProps = {
     ...sharedProps,
@@ -146,7 +148,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "day")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("day", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "dd"
   };
   const hourProps = {
     ...sharedProps,
@@ -158,7 +161,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "hour")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("hour", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": parts.find((p) => p.type === "dayPeriod") ? "hh" : "HH"
   };
   const minuteProps = {
     ...sharedProps,
@@ -170,7 +174,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "minute")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("minute", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "mm"
   };
   const secondsProps = {
     ...sharedProps,
@@ -182,7 +187,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     value: parseInt(parts.find((p) => p.type === "second")?.value ?? "0"),
     onChange: (value2) => {
       updatePart("second", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "ss"
   };
   const fractionalSecondProps = {
     ...sharedProps,
@@ -196,7 +202,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
     ),
     onChange: (value2) => {
       updatePart("fractionalSecond", value2?.toString() ?? "");
-    }
+    },
+    "data-pattern": "SSS"
   };
   const dayPeriodProps = {
     ...sharedProps,
@@ -208,7 +215,8 @@ function useSpinButtons(isoDateTime, type, precision, isDisabled, isReadonly, ar
         return;
       }
       updatePart?.("dayPeriod", value2);
-    }
+    },
+    "data-pattern": "aa"
   };
   const { spinButtons, handlers } = (0, import_react2.useMemo)(() => {
     const handlers2 = /* @__PURE__ */ new Map();

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

@@ -1,3 +1,11 @@
 import { type RefObject, type FocusEvent as ReactFocusEvent, type MouseEvent as ReactMouseEvent } from 'react';
 import { type DateTimeInputRef } from '../../date-time-range-picker/types.js';
 export declare const focusDateTimeInput: (event: ReactFocusEvent | ReactMouseEvent | null, refFrom: RefObject<DateTimeInputRef | null>, refTo?: RefObject<DateTimeInputRef | null>) => void;
+/**
+ * Attempts to move the focus to the "hour" spin button of the "from" input.
+ * The hour spin button is only foucsable if the value is an absolute timeframe (ISO 8601)
+ * and not an expression. If focus is not possible, falls back to {@link focusDateTimeInput}.
+ * @param dateTimeFromRef - the ref of the "from" DateTimeInput component
+ * @internal
+ */
+export declare const focusTimeInput: (dateTimeFromRef: RefObject<DateTimeInputRef | null>) => void;

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

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var focusDateTimeInput_exports = {};
 __export(focusDateTimeInput_exports, {
-  focusDateTimeInput: () => focusDateTimeInput
+  focusDateTimeInput: () => focusDateTimeInput,
+  focusTimeInput: () => focusTimeInput
 });
 module.exports = __toCommonJS(focusDateTimeInput_exports);
 const focusDateTimeInput = (event, refFrom, refTo) => {
@@ -99,3 +100,11 @@ const focusDateTimeInput = (event, refFrom, refTo) => {
   }
   refFrom?.current?.expressionInputRef?.focus();
 };
+const focusTimeInput = (dateTimeFromRef) => {
+  const hourElement = dateTimeFromRef.current?.spinButtonHandlers.get("hour")?.element.current;
+  if (hourElement) {
+    hourElement.focus();
+    return;
+  }
+  focusDateTimeInput(null, dateTimeFromRef);
+};

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

@@ -1,8 +1,8 @@
-._1uftu980-3-1-3 {
+._1uftu980-3-2-1 {
   cursor: not-allowed;
   background: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._1uftu981-3-1-3 {
+._1uftu981-3-2-1 {
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   transition-property: color, background-color, transform;

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

@@ -2,4 +2,4 @@ import type { DateRangeSelectorProps, DateRangeSelectorRef } from './types.js';
 /**
  * Calendar widget trigger and overlay component.
  */
-export declare const DateRangeSelector: (props: DateRangeSelectorProps & import("react").RefAttributes<DateRangeSelectorRef>) => React.ReactElement | null;
+export declare const DateRangeSelector: (props: DateRangeSelectorProps & import("react").RefAttributes<DateRangeSelectorRef>) => import("react").ReactElement | null;

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

@@ -199,6 +199,7 @@ const DateRangeSelector = (0, import_react.forwardRef)((props, forwardedRef) =>
         disabled,
         "aria-disabled": ariaDisabledProp,
         variant: "emphasized",
+        "data-dt-name": "ShowCalendar",
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button.Prefix, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_strato_icons.CalendarIcon, {}) })
       }
     ),

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

@@ -23,5 +23,5 @@ __export(DateRangeSelector_css_exports, {
 });
 module.exports = __toCommonJS(DateRangeSelector_css_exports);
 var import_DateRangeSelector_css_ts_vanilla = require("./DateRangeSelector.css");
-var readOnly = "_1uftu980-3-1-3";
-var selector = "_1uftu981-3-1-3";
+var readOnly = "_1uftu980-3-2-1";
+var selector = "_1uftu981-3-2-1";

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

@@ -1,21 +1,21 @@
-._5u9o250-3-1-3 {
+._5u9o251-3-2-1 {
   outline: none;
 }
-._5u9o250-3-1-3:not(:focus-visible) {
+._5u9o251-3-2-1:not(:focus-visible) {
   caret-color: transparent;
 }
-._5u9o250-3-1-3:empty::before {
+._5u9o251-3-2-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-1-3 ._5u9o250-3-1-3:empty::before {
+._1vlwkc21-3-2-1 ._5u9o251-3-2-1:empty::before {
   color: var(--dt-colors-text-critical-default, #bb0731);
 }
-._1vlwkc22-3-1-3 ._5u9o250-3-1-3:empty::before {
+._1vlwkc22-3-2-1 ._5u9o251-3-2-1:empty::before {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
 }
-._1vlwkc22-3-1-3._1vlwkc21-3-1-3 ._5u9o250-3-1-3:empty::before {
+._1vlwkc22-3-2-1._1vlwkc21-3-2-1 ._5u9o251-3-2-1:empty::before {
   color: var(--dt-colors-text-critical-disabled, #595a7d80);
 }

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

@@ -2,4 +2,4 @@ import type { DateTimeInputProps, DateTimeInputRef } from './types.js';
 /** DateTimeRangePicker component
  * @internal
  */
-export declare const DateTimeInput: (props: DateTimeInputProps & import("react").RefAttributes<DateTimeInputRef>) => React.ReactElement | null;
+export declare const DateTimeInput: (props: DateTimeInputProps & import("react").RefAttributes<DateTimeInputRef>) => import("react").ReactElement | null;

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

@@ -36,14 +36,15 @@ var import_clsx = __toESM(require("clsx"));
 var import_react = require("react");
 var import_react_intl = require("react-intl");
 var import_DateTimeInput_css = require("./DateTimeInput.sty.js");
+var styles = __toESM(require("./DateTimeInput.sty.js"));
 var import_useDateTimeInput = require("./hooks/useDateTimeInput.js");
-var styles = __toESM(require("../../core/components/visually-hidden/VisuallyHidden.sty.js"));
+var visuallyHiddenStyles = __toESM(require("../../core/components/visually-hidden/VisuallyHidden.sty.js"));
 var import_VisuallyHidden = require("../../core/components/visually-hidden/VisuallyHidden.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useFormControlState = require("../../core/hooks/useFormControlState.js");
 var import_merge_props = require("../../core/utils/merge-props.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
-var import_DateTimePicker_css = require("../date-time-picker/DateTimePicker.sty.js");
+var dataTimePickerStyles = __toESM(require("../date-time-picker/DateTimePicker.sty.js"));
 var import_useFormFieldMessagesContext = require("../forms-core/hooks/useFormFieldMessagesContext.js");
 var import_useFormFieldValidation = require("../forms-core/hooks/useFormFieldValidation.js");
 var import_formfield_messages_state_reducer = require("../forms-core/state/formfield-messages-state-reducer.js");
@@ -118,7 +119,6 @@ const DateTimeInput = (0, import_react.forwardRef)(
       expressionOnFocusHandler,
       expressionOnBlurHandler,
       expressionOnKeyDownHandler,
-      onCopyCapture,
       onPaste,
       value,
       valueType,
@@ -129,7 +129,6 @@ const DateTimeInput = (0, import_react.forwardRef)(
       validateTimeValue
     } = (0, import_useDateTimeInput.useDateTimeInput)(props, expressionInputRef);
     const isExpressionInput = valueType === "expression";
-    const [isEditable, setIsEditable] = (0, import_react.useState)(true);
     const { dispatch: formMessageDispatch } = (0, import_useFormFieldMessagesContext.useFormFieldMessagesContext)();
     (0, import_react.useImperativeHandle)(
       forwardedRef,
@@ -176,12 +175,12 @@ const DateTimeInput = (0, import_react.forwardRef)(
       {
         ref: rootRef,
         as: "span",
-        className: consumerClassName,
+        className: (0, import_clsx.default)(styles.dateTimeInput, consumerClassName),
         style: consumerStyle,
         "data-testid": dataTestId,
-        onCopyCapture,
         onPaste,
         gap: 0,
+        "data-valuetype": valueType,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_VisuallyHidden.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "input",
@@ -211,7 +210,7 @@ const DateTimeInput = (0, import_react.forwardRef)(
             "span",
             {
               className: (0, import_clsx.default)(import_DateTimeInput_css.expressionCSS, {
-                [styles.visuallyHidden]: !isExpressionInput
+                [visuallyHiddenStyles.visuallyHidden]: !isExpressionInput
               }),
               role: "textbox",
               spellCheck: false,
@@ -219,17 +218,21 @@ const DateTimeInput = (0, import_react.forwardRef)(
               style: {
                 "--data-placeholder": `"${placeholder}"`
               },
+              "data-valuetype": "expression",
               ref: expressionInputRef,
-              contentEditable: !disabled && !readOnly && // contentEditable when focused and non-editable when blurred, allowing text selection.
-              (isEditable || value === null || value === void 0 || value?.value === ""),
+              contentEditable: !disabled && !readOnly ? true : void 0,
               onInput: expressionInputHandler,
               onFocus: (e) => {
-                setIsEditable(true);
+                if (e.target.hasAttribute("contenteditable") === false) {
+                  return;
+                }
                 expressionOnFocusHandler(e);
               },
               onBlur: (e) => {
+                if (e.target.hasAttribute("contenteditable") === false) {
+                  return;
+                }
                 expressionOnBlurHandler(e);
-                setIsEditable(false);
               },
               onKeyDown: expressionOnKeyDownHandler,
               onPaste: preventDefault,
@@ -241,8 +244,8 @@ const DateTimeInput = (0, import_react.forwardRef)(
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_SpinButtonGroup.SpinButtonGroup,
             {
-              className: (0, import_clsx.default)(import_DateTimePicker_css.dateTimePickerSpinButtonGroup, {
-                [styles.visuallyHidden]: isExpressionInput
+              className: (0, import_clsx.default)(dataTimePickerStyles.spinButtonGroup, {
+                [visuallyHiddenStyles.visuallyHidden]: isExpressionInput
               }),
               valueOverflow: true,
               children: spinButtons

package/forms/date-time-range-picker/DateTimeInput.sty.d.ts

@@ -1 +1,2 @@
+export declare const dateTimeInput: string;
 export declare const expressionCSS: string;

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

@@ -18,10 +18,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DateTimeInput_css_exports = {};
 __export(DateTimeInput_css_exports, {
+  dateTimeInput: () => dateTimeInput,
   expressionCSS: () => expressionCSS
 });
 module.exports = __toCommonJS(DateTimeInput_css_exports);
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_DateTimeRangePicker_css_ts_vanilla = require("./DateTimeRangePicker.css");
 var import_DateTimeInput_css_ts_vanilla = require("./DateTimeInput.css");
-var expressionCSS = "_5u9o250-3-1-3";
+var dateTimeInput = "_5u9o250-3-2-1";
+var expressionCSS = "_5u9o251-3-2-1";

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

@@ -1,4 +1,4 @@
-._1vlwkc20-3-1-3 {
+._1vlwkc20-3-2-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;
@@ -7,16 +7,19 @@
   border-radius: var(--dt-borders-radius-field-default, 6px);
   white-space: nowrap;
   overflow: hidden;
-  color: var(--_bx32h0-3-1-3);
-  background: var(--_bx32h3-3-1-3);
+  color: var(--_bx32h0-3-2-1);
+  background: var(--_bx32h3-3-2-1);
   flex: 1 1 auto;
 }
-._1vlwkc20-3-1-3._1vlwkc20-3-1-3 {
+._1vlwkc20-3-2-1._1vlwkc20-3-2-1 {
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1vlwkc22-3-1-3 {
+._1vlwkc22-3-2-1 {
   cursor: not-allowed;
 }
-._1vlwkc23-3-1-3 {
+._1vlwkc23-3-2-1 {
   cursor: not-allowed;
+}
+._1vlwkc24-3-2-1::selection {
+  background: transparent;
 }

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

@@ -3,4 +3,4 @@ import type { DateTimeRangePickerProps, DateTimeRangePickerRef } from './types.j
  * Component to comfortably enter a timeframe in localized format for expressions.
  * @internal
  */
-export declare const DateTimeRangePicker: (props: DateTimeRangePickerProps & import("react").RefAttributes<DateTimeRangePickerRef>) => React.ReactElement | null;
+export declare const DateTimeRangePicker: (props: DateTimeRangePickerProps & import("react").RefAttributes<DateTimeRangePickerRef>) => import("react").ReactElement | null;

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

@@ -38,9 +38,11 @@ var import_react_intl = require("react-intl");
 var import_SelectedOverCalendarContext = require("./contexts/SelectedOverCalendarContext.js");
 var import_DateRangeSelector = require("./DateRangeSelector.js");
 var import_DateTimeInput = require("./DateTimeInput.js");
-var import_DateTimeRangePicker_css = require("./DateTimeRangePicker.sty.js");
+var styles = __toESM(require("./DateTimeRangePicker.sty.js"));
 var import_helpers = require("./helpers.js");
 var import_useDateTimeRangePicker = require("./hooks/useDateTimeRangePicker.js");
+var import_selection_copy_helpers = require("./selection-copy-helpers.js");
+var import_useSelectionInteractionHandlers = require("./useSelectionInteractionHandlers.js");
 var import_useAriaLabelingProps = require("../../core/hooks/useAriaLabelingProps.js");
 var import_useFocusRing = require("../../core/styles/useFocusRing.js");
 var import_Flex = require("../../layouts/flex/Flex.js");
@@ -94,7 +96,6 @@ const DateTimeRangePickerBody = (0, import_react.forwardRef)((props, forwardedRe
     value,
     onChange,
     placeholder,
-    onCopyCapture,
     onPasteCapture,
     onBlurTouched,
     onError,
@@ -140,11 +141,6 @@ const DateTimeRangePickerBody = (0, import_react.forwardRef)((props, forwardedRe
     }),
     [formMessageDispatch, validate, value.from, value.to]
   );
-  const variantStyle = (0, import_DateTimeRangePicker_css.dateTimeRangeCSS)({
-    showError,
-    disabled: disabledOrAriaDisabled,
-    readOnly
-  });
   const { focusClassName } = (0, import_useFocusRing.useFocusRing)({
     focusWithin: true,
     isMinimal: false,
@@ -171,6 +167,12 @@ const DateTimeRangePickerBody = (0, import_react.forwardRef)((props, forwardedRe
     }),
     [showError]
   );
+  const { onMouseDown, onKeyDown } = (0, import_useSelectionInteractionHandlers.useSelectionInteractionHandlers)(
+    touchedContainerRef,
+    (0, import_react.useCallback)(() => {
+      (0, import_focusDateTimeInput.focusDateTimeInput)(null, dateTimeFromRef, dateTimeToRef);
+    }, [])
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Flex.Flex,
     {
@@ -201,17 +203,18 @@ const DateTimeRangePickerBody = (0, import_react.forwardRef)((props, forwardedRe
                 variant: "emphasized"
               }),
               focusClassName,
-              variantStyle
+              styles.dateTimeRangeCSS({
+                showError,
+                disabled: disabledOrAriaDisabled,
+                readOnly
+              })
             ),
-            onCopyCapture,
+            onCopyCapture: import_selection_copy_helpers.onTimeframeCopyCapture,
             onPasteCapture,
             onBlur: onBlurTouched,
             tabIndex: disabled ? void 0 : 0,
-            onKeyDown: (e) => {
-              if (e.target === touchedContainerRef.current) {
-                (0, import_focusDateTimeInput.focusDateTimeInput)(null, dateTimeFromRef, dateTimeToRef);
-              }
-            },
+            onMouseDown,
+            onKeyDown,
             onFocus: (e) => {
               if (!rootRef.current?.contains(e.relatedTarget)) {
                 (0, import_focusDateTimeInput.focusDateTimeInput)(e, dateTimeFromRef, dateTimeToRef);
@@ -246,7 +249,7 @@ const DateTimeRangePickerBody = (0, import_react.forwardRef)((props, forwardedRe
                   controlId: id
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u2192" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.timeframeSeparator, children: "\u2192" }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_DateTimeInput.DateTimeInput,
                 {
@@ -287,7 +290,9 @@ const DateTimeRangePickerBody = (0, import_react.forwardRef)((props, forwardedRe
               onChange.from(newFrom);
               onChange.to(selectedRange?.to ?? null);
               requestAnimationFrame(() => {
-                (0, import_focusDateTimeInput.focusDateTimeInput)(null, dateTimeFromRef);
+                requestAnimationFrame(() => {
+                  (0, import_focusDateTimeInput.focusTimeInput)(dateTimeFromRef);
+                });
               });
             },
             precision,

package/forms/date-time-range-picker/DateTimeRangePicker.sty.d.ts

@@ -13,3 +13,4 @@ export declare const dateTimeRangeCSS: import("@vanilla-extract/recipes").Runtim
         };
     };
 }>;
+export declare const timeframeSeparator: string;