[TimePicker] Refactor digital clock selected item scrolling

packages/x-data-grid/src/models/api/gridEditingApi.ts

@@ -1,9 +1,9 @@
+import { MuiBaseEvent } from '@mui/x-internals/types';
 import { GridCellMode, GridRowMode } from '../gridCell';
 import { GridCellModes, GridRowModes } from '../gridEditRowModel';
 import { GridRowId, GridRowModel } from '../gridRows';
 import { GridCellParams } from '../params/gridCellParams';
 import { GridEditCellValueParams } from '../params/gridEditCellParams';
-import { MuiBaseEvent } from '../muiEvent';
 
 export type GridCellModesModelProps =
   | ({ mode: GridCellModes.View } & Omit<GridStopCellEditModeParams, 'id' | 'field'>)

packages/x-data-grid/src/models/api/gridFocusApi.ts

@@ -1,5 +1,5 @@
+import { MuiBaseEvent } from '@mui/x-internals/types';
 import { GridRowId } from '../gridRows';
-import { MuiBaseEvent } from '../muiEvent';
 import { GridColumnGroupIdentifier } from '../../hooks/features/focus';
 
 export interface GridFocusApi {

packages/x-data-grid/src/models/events/gridEventListener.ts

@@ -1,4 +1,4 @@
-import type { MuiBaseEvent, MuiEvent } from '../muiEvent';
+import type { MuiBaseEvent, MuiEvent } from '@mui/x-internals/types';
 import type { GridCallbackDetails } from '../api/gridCallbackDetails';
 import type { GridEventLookup, GridEvents } from './gridEventLookup';
 

packages/x-data-grid/src/models/events/gridEventLookup.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { MuiBaseEvent } from '@mui/x-internals/types';
 import type {
   GridColumnHeaderParams,
   GridColumnOrderChangeParams,
@@ -18,7 +19,6 @@ import type { GridFilterModel } from '../gridFilterModel';
 import type { GridSortModel } from '../gridSortModel';
 import type { GridRowSelectionModel } from '../gridRowSelectionModel';
 import type { ElementSize } from '../elementSize';
-import type { MuiBaseEvent } from '../muiEvent';
 import type { GridGroupNode } from '../gridRows';
 import type { GridColumnVisibilityModel } from '../../hooks/features/columns';
 import type { GridStrategyProcessorName } from '../../hooks/core/strategyProcessing';

packages/x-data-grid/src/models/events/gridEventPublisher.ts

@@ -1,4 +1,4 @@
-import type { MuiBaseEvent } from '../muiEvent';
+import type { MuiBaseEvent } from '@mui/x-internals/types';
 import type { GridEventLookup, GridEvents } from './gridEventLookup';
 
 type PublisherArgsNoEvent<E extends GridEvents, T extends { params: any }> = [E, T['params']];

packages/x-data-grid/src/models/index.ts

@@ -21,7 +21,7 @@ export type { GridSlotsComponent } from './gridSlotsComponent';
 export * from './gridSlotsComponentsProps';
 export * from './gridDensity';
 export * from './logger';
-export * from './muiEvent';
+export type { MuiBaseEvent, MuiEvent } from '@mui/x-internals/types';
 export * from './events';
 export type {
   GridSortCellParams,

packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClock.types.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { SlotComponentProps } from '@mui/utils';
-import MenuItem from '@mui/material/MenuItem';
+import { MenuItemProps } from '@mui/material/MenuItem';
+import { MuiEvent, SlotComponentPropsFromProps } from '@mui/x-internals/types';
 import { MultiSectionDigitalClockClasses } from './multiSectionDigitalClockClasses';
 import {
   BaseClockProps,
@@ -9,6 +9,7 @@ import {
 } from '../internals/models/props/time';
 import { MultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection';
 import { TimeViewWithMeridiem } from '../internals/models';
+import { PickerOwnerState } from '../models/pickers';
 
 export interface MultiSectionDigitalClockOption<TSectionValue extends number | string> {
   isDisabled?: (value: TSectionValue) => boolean;
@@ -26,16 +27,31 @@ export interface ExportedMultiSectionDigitalClockProps
 export interface MultiSectionDigitalClockViewProps<TSectionValue extends number | string>
   extends Pick<MultiSectionDigitalClockSectionProps<TSectionValue>, 'onChange' | 'items'> {}
 
+export interface MultiSectionDigitalClockSectionItemProps extends MenuItemProps {
+  onClick?: (event: MuiEvent<React.MouseEvent<HTMLLIElement>>) => void;
+}
+
 export interface MultiSectionDigitalClockSlots {
   /**
    * Component responsible for rendering a single multi section digital clock section item.
    * @default MenuItem from '@mui/material'
    */
-  digitalClockSectionItem?: React.ElementType;
+  digitalClockSectionItem?: React.ElementType<MultiSectionDigitalClockSectionItemProps>;
+}
+
+export interface MultiSectionDigitalClockSectionOwnerState extends PickerOwnerState {
+  /**
+   * `true` if this is not the initial render of the digital clock.
+   */
+  hasDigitalClockAlreadyBeenRendered: boolean;
 }
 
 export interface MultiSectionDigitalClockSlotProps {
-  digitalClockSectionItem?: SlotComponentProps<typeof MenuItem, {}, Record<string, any>>;
+  digitalClockSectionItem?: SlotComponentPropsFromProps<
+    MultiSectionDigitalClockSectionItemProps,
+    {},
+    MultiSectionDigitalClockSectionOwnerState
+  >;
 }
 
 export interface MultiSectionDigitalClockProps

packages/x-date-pickers/src/MultiSectionDigitalClock/MultiSectionDigitalClockSection.tsx

@@ -6,6 +6,8 @@ import composeClasses from '@mui/utils/composeClasses';
 import MenuList from '@mui/material/MenuList';
 import MenuItem from '@mui/material/MenuItem';
 import useForkRef from '@mui/utils/useForkRef';
+import { MuiEvent } from '@mui/x-internals/types';
+import useSlotProps from '@mui/utils/useSlotProps';
 import {
   MultiSectionDigitalClockSectionClasses,
   getMultiSectionDigitalClockSectionUtilityClass,
@@ -14,14 +16,15 @@ import type {
   MultiSectionDigitalClockOption,
   MultiSectionDigitalClockSlots,
   MultiSectionDigitalClockSlotProps,
+  MultiSectionDigitalClockSectionOwnerState,
+  MultiSectionDigitalClockSectionItemProps,
 } from './MultiSectionDigitalClock.types';
 import {
   DIGITAL_CLOCK_VIEW_HEIGHT,
   MULTI_SECTION_CLOCK_SECTION_WIDTH,
 } from '../internals/constants/dimensions';
 import { getFocusedListItemIndex } from '../internals/utils/utils';
 import { FormProps } from '../internals/models/formProps';
-import { PickerOwnerState } from '../models/pickers';
 import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
 import { MultiSectionDigitalClockClasses } from './multiSectionDigitalClockClasses';
 
@@ -43,13 +46,6 @@ export interface MultiSectionDigitalClockSectionProps<TSectionValue extends numb
   role?: string;
 }
 
-interface MultiSectionDigitalClockSectionOwnerState extends PickerOwnerState {
-  /**
-   * `true` if this is not the initial render of the digital clock.
-   */
-  hasDigitalClockAlreadyBeenRendered: boolean;
-}
-
 const useUtilityClasses = (classes: Partial<MultiSectionDigitalClockClasses> | undefined) => {
   const slots = {
     root: ['root'],
@@ -178,25 +174,75 @@ export const MultiSectionDigitalClockSection = React.forwardRef(
     const DigitalClockSectionItem =
       slots?.digitalClockSectionItem ?? MultiSectionDigitalClockSectionItem;
 
+    const digitalClockSectionProps: MultiSectionDigitalClockSectionItemProps = useSlotProps({
+      elementType: DigitalClockSectionItem,
+      externalSlotProps: slotProps?.digitalClockSectionItem,
+      additionalProps: {
+        disableRipple: readOnly,
+        role: 'option',
+      },
+      ownerState,
+      className: classes.item,
+    });
+
+    const handleFocusingAndScrolling = React.useCallback(
+      (optionIndex?: number) => {
+        if (containerRef.current === null) {
+          return;
+        }
+        let activeItem: HTMLElement | null = null;
+        if (optionIndex !== undefined) {
+          activeItem = containerRef.current.querySelector<HTMLElement>(
+            `[role="option"]:nth-child(${optionIndex + 1})`,
+          );
+        } else {
+          activeItem = containerRef.current.querySelector<HTMLElement>(
+            '[role="option"][tabindex="0"], [role="option"][aria-selected="true"]',
+          );
+        }
+
+        if (active && autoFocus && activeItem) {
+          activeItem.focus();
+        }
+        if (!activeItem || previousActive.current === activeItem) {
+          return;
+        }
+        previousActive.current = activeItem;
+        const offsetTop = activeItem.offsetTop;
+
+        // Subtracting the 4px of extra margin intended for the first visible section item
+        containerRef.current.scrollTop = offsetTop - 4;
+      },
+      [active, autoFocus],
+    );
+
     React.useEffect(() => {
-      if (containerRef.current === null) {
-        return;
-      }
-      const activeItem = containerRef.current.querySelector<HTMLElement>(
-        '[role="option"][tabindex="0"], [role="option"][aria-selected="true"]',
-      );
-      if (active && autoFocus && activeItem) {
-        activeItem.focus();
-      }
-      if (!activeItem || previousActive.current === activeItem) {
-        return;
-      }
-      previousActive.current = activeItem;
-      const offsetTop = activeItem.offsetTop;
+      handleFocusingAndScrolling();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
 
-      // Subtracting the 4px of extra margin intended for the first visible section item
-      containerRef.current.scrollTop = offsetTop - 4;
-    });
+    const handleChange = React.useCallback(
+      (
+        event: MuiEvent<React.MouseEvent<HTMLLIElement>>,
+        sectionValue: TSectionValue,
+        index: number,
+      ) => {
+        if (readOnly) {
+          return;
+        }
+
+        if (digitalClockSectionProps.onClick) {
+          digitalClockSectionProps.onClick(event);
+        }
+
+        onChange(sectionValue);
+
+        if (!event.defaultMuiPrevented) {
+          handleFocusingAndScrolling(index);
+        }
+      },
+      [digitalClockSectionProps, handleFocusingAndScrolling, onChange, readOnly],
+    );
 
     const focusedOptionIndex = items.findIndex((item) => item.isFocused(item.value));
 
@@ -252,18 +298,17 @@ export const MultiSectionDigitalClockSection = React.forwardRef(
           return (
             <DigitalClockSectionItem
               key={option.label}
-              onClick={() => !readOnly && onChange(option.value)}
+              {...digitalClockSectionProps}
+              onClick={(event: React.MouseEvent<HTMLLIElement>) =>
+                handleChange(event, option.value, index)
+              }
               selected={isSelected}
               disabled={isDisabled}
-              disableRipple={readOnly}
-              role="option"
               // aria-readonly is not supported here and does not have any effect
               aria-disabled={readOnly || isDisabled || undefined}
               aria-label={option.ariaLabel}
               aria-selected={isSelected}
               tabIndex={tabIndex}
-              className={classes.item}
-              {...slotProps?.digitalClockSectionItem}
             >
               {option.label}
             </DigitalClockSectionItem>

packages/x-internals/src/types/index.ts

@@ -2,6 +2,7 @@ export * from './AppendKeys';
 export * from './DefaultizedProps';
 export * from './MakeOptional';
 export * from './MakeRequired';
+export * from './MuiEvent';
 export * from './PrependKeys';
 export * from './RefObject';
 export * from './SlotComponentPropsFromProps';