[Shared UX][DateRangePicker] Enhance selectable text parts on button display (#270562)

## Summary

Adds a UX feature to `DateRangePicker` (currently in Discover and
Dashboards):

makes each meaningful part of the text in the button be "clickable".
Clicking a part automatically selects the corresponding part in the
input control when focused.

### Before


https://github.com/user-attachments/assets/9c401201-bf24-4bd8-a127-8391dc075fee

### After


https://github.com/user-attachments/assets/a62b3513-ba85-4cb8-a613-8436b5d61286

Closes elastic/eui-private#672

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [x] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

### Identify risks

No risks identified.

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Tomasz Kajtoch <1282498+tkajtoch@users.noreply.github.com>

Author: 5 people

src/platform/packages/shared/shared-ux/datetime/kbn-date-range-picker/__snapshots__/date_range_picker.test.tsx.snap

@@ -16,6 +16,9 @@ export const DATE_TYPE_RELATIVE = 'RELATIVE' as const;
 /** Date type representing the current moment ("now") */
 export const DATE_TYPE_NOW = 'NOW' as const;
 
+/** Keyword users type to refer to the current moment in input and display text. */
+export const NOW_KEYWORD = 'now';
+
 /** Default Moment.js format for displaying dates at full precision (e.g. "Feb 3, 2025, 14:30:07.801") */
 export const DEFAULT_DATE_FORMAT = 'MMM D, YYYY, HH:mm:ss.SSS';
 

src/platform/packages/shared/shared-ux/datetime/kbn-date-range-picker/constants.ts

@@ -8,6 +8,7 @@
  */
 
 import React, { useState } from 'react';
+import moment from 'moment-timezone';
 import { fireEvent, render, screen, waitFor, act, within } from '@testing-library/react';
 import { renderWithEuiTheme } from '@kbn/test-jest-helpers';
 import { EuiThemeProvider } from '@elastic/eui';
@@ -34,6 +35,15 @@ const waitForPopoverClose = () =>
   });
 
 describe('DateRangePickerControl', () => {
+  // Pin to UTC so date formatting is deterministic across local machines and CI agents.
+  beforeEach(() => {
+    moment.tz.setDefault('UTC');
+  });
+
+  afterEach(() => {
+    moment.tz.setDefault('Browser');
+  });
+
   describe('editing mode', () => {
     it('enters editing mode on control button click', async () => {
       renderWithEuiTheme(<DateRangePicker {...defaultProps} onChange={() => {}} />);
@@ -50,6 +60,79 @@ describe('DateRangePickerControl', () => {
       await waitForPopoverClose();
     });
 
+    it('selects the clicked display part in the input', async () => {
+      renderWithEuiTheme(<DateRangePicker {...defaultProps} onChange={() => {}} />);
+
+      const displayPart = screen.getByText('20');
+      fireEvent.mouseDown(displayPart);
+      fireEvent.click(displayPart);
+
+      const input = await screen.findByTestId('dateRangePickerInput');
+      await waitFor(() => {
+        expect(input).toHaveFocus();
+        expect((input as HTMLInputElement).selectionStart).toBe(5);
+        expect((input as HTMLInputElement).selectionEnd).toBe(7);
+      });
+
+      fireEvent.keyDown(input, { key: 'Escape' });
+      await waitForPopoverClose();
+    });
+
+    it('keeps the clicked display part visible when the input is scrolled', async () => {
+      const animationFrameCallbacks: FrameRequestCallback[] = [];
+      const requestAnimationFrameSpy = jest
+        .spyOn(window, 'requestAnimationFrame')
+        .mockImplementation((callback) => {
+          animationFrameCallbacks.push(callback);
+          return animationFrameCallbacks.length;
+        });
+      const cancelAnimationFrameSpy = jest
+        .spyOn(window, 'cancelAnimationFrame')
+        .mockImplementation(() => {});
+      const getContextSpy = jest
+        .spyOn(HTMLCanvasElement.prototype, 'getContext')
+        .mockReturnValue(null);
+
+      try {
+        renderWithEuiTheme(
+          <DateRangePicker
+            {...defaultProps}
+            defaultValue="2024-01-01T00:00:00.000Z to 2024-12-31T23:59:59.999Z"
+            onChange={() => {}}
+          />
+        );
+
+        // Both sides of the range render "2024"; pick the start-side year, matching the selection assertion below.
+        const displayPart = screen.getAllByText('2024')[0];
+        fireEvent.mouseDown(displayPart);
+        fireEvent.click(displayPart);
+
+        const input = (await screen.findByTestId('dateRangePickerInput')) as HTMLInputElement;
+        await waitFor(() => {
+          expect(input.selectionStart).toBe(7);
+          expect(input.selectionEnd).toBe(11);
+        });
+        Object.defineProperty(input, 'clientWidth', { configurable: true, value: 80 });
+        Object.defineProperty(input, 'scrollWidth', { configurable: true, value: 800 });
+        input.scrollLeft = 720;
+
+        act(() => {
+          for (const callback of animationFrameCallbacks) {
+            callback(performance.now());
+          }
+        });
+
+        expect(input.scrollLeft).toBeLessThan(200);
+
+        fireEvent.keyDown(input, { key: 'Escape' });
+        await waitForPopoverClose();
+      } finally {
+        requestAnimationFrameSpy.mockRestore();
+        cancelAnimationFrameSpy.mockRestore();
+        getContextSpy.mockRestore();
+      }
+    });
+
     it('submits on Enter and returns to idle mode', async () => {
       const onChange = jest.fn();
       renderWithEuiTheme(<DateRangePicker {...defaultProps} onChange={onChange} />);
@@ -303,7 +386,11 @@ describe('DateRangePickerControl', () => {
         'Last 20 minutes'
       );
 
-      rerender(<DateRangePicker value="last 1 hour" onChange={() => {}} {...controlledDefaults} />);
+      rerender(
+        <EuiThemeProvider>
+          <DateRangePicker value="last 1 hour" onChange={() => {}} {...controlledDefaults} />
+        </EuiThemeProvider>
+      );
       await waitFor(() => {
         expect(screen.getByTestId('dateRangePickerControlButton')).toHaveTextContent('Last 1 hour');
       });
@@ -319,7 +406,11 @@ describe('DateRangePickerControl', () => {
       fireEvent.change(input, { target: { value: 'last 5 minutes' } });
       expect(input).toHaveValue('last 5 minutes');
 
-      rerender(<DateRangePicker value="last 1 hour" onChange={() => {}} {...controlledDefaults} />);
+      rerender(
+        <EuiThemeProvider>
+          <DateRangePicker value="last 1 hour" onChange={() => {}} {...controlledDefaults} />
+        </EuiThemeProvider>
+      );
       await waitFor(() => {
         expect(input).toHaveValue('last 5 minutes');
       });
@@ -339,7 +430,9 @@ describe('DateRangePickerControl', () => {
 
       await act(async () =>
         rerender(
-          <DateRangePicker value="last 1 hour" onChange={() => {}} {...controlledDefaults} />
+          <EuiThemeProvider>
+            <DateRangePicker value="last 1 hour" onChange={() => {}} {...controlledDefaults} />
+          </EuiThemeProvider>
         )
       );
       fireEvent.keyDown(input, { key: 'Escape' });

src/platform/packages/shared/shared-ux/datetime/kbn-date-range-picker/date_range_picker_control.test.tsx

@@ -21,12 +21,20 @@ import {
 } from '@elastic/eui';
 
 import { FOCUSABLE_SELECTOR } from './constants';
-import { isRelativeToNow, resolveInitialFocus } from './utils';
+import {
+  findCorrespondingInputPart,
+  getInputScrollLeftToCenter,
+  isRelativeToNow,
+  resolveInitialFocus,
+} from './utils';
 import { DateRangePickerAutoRefreshButton } from './date_range_picker_auto_refresh_button';
 import { useDateRangePickerContext } from './date_range_picker_context';
 import { useSelectTextPartsWithArrowKeys } from './hooks/use_select_text_parts_with_arrow_keys';
 import { useInputHintText } from './hooks/use_input_hint_text';
 import { inputControlTexts } from './translations';
+import { DateRangeValueDisplay } from './date_range_value_display';
+import type { RangePart } from './parse/parse_range_parts';
+import { parseDisplayParts, parseInputParts } from './parse/parse_range_parts';
 
 /**
  * The control portion of the DateRangePicker: displays a button when idle
@@ -67,6 +75,7 @@ export function DateRangePickerControl() {
   const controlRef = useRef<HTMLDivElement>(null);
   const wasEditingRef = useRef(false);
   const wasClearedRef = useRef(false);
+  const clickedDisplayPartRef = useRef<RangePart | null>(null);
 
   /** Focus the button when transitioning from editing to idle. */
   useEffect(() => {
@@ -101,6 +110,35 @@ export function DateRangePickerControl() {
     setIsEditing(true);
   };
 
+  const handleDisplayPartClick = (part: RangePart) => {
+    clickedDisplayPartRef.current = part;
+  };
+
+  /** Handle selecting specific parts when focusing the input */
+  useEffect(() => {
+    if (!isEditing || !inputRef.current) return;
+
+    const clickedPart = clickedDisplayPartRef.current;
+    clickedDisplayPartRef.current = null;
+
+    if (!clickedPart) return;
+
+    const inputParts = parseInputParts(text).filter((part) => part.navigable);
+    const displayParts = parseDisplayParts(displayText);
+    const target = findCorrespondingInputPart(inputParts, clickedPart, displayParts);
+
+    if (target) {
+      const input = inputRef.current;
+      // Optimistic `setSelectionRange` call, might remove after testing is not needed
+      input.setSelectionRange(target.start, target.end);
+      const requestId = requestAnimationFrame(() => {
+        input.setSelectionRange(target.start, target.end);
+        input.scrollLeft = getInputScrollLeftToCenter(input, target.start, target.end);
+      });
+      return () => cancelAnimationFrame(requestId);
+    }
+  }, [displayText, inputRef, isEditing, text]);
+
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const nextValue = event.target.value;
     if (nextValue === '') wasClearedRef.current = true;
@@ -170,6 +208,12 @@ export function DateRangePickerControl() {
   const tooltipStyles = css`
     max-inline-size: min(58ch, 90vw);
   `;
+  const inputStyles = css`
+    &::selection {
+      color: ${euiTheme.colors.textPrimary};
+      background-color: ${euiTheme.colors.backgroundLightPrimary};
+    }
+  `;
 
   return (
     <div
@@ -222,6 +266,7 @@ export function DateRangePickerControl() {
             onKeyDown={onInputKeyDown}
             compressed={compressed}
             placeholder={`${hintTextPrefix} "${hintText}"`}
+            css={inputStyles}
           />
         ) : (
           <EuiToolTip
@@ -235,16 +280,34 @@ export function DateRangePickerControl() {
             offset={euiTheme.base * 0.75}
           >
             <EuiFormControlButton
+              css={css`
+                /* TODO super fragile selector, we need to find out why
+                   is this <span> there at all in EuiFormControlButton */
+                .euiButtonEmpty__content > span {
+                  display: flex;
+                  flex-grow: 1;
+                  align-items: center;
+                  justify-content: space-between;
+                  gap: ${euiTheme.size.s};
+                  max-inline-size: 100%;
+                }
+              `}
               data-test-subj="dateRangePickerControlButton"
               data-date-range={`${timeRange.start} to ${timeRange.end}`}
               buttonRef={buttonRef}
               aria-label={collapsed ? displayText : undefined}
-              value={collapsed ? undefined : displayText}
               onClick={onButtonClick}
               isInvalid={isInvalid}
               disabled={disabled}
               compressed={compressed}
             >
+              {!collapsed && (
+                <DateRangeValueDisplay
+                  displayText={displayText}
+                  onPartClick={handleDisplayPartClick}
+                  disabled={disabled}
+                />
+              )}
               {!hideBadge && (
                 <EuiBadge data-test-subj="dateRangePickerDurationBadge">
                   {displayShortDuration ?? '--'}

src/platform/packages/shared/shared-ux/datetime/kbn-date-range-picker/date_range_picker_control.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { css } from '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+const dateRangeValueDisplayStyles = ({ euiTheme }: UseEuiTheme) => ({
+  root: css`
+    white-space: nowrap;
+  `,
+  part: css`
+    @media (hover: hover) and (pointer: fine) {
+      &:hover {
+        color: ${euiTheme.colors.textPrimary};
+        background-color: ${euiTheme.colors.backgroundLightPrimary};
+      }
+    }
+  `,
+});
+
+export { dateRangeValueDisplayStyles };