@mui/x-date-pickers 9.6.0 → 9.8.0

package/PickersTextField/PickersTextField.mjs

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "label", "slots", "slotProps", "data-active-range-position"];
+const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "hiddenLabel", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onMouseDown", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "label", "slots", "slotProps", "data-active-range-position"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { warnOnce } from '@mui/x-internals/warning';
@@ -75,6 +75,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       elements,
       areAllSectionsEmpty,
       onClick,
+      onMouseDown,
       onKeyDown,
       onKeyUp,
       onPaste,
@@ -169,6 +170,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
         elements: elements,
         areAllSectionsEmpty: areAllSectionsEmpty,
         onClick: onClick,
+        onMouseDown: onMouseDown,
         onKeyDown: onKeyDown,
         onKeyUp: onKeyUp,
         onInput: onInput,
@@ -300,6 +302,7 @@ process.env.NODE_ENV !== "production" ? PickersTextField.propTypes /* remove-pro
   onFocus: PropTypes.func.isRequired,
   onInput: PropTypes.func.isRequired,
   onKeyDown: PropTypes.func.isRequired,
+  onMouseDown: PropTypes.func.isRequired,
   onPaste: PropTypes.func.isRequired,
   readOnly: PropTypes.bool,
   /**

package/PickersTextField/PickersTextField.types.d.mts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { FormControlProps } from '@mui/material/FormControl';
-import { FormHelperTextProps } from '@mui/material/FormHelperText';
-import { InputLabelProps } from '@mui/material/InputLabel';
-import { TextFieldVariants } from '@mui/material/TextField';
-import { PickersInputBaseProps, PickersInputPropsUsedByField } from "./PickersInputBase/PickersInputBase.types.mjs";
+import type * as React from 'react';
+import type { FormControlProps } from '@mui/material/FormControl';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText';
+import type { InputLabelProps } from '@mui/material/InputLabel';
+import type { TextFieldVariants } from '@mui/material/TextField';
+import type { PickersInputBaseProps, PickersInputPropsUsedByField } from "./PickersInputBase/PickersInputBase.types.mjs";
 import type { PickersInputProps } from "./PickersInput/index.mjs";
 import type { PickersOutlinedInputProps } from "./PickersOutlinedInput/index.mjs";
 import type { PickersFilledInputProps } from "./PickersFilledInput/index.mjs";

package/PickersTextField/PickersTextField.types.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { FormControlProps } from '@mui/material/FormControl';
-import { FormHelperTextProps } from '@mui/material/FormHelperText';
-import { InputLabelProps } from '@mui/material/InputLabel';
-import { TextFieldVariants } from '@mui/material/TextField';
-import { PickersInputBaseProps, PickersInputPropsUsedByField } from "./PickersInputBase/PickersInputBase.types.js";
+import type * as React from 'react';
+import type { FormControlProps } from '@mui/material/FormControl';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText';
+import type { InputLabelProps } from '@mui/material/InputLabel';
+import type { TextFieldVariants } from '@mui/material/TextField';
+import type { PickersInputBaseProps, PickersInputPropsUsedByField } from "./PickersInputBase/PickersInputBase.types.js";
 import type { PickersInputProps } from "./PickersInput/index.js";
 import type { PickersOutlinedInputProps } from "./PickersOutlinedInput/index.js";
 import type { PickersFilledInputProps } from "./PickersFilledInput/index.js";

package/PickersTextField/usePickerTextFieldOwnerState.d.mts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { PickerTextFieldOwnerState } from "../models/fields.mjs";
+import type { PickerTextFieldOwnerState } from "../models/fields.mjs";
 export declare const PickerTextFieldOwnerStateContext: React.Context<PickerTextFieldOwnerState | null>;
 export declare const usePickerTextFieldOwnerState: () => PickerTextFieldOwnerState;

package/PickersTextField/usePickerTextFieldOwnerState.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { PickerTextFieldOwnerState } from "../models/fields.js";
+import type { PickerTextFieldOwnerState } from "../models/fields.js";
 export declare const PickerTextFieldOwnerStateContext: React.Context<PickerTextFieldOwnerState | null>;
 export declare const usePickerTextFieldOwnerState: () => PickerTextFieldOwnerState;

package/StaticDatePicker/StaticDatePicker.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StaticDatePickerProps } from "./StaticDatePicker.types.mjs";
+import type { StaticDatePickerProps } from "./StaticDatePicker.types.mjs";
 type StaticDatePickerComponent = ((props: StaticDatePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/StaticDatePicker/StaticDatePicker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StaticDatePickerProps } from "./StaticDatePicker.types.js";
+import type { StaticDatePickerProps } from "./StaticDatePicker.types.js";
 type StaticDatePickerComponent = ((props: StaticDatePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/StaticDatePicker/StaticDatePicker.types.d.mts

@@ -1,6 +1,6 @@
-import { MakeOptional } from '@mui/x-internals/types';
-import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from "../DatePicker/shared.mjs";
-import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.mjs";
+import type { MakeOptional } from '@mui/x-internals/types';
+import type { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from "../DatePicker/shared.mjs";
+import type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.mjs";
 export interface StaticDatePickerSlots extends BaseDatePickerSlots, UseStaticPickerSlots {}
 export interface StaticDatePickerSlotProps extends BaseDatePickerSlotProps, UseStaticPickerSlotProps {}
 export interface StaticDatePickerProps extends BaseDatePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {

package/StaticDatePicker/StaticDatePicker.types.d.ts

@@ -1,6 +1,6 @@
-import { MakeOptional } from '@mui/x-internals/types';
-import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from "../DatePicker/shared.js";
-import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
+import type { MakeOptional } from '@mui/x-internals/types';
+import type { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from "../DatePicker/shared.js";
+import type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
 export interface StaticDatePickerSlots extends BaseDatePickerSlots, UseStaticPickerSlots {}
 export interface StaticDatePickerSlotProps extends BaseDatePickerSlotProps, UseStaticPickerSlotProps {}
 export interface StaticDatePickerProps extends BaseDatePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {

package/StaticDateTimePicker/StaticDateTimePicker.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StaticDateTimePickerProps } from "./StaticDateTimePicker.types.mjs";
+import type { StaticDateTimePickerProps } from "./StaticDateTimePicker.types.mjs";
 type StaticDateTimePickerComponent = ((props: StaticDateTimePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/StaticDateTimePicker/StaticDateTimePicker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StaticDateTimePickerProps } from "./StaticDateTimePicker.types.js";
+import type { StaticDateTimePickerProps } from "./StaticDateTimePicker.types.js";
 type StaticDateTimePickerComponent = ((props: StaticDateTimePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/StaticDateTimePicker/StaticDateTimePicker.types.d.mts

@@ -1,6 +1,6 @@
-import { MakeOptional } from '@mui/x-internals/types';
-import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.mjs";
-import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.mjs";
+import type { MakeOptional } from '@mui/x-internals/types';
+import type { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.mjs";
+import type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.mjs";
 export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {}
 export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps {}
 export interface StaticDateTimePickerProps extends BaseDateTimePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {

package/StaticDateTimePicker/StaticDateTimePicker.types.d.ts

@@ -1,6 +1,6 @@
-import { MakeOptional } from '@mui/x-internals/types';
-import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
-import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
+import type { MakeOptional } from '@mui/x-internals/types';
+import type { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from "../DateTimePicker/shared.js";
+import type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
 export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {}
 export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps {}
 export interface StaticDateTimePickerProps extends BaseDateTimePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {

package/StaticTimePicker/StaticTimePicker.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StaticTimePickerProps } from "./StaticTimePicker.types.mjs";
+import type { StaticTimePickerProps } from "./StaticTimePicker.types.mjs";
 type StaticTimePickerComponent = ((props: StaticTimePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/StaticTimePicker/StaticTimePicker.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StaticTimePickerProps } from "./StaticTimePicker.types.js";
+import type { StaticTimePickerProps } from "./StaticTimePicker.types.js";
 type StaticTimePickerComponent = ((props: StaticTimePickerProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/StaticTimePicker/StaticTimePicker.types.d.mts

@@ -1,7 +1,7 @@
-import { MakeOptional } from '@mui/x-internals/types';
-import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.mjs";
-import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.mjs";
-import { TimeView } from "../models/index.mjs";
+import type { MakeOptional } from '@mui/x-internals/types';
+import type { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.mjs";
+import type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.mjs";
+import type { TimeView } from "../models/index.mjs";
 export interface StaticTimePickerSlots extends BaseTimePickerSlots, UseStaticPickerSlots {}
 export interface StaticTimePickerSlotProps extends BaseTimePickerSlotProps, UseStaticPickerSlotProps {}
 export interface StaticTimePickerProps extends BaseTimePickerProps<TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {

package/StaticTimePicker/StaticTimePicker.types.d.ts

@@ -1,7 +1,7 @@
-import { MakeOptional } from '@mui/x-internals/types';
-import { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.js";
-import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
-import { TimeView } from "../models/index.js";
+import type { MakeOptional } from '@mui/x-internals/types';
+import type { BaseTimePickerProps, BaseTimePickerSlots, BaseTimePickerSlotProps } from "../TimePicker/shared.js";
+import type { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from "../internals/hooks/useStaticPicker/index.js";
+import type { TimeView } from "../models/index.js";
 export interface StaticTimePickerSlots extends BaseTimePickerSlots, UseStaticPickerSlots {}
 export interface StaticTimePickerSlotProps extends BaseTimePickerSlotProps, UseStaticPickerSlotProps {}
 export interface StaticTimePickerProps extends BaseTimePickerProps<TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {

package/TimeClock/Clock.d.mts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import type { PickerSelectionState } from "../internals/hooks/usePicker/index.mjs";
-import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.mjs";
-import { PickerOwnerState, PickerValidDate, TimeView } from "../models/index.mjs";
-import { ClockClasses } from "./clockClasses.mjs";
-import { Meridiem } from "../internals/utils/time-utils.mjs";
-import { FormProps } from "../internals/models/formProps.mjs";
+import type { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.mjs";
+import type { PickerOwnerState, PickerValidDate, TimeView } from "../models/index.mjs";
+import type { ClockClasses } from "./clockClasses.mjs";
+import type { Meridiem } from "../internals/utils/time-utils.mjs";
+import type { FormProps } from "../internals/models/formProps.mjs";
 export interface ClockProps extends ReturnType<typeof useMeridiemMode>, FormProps {
   ampm: boolean;
   ampmInClock: boolean;

package/TimeClock/Clock.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import type { PickerSelectionState } from "../internals/hooks/usePicker/index.js";
-import { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
-import { PickerOwnerState, PickerValidDate, TimeView } from "../models/index.js";
-import { ClockClasses } from "./clockClasses.js";
-import { Meridiem } from "../internals/utils/time-utils.js";
-import { FormProps } from "../internals/models/formProps.js";
+import type { useMeridiemMode } from "../internals/hooks/date-helpers-hooks.js";
+import type { PickerOwnerState, PickerValidDate, TimeView } from "../models/index.js";
+import type { ClockClasses } from "./clockClasses.js";
+import type { Meridiem } from "../internals/utils/time-utils.js";
+import type { FormProps } from "../internals/models/formProps.js";
 export interface ClockProps extends ReturnType<typeof useMeridiemMode>, FormProps {
   ampm: boolean;
   ampmInClock: boolean;

package/TimeClock/Clock.js

@@ -14,6 +14,8 @@ var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _styles = require("@mui/material/styles");
 var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ClockPointer = require("./ClockPointer");
 var _hooks = require("../hooks");
@@ -194,6 +196,9 @@ function Clock(inProps) {
     clockMeridiemMode: meridiemMode
   });
   const isMoving = React.useRef(false);
+  const activePointerIdRef = React.useRef(null);
+  const squareMaskRef = React.useRef(null);
+  const removeDragListenersRef = React.useRef(undefined);
   const classes = useUtilityClasses(classesProp, ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
   const isPointerInner = !ampm && type === 'hours' && (viewValue < 1 || viewValue > 12);
@@ -207,40 +212,81 @@ function Clock(inProps) {
     onChange(newValue, isFinish);
   };
   const setTime = (event, isFinish) => {
-    let {
-      offsetX,
-      offsetY
-    } = event;
-    if (offsetX === undefined) {
-      const rect = event.target.getBoundingClientRect();
-      offsetX = event.changedTouches[0].clientX - rect.left;
-      offsetY = event.changedTouches[0].clientY - rect.top;
+    const mask = squareMaskRef.current;
+    // The document-level listeners can briefly outlive the mask during unmount:
+    // React detaches refs before the cleanup effect removes the listeners, so a
+    // pointer event firing in that window would otherwise dereference a null ref.
+    if (!mask) {
+      return;
     }
+
+    // Resolve the pointer coordinates relative to the clock mask rather than from
+    // `offsetX`/`offsetY`: the `pointermove`/`pointerup` listeners live on the
+    // document (see `handlePointerDown`), so the event target can be any element
+    // once the pointer leaves the clock.
+    const rect = mask.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left;
+    const offsetY = event.clientY - rect.top;
     const newSelectedValue = type === 'seconds' || type === 'minutes' ? (0, _shared.getMinutes)(offsetX, offsetY, minutesStep) : (0, _shared.getHours)(offsetX, offsetY, Boolean(ampm));
     handleValueChange(newSelectedValue, isFinish);
   };
-  const handleTouchSelection = event => {
-    isMoving.current = true;
-    setTime(event, 'shallow');
+
+  // Pointer events are the single source of truth for mouse, touch and pen. The
+  // move/up/cancel listeners are attached to the document so a drag keeps
+  // tracking and commits even when the pointer is released outside the clock.
+  const stopTracking = () => {
+    isMoving.current = false;
+    activePointerIdRef.current = null;
+    // Idempotent: the cleanup clears its own ref, so calling `stopTracking` twice
+    // (e.g. a `pointercancel` racing a `pointerup`) is a safe no-op.
+    removeDragListenersRef.current?.();
   };
-  const handleTouchEnd = event => {
-    if (isMoving.current) {
-      setTime(event, 'finish');
-      isMoving.current = false;
+  const handleDocumentPointerMove = (0, _useEventCallback.default)(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
     }
     event.preventDefault();
-  };
-  const handleMouseMove = event => {
-    // event.buttons & PRIMARY_MOUSE_BUTTON
-    if (event.buttons > 0) {
-      setTime(event.nativeEvent, 'shallow');
+    setTime(event, 'shallow');
+  });
+  const handleDocumentPointerUp = (0, _useEventCallback.default)(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
     }
-  };
-  const handleMouseUp = event => {
-    if (isMoving.current) {
-      isMoving.current = false;
+    stopTracking();
+    setTime(event, 'finish');
+  });
+  const handleDocumentPointerCancel = (0, _useEventCallback.default)(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+    // The gesture was interrupted by the user agent: drop it without committing.
+    stopTracking();
+  });
+  const handlePointerDown = event => {
+    // Ignore secondary buttons (middle = 1, right = 2), secondary multi-touch
+    // pointers and interactions that can't change the value. `> 0` rather than
+    // `!== 0` keeps the gesture permissive when `event.button` is left unset by a
+    // synthetic event (some test environments), matching `useDragRange`.
+    if (event.button > 0 || event.isPrimary === false || disabled || readOnly) {
+      return;
     }
-    setTime(event.nativeEvent, 'finish');
+
+    // A fresh primary pointerdown ends any previous gesture whose pointerup was
+    // lost, fully resetting its state before starting the new one.
+    stopTracking();
+    isMoving.current = true;
+    activePointerIdRef.current = event.pointerId;
+    const doc = (0, _ownerDocument.default)(squareMaskRef.current);
+    doc.addEventListener('pointermove', handleDocumentPointerMove);
+    doc.addEventListener('pointerup', handleDocumentPointerUp);
+    doc.addEventListener('pointercancel', handleDocumentPointerCancel);
+    removeDragListenersRef.current = () => {
+      doc.removeEventListener('pointermove', handleDocumentPointerMove);
+      doc.removeEventListener('pointerup', handleDocumentPointerUp);
+      doc.removeEventListener('pointercancel', handleDocumentPointerCancel);
+      removeDragListenersRef.current = undefined;
+    };
+    setTime(event.nativeEvent, 'shallow');
   };
   const isPointerBetweenTwoClockValues = type === 'hours' ? false : viewValue % 5 !== 0;
   const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
@@ -253,6 +299,9 @@ function Clock(inProps) {
       listboxRef.current.focus();
     }
   }, [autoFocus]);
+
+  // Clean up the document-level pointer listeners if the clock unmounts mid-drag.
+  React.useEffect(() => () => removeDragListenersRef.current?.(), []);
   const clampValue = newValue => Math.max(minViewValue, Math.min(maxViewValue, newValue));
   const circleValue = newValue => (newValue + (maxViewValue + 1)) % (maxViewValue + 1);
   const handleKeyDown = event => {
@@ -300,11 +349,8 @@ function Clock(inProps) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(ClockClock, {
       className: classes.clock,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ClockSquareMask, {
-        onTouchMove: handleTouchSelection,
-        onTouchStart: handleTouchSelection,
-        onTouchEnd: handleTouchEnd,
-        onMouseUp: handleMouseUp,
-        onMouseMove: handleMouseMove,
+        ref: squareMaskRef,
+        onPointerDown: handlePointerDown,
         ownerState: ownerState,
         className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {

package/TimeClock/Clock.mjs

@@ -7,6 +7,8 @@ import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { styled, useThemeProps } from '@mui/material/styles';
 import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useEventCallback from '@mui/utils/useEventCallback';
+import ownerDocument from '@mui/utils/ownerDocument';
 import composeClasses from '@mui/utils/composeClasses';
 import { ClockPointer } from "./ClockPointer.mjs";
 import { usePickerAdapter, usePickerTranslations } from "../hooks/index.mjs";
@@ -187,6 +189,9 @@ export function Clock(inProps) {
     clockMeridiemMode: meridiemMode
   });
   const isMoving = React.useRef(false);
+  const activePointerIdRef = React.useRef(null);
+  const squareMaskRef = React.useRef(null);
+  const removeDragListenersRef = React.useRef(undefined);
   const classes = useUtilityClasses(classesProp, ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
   const isPointerInner = !ampm && type === 'hours' && (viewValue < 1 || viewValue > 12);
@@ -200,40 +205,81 @@ export function Clock(inProps) {
     onChange(newValue, isFinish);
   };
   const setTime = (event, isFinish) => {
-    let {
-      offsetX,
-      offsetY
-    } = event;
-    if (offsetX === undefined) {
-      const rect = event.target.getBoundingClientRect();
-      offsetX = event.changedTouches[0].clientX - rect.left;
-      offsetY = event.changedTouches[0].clientY - rect.top;
+    const mask = squareMaskRef.current;
+    // The document-level listeners can briefly outlive the mask during unmount:
+    // React detaches refs before the cleanup effect removes the listeners, so a
+    // pointer event firing in that window would otherwise dereference a null ref.
+    if (!mask) {
+      return;
     }
+
+    // Resolve the pointer coordinates relative to the clock mask rather than from
+    // `offsetX`/`offsetY`: the `pointermove`/`pointerup` listeners live on the
+    // document (see `handlePointerDown`), so the event target can be any element
+    // once the pointer leaves the clock.
+    const rect = mask.getBoundingClientRect();
+    const offsetX = event.clientX - rect.left;
+    const offsetY = event.clientY - rect.top;
     const newSelectedValue = type === 'seconds' || type === 'minutes' ? getMinutes(offsetX, offsetY, minutesStep) : getHours(offsetX, offsetY, Boolean(ampm));
     handleValueChange(newSelectedValue, isFinish);
   };
-  const handleTouchSelection = event => {
-    isMoving.current = true;
-    setTime(event, 'shallow');
+
+  // Pointer events are the single source of truth for mouse, touch and pen. The
+  // move/up/cancel listeners are attached to the document so a drag keeps
+  // tracking and commits even when the pointer is released outside the clock.
+  const stopTracking = () => {
+    isMoving.current = false;
+    activePointerIdRef.current = null;
+    // Idempotent: the cleanup clears its own ref, so calling `stopTracking` twice
+    // (e.g. a `pointercancel` racing a `pointerup`) is a safe no-op.
+    removeDragListenersRef.current?.();
   };
-  const handleTouchEnd = event => {
-    if (isMoving.current) {
-      setTime(event, 'finish');
-      isMoving.current = false;
+  const handleDocumentPointerMove = useEventCallback(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
     }
     event.preventDefault();
-  };
-  const handleMouseMove = event => {
-    // event.buttons & PRIMARY_MOUSE_BUTTON
-    if (event.buttons > 0) {
-      setTime(event.nativeEvent, 'shallow');
+    setTime(event, 'shallow');
+  });
+  const handleDocumentPointerUp = useEventCallback(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
     }
-  };
-  const handleMouseUp = event => {
-    if (isMoving.current) {
-      isMoving.current = false;
+    stopTracking();
+    setTime(event, 'finish');
+  });
+  const handleDocumentPointerCancel = useEventCallback(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+    // The gesture was interrupted by the user agent: drop it without committing.
+    stopTracking();
+  });
+  const handlePointerDown = event => {
+    // Ignore secondary buttons (middle = 1, right = 2), secondary multi-touch
+    // pointers and interactions that can't change the value. `> 0` rather than
+    // `!== 0` keeps the gesture permissive when `event.button` is left unset by a
+    // synthetic event (some test environments), matching `useDragRange`.
+    if (event.button > 0 || event.isPrimary === false || disabled || readOnly) {
+      return;
     }
-    setTime(event.nativeEvent, 'finish');
+
+    // A fresh primary pointerdown ends any previous gesture whose pointerup was
+    // lost, fully resetting its state before starting the new one.
+    stopTracking();
+    isMoving.current = true;
+    activePointerIdRef.current = event.pointerId;
+    const doc = ownerDocument(squareMaskRef.current);
+    doc.addEventListener('pointermove', handleDocumentPointerMove);
+    doc.addEventListener('pointerup', handleDocumentPointerUp);
+    doc.addEventListener('pointercancel', handleDocumentPointerCancel);
+    removeDragListenersRef.current = () => {
+      doc.removeEventListener('pointermove', handleDocumentPointerMove);
+      doc.removeEventListener('pointerup', handleDocumentPointerUp);
+      doc.removeEventListener('pointercancel', handleDocumentPointerCancel);
+      removeDragListenersRef.current = undefined;
+    };
+    setTime(event.nativeEvent, 'shallow');
   };
   const isPointerBetweenTwoClockValues = type === 'hours' ? false : viewValue % 5 !== 0;
   const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
@@ -246,6 +292,9 @@ export function Clock(inProps) {
       listboxRef.current.focus();
     }
   }, [autoFocus]);
+
+  // Clean up the document-level pointer listeners if the clock unmounts mid-drag.
+  React.useEffect(() => () => removeDragListenersRef.current?.(), []);
   const clampValue = newValue => Math.max(minViewValue, Math.min(maxViewValue, newValue));
   const circleValue = newValue => (newValue + (maxViewValue + 1)) % (maxViewValue + 1);
   const handleKeyDown = event => {
@@ -293,11 +342,8 @@ export function Clock(inProps) {
     children: [/*#__PURE__*/_jsxs(ClockClock, {
       className: classes.clock,
       children: [/*#__PURE__*/_jsx(ClockSquareMask, {
-        onTouchMove: handleTouchSelection,
-        onTouchStart: handleTouchSelection,
-        onTouchEnd: handleTouchEnd,
-        onMouseUp: handleMouseUp,
-        onMouseMove: handleMouseMove,
+        ref: squareMaskRef,
+        onPointerDown: handlePointerDown,
         ownerState: ownerState,
         className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {

package/TimeClock/ClockNumber.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ClockNumberClasses } from "./clockNumberClasses.mjs";
-import { PickerOwnerState } from "../models/pickers.mjs";
+import type { ClockNumberClasses } from "./clockNumberClasses.mjs";
+import type { PickerOwnerState } from "../models/pickers.mjs";
 export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
   'aria-label': string;
   disabled: boolean;

package/TimeClock/ClockNumber.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { ClockNumberClasses } from "./clockNumberClasses.js";
-import { PickerOwnerState } from "../models/pickers.js";
+import type { ClockNumberClasses } from "./clockNumberClasses.js";
+import type { PickerOwnerState } from "../models/pickers.js";
 export interface ClockNumberProps extends React.HTMLAttributes<HTMLSpanElement> {
   'aria-label': string;
   disabled: boolean;

package/TimeClock/ClockNumbers.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiPickersAdapter, PickerValidDate } from "../models/index.mjs";
+import type { MuiPickersAdapter, PickerValidDate } from "../models/index.mjs";
 import type { PickerSelectionState } from "../internals/hooks/usePicker/index.mjs";
 interface GetHourNumbersOptions {
   ampm: boolean;

package/TimeClock/ClockNumbers.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { MuiPickersAdapter, PickerValidDate } from "../models/index.js";
+import type { MuiPickersAdapter, PickerValidDate } from "../models/index.js";
 import type { PickerSelectionState } from "../internals/hooks/usePicker/index.js";
 interface GetHourNumbersOptions {
   ampm: boolean;

package/TimeClock/ClockPointer.d.mts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PickerOwnerState, TimeView } from "../models/index.mjs";
-import { ClockPointerClasses } from "./clockPointerClasses.mjs";
+import type { PickerOwnerState, TimeView } from "../models/index.mjs";
+import type { ClockPointerClasses } from "./clockPointerClasses.mjs";
 export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * `true` if the pointer is between two clock values.

package/TimeClock/ClockPointer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { PickerOwnerState, TimeView } from "../models/index.js";
-import { ClockPointerClasses } from "./clockPointerClasses.js";
+import type { PickerOwnerState, TimeView } from "../models/index.js";
+import type { ClockPointerClasses } from "./clockPointerClasses.js";
 export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * `true` if the pointer is between two clock values.

package/TimeClock/TimeClock.d.mts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TimeClockProps } from "./TimeClock.types.mjs";
+import type { TimeClockProps } from "./TimeClock.types.mjs";
 type TimeClockComponent = ((props: TimeClockProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };

package/TimeClock/TimeClock.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TimeClockProps } from "./TimeClock.types.js";
+import type { TimeClockProps } from "./TimeClock.types.js";
 type TimeClockComponent = ((props: TimeClockProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
   propTypes?: any;
 };