@dynatrace/strato-components 3.1.3 → 3.2.1

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

@@ -4,19 +4,19 @@ import {
   forwardRef,
   useEffect,
   useImperativeHandle,
-  useRef,
-  useState
+  useRef
 } from "react";
 import { useIntl } from "react-intl";
 import { expressionCSS } from "./DateTimeInput.sty.js";
+import * as styles from "./DateTimeInput.sty.js";
 import { useDateTimeInput } from "./hooks/useDateTimeInput.js";
-import * as styles from "../../core/components/visually-hidden/VisuallyHidden.sty.js";
+import * as visuallyHiddenStyles from "../../core/components/visually-hidden/VisuallyHidden.sty.js";
 import { VisuallyHidden } from "../../core/components/visually-hidden/VisuallyHidden.js";
 import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useFormControlState } from "../../core/hooks/useFormControlState.js";
 import { mergeProps as _mergeProps } from "../../core/utils/merge-props.js";
 import { Flex } from "../../layouts/flex/Flex.js";
-import { dateTimePickerSpinButtonGroup } from "../date-time-picker/DateTimePicker.sty.js";
+import * as dataTimePickerStyles from "../date-time-picker/DateTimePicker.sty.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
@@ -91,7 +91,6 @@ const DateTimeInput = forwardRef(
       expressionOnFocusHandler,
       expressionOnBlurHandler,
       expressionOnKeyDownHandler,
-      onCopyCapture,
       onPaste,
       value,
       valueType,
@@ -102,7 +101,6 @@ const DateTimeInput = forwardRef(
       validateTimeValue
     } = useDateTimeInput(props, expressionInputRef);
     const isExpressionInput = valueType === "expression";
-    const [isEditable, setIsEditable] = useState(true);
     const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();
     useImperativeHandle(
       forwardedRef,
@@ -149,12 +147,12 @@ const DateTimeInput = forwardRef(
       {
         ref: rootRef,
         as: "span",
-        className: consumerClassName,
+        className: clsx(styles.dateTimeInput, consumerClassName),
         style: consumerStyle,
         "data-testid": dataTestId,
-        onCopyCapture,
         onPaste,
         gap: 0,
+        "data-valuetype": valueType,
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
@@ -184,7 +182,7 @@ const DateTimeInput = forwardRef(
             "span",
             {
               className: clsx(expressionCSS, {
-                [styles.visuallyHidden]: !isExpressionInput
+                [visuallyHiddenStyles.visuallyHidden]: !isExpressionInput
               }),
               role: "textbox",
               spellCheck: false,
@@ -192,17 +190,21 @@ const DateTimeInput = 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,
@@ -214,8 +216,8 @@ const DateTimeInput = forwardRef(
           /* @__PURE__ */ jsx(
             SpinButtonGroup,
             {
-              className: clsx(dateTimePickerSpinButtonGroup, {
-                [styles.visuallyHidden]: isExpressionInput
+              className: clsx(dataTimePickerStyles.spinButtonGroup, {
+                [visuallyHiddenStyles.visuallyHidden]: isExpressionInput
               }),
               valueOverflow: true,
               children: spinButtons

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n  DragEvent,\n  ClipboardEvent,\n  type CSSProperties,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { expressionCSS } from './DateTimeInput.sty.js';\nimport { useDateTimeInput } from './hooks/useDateTimeInput.js';\nimport type { DateTimeInputProps, DateTimeInputRef } from './types.js';\nimport * as styles from '../../core/components/visually-hidden/VisuallyHidden.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { dateTimePickerSpinButtonGroup } from '../date-time-picker/DateTimePicker.sty.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport { SpinButtonGroup } from '../spin-buttons/spin-button-group/SpinButtonGroup.js';\n\nfunction preventDefault(e: DragEvent | ClipboardEvent) {\n  e.preventDefault();\n}\n\n/** DateTimeRangePicker component\n * @internal\n */\nexport const DateTimeInput = forwardRef<DateTimeInputRef, DateTimeInputProps>(\n  (props, forwardedRef) => {\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const expressionInputRef = useRef<HTMLSpanElement>(null);\n    const intl = useIntl();\n    const {\n      ariaProps: ariaFormProps,\n      onChange: validationOnChange,\n      onBlur,\n      onInvalid,\n    } = useFormFieldValidation(inputRef);\n\n    const {\n      disabled,\n      readOnly,\n      placeholder: propPlaceholder,\n      className: consumerClassName,\n      style: consumerStyle,\n      name,\n      'data-testid': dataTestId,\n      'aria-disabled': ariaDisabledProp,\n      controlId,\n      required,\n      type = 'datetime',\n      controlState,\n    }: DateTimeInputProps = props;\n\n    const dateTimePlaceholder = intl.formatMessage({\n      defaultMessage: 'Date time',\n      id: '3BkbHvGCQ51HRbQ0',\n      description: 'Placeholder for the date time input',\n    });\n    const datePlaceholder = intl.formatMessage({\n      defaultMessage: 'Date',\n      id: 'iOw//K55EJMc00O4',\n      description: 'Placeholder for the date input',\n    });\n    const timePlaceholder = intl.formatMessage({\n      defaultMessage: 'Time',\n      id: 'QCPgO1L4QJB9hMGs',\n      description: 'Placeholder for the time input',\n    });\n\n    let placeholder = propPlaceholder;\n    if (!propPlaceholder) {\n      switch (type) {\n        case 'datetime':\n          placeholder = dateTimePlaceholder;\n          break;\n        case 'date':\n          placeholder = datePlaceholder;\n          break;\n        case 'time':\n          placeholder = timePlaceholder;\n          break;\n      }\n    }\n\n    // Backwards compatibility for controlState.\n    const [hasFormControlError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps } = useInputHint({\n      hint,\n      hasError: hasFormControlError,\n    });\n\n    const ariaLabelingProps = useAriaLabelingProps(props);\n\n    const {\n      expressionInputHandler,\n      expressionOnFocusHandler,\n      expressionOnBlurHandler,\n      expressionOnKeyDownHandler,\n      onCopyCapture,\n      onPaste,\n      value,\n      valueType,\n      spinButtons,\n      spinButtonHandlers,\n      inputValue,\n      focus,\n      validateTimeValue,\n    } = useDateTimeInput(props, expressionInputRef);\n\n    const isExpressionInput = valueType === 'expression';\n\n    const [isEditable, setIsEditable] = useState(true);\n\n    const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateTimeInputRef => ({\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        expressionInputRef: expressionInputRef.current,\n        spinButtonHandlers,\n        focus,\n        validate() {\n          validateTimeValue(\n            value,\n            expressionInputRef.current?.textContent ?? undefined,\n          );\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      }),\n      [\n        focus,\n        formMessageDispatch,\n        spinButtonHandlers,\n        validateTimeValue,\n        value,\n      ],\n    );\n\n    const expressionLabel = intl.formatMessage(\n      {\n        defaultMessage: '{ariaLabelPrefix} expression',\n        id: 'M6eNgatb2wf4fQ3I',\n        description: 'Textbox to enter a dql timeframe expression.',\n      },\n      {\n        ariaLabelPrefix: ariaLabelingProps['aria-label'],\n      },\n    );\n\n    useEffect(() => {\n      validationOnChange(); // needs to be in an effect here because the value update should happen before the validation, which validates the input ref value\n      // validationOnChange doesn't change and can be excluded\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputValue]);\n\n    return (\n      <Flex\n        ref={rootRef}\n        as=\"span\"\n        className={consumerClassName}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        onCopyCapture={onCopyCapture}\n        onPaste={onPaste}\n        gap={0}\n      >\n        <VisuallyHidden>\n          <input\n            id={controlId}\n            ref={inputRef}\n            name={name}\n            value={inputValue}\n            onChange={() => {\n              /** noop */\n            }}\n            onFocus={focus}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            disabled={disabled}\n            tabIndex={-1}\n            required={required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              // Backwards compatibility for controlState.\n              controlState ? inputProps : ariaFormProps,\n              ariaLabelingProps,\n            )}\n          />\n        </VisuallyHidden>\n        <span\n          className={clsx(expressionCSS, {\n            [styles.visuallyHidden]: !isExpressionInput,\n          })}\n          role=\"textbox\"\n          spellCheck={false}\n          tabIndex={disabled || !isExpressionInput ? -1 : 0}\n          style={\n            {\n              '--data-placeholder': `\"${placeholder}\"`,\n            } as CSSProperties\n          }\n          ref={expressionInputRef}\n          contentEditable={\n            !disabled &&\n            !readOnly &&\n            // contentEditable when focused and non-editable when blurred, allowing text selection.\n            (isEditable ||\n              value === null ||\n              value === undefined ||\n              value?.value === '')\n          }\n          onInput={expressionInputHandler}\n          onFocus={(e) => {\n            setIsEditable(true);\n            expressionOnFocusHandler(e);\n          }}\n          onBlur={(e) => {\n            expressionOnBlurHandler(e);\n            setIsEditable(false);\n          }}\n          onKeyDown={expressionOnKeyDownHandler}\n          onPaste={preventDefault}\n          onDragOver={preventDefault}\n          onDrop={preventDefault}\n          aria-label={expressionLabel}\n        />\n        <SpinButtonGroup\n          className={clsx(dateTimePickerSpinButtonGroup, {\n            [styles.visuallyHidden]: isExpressionInput,\n          })}\n          valueOverflow\n        >\n          {spinButtons}\n        </SpinButtonGroup>\n      </Flex>\n    );\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type DragEvent,\n  type ClipboardEvent,\n  type CSSProperties,\n  type FocusEvent as ReactFocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { expressionCSS } from './DateTimeInput.sty.js';\nimport * as styles from './DateTimeInput.sty.js';\nimport { useDateTimeInput } from './hooks/useDateTimeInput.js';\nimport type { DateTimeInputProps, DateTimeInputRef } from './types.js';\nimport * as visuallyHiddenStyles from '../../core/components/visually-hidden/VisuallyHidden.sty.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFormControlState } from '../../core/hooks/useFormControlState.js';\nimport { mergeProps as _mergeProps } from '../../core/utils/merge-props.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport * as dataTimePickerStyles from '../date-time-picker/DateTimePicker.sty.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport { useInputHint } from '../hooks/useInputHint.js';\nimport { SpinButtonGroup } from '../spin-buttons/spin-button-group/SpinButtonGroup.js';\n\nfunction preventDefault(e: DragEvent | ClipboardEvent) {\n  e.preventDefault();\n}\n\n/** DateTimeRangePicker component\n * @internal\n */\nexport const DateTimeInput = forwardRef<DateTimeInputRef, DateTimeInputProps>(\n  (props, forwardedRef) => {\n    const rootRef = useRef<HTMLSpanElement>(null);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const expressionInputRef = useRef<HTMLSpanElement>(null);\n    const intl = useIntl();\n    const {\n      ariaProps: ariaFormProps,\n      onChange: validationOnChange,\n      onBlur,\n      onInvalid,\n    } = useFormFieldValidation(inputRef);\n\n    const {\n      disabled,\n      readOnly,\n      placeholder: propPlaceholder,\n      className: consumerClassName,\n      style: consumerStyle,\n      name,\n      'data-testid': dataTestId,\n      'aria-disabled': ariaDisabledProp,\n      controlId,\n      required,\n      type = 'datetime',\n      controlState,\n    }: DateTimeInputProps = props;\n\n    const dateTimePlaceholder = intl.formatMessage({\n      defaultMessage: 'Date time',\n      id: '3BkbHvGCQ51HRbQ0',\n      description: 'Placeholder for the date time input',\n    });\n    const datePlaceholder = intl.formatMessage({\n      defaultMessage: 'Date',\n      id: 'iOw//K55EJMc00O4',\n      description: 'Placeholder for the date input',\n    });\n    const timePlaceholder = intl.formatMessage({\n      defaultMessage: 'Time',\n      id: 'QCPgO1L4QJB9hMGs',\n      description: 'Placeholder for the time input',\n    });\n\n    let placeholder = propPlaceholder;\n    if (!propPlaceholder) {\n      switch (type) {\n        case 'datetime':\n          placeholder = dateTimePlaceholder;\n          break;\n        case 'date':\n          placeholder = datePlaceholder;\n          break;\n        case 'time':\n          placeholder = timePlaceholder;\n          break;\n      }\n    }\n\n    // Backwards compatibility for controlState.\n    const [hasFormControlError, hint] = useFormControlState(controlState);\n    // _useInputHint will be replaced with new validation concept. APPDEV-8298\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    const { inputProps } = useInputHint({\n      hint,\n      hasError: hasFormControlError,\n    });\n\n    const ariaLabelingProps = useAriaLabelingProps(props);\n\n    const {\n      expressionInputHandler,\n      expressionOnFocusHandler,\n      expressionOnBlurHandler,\n      expressionOnKeyDownHandler,\n      onPaste,\n      value,\n      valueType,\n      spinButtons,\n      spinButtonHandlers,\n      inputValue,\n      focus,\n      validateTimeValue,\n    } = useDateTimeInput(props, expressionInputRef);\n\n    const isExpressionInput = valueType === 'expression';\n\n    const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n    useImperativeHandle(\n      forwardedRef,\n      (): DateTimeInputRef => ({\n        element: rootRef.current,\n        inputRef: inputRef.current,\n        expressionInputRef: expressionInputRef.current,\n        spinButtonHandlers,\n        focus,\n        validate() {\n          validateTimeValue(\n            value,\n            expressionInputRef.current?.textContent ?? undefined,\n          );\n          formMessageDispatch?.({\n            type: FormFieldMessagesAction.SETISTOUCHED,\n            payload: { isTouched: true },\n          });\n        },\n      }),\n      [\n        focus,\n        formMessageDispatch,\n        spinButtonHandlers,\n        validateTimeValue,\n        value,\n      ],\n    );\n\n    const expressionLabel = intl.formatMessage(\n      {\n        defaultMessage: '{ariaLabelPrefix} expression',\n        id: 'M6eNgatb2wf4fQ3I',\n        description: 'Textbox to enter a dql timeframe expression.',\n      },\n      {\n        ariaLabelPrefix: ariaLabelingProps['aria-label'],\n      },\n    );\n\n    useEffect(() => {\n      validationOnChange(); // needs to be in an effect here because the value update should happen before the validation, which validates the input ref value\n      // validationOnChange doesn't change and can be excluded\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [inputValue]);\n\n    return (\n      <Flex\n        ref={rootRef}\n        as=\"span\"\n        className={clsx(styles.dateTimeInput, consumerClassName)}\n        style={consumerStyle}\n        data-testid={dataTestId}\n        onPaste={onPaste}\n        gap={0}\n        data-valuetype={valueType}\n      >\n        <VisuallyHidden>\n          <input\n            id={controlId}\n            ref={inputRef}\n            name={name}\n            value={inputValue}\n            onChange={() => {\n              /** noop */\n            }}\n            onFocus={focus}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            disabled={disabled}\n            tabIndex={-1}\n            required={required}\n            readOnly={readOnly}\n            aria-disabled={ariaDisabledProp}\n            {..._mergeProps(\n              // Backwards compatibility for controlState.\n              controlState ? inputProps : ariaFormProps,\n              ariaLabelingProps,\n            )}\n          />\n        </VisuallyHidden>\n\n        <span\n          className={clsx(expressionCSS, {\n            [visuallyHiddenStyles.visuallyHidden]: !isExpressionInput,\n          })}\n          role=\"textbox\"\n          spellCheck={false}\n          tabIndex={disabled || !isExpressionInput ? -1 : 0}\n          style={\n            {\n              '--data-placeholder': `\"${placeholder}\"`,\n            } as CSSProperties\n          }\n          data-valuetype=\"expression\"\n          ref={expressionInputRef}\n          contentEditable={!disabled && !readOnly ? true : undefined}\n          onInput={expressionInputHandler}\n          onFocus={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnFocusHandler(e);\n          }}\n          onBlur={(e: ReactFocusEvent<HTMLSpanElement>) => {\n            if (e.target.hasAttribute('contenteditable') === false) {\n              return;\n            }\n            expressionOnBlurHandler(e);\n          }}\n          onKeyDown={expressionOnKeyDownHandler}\n          onPaste={preventDefault}\n          onDragOver={preventDefault}\n          onDrop={preventDefault}\n          aria-label={expressionLabel}\n        />\n        <SpinButtonGroup\n          className={clsx(dataTimePickerStyles.spinButtonGroup, {\n            [visuallyHiddenStyles.visuallyHidden]: isExpressionInput,\n          })}\n          valueOverflow\n        >\n          {spinButtons}\n        </SpinButtonGroup>\n      </Flex>\n    );\n  },\n);\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,8 +1,10 @@
 import "../../styles/field.css";
 import "./DateTimeRangePicker.css";
 import "./DateTimeInput.css";
-var expressionCSS = "_5u9o250-3-1-3";
+var dateTimeInput = "_5u9o250-3-2-1";
+var expressionCSS = "_5u9o251-3-2-1";
 export {
+  dateTimeInput,
   expressionCSS
 };
 //# sourceMappingURL=DateTimeInput.sty.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeInput.css.ts"],
-  "sourcesContent": ["import '../../styles/field.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var expressionCSS = '_5u9o250-3-1-3';"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;",
+  "sourcesContent": ["import '../../styles/field.css';\nimport './DateTimeRangePicker.css';\nimport './DateTimeInput.css';\nexport var dateTimeInput = '_5u9o250-3-2-1';\nexport var expressionCSS = '_5u9o251-3-2-1';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,gBAAgB;AACpB,IAAI,gBAAgB;",
   "names": []
 }

package/esm/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/esm/forms/date-time-range-picker/DateTimeRangePicker.js

@@ -6,16 +6,19 @@ import {
   useRef,
   useState,
   useContext,
-  useMemo
+  useMemo,
+  useCallback
 } from "react";
 import { useIntl } from "react-intl";
 import { SelectedOverCalendarContext } from "./contexts/SelectedOverCalendarContext.js";
 import { DateRangeSelector } from "./DateRangeSelector.js";
 import { DateTimeInput } from "./DateTimeInput.js";
-import { dateTimeRangeCSS } from "./DateTimeRangePicker.sty.js";
+import * as styles from "./DateTimeRangePicker.sty.js";
 import { removePrecisionFromTimeValue } from "./helpers.js";
 import { useDateTimeRangePicker } from "./hooks/useDateTimeRangePicker.js";
-import { useAriaLabelingProps as _useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
+import { onTimeframeCopyCapture } from "./selection-copy-helpers.js";
+import { useSelectionInteractionHandlers } from "./useSelectionInteractionHandlers.js";
+import { useAriaLabelingProps } from "../../core/hooks/useAriaLabelingProps.js";
 import { useFocusRing } from "../../core/styles/useFocusRing.js";
 import { Flex } from "../../layouts/flex/Flex.js";
 import { inputGroupClassName } from "../../layouts/input-group/InputGroup.sty.js";
@@ -23,7 +26,10 @@ import { InputGroup } from "../../layouts/input-group/InputGroup.js";
 import { fieldColors as fieldColorsCSS } from "../../styles/field.sty.js";
 import { textStyle as textStyleCSS } from "../../styles/textStyle.sty.js";
 import { dateTimePicker } from "../date-time-picker/DateTimePicker.sty.js";
-import { focusDateTimeInput } from "../date-time-picker/utils/focusDateTimeInput.js";
+import {
+  focusDateTimeInput,
+  focusTimeInput
+} from "../date-time-picker/utils/focusDateTimeInput.js";
 import { FormFieldMessageContext } from "../forms-core/contexts/FormFieldMessageContext.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useSyncedFormControlProps } from "../forms-core/hooks/useSyncedFormControlProps.js";
@@ -54,7 +60,7 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
     placeholder: placeholderProp
   } = props;
   const COMPONENT_NAME = "DateTimeRangePicker";
-  const ariaProps = _useAriaLabelingProps(props);
+  const ariaProps = useAriaLabelingProps(props);
   const rootRef = useRef(null);
   const touchedContainerRef = useRef(null);
   const dateTimeFromRef = useRef(null);
@@ -71,7 +77,6 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
     value,
     onChange,
     placeholder,
-    onCopyCapture,
     onPasteCapture,
     onBlurTouched,
     onError,
@@ -117,11 +122,6 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
     }),
     [formMessageDispatch, validate, value.from, value.to]
   );
-  const variantStyle = dateTimeRangeCSS({
-    showError,
-    disabled: disabledOrAriaDisabled,
-    readOnly
-  });
   const { focusClassName } = useFocusRing({
     focusWithin: true,
     isMinimal: false,
@@ -148,6 +148,12 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
     }),
     [showError]
   );
+  const { onMouseDown, onKeyDown } = useSelectionInteractionHandlers(
+    touchedContainerRef,
+    useCallback(() => {
+      focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);
+    }, [])
+  );
   return /* @__PURE__ */ jsx(
     Flex,
     {
@@ -178,17 +184,18 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
                 variant: "emphasized"
               }),
               focusClassName,
-              variantStyle
+              styles.dateTimeRangeCSS({
+                showError,
+                disabled: disabledOrAriaDisabled,
+                readOnly
+              })
             ),
-            onCopyCapture,
+            onCopyCapture: onTimeframeCopyCapture,
             onPasteCapture,
             onBlur: onBlurTouched,
             tabIndex: disabled ? void 0 : 0,
-            onKeyDown: (e) => {
-              if (e.target === touchedContainerRef.current) {
-                focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);
-              }
-            },
+            onMouseDown,
+            onKeyDown,
             onFocus: (e) => {
               if (!rootRef.current?.contains(e.relatedTarget)) {
                 focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);
@@ -223,7 +230,7 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
                   controlId: id
                 }
               ),
-              /* @__PURE__ */ jsx("span", { children: "\u2192" }),
+              /* @__PURE__ */ jsx("span", { className: styles.timeframeSeparator, children: "\u2192" }),
               /* @__PURE__ */ jsx(
                 DateTimeInput,
                 {
@@ -264,7 +271,9 @@ const DateTimeRangePickerBody = forwardRef((props, forwardedRef) => {
               onChange.from(newFrom);
               onChange.to(selectedRange?.to ?? null);
               requestAnimationFrame(() => {
-                focusDateTimeInput(null, dateTimeFromRef);
+                requestAnimationFrame(() => {
+                  focusTimeInput(dateTimeFromRef);
+                });
               });
             },
             precision,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  useState,\n  useContext,\n  useMemo,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type FocusEvent,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { SelectedOverCalendarContext } from './contexts/SelectedOverCalendarContext.js';\nimport { DateRangeSelector } from './DateRangeSelector.js';\nimport { DateTimeInput } from './DateTimeInput.js';\nimport { dateTimeRangeCSS } from './DateTimeRangePicker.sty.js';\nimport { removePrecisionFromTimeValue } from './helpers.js';\nimport { useDateTimeRangePicker } from './hooks/useDateTimeRangePicker.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { DateRangeSelectorRef, DateTimeInputRef } from './types.js';\nimport { useAriaLabelingProps as _useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { dateTimePicker } from '../date-time-picker/DateTimePicker.sty.js';\nimport { focusDateTimeInput } from '../date-time-picker/utils/focusDateTimeInput.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\n\nconst DateTimeRangePickerBody = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    precision = 'minutes',\n    disabled: propDisabled,\n    readOnly = false,\n    name,\n    style: consumerStyle,\n    className: consumerClassName,\n    min = GRAIL_MIN_DATE,\n    max = GRAIL_MAX_DATE,\n    required: propRequired,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    defaultValue,\n    value: propValue,\n    onChange: propOnChange,\n    placeholder: placeholderProp,\n  }: DateTimeRangePickerProps = props;\n\n  const COMPONENT_NAME = 'DateTimeRangePicker';\n\n  const ariaProps = _useAriaLabelingProps(props);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n  const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n  const dateTimeToRef = useRef<DateTimeInputRef>(null);\n  const dateRangeSelectorRef = useRef<DateRangeSelectorRef>(null);\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const {\n    value,\n    onChange,\n    placeholder,\n    onCopyCapture,\n    onPasteCapture,\n    onBlurTouched,\n    onError,\n    errorTo,\n    errorFrom,\n    validate,\n  } = useDateTimeRangePicker({\n    value: propValue,\n    defaultValue,\n    placeholder: placeholderProp,\n    readOnly,\n    min,\n    max,\n    precision,\n    onChange: propOnChange,\n    touchedContainerRef,\n    validationInputRef: dateTimeFromRef,\n  });\n  const intl = useIntl();\n\n  const {\n    state: { showError },\n    dispatch: formMessageDispatch,\n  } = useFormFieldMessagesContext();\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): DateTimeRangePickerRef => ({\n      element: rootRef.current,\n      inputRef: {\n        from: dateTimeFromRef.current?.inputRef,\n        to: dateTimeToRef.current?.inputRef,\n      },\n      open: () => dateRangeSelectorRef.current?.open(),\n      close: () => dateRangeSelectorRef.current?.close(),\n      focus: () => dateTimeFromRef.current?.focus?.(),\n      getCurrentValue: () => ({ from: value.from, to: value.to }),\n      validate() {\n        validate(value.from, value.to, true);\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formMessageDispatch, validate, value.from, value.to],\n  );\n\n  const variantStyle = dateTimeRangeCSS({\n    showError,\n    disabled: disabledOrAriaDisabled,\n    readOnly: readOnly,\n  });\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    isMinimal: false,\n    disabled,\n    color: showError ? 'critical' : 'neutral',\n  });\n\n  const dateTimeFromLabel = intl.formatMessage({\n    defaultMessage: 'DateTime from',\n    id: 'fMy6q/KKOqbvCA3H',\n    description:\n      'Textbox to enter a relative or absolute timeframe from value.',\n  });\n\n  const dateTimeToLabel = intl.formatMessage({\n    defaultMessage: 'DateTime to',\n    id: 'uuhhc3nEZptwtV2E',\n    description: 'Textbox to enter a relative or absolute timeframe to value.',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        showError,\n      },\n    }),\n    [showError],\n  );\n\n  return (\n    <Flex\n      ref={rootRef}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      style={consumerStyle}\n      className={consumerClassName}\n      {...ariaProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n        <InputGroup style={{ gridTemplateColumns: '1fr auto' }}>\n          <Flex\n            ref={touchedContainerRef}\n            className={clsx(\n              inputGroupClassName,\n              dateTimePicker({\n                readOnly,\n                showError,\n                disabled,\n                type: 'datetime',\n              }),\n              textStyleCSS({ textStyle: 'base' }),\n              fieldColorsCSS({\n                color: showError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'emphasized',\n              }),\n              focusClassName,\n              variantStyle,\n            )}\n            onCopyCapture={onCopyCapture}\n            onPasteCapture={onPasteCapture}\n            onBlur={onBlurTouched}\n            tabIndex={disabled ? undefined : 0}\n            onKeyDown={(e: ReactKeyboardEvent) => {\n              // Forward the focus when a key is pressed in this element.\n              if (e.target === touchedContainerRef.current) {\n                focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n            onFocus={(e: FocusEvent) => {\n              // Forward the focus only if it is coming from outside this component.\n              // Focus the first spin button with textContent; otherwise, focus the input.\n              if (!rootRef.current?.contains(e.relatedTarget)) {\n                focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n          >\n            <DateTimeInput\n              ref={dateTimeFromRef}\n              precision={precision}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder.from}\n              name={name !== undefined ? `${name}-from` : undefined}\n              value={value.from}\n              onChange={(value) => {\n                // FIXME: All selectors using the spin buttons should support strings in the\n                // onChange to inform the user that the current value is invalid, but not empty\n                if (typeof value !== 'string') {\n                  // controlled changes should remove the precision of the value\n                  const precisionRemovedValue = removePrecisionFromTimeValue(\n                    value,\n                    precision,\n                  );\n                  onChange.from(precisionRemovedValue);\n                }\n              }}\n              aria-label={dateTimeFromLabel}\n              aria-disabled={ariaDisabled}\n              min={min}\n              max={max}\n              required={required}\n              onError={onError.from}\n              controlId={id}\n            />\n\n            <span>\u2192</span>\n            <DateTimeInput\n              ref={dateTimeToRef}\n              precision={precision}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder.to}\n              name={name !== undefined ? `${name}-to` : undefined}\n              value={value.to}\n              onChange={(value) => {\n                // FIXME: All selectors using the spin buttons should support strings in the\n                // onChange to inform the user that the current value is invalid, but not empty\n                if (typeof value !== 'string') {\n                  // controlled changes should remove the precision of the value\n                  const precisionRemovedValue = removePrecisionFromTimeValue(\n                    value,\n                    precision,\n                  );\n                  onChange.to(precisionRemovedValue);\n                }\n              }}\n              aria-label={dateTimeToLabel}\n              aria-disabled={ariaDisabled}\n              min={min}\n              max={max}\n              required={required}\n              onError={onError.to}\n            />\n          </Flex>\n          <DateRangeSelector\n            ref={dateRangeSelectorRef}\n            value={value}\n            onChange={(selectedRange) => {\n              const newFrom = selectedRange?.from ?? null;\n\n              onChange.from(newFrom);\n              onChange.to(selectedRange?.to ?? null);\n              requestAnimationFrame(() => {\n                focusDateTimeInput(null, dateTimeFromRef);\n              });\n            }}\n            precision={precision}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            errorFrom={errorFrom}\n            errorTo={errorTo}\n            error={showError}\n            min={min}\n            max={max}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\n});\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>((props, forwardedRef) => {\n  const { selectedOverCalendar, setSelectedOverCalendar } = useContext(\n    SelectedOverCalendarContext,\n  );\n\n  const [fallbackSelectedOverCalendar, setFallbackSelectedOverCalendar] =\n    useState<boolean | undefined>(false);\n\n  const [selectedOverCalendarFlag, setSelectedOverCalendarFlag] = useState<\n    boolean | undefined\n  >(false);\n\n  if (\n    selectedOverCalendar !== undefined ||\n    setSelectedOverCalendar !== undefined\n  ) {\n    return <DateTimeRangePickerBody {...props} ref={forwardedRef} />;\n  }\n\n  return (\n    <SelectedOverCalendarContext.Provider\n      value={{\n        selectedOverCalendar: fallbackSelectedOverCalendar,\n        setSelectedOverCalendar: setFallbackSelectedOverCalendar,\n        calendarOnChangeFlag: selectedOverCalendarFlag,\n        setCalendarOnChangeFlag: setSelectedOverCalendarFlag,\n      }}\n    >\n      <DateTimeRangePickerBody {...props} ref={forwardedRef} />\n    </SelectedOverCalendarContext.Provider>\n  );\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useImperativeHandle,\n  useRef,\n  useState,\n  useContext,\n  useMemo,\n  type FocusEvent,\n  useCallback,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { SelectedOverCalendarContext } from './contexts/SelectedOverCalendarContext.js';\nimport { DateRangeSelector } from './DateRangeSelector.js';\nimport { DateTimeInput } from './DateTimeInput.js';\nimport * as styles from './DateTimeRangePicker.sty.js';\nimport { removePrecisionFromTimeValue } from './helpers.js';\nimport { useDateTimeRangePicker } from './hooks/useDateTimeRangePicker.js';\nimport { onTimeframeCopyCapture } from './selection-copy-helpers.js';\nimport type {\n  DateTimeRangePickerProps,\n  DateTimeRangePickerRef,\n} from './types.js';\nimport { DateRangeSelectorRef, DateTimeInputRef } from './types.js';\nimport { useSelectionInteractionHandlers } from './useSelectionInteractionHandlers.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useFocusRing } from '../../core/styles/useFocusRing.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { inputGroupClassName } from '../../layouts/input-group/InputGroup.sty.js';\nimport { InputGroup } from '../../layouts/input-group/InputGroup.js';\nimport { fieldColors as fieldColorsCSS } from '../../styles/field.sty.js';\nimport { textStyle as textStyleCSS } from '../../styles/textStyle.sty.js';\nimport { dateTimePicker } from '../date-time-picker/DateTimePicker.sty.js';\nimport {\n  focusDateTimeInput,\n  focusTimeInput,\n} from '../date-time-picker/utils/focusDateTimeInput.js';\nimport { FormFieldMessageContext } from '../forms-core/contexts/FormFieldMessageContext.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useSyncedFormControlProps } from '../forms-core/hooks/useSyncedFormControlProps.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport {\n  GRAIL_MAX_DATE,\n  GRAIL_MIN_DATE,\n} from '../forms-core/time/date-time.js';\n\nconst DateTimeRangePickerBody = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>((props, forwardedRef) => {\n  const {\n    id: propId,\n    precision = 'minutes',\n    disabled: propDisabled,\n    readOnly = false,\n    name,\n    style: consumerStyle,\n    className: consumerClassName,\n    min = GRAIL_MIN_DATE,\n    max = GRAIL_MAX_DATE,\n    required: propRequired,\n    'data-testid': dataTestId,\n    'data-dtrum-mask': dataDtrumMask,\n    'data-dtrum-allow': dataDtrumAllow,\n    'aria-disabled': ariaDisabledProp,\n    defaultValue,\n    value: propValue,\n    onChange: propOnChange,\n    placeholder: placeholderProp,\n  }: DateTimeRangePickerProps = props;\n\n  const COMPONENT_NAME = 'DateTimeRangePicker';\n\n  const ariaProps = useAriaLabelingProps(props);\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const touchedContainerRef = useRef<HTMLDivElement>(null);\n  const dateTimeFromRef = useRef<DateTimeInputRef>(null);\n  const dateTimeToRef = useRef<DateTimeInputRef>(null);\n  const dateRangeSelectorRef = useRef<DateRangeSelectorRef>(null);\n\n  const { disabled, required, id, ariaDisabled } = useSyncedFormControlProps({\n    propDisabled,\n    propRequired,\n    propId,\n    propAriaDisabled: ariaDisabledProp,\n  });\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const {\n    value,\n    onChange,\n    placeholder,\n    onPasteCapture,\n    onBlurTouched,\n    onError,\n    errorTo,\n    errorFrom,\n    validate,\n  } = useDateTimeRangePicker({\n    value: propValue,\n    defaultValue,\n    placeholder: placeholderProp,\n    readOnly,\n    min,\n    max,\n    precision,\n    onChange: propOnChange,\n    touchedContainerRef,\n    validationInputRef: dateTimeFromRef,\n  });\n  const intl = useIntl();\n\n  const {\n    state: { showError },\n    dispatch: formMessageDispatch,\n  } = useFormFieldMessagesContext();\n\n  // Provide root and input element reference and functions to interact with the calendar overlay\n  useImperativeHandle(\n    forwardedRef,\n    (): DateTimeRangePickerRef => ({\n      element: rootRef.current,\n      inputRef: {\n        from: dateTimeFromRef.current?.inputRef,\n        to: dateTimeToRef.current?.inputRef,\n      },\n      open: () => dateRangeSelectorRef.current?.open(),\n      close: () => dateRangeSelectorRef.current?.close(),\n      focus: () => dateTimeFromRef.current?.focus?.(),\n      getCurrentValue: () => ({ from: value.from, to: value.to }),\n      validate() {\n        validate(value.from, value.to, true);\n        formMessageDispatch?.({\n          type: FormFieldMessagesAction.SETISTOUCHED,\n          payload: { isTouched: true },\n        });\n      },\n    }),\n    [formMessageDispatch, validate, value.from, value.to],\n  );\n\n  const { focusClassName } = useFocusRing({\n    focusWithin: true,\n    isMinimal: false,\n    disabled,\n    color: showError ? 'critical' : 'neutral',\n  });\n\n  const dateTimeFromLabel = intl.formatMessage({\n    defaultMessage: 'DateTime from',\n    id: 'fMy6q/KKOqbvCA3H',\n    description:\n      'Textbox to enter a relative or absolute timeframe from value.',\n  });\n\n  const dateTimeToLabel = intl.formatMessage({\n    defaultMessage: 'DateTime to',\n    id: 'uuhhc3nEZptwtV2E',\n    description: 'Textbox to enter a relative or absolute timeframe to value.',\n  });\n  const formFieldMessageContextValue = useMemo(\n    () => ({\n      state: {\n        customMessages: [],\n        formControlMessages: [],\n        showError,\n      },\n    }),\n    [showError],\n  );\n\n  const { onMouseDown, onKeyDown } = useSelectionInteractionHandlers(\n    touchedContainerRef,\n    useCallback(() => {\n      focusDateTimeInput(null, dateTimeFromRef, dateTimeToRef);\n    }, []),\n  );\n\n  return (\n    <Flex\n      ref={rootRef}\n      flexDirection=\"column\"\n      data-testid={dataTestId}\n      style={consumerStyle}\n      className={consumerClassName}\n      {...ariaProps}\n      data-dt-component={COMPONENT_NAME}\n    >\n      <FormFieldMessageContext.Provider value={formFieldMessageContextValue}>\n        <InputGroup style={{ gridTemplateColumns: '1fr auto' }}>\n          <Flex\n            ref={touchedContainerRef}\n            className={clsx(\n              inputGroupClassName,\n              dateTimePicker({\n                readOnly,\n                showError,\n                disabled,\n                type: 'datetime',\n              }),\n              textStyleCSS({ textStyle: 'base' }),\n              fieldColorsCSS({\n                color: showError ? 'critical' : 'neutral',\n                disabled: disabledOrAriaDisabled,\n                variant: 'emphasized',\n              }),\n              focusClassName,\n              styles.dateTimeRangeCSS({\n                showError,\n                disabled: disabledOrAriaDisabled,\n                readOnly: readOnly,\n              }),\n            )}\n            onCopyCapture={onTimeframeCopyCapture}\n            onPasteCapture={onPasteCapture}\n            onBlur={onBlurTouched}\n            tabIndex={disabled ? undefined : 0}\n            onMouseDown={onMouseDown}\n            onKeyDown={onKeyDown}\n            onFocus={(e: FocusEvent) => {\n              // Forward the focus only if it is coming from outside this component.\n              // Focus the first spin button with textContent; otherwise, focus the input.\n              if (!rootRef.current?.contains(e.relatedTarget)) {\n                focusDateTimeInput(e, dateTimeFromRef, dateTimeToRef);\n              }\n            }}\n          >\n            <DateTimeInput\n              ref={dateTimeFromRef}\n              precision={precision}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder.from}\n              name={name !== undefined ? `${name}-from` : undefined}\n              value={value.from}\n              onChange={(value) => {\n                // FIXME: All selectors using the spin buttons should support strings in the\n                // onChange to inform the user that the current value is invalid, but not empty\n                if (typeof value !== 'string') {\n                  // controlled changes should remove the precision of the value\n                  const precisionRemovedValue = removePrecisionFromTimeValue(\n                    value,\n                    precision,\n                  );\n                  onChange.from(precisionRemovedValue);\n                }\n              }}\n              aria-label={dateTimeFromLabel}\n              aria-disabled={ariaDisabled}\n              min={min}\n              max={max}\n              required={required}\n              onError={onError.from}\n              controlId={id}\n            />\n\n            <span className={styles.timeframeSeparator}>\u2192</span>\n            <DateTimeInput\n              ref={dateTimeToRef}\n              precision={precision}\n              disabled={disabled}\n              readOnly={readOnly}\n              placeholder={placeholder.to}\n              name={name !== undefined ? `${name}-to` : undefined}\n              value={value.to}\n              onChange={(value) => {\n                // FIXME: All selectors using the spin buttons should support strings in the\n                // onChange to inform the user that the current value is invalid, but not empty\n                if (typeof value !== 'string') {\n                  // controlled changes should remove the precision of the value\n                  const precisionRemovedValue = removePrecisionFromTimeValue(\n                    value,\n                    precision,\n                  );\n                  onChange.to(precisionRemovedValue);\n                }\n              }}\n              aria-label={dateTimeToLabel}\n              aria-disabled={ariaDisabled}\n              min={min}\n              max={max}\n              required={required}\n              onError={onError.to}\n            />\n          </Flex>\n          <DateRangeSelector\n            ref={dateRangeSelectorRef}\n            value={value}\n            onChange={(selectedRange) => {\n              const newFrom = selectedRange?.from ?? null;\n              onChange.from(newFrom);\n              onChange.to(selectedRange?.to ?? null);\n\n              // After selecting a date range from the calendar, move the focus to the \"hour\" spin button of the \"from\" input.\n              // Since the spin button only receives a `tabIndex` in \"iso8601\" mode (disabled for expressions), we need to wait\n              // for two animation frames to ensure that updates are applied and rendered and the spin button is focusable.\n              requestAnimationFrame(() => {\n                requestAnimationFrame(() => {\n                  focusTimeInput(dateTimeFromRef);\n                });\n              });\n            }}\n            precision={precision}\n            disabled={disabled}\n            aria-disabled={ariaDisabled}\n            readOnly={readOnly}\n            errorFrom={errorFrom}\n            errorTo={errorTo}\n            error={showError}\n            min={min}\n            max={max}\n            data-dtrum-mask={dataDtrumMask}\n            data-dtrum-allow={dataDtrumAllow}\n          />\n        </InputGroup>\n      </FormFieldMessageContext.Provider>\n    </Flex>\n  );\n});\n\n/**\n * Component to comfortably enter a timeframe in localized format for expressions.\n * @internal\n */\nexport const DateTimeRangePicker = forwardRef<\n  DateTimeRangePickerRef,\n  DateTimeRangePickerProps\n>((props, forwardedRef) => {\n  const { selectedOverCalendar, setSelectedOverCalendar } = useContext(\n    SelectedOverCalendarContext,\n  );\n\n  const [fallbackSelectedOverCalendar, setFallbackSelectedOverCalendar] =\n    useState<boolean | undefined>(false);\n\n  const [selectedOverCalendarFlag, setSelectedOverCalendarFlag] = useState<\n    boolean | undefined\n  >(false);\n\n  if (\n    selectedOverCalendar !== undefined ||\n    setSelectedOverCalendar !== undefined\n  ) {\n    return <DateTimeRangePickerBody {...props} ref={forwardedRef} />;\n  }\n\n  return (\n    <SelectedOverCalendarContext.Provider\n      value={{\n        selectedOverCalendar: fallbackSelectedOverCalendar,\n        setSelectedOverCalendar: setFallbackSelectedOverCalendar,\n        calendarOnChangeFlag: selectedOverCalendarFlag,\n        setCalendarOnChangeFlag: setSelectedOverCalendarFlag,\n      }}\n    >\n      <DateTimeRangePickerBody {...props} ref={forwardedRef} />\n    </SelectedOverCalendarContext.Provider>\n  );\n});\n"],
+  "mappings": "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",
   "names": ["value"]
 }

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

@@ -1,8 +1,10 @@
 import "../../styles/field.css";
 import "./DateTimeRangePicker.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var dateTimeRangeCSS = _7a468({ defaultClassName: "_1vlwkc20-3-1-3", variantClassNames: { showError: { true: "_1vlwkc21-3-1-3" }, disabled: { true: "_1vlwkc22-3-1-3" }, readOnly: { true: "_1vlwkc23-3-1-3" } }, defaultVariants: {}, compoundVariants: [] });
+var dateTimeRangeCSS = _7a468({ defaultClassName: "_1vlwkc20-3-2-1", variantClassNames: { showError: { true: "_1vlwkc21-3-2-1" }, disabled: { true: "_1vlwkc22-3-2-1" }, readOnly: { true: "_1vlwkc23-3-2-1" } }, defaultVariants: {}, compoundVariants: [] });
+var timeframeSeparator = "_1vlwkc24-3-2-1";
 export {
-  dateTimeRangeCSS
+  dateTimeRangeCSS,
+  timeframeSeparator
 };
 //# sourceMappingURL=DateTimeRangePicker.sty.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/date-time-range-picker/DateTimeRangePicker.css.ts"],
-  "sourcesContent": ["import '../../styles/field.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeRangeCSS = _7a468({defaultClassName:'_1vlwkc20-3-1-3',variantClassNames:{showError:{true:'_1vlwkc21-3-1-3'},disabled:{true:'_1vlwkc22-3-1-3'},readOnly:{true:'_1vlwkc23-3-1-3'}},defaultVariants:{},compoundVariants:[]});"],
-  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
+  "sourcesContent": ["import '../../styles/field.css';\nimport './DateTimeRangePicker.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var dateTimeRangeCSS = _7a468({defaultClassName:'_1vlwkc20-3-2-1',variantClassNames:{showError:{true:'_1vlwkc21-3-2-1'},disabled:{true:'_1vlwkc22-3-2-1'},readOnly:{true:'_1vlwkc23-3-2-1'}},defaultVariants:{},compoundVariants:[]});\nexport var timeframeSeparator = '_1vlwkc24-3-2-1';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,WAAU,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,GAAE,UAAS,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpO,IAAI,qBAAqB;",
   "names": []
 }

package/esm/forms/date-time-range-picker/hooks/useDateTimeInput.js

@@ -13,6 +13,7 @@ import {
 import { getTimezone } from "@dynatrace-sdk/user-preferences";
 import { useDateTimeInputValidation } from "./useDateTimeIInputValidation.js";
 import { useDateTimeParser } from "./useDateTimeParser.js";
+import { spinExpressionValue } from "./useExpressionSpin.js";
 import { useAriaLabelingProps } from "../../../core/hooks/useAriaLabelingProps.js";
 import { useControllableState } from "../../../core/hooks/useControllableState.js";
 import { useDateTimePicker } from "../../date-time-picker/hooks/useDateTimePicker.js";
@@ -212,20 +213,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
       }
     }
   }, [value]);
-  const onCopyCapture = useCallback(
-    async (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (value === null) {
-        return;
-      }
-      try {
-        await navigator.clipboard.writeText(value.value);
-      } catch {
-      }
-    },
-    [value]
-  );
   const onPaste = useCallback(
     (event) => {
       if (readOnly) {
@@ -253,11 +240,46 @@ const useDateTimeInput = (props, expressionInputRef) => {
     },
     [applyDateTime, precision, readOnly, setValue, updateExpression]
   );
-  const expressionOnKeyDownHandler = useCallback((event) => {
-    if (event.key === "Enter") {
-      event.preventDefault();
-    }
-  }, []);
+  const expressionOnKeyDownHandler = useCallback(
+    (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        return;
+      }
+      if ((event.key === "ArrowUp" || event.key === "ArrowDown") && !disabled && !readOnly) {
+        const element = expressionInputRef.current;
+        if (!element) {
+          return;
+        }
+        const currentText = element.textContent ?? "";
+        if (!currentText.trim()) {
+          return;
+        }
+        const direction = event.key === "ArrowUp" ? 1 : -1;
+        const newText = spinExpressionValue(currentText, direction);
+        if (newText === null) {
+          return;
+        }
+        event.preventDefault();
+        const selection = window.getSelection();
+        const cursorOffset = selection?.focusOffset ?? 0;
+        element.textContent = newText;
+        requestAnimationFrame(() => {
+          const textNode = element.firstChild;
+          if (textNode && selection) {
+            const newOffset = Math.min(cursorOffset, newText.length);
+            const range = document.createRange();
+            range.setStart(textNode, newOffset);
+            range.collapse(true);
+            selection.removeAllRanges();
+            selection.addRange(range);
+          }
+        });
+        element.dispatchEvent(new Event("input", { bubbles: true }));
+      }
+    },
+    [expressionInputRef, disabled, readOnly]
+  );
   const focus = useCallback(() => {
     switch (valueType) {
       case "expression":
@@ -316,7 +338,6 @@ const useDateTimeInput = (props, expressionInputRef) => {
     expressionOnFocusHandler,
     expressionOnBlurHandler,
     expressionOnKeyDownHandler,
-    onCopyCapture,
     onPaste,
     focus,
     validateTimeValue