@mui/x-date-pickers 8.0.0-alpha.1 → 8.0.0-alpha.11

package/PickersTextField/PickersTextField.js

@@ -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", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+const _excluded = ["onFocus", "onBlur", "className", "classes", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "name", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -18,6 +18,8 @@ import { getPickersTextFieldUtilityClass } from "./pickersTextFieldClasses.js";
 import { PickersOutlinedInput } from "./PickersOutlinedInput/index.js";
 import { PickersFilledInput } from "./PickersFilledInput/index.js";
 import { PickersInput } from "./PickersInput/index.js";
+import { useFieldOwnerState } from "../internals/hooks/useFieldOwnerState.js";
+import { PickerTextFieldOwnerStateContext } from "./usePickerTextFieldOwnerState.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const VARIANT_COMPONENT = {
   standard: PickersInput,
@@ -29,15 +31,14 @@ const PickersTextFieldRoot = styled(FormControl, {
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    focused,
-    disabled,
-    classes,
-    required
+    isFieldFocused,
+    isFieldDisabled,
+    isFieldRequired
   } = ownerState;
   const slots = {
-    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
+    root: ['root', isFieldFocused && !isFieldDisabled && 'focused', isFieldDisabled && 'disabled', isFieldRequired && 'required']
   };
   return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
 };
@@ -51,6 +52,7 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
       onFocus,
       onBlur,
       className,
+      classes: classesProp,
       color = 'primary',
       disabled = false,
       error = false,
@@ -91,64 +93,75 @@ const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField
   const id = useId(idProp);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
-  const ownerState = _extends({}, props, {
-    color,
-    disabled,
-    error,
-    focused,
-    required,
-    variant
+  const fieldOwnerState = useFieldOwnerState({
+    disabled: props.disabled,
+    required: props.required,
+    readOnly: InputProps?.readOnly
   });
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = React.useMemo(() => _extends({}, fieldOwnerState, {
+    isFieldValueEmpty: areAllSectionsEmpty,
+    isFieldFocused: focused ?? false,
+    hasFieldError: error ?? false,
+    inputSize: props.size ?? 'medium',
+    inputColor: color ?? 'primary',
+    isInputInFullWidth: fullWidth ?? false,
+    hasStartAdornment: Boolean(startAdornment ?? InputProps?.startAdornment),
+    hasEndAdornment: Boolean(endAdornment ?? InputProps?.endAdornment),
+    inputHasLabel: !!label
+  }), [fieldOwnerState, areAllSectionsEmpty, focused, error, props.size, color, fullWidth, startAdornment, endAdornment, InputProps?.startAdornment, InputProps?.endAdornment, label]);
+  const classes = useUtilityClasses(classesProp, ownerState);
   const PickersInputComponent = VARIANT_COMPONENT[variant];
-  return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
-    className: clsx(classes.root, className),
-    ref: handleRootRef,
-    focused: focused,
-    disabled: disabled,
-    variant: variant,
-    error: error,
-    color: color,
-    fullWidth: fullWidth,
-    required: required,
-    ownerState: ownerState
-  }, other, {
-    children: [/*#__PURE__*/_jsx(InputLabel, _extends({
-      htmlFor: id,
-      id: inputLabelId
-    }, InputLabelProps, {
-      children: label
-    })), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
-      elements: elements,
-      areAllSectionsEmpty: areAllSectionsEmpty,
-      onClick: onClick,
-      onKeyDown: onKeyDown,
-      onKeyUp: onKeyUp,
-      onInput: onInput,
-      onPaste: onPaste,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      endAdornment: endAdornment,
-      startAdornment: startAdornment,
-      tabIndex: tabIndex,
-      contentEditable: contentEditable,
-      value: value,
-      onChange: onChange,
-      id: id,
+  return /*#__PURE__*/_jsx(PickerTextFieldOwnerStateContext.Provider, {
+    value: ownerState,
+    children: /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
+      className: clsx(classes.root, className),
+      ref: handleRootRef,
+      focused: focused,
+      disabled: disabled,
+      variant: variant,
+      error: error,
+      color: color,
       fullWidth: fullWidth,
-      inputProps: inputProps,
-      inputRef: inputRef,
-      sectionListRef: sectionListRef,
-      label: label,
-      name: name,
-      role: "group",
-      "aria-labelledby": inputLabelId
-    }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
-      id: helperTextId
-    }, FormHelperTextProps, {
-      children: helperText
-    }))]
-  }));
+      required: required,
+      ownerState: ownerState
+    }, other, {
+      children: [label != null && label !== '' && /*#__PURE__*/_jsx(InputLabel, _extends({
+        htmlFor: id,
+        id: inputLabelId
+      }, InputLabelProps, {
+        children: label
+      })), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
+        elements: elements,
+        areAllSectionsEmpty: areAllSectionsEmpty,
+        onClick: onClick,
+        onKeyDown: onKeyDown,
+        onKeyUp: onKeyUp,
+        onInput: onInput,
+        onPaste: onPaste,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        endAdornment: endAdornment,
+        startAdornment: startAdornment,
+        tabIndex: tabIndex,
+        contentEditable: contentEditable,
+        value: value,
+        onChange: onChange,
+        id: id,
+        fullWidth: fullWidth,
+        inputProps: inputProps,
+        inputRef: inputRef,
+        sectionListRef: sectionListRef,
+        label: label,
+        name: name,
+        role: "group",
+        "aria-labelledby": inputLabelId
+      }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+        id: helperTextId
+      }, FormHelperTextProps, {
+        children: helperText
+      }))]
+    }))
+  });
 });
 process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
   // ----------------------------- Warning --------------------------------

package/PickersTextField/PickersTextField.types.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { FormControlProps } from '@mui/material/FormControl';
+import { FormControlOwnProps, FormControlProps } from '@mui/material/FormControl';
 import { FormHelperTextProps } from '@mui/material/FormHelperText';
 import { InputLabelProps } from '@mui/material/InputLabel';
 import { TextFieldVariants } from '@mui/material/TextField';
 import { PickersInputPropsUsedByField } from './PickersInputBase/PickersInputBase.types';
-import { PickersInputProps } from './PickersInput';
-import { PickersOutlinedInputProps } from './PickersOutlinedInput';
-import { PickersFilledInputProps } from './PickersFilledInput';
+import type { PickersInputProps } from './PickersInput';
+import type { PickersOutlinedInputProps } from './PickersOutlinedInput';
+import type { PickersFilledInputProps } from './PickersFilledInput';
+import { FieldOwnerState } from '../models';
 interface PickersTextFieldPropsUsedByField {
     onFocus: React.FocusEventHandler<HTMLDivElement>;
     onBlur: React.FocusEventHandler<HTMLDivElement>;
@@ -64,4 +65,42 @@ export interface PickersFilledTextFieldProps extends PickersBaseTextFieldProps {
     InputProps?: Partial<PickersFilledInputProps>;
 }
 export type PickersTextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> = Variant extends 'filled' ? PickersFilledTextFieldProps : Variant extends 'standard' ? PickersStandardTextFieldProps : PickersOutlinedTextFieldProps;
+export interface PickerTextFieldOwnerState extends FieldOwnerState {
+    /**
+     * `true` if the value of the field is currently empty.
+     */
+    isFieldValueEmpty: boolean;
+    /**
+     * `true` if the field is focused, `false` otherwise.
+     */
+    isFieldFocused: boolean;
+    /**
+     * `true` if the field has an error, `false` otherwise.
+     */
+    hasFieldError: boolean;
+    /**
+     * The size of the input.
+     */
+    inputSize: Exclude<FormControlOwnProps['size'], undefined>;
+    /**
+     * The color of the input.
+     */
+    inputColor: Exclude<FormControlOwnProps['color'], undefined>;
+    /**
+     * `true` if the input takes up the full width of its container.
+     */
+    isInputInFullWidth: boolean;
+    /**
+     * `true` if the input has a start adornment, `false` otherwise.
+     */
+    hasStartAdornment: boolean;
+    /**
+     * `true` if the input has an end adornment, `false` otherwise.
+     */
+    hasEndAdornment: boolean;
+    /**
+     * `true` if the input has a label, `false` otherwise.
+     */
+    inputHasLabel: boolean;
+}
 export {};

package/PickersTextField/usePickerTextFieldOwnerState.d.ts

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

package/PickersTextField/usePickerTextFieldOwnerState.js

@@ -0,0 +1,11 @@
+'use client';
+
+import * as React from 'react';
+export const PickerTextFieldOwnerStateContext = /*#__PURE__*/React.createContext(null);
+export const usePickerTextFieldOwnerState = () => {
+  const value = React.useContext(PickerTextFieldOwnerStateContext);
+  if (value == null) {
+    throw new Error(['MUI X: The `usePickerTextFieldOwnerState` can only be called in components that are used inside a PickerTextField component'].join('\n'));
+  }
+  return value;
+};

package/README.md

@@ -1,7 +1,7 @@
 # MUI X Date Pickers
 
 This package is the Community plan edition of the Date and Time Picker components.
-It's part of [MUI X](https://mui.com/x/), an open-core extension of MUI Core, with advanced components.
+It's part of [MUI X](https://mui.com/x/), an open-core extension of our Core libraries, with advanced components.
 
 ## Installation
 
@@ -20,13 +20,16 @@ The pickers currently support the following date libraries:
 - [Moment.js](https://momentjs.com/)
 
 ```bash
-// date-fns
+# date-fns
 npm install date-fns
-// or dayjs
+
+# or dayjs
 npm install dayjs
-// or luxon
+
+# or luxon
 npm install luxon
-// or moment
+
+# or moment
 npm install moment
 ```
 

package/StaticDatePicker/StaticDatePicker.js

@@ -41,11 +41,11 @@ const StaticDatePicker = /*#__PURE__*/React.forwardRef(function StaticDatePicker
   const {
     renderPicker
   } = useStaticPicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'date',
-    validator: validateDate,
-    ref
+    validator: validateDate
   });
   return renderPicker();
 });

package/StaticDatePicker/StaticDatePicker.types.d.ts

@@ -1,10 +1,9 @@
 import { MakeOptional } from '@mui/x-internals/types';
 import { BaseDatePickerProps, BaseDatePickerSlots, BaseDatePickerSlotProps } from '../DatePicker/shared';
 import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from '../internals/hooks/useStaticPicker';
-import { DateView } from '../models';
-export interface StaticDatePickerSlots extends BaseDatePickerSlots, UseStaticPickerSlots<DateView> {
+export interface StaticDatePickerSlots extends BaseDatePickerSlots, UseStaticPickerSlots {
 }
-export interface StaticDatePickerSlotProps extends BaseDatePickerSlotProps, UseStaticPickerSlotProps<DateView> {
+export interface StaticDatePickerSlotProps extends BaseDatePickerSlotProps, UseStaticPickerSlotProps {
 }
 export interface StaticDatePickerProps extends BaseDatePickerProps, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -51,11 +51,11 @@ const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTi
   const {
     renderPicker
   } = useStaticPicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'date-time',
-    validator: validateDateTime,
-    ref
+    validator: validateDateTime
   });
   return renderPicker();
 });

package/StaticDateTimePicker/StaticDateTimePicker.types.d.ts

@@ -2,9 +2,9 @@ import { MakeOptional } from '@mui/x-internals/types';
 import { BaseDateTimePickerProps, BaseDateTimePickerSlots, BaseDateTimePickerSlotProps } from '../DateTimePicker/shared';
 import { StaticOnlyPickerProps, UseStaticPickerSlots, UseStaticPickerSlotProps } from '../internals/hooks/useStaticPicker';
 import { DateOrTimeView } from '../models';
-export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots<DateOrTimeView> {
+export interface StaticDateTimePickerSlots extends BaseDateTimePickerSlots, UseStaticPickerSlots {
 }
-export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps<DateOrTimeView> {
+export interface StaticDateTimePickerSlotProps extends BaseDateTimePickerSlotProps, UseStaticPickerSlotProps {
 }
 export interface StaticDateTimePickerProps extends BaseDateTimePickerProps<DateOrTimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**

package/StaticTimePicker/StaticTimePicker.js

@@ -43,11 +43,11 @@ const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker
   const {
     renderPicker
   } = useStaticPicker({
+    ref,
     props,
     valueManager: singleItemValueManager,
     valueType: 'time',
-    validator: validateTime,
-    ref
+    validator: validateTime
   });
   return renderPicker();
 });

package/StaticTimePicker/StaticTimePicker.types.d.ts

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

package/TimeClock/Clock.d.ts

@@ -26,6 +26,10 @@ export interface ClockProps extends ReturnType<typeof useMeridiemMode>, FormProp
      * The current full date value.
      */
     value: PickerValidDate | null;
+    /**
+     * Minimum and maximum value of the clock.
+     */
+    viewRange: [number, number];
     className?: string;
     classes?: Partial<ClockClasses>;
 }

package/TimeClock/Clock.js

@@ -11,20 +11,17 @@ import { useUtils } from "../internals/hooks/useUtils.js";
 import { CLOCK_HOUR_WIDTH, getHours, getMinutes } from "./shared.js";
 import { getClockUtilityClass } from "./clockClasses.js";
 import { formatMeridiem } from "../internals/utils/date-utils.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    meridiemMode
-  } = ownerState;
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
     root: ['root'],
     clock: ['clock'],
     wrapper: ['wrapper'],
     squareMask: ['squareMask'],
     pin: ['pin'],
-    amButton: ['amButton', meridiemMode === 'am' && 'selected'],
-    pmButton: ['pmButton', meridiemMode === 'pm' && 'selected'],
+    amButton: ['amButton', ownerState.clockMeridiemMode === 'am' && 'selected'],
+    pmButton: ['pmButton', ownerState.clockMeridiemMode === 'pm' && 'selected'],
     meridiemText: ['meridiemText']
   };
   return composeClasses(slots, getClockUtilityClass, classes);
@@ -78,7 +75,7 @@ const ClockSquareMask = styled('div', {
   userSelect: 'none',
   variants: [{
     props: {
-      disabled: false
+      isClockDisabled: false
     },
     style: {
       '@media (pointer: fine)': {
@@ -180,15 +177,23 @@ export function Clock(inProps) {
     selectedId,
     type,
     viewValue,
+    viewRange: [minViewValue, maxViewValue],
     disabled = false,
     readOnly,
-    className
+    className,
+    classes: classesProp
   } = props;
-  const ownerState = props;
   const utils = useUtils();
   const translations = usePickerTranslations();
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isClockDisabled: disabled,
+    clockMeridiemMode: meridiemMode
+  });
   const isMoving = React.useRef(false);
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   const isSelectedTimeDisabled = isTimeDisabled(viewValue, type);
   const isPointerInner = !ampm && type === 'hours' && (viewValue < 1 || viewValue > 12);
   const handleValueChange = (newValue, isFinish) => {
@@ -236,12 +241,7 @@ export function Clock(inProps) {
     }
     setTime(event.nativeEvent, 'finish');
   };
-  const hasSelected = React.useMemo(() => {
-    if (type === 'hours') {
-      return true;
-    }
-    return viewValue % 5 === 0;
-  }, [type, viewValue]);
+  const isPointerBetweenTwoClockValues = type === 'hours' ? false : viewValue % 5 !== 0;
   const keyboardControlStep = type === 'minutes' ? minutesStep : 1;
   const listboxRef = React.useRef(null);
   // Since this is rendered when a Popper is opened we can't use passive effects.
@@ -252,6 +252,8 @@ export function Clock(inProps) {
       listboxRef.current.focus();
     }
   }, [autoFocus]);
+  const clampValue = newValue => Math.max(minViewValue, Math.min(maxViewValue, newValue));
+  const circleValue = newValue => (newValue + (maxViewValue + 1)) % (maxViewValue + 1);
   const handleKeyDown = event => {
     // TODO: Why this early exit?
     if (isMoving.current) {
@@ -260,27 +262,27 @@ export function Clock(inProps) {
     switch (event.key) {
       case 'Home':
         // reset both hours and minutes
-        handleValueChange(0, 'partial');
+        handleValueChange(minViewValue, 'partial');
         event.preventDefault();
         break;
       case 'End':
-        handleValueChange(type === 'minutes' ? 59 : 23, 'partial');
+        handleValueChange(maxViewValue, 'partial');
         event.preventDefault();
         break;
       case 'ArrowUp':
-        handleValueChange(viewValue + keyboardControlStep, 'partial');
+        handleValueChange(circleValue(viewValue + keyboardControlStep), 'partial');
         event.preventDefault();
         break;
       case 'ArrowDown':
-        handleValueChange(viewValue - keyboardControlStep, 'partial');
+        handleValueChange(circleValue(viewValue - keyboardControlStep), 'partial');
         event.preventDefault();
         break;
       case 'PageUp':
-        handleValueChange(viewValue + 5, 'partial');
+        handleValueChange(clampValue(viewValue + 5), 'partial');
         event.preventDefault();
         break;
       case 'PageDown':
-        handleValueChange(viewValue - 5, 'partial');
+        handleValueChange(clampValue(viewValue - 5), 'partial');
         event.preventDefault();
         break;
       case 'Enter':
@@ -302,9 +304,7 @@ export function Clock(inProps) {
         onTouchEnd: handleTouchEnd,
         onMouseUp: handleMouseUp,
         onMouseMove: handleMouseMove,
-        ownerState: {
-          disabled
-        },
+        ownerState: ownerState,
         className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/_jsxs(React.Fragment, {
         children: [/*#__PURE__*/_jsx(ClockPin, {
@@ -313,7 +313,7 @@ export function Clock(inProps) {
           type: type,
           viewValue: viewValue,
           isInner: isPointerInner,
-          hasSelected: hasSelected
+          isBetweenTwoClockValues: isPointerBetweenTwoClockValues
         })]
       }), /*#__PURE__*/_jsx(ClockWrapper, {
         "aria-activedescendant": selectedId,

package/TimeClock/ClockNumber.js

@@ -1,21 +1,17 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
+const _excluded = ["className", "classes", "disabled", "index", "inner", "label", "selected"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled, useThemeProps } from '@mui/material/styles';
 import composeClasses from '@mui/utils/composeClasses';
 import { CLOCK_WIDTH, CLOCK_HOUR_WIDTH } from "./shared.js";
 import { getClockNumberUtilityClass, clockNumberClasses } from "./clockNumberClasses.js";
+import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected,
-    disabled
-  } = ownerState;
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
-    root: ['root', selected && 'selected', disabled && 'disabled']
+    root: ['root', ownerState.isClockNumberSelected && 'selected', ownerState.isClockNumberDisabled && 'disabled']
   };
   return composeClasses(slots, getClockNumberUtilityClass, classes);
 };
@@ -52,7 +48,7 @@ const ClockNumberRoot = styled('span', {
   },
   variants: [{
     props: {
-      inner: true
+      isClockNumberInInnerRing: true
     },
     style: _extends({}, theme.typography.body2, {
       color: (theme.vars || theme).palette.text.secondary
@@ -70,6 +66,7 @@ export function ClockNumber(inProps) {
   });
   const {
       className,
+      classes: classesProp,
       disabled,
       index,
       inner,
@@ -77,8 +74,15 @@ export function ClockNumber(inProps) {
       selected
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = usePickerPrivateContext();
+  const ownerState = _extends({}, pickerOwnerState, {
+    isClockNumberInInnerRing: inner,
+    isClockNumberSelected: selected,
+    isClockNumberDisabled: disabled
+  });
+  const classes = useUtilityClasses(classesProp, ownerState);
   const angle = index % 12 / 12 * Math.PI * 2 - Math.PI / 2;
   const length = (CLOCK_WIDTH - CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
   const x = Math.round(Math.cos(angle) * length);

package/TimeClock/ClockPointer.d.ts

@@ -2,7 +2,12 @@ import * as React from 'react';
 import { TimeView } from '../models';
 import { ClockPointerClasses } from './clockPointerClasses';
 export interface ClockPointerProps extends React.HTMLAttributes<HTMLDivElement> {
-    hasSelected: boolean;
+    /**
+     * `true` if the pointer is between two clock values.
+     * On the `hours` view, it is always false.
+     * On the `minutes` view, it is true if the pointer is on a value that is not a multiple of 5.
+     */
+    isBetweenTwoClockValues: boolean;
     isInner: boolean;
     type: TimeView;
     viewValue: number;