@mui/x-date-pickers 8.0.0-alpha.4 → 8.0.0-alpha.5

package/node/PickersTextField/PickersInputBase/PickersInputBase.js

@@ -18,11 +18,11 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _visuallyHidden = _interopRequireDefault(require("@mui/utils/visuallyHidden"));
-var _RtlProvider = require("@mui/system/RtlProvider");
 var _pickersInputBaseClasses = require("./pickersInputBaseClasses");
 var _PickersSectionList = require("../../PickersSectionList");
+var _usePickerTextFieldOwnerState = require("../usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur"];
+const _excluded = ["elements", "areAllSectionsEmpty", "defaultValue", "label", "value", "onChange", "id", "autoFocus", "endAdornment", "startAdornment", "renderSuffix", "slots", "slotProps", "contentEditable", "tabIndex", "onInput", "onPaste", "onKeyDown", "fullWidth", "name", "readOnly", "inputProps", "inputRef", "sectionListRef", "onFocus", "onBlur", "classes", "ownerState"];
 const round = value => Math.round(value * 1e5) / 1e5;
 const PickersInputBaseRoot = exports.PickersInputBaseRoot = (0, _styles.styled)('div', {
   name: 'MuiPickersInputBase',
@@ -43,7 +43,7 @@ const PickersInputBaseRoot = exports.PickersInputBaseRoot = (0, _styles.styled)(
   letterSpacing: `${round(0.15 / 16)}em`,
   variants: [{
     props: {
-      fullWidth: true
+      isInputInFullWidth: true
     },
     style: {
       width: '100%'
@@ -72,36 +72,35 @@ const PickersInputBaseSectionsContainer = exports.PickersInputBaseSectionsContai
   width: '182px',
   variants: [{
     props: {
-      isRtl: true
+      fieldDirection: 'rtl'
     },
     style: {
       textAlign: 'right /*! @noflip */'
     }
   }, {
     props: {
-      size: 'small'
+      inputSize: 'small'
     },
     style: {
       paddingTop: 1
     }
   }, {
     props: {
-      adornedStart: false,
-      focused: false,
-      filled: false
+      hasStartAdornment: false,
+      isFieldFocused: false,
+      isFieldValueEmpty: true
     },
     style: {
       color: 'currentColor',
       opacity: 0
     }
   }, {
-    // Can't use the object notation because label can be null or undefined
-    props: ({
-      adornedStart,
-      focused,
-      filled,
-      label
-    }) => !adornedStart && !focused && !filled && label == null,
+    props: {
+      hasStartAdornment: false,
+      isFieldFocused: false,
+      isFieldValueEmpty: true,
+      inputHasLabel: false
+    },
     style: theme.vars ? {
       opacity: theme.vars.opacity.inputPlaceholder
     } : {
@@ -150,21 +149,20 @@ const PickersInputBaseInput = (0, _styles.styled)('input', {
   slot: 'Input',
   overridesResolver: (props, styles) => styles.hiddenInput
 })((0, _extends2.default)({}, _visuallyHidden.default));
-const useUtilityClasses = ownerState => {
+const useUtilityClasses = (classes, ownerState) => {
   const {
-    focused,
-    disabled,
-    error,
-    classes,
-    fullWidth,
-    readOnly,
-    color,
-    size,
-    endAdornment,
-    startAdornment
+    isFieldFocused,
+    isFieldDisabled,
+    isFieldReadOnly,
+    hasFieldError,
+    inputSize,
+    isInputInFullWidth,
+    inputColor,
+    hasStartAdornment,
+    hasEndAdornment
   } = ownerState;
   const slots = {
-    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', readOnly && 'readOnly', error && 'error', fullWidth && 'fullWidth', `color${(0, _capitalize.default)(color)}`, size === 'small' && 'inputSizeSmall', Boolean(startAdornment) && 'adornedStart', Boolean(endAdornment) && 'adornedEnd'],
+    root: ['root', isFieldFocused && !isFieldDisabled && 'focused', isFieldDisabled && 'disabled', isFieldReadOnly && 'readOnly', hasFieldError && 'error', isInputInFullWidth && 'fullWidth', `color${(0, _capitalize.default)(inputColor)}`, inputSize === 'small' && 'inputSizeSmall', hasStartAdornment && 'adornedStart', hasEndAdornment && 'adornedEnd'],
     notchedOutline: ['notchedOutline'],
     input: ['input'],
     sectionsContainer: ['sectionsContainer'],
@@ -174,6 +172,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _pickersInputBaseClasses.getPickersInputBaseUtilityClass, classes);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -204,17 +203,20 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       inputRef,
       sectionListRef,
       onFocus,
-      onBlur
+      onBlur,
+      classes: classesProp,
+      ownerState: ownerStateProp
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const ownerStateContext = (0, _usePickerTextFieldOwnerState.usePickerTextFieldOwnerState)();
   const rootRef = React.useRef(null);
   const handleRootRef = (0, _useForkRef.default)(ref, rootRef);
   const handleInputRef = (0, _useForkRef.default)(inputProps?.ref, inputRef);
-  const isRtl = (0, _RtlProvider.useRtl)();
   const muiFormControl = (0, _FormControl.useFormControl)();
   if (!muiFormControl) {
     throw new Error('MUI X: PickersInputBase should always be used inside a PickersTextField component');
   }
+  const ownerState = ownerStateProp ?? ownerStateContext;
   const handleInputFocus = event => {
     muiFormControl.onFocus?.(event);
     onFocus?.(event);
@@ -238,10 +240,7 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
       muiFormControl.onFilled();
     }
   }, [muiFormControl, areAllSectionsEmpty]);
-  const ownerState = (0, _extends2.default)({}, props, muiFormControl, {
-    isRtl
-  });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp, ownerState);
   const InputRoot = slots?.root || PickersInputBaseRoot;
   const inputRootProps = (0, _useSlotProps.default)({
     elementType: InputRoot,
@@ -274,16 +273,16 @@ const PickersInputBase = exports.PickersInputBase = /*#__PURE__*/React.forwardRe
         sectionSeparator: PickersInputBaseSectionSeparator
       },
       slotProps: {
-        root: {
+        root: (0, _extends2.default)({}, slotProps?.input, {
           ownerState
-        },
+        }),
         sectionContent: {
           className: _pickersInputBaseClasses.pickersInputBaseClasses.sectionContent
         },
         sectionSeparator: ({
-          position
+          separatorPosition
         }) => ({
-          className: position === 'before' ? _pickersInputBaseClasses.pickersInputBaseClasses.sectionBefore : _pickersInputBaseClasses.pickersInputBaseClasses.sectionAfter
+          className: separatorPosition === 'before' ? _pickersInputBaseClasses.pickersInputBaseClasses.sectionBefore : _pickersInputBaseClasses.pickersInputBaseClasses.sectionAfter
         })
       }
     }), endAdornment, renderSuffix ? renderSuffix((0, _extends2.default)({}, muiFormControl)) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputBaseInput, (0, _extends2.default)({

package/node/PickersTextField/PickersOutlinedInput/Outline.js

@@ -10,6 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
+var _createStyled = require("@mui/system/createStyled");
+var _usePickerTextFieldOwnerState = require("../usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "label", "notched", "shrink"];
 const OutlineRoot = (0, _styles.styled)('fieldset', {
@@ -44,7 +46,9 @@ const OutlineLabel = (0, _styles.styled)('span')(({
   fontFamily: theme.typography.fontFamily,
   fontSize: 'inherit'
 }));
-const OutlineLegend = (0, _styles.styled)('legend')(({
+const OutlineLegend = (0, _styles.styled)('legend', {
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'notched'
+})(({
   theme
 }) => ({
   float: 'unset',
@@ -55,7 +59,7 @@ const OutlineLegend = (0, _styles.styled)('legend')(({
   // Fix Horizontal scroll when label too long
   variants: [{
     props: {
-      withLabel: false
+      inputHasLabel: false
     },
     style: {
       padding: 0,
@@ -68,7 +72,7 @@ const OutlineLegend = (0, _styles.styled)('legend')(({
     }
   }, {
     props: {
-      withLabel: true
+      inputHasLabel: true
     },
     style: {
       display: 'block',
@@ -94,7 +98,7 @@ const OutlineLegend = (0, _styles.styled)('legend')(({
     }
   }, {
     props: {
-      withLabel: true,
+      inputHasLabel: true,
       notched: true
     },
     style: {
@@ -114,13 +118,11 @@ const OutlineLegend = (0, _styles.styled)('legend')(({
 function Outline(props) {
   const {
       className,
-      label
+      label,
+      notched
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const withLabel = label != null && label !== '';
-  const ownerState = (0, _extends2.default)({}, props, {
-    withLabel
-  });
+  const ownerState = (0, _usePickerTextFieldOwnerState.usePickerTextFieldOwnerState)();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(OutlineRoot, (0, _extends2.default)({
     "aria-hidden": true,
     className: className
@@ -128,7 +130,8 @@ function Outline(props) {
     ownerState: ownerState,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(OutlineLegend, {
       ownerState: ownerState,
-      children: withLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OutlineLabel, {
+      notched: notched,
+      children: label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(OutlineLabel, {
         children: label
       }) :
       /*#__PURE__*/

package/node/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.js

@@ -19,7 +19,7 @@ var _Outline = _interopRequireDefault(require("./Outline"));
 var _PickersInputBase = require("../PickersInputBase");
 var _PickersInputBase2 = require("../PickersInputBase/PickersInputBase");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["label", "autoFocus", "ownerState", "notched"];
+const _excluded = ["label", "autoFocus", "ownerState", "classes", "notched"];
 const PickersOutlinedInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersInputBaseRoot, {
   name: 'MuiPickersOutlinedInput',
   slot: 'Root',
@@ -59,7 +59,7 @@ const PickersOutlinedInputRoot = (0, _styles.styled)(_PickersInputBase2.PickersI
     // @ts-ignore
     .filter(key => (theme.vars ?? theme).palette[key]?.main ?? false).map(color => ({
       props: {
-        color
+        inputColor: color
       },
       style: {
         [`&.${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.focused}:not(.${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.error}) .${_pickersOutlinedInputClasses.pickersOutlinedInputClasses.notchedOutline}`]: {
@@ -78,17 +78,14 @@ const PickersOutlinedInputSectionsContainer = (0, _styles.styled)(_PickersInputB
   padding: '16.5px 0',
   variants: [{
     props: {
-      size: 'small'
+      inputSize: 'small'
     },
     style: {
       padding: '8.5px 0'
     }
   }]
 });
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     notchedOutline: ['notchedOutline'],
@@ -97,6 +94,7 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _pickersOutlinedInputClasses.getPickersOutlinedInputUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
+
 /**
  * @ignore - internal component.
  */
@@ -107,15 +105,12 @@ const PickersOutlinedInput = exports.PickersOutlinedInput = /*#__PURE__*/React.f
   });
   const {
       label,
-      ownerState: ownerStateProp,
+      classes: classesProp,
       notched
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const muiFormControl = (0, _FormControl.useFormControl)();
-  const ownerState = (0, _extends2.default)({}, props, ownerStateProp, muiFormControl, {
-    color: muiFormControl?.color || 'primary'
-  });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickersInputBase.PickersInputBase, (0, _extends2.default)({
     slots: {
       root: PickersOutlinedInputRoot,
@@ -127,8 +122,7 @@ const PickersOutlinedInput = exports.PickersOutlinedInput = /*#__PURE__*/React.f
       className: classes.notchedOutline,
       label: label != null && label !== '' && muiFormControl?.required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [label, "\u2009", '*']
-      }) : label,
-      ownerState: ownerState
+      }) : label
     })
   }, other, {
     label: label,

package/node/PickersTextField/PickersTextField.js

@@ -24,8 +24,10 @@ var _pickersTextFieldClasses = require("./pickersTextFieldClasses");
 var _PickersOutlinedInput = require("./PickersOutlinedInput");
 var _PickersFilledInput = require("./PickersFilledInput");
 var _PickersInput = require("./PickersInput");
+var _useFieldOwnerState = require("../internals/hooks/useFieldOwnerState");
+var _usePickerTextFieldOwnerState = require("./usePickerTextFieldOwnerState");
 var _jsxRuntime = require("react/jsx-runtime");
-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"];
 const VARIANT_COMPONENT = {
   standard: _PickersInput.PickersInput,
   filled: _PickersFilledInput.PickersFilledInput,
@@ -36,15 +38,14 @@ const PickersTextFieldRoot = (0, _styles.styled)(_FormControl.default, {
   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 (0, _composeClasses.default)(slots, _pickersTextFieldClasses.getPickersTextFieldUtilityClass, classes);
 };
@@ -58,6 +59,7 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
       onFocus,
       onBlur,
       className,
+      classes: classesProp,
       color = 'primary',
       disabled = false,
       error = false,
@@ -98,64 +100,75 @@ const PickersTextField = exports.PickersTextField = /*#__PURE__*/React.forwardRe
   const id = (0, _useId.default)(idProp);
   const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
   const inputLabelId = label && id ? `${id}-label` : undefined;
-  const ownerState = (0, _extends2.default)({}, props, {
-    color,
-    disabled,
-    error,
-    focused,
-    required,
-    variant
+  const fieldOwnerState = (0, _useFieldOwnerState.useFieldOwnerState)({
+    disabled: props.disabled,
+    required: props.required,
+    readOnly: InputProps?.readOnly
   });
-  const classes = useUtilityClasses(ownerState);
+  const ownerState = React.useMemo(() => (0, _extends2.default)({}, 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__*/(0, _jsxRuntime.jsxs)(PickersTextFieldRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
-    ref: handleRootRef,
-    focused: focused,
-    disabled: disabled,
-    variant: variant,
-    error: error,
-    color: color,
-    fullWidth: fullWidth,
-    required: required,
-    ownerState: ownerState
-  }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
-      htmlFor: id,
-      id: inputLabelId
-    }, InputLabelProps, {
-      children: label
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputComponent, (0, _extends2.default)({
-      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__*/(0, _jsxRuntime.jsx)(_usePickerTextFieldOwnerState.PickerTextFieldOwnerStateContext.Provider, {
+    value: ownerState,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(PickersTextFieldRoot, (0, _extends2.default)({
+      className: (0, _clsx.default)(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__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, (0, _extends2.default)({
-      id: helperTextId
-    }, FormHelperTextProps, {
-      children: helperText
-    }))]
-  }));
+      required: required,
+      ownerState: ownerState
+    }, other, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, (0, _extends2.default)({
+        htmlFor: id,
+        id: inputLabelId
+      }, InputLabelProps, {
+        children: label
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(PickersInputComponent, (0, _extends2.default)({
+        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__*/(0, _jsxRuntime.jsx)(_FormHelperText.default, (0, _extends2.default)({
+        id: helperTextId
+      }, FormHelperTextProps, {
+        children: helperText
+      }))]
+    }))
+  });
 });
 process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
   // ----------------------------- Warning --------------------------------

package/node/PickersTextField/usePickerTextFieldOwnerState.js

@@ -0,0 +1,18 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePickerTextFieldOwnerState = exports.PickerTextFieldOwnerStateContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+const PickerTextFieldOwnerStateContext = exports.PickerTextFieldOwnerStateContext = /*#__PURE__*/React.createContext(null);
+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;
+};
+exports.usePickerTextFieldOwnerState = usePickerTextFieldOwnerState;

package/node/TimeClock/Clock.js

@@ -185,6 +185,7 @@ function Clock(inProps) {
     selectedId,
     type,
     viewValue,
+    viewRange: [minViewValue, maxViewValue],
     disabled = false,
     readOnly,
     className,
@@ -259,6 +260,8 @@ 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) {
@@ -267,27 +270,27 @@ 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':

package/node/TimeClock/TimeClock.js

@@ -193,6 +193,9 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         {
           const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(rawValue, meridiemMode, ampm);
           const dateWithNewHours = utils.setHours(valueOrReferenceDate, valueWithMeridiem);
+          if (utils.getHours(dateWithNewHours) !== valueWithMeridiem) {
+            return true;
+          }
           const start = utils.setSeconds(utils.setMinutes(dateWithNewHours, 0), 0);
           const end = utils.setSeconds(utils.setMinutes(dateWithNewHours, 59), 59);
           return !containsValidTime({
@@ -232,9 +235,20 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
             const valueWithMeridiem = (0, _timeUtils.convertValueToMeridiem)(hourValue, meridiemMode, ampm);
             setValueAndGoToNextView(utils.setHours(valueOrReferenceDate, valueWithMeridiem), isFinish, 'hours');
           };
+          const viewValue = utils.getHours(valueOrReferenceDate);
+          let viewRange;
+          if (ampm) {
+            if (viewValue > 12) {
+              viewRange = [12, 23];
+            } else {
+              viewRange = [0, 11];
+            }
+          } else {
+            viewRange = [0, 23];
+          }
           return {
             onChange: handleHoursChange,
-            viewValue: utils.getHours(valueOrReferenceDate),
+            viewValue,
             children: (0, _ClockNumbers.getHourNumbers)({
               value,
               utils,
@@ -243,7 +257,8 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
               getClockNumberText: translations.hoursClockNumberText,
               isDisabled: hourValue => disabled || isTimeDisabled(hourValue, 'hours'),
               selectedId
-            })
+            }),
+            viewRange
           };
         }
       case 'minutes':
@@ -262,7 +277,8 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
               getClockNumberText: translations.minutesClockNumberText,
               isDisabled: minuteValue => disabled || isTimeDisabled(minuteValue, 'minutes'),
               selectedId
-            })
+            }),
+            viewRange: [0, 59]
           };
         }
       case 'seconds':
@@ -281,7 +297,8 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
               getClockNumberText: translations.secondsClockNumberText,
               isDisabled: secondValue => disabled || isTimeDisabled(secondValue, 'seconds'),
               selectedId
-            })
+            }),
+            viewRange: [0, 59]
           };
         }
       default: