@mui/x-date-pickers 8.0.0-alpha.0 → 8.0.0-alpha.10

package/node/TimeClock/Clock.js

@@ -19,20 +19,17 @@ var _useUtils = require("../internals/hooks/useUtils");
 var _shared = require("./shared");
 var _clockClasses = require("./clockClasses");
 var _dateUtils = require("../internals/utils/date-utils");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("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 (0, _utils.unstable_composeClasses)(slots, _clockClasses.getClockUtilityClass, classes);
@@ -86,7 +83,7 @@ const ClockSquareMask = (0, _styles.styled)('div', {
   userSelect: 'none',
   variants: [{
     props: {
-      disabled: false
+      isClockDisabled: false
     },
     style: {
       '@media (pointer: fine)': {
@@ -188,15 +185,23 @@ function Clock(inProps) {
     selectedId,
     type,
     viewValue,
+    viewRange: [minViewValue, maxViewValue],
     disabled = false,
     readOnly,
-    className
+    className,
+    classes: classesProp
   } = props;
-  const ownerState = props;
   const utils = (0, _useUtils.useUtils)();
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, 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) => {
@@ -230,6 +235,7 @@ function Clock(inProps) {
       setTime(event, 'finish');
       isMoving.current = false;
     }
+    event.preventDefault();
   };
   const handleMouseMove = event => {
     // event.buttons & PRIMARY_MOUSE_BUTTON
@@ -243,12 +249,7 @@ 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.
@@ -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':
@@ -309,9 +312,7 @@ function Clock(inProps) {
         onTouchEnd: handleTouchEnd,
         onMouseUp: handleMouseUp,
         onMouseMove: handleMouseMove,
-        ownerState: {
-          disabled
-        },
+        ownerState: ownerState,
         className: classes.squareMask
       }), !isSelectedTimeDisabled && /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ClockPin, {
@@ -320,7 +321,7 @@ function Clock(inProps) {
           type: type,
           viewValue: viewValue,
           isInner: isPointerInner,
-          hasSelected: hasSelected
+          isBetweenTwoClockValues: isPointerBetweenTwoClockValues
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ClockWrapper, {
         "aria-activedescendant": selectedId,

package/node/TimeClock/ClockNumber.js

@@ -14,16 +14,12 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _shared = require("./shared");
 var _clockNumberClasses = require("./clockNumberClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "disabled", "index", "inner", "label", "selected"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes,
-    selected,
-    disabled
-  } = ownerState;
+const _excluded = ["className", "classes", "disabled", "index", "inner", "label", "selected"];
+const useUtilityClasses = (classes, ownerState) => {
   const slots = {
-    root: ['root', selected && 'selected', disabled && 'disabled']
+    root: ['root', ownerState.isClockNumberSelected && 'selected', ownerState.isClockNumberDisabled && 'disabled']
   };
   return (0, _composeClasses.default)(slots, _clockNumberClasses.getClockNumberUtilityClass, classes);
 };
@@ -60,7 +56,7 @@ const ClockNumberRoot = (0, _styles.styled)('span', {
   },
   variants: [{
     props: {
-      inner: true
+      isClockNumberInInnerRing: true
     },
     style: (0, _extends2.default)({}, theme.typography.body2, {
       color: (theme.vars || theme).palette.text.secondary
@@ -78,6 +74,7 @@ function ClockNumber(inProps) {
   });
   const {
       className,
+      classes: classesProp,
       disabled,
       index,
       inner,
@@ -85,8 +82,15 @@ function ClockNumber(inProps) {
       selected
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, 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 = (_shared.CLOCK_WIDTH - _shared.CLOCK_HOUR_WIDTH - 2) / 2 * (inner ? 0.65 : 1);
   const x = Math.round(Math.cos(angle) * length);

package/node/TimeClock/ClockPointer.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
@@ -14,12 +15,10 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _shared = require("./shared");
 var _clockPointerClasses = require("./clockPointerClasses");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "hasSelected", "isInner", "type", "viewValue"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["className", "classes", "isBetweenTwoClockValues", "isInner", "type", "viewValue"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     thumb: ['thumb']
@@ -41,7 +40,7 @@ const ClockPointerRoot = (0, _styles.styled)('div', {
   transformOrigin: 'center bottom 0px',
   variants: [{
     props: {
-      shouldAnimate: true
+      isClockPointerAnimated: true
     },
     style: {
       transition: theme.transitions.create(['transform', 'height'])
@@ -66,7 +65,7 @@ const ClockPointerThumb = (0, _styles.styled)('div', {
   boxSizing: 'content-box',
   variants: [{
     props: {
-      hasSelected: true
+      isBetweenTwoClockValues: false
     },
     style: {
       backgroundColor: (theme.vars || theme).palette.primary.main
@@ -84,6 +83,8 @@ function ClockPointer(inProps) {
   });
   const {
       className,
+      classes: classesProp,
+      isBetweenTwoClockValues,
       isInner,
       type,
       viewValue
@@ -93,10 +94,14 @@ function ClockPointer(inProps) {
   React.useEffect(() => {
     previousType.current = type;
   }, [type]);
-  const ownerState = (0, _extends2.default)({}, props, {
-    shouldAnimate: previousType.current !== type
+  const {
+    ownerState: pickerOwnerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
+  const ownerState = (0, _extends2.default)({}, pickerOwnerState, {
+    isClockPointerAnimated: previousType.current !== type,
+    isClockPointerBetweenTwoValues: isBetweenTwoClockValues
   });
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   const getAngleStyle = () => {
     const max = type === 'hours' ? 12 : 60;
     let angle = 360 / max * viewValue;

package/node/TimeClock/TimeClock.js

@@ -27,12 +27,10 @@ var _ClockNumbers = require("./ClockNumbers");
 var _useValueWithTimezone = require("../internals/hooks/useValueWithTimezone");
 var _valueManagers = require("../internals/utils/valueManagers");
 var _useClockReferenceDate = require("../internals/hooks/useClockReferenceDate");
+var _usePickerPrivateContext = require("../internals/hooks/usePickerPrivateContext");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly", "timezone"];
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "slots", "slotProps", "value", "defaultValue", "referenceDate", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableTime", "showViewSwitcher", "onChange", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "classes", "disabled", "readOnly", "timezone"];
+const useUtilityClasses = classes => {
   const slots = {
     root: ['root'],
     arrowSwitcher: ['arrowSwitcher']
@@ -100,6 +98,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
       focusedView,
       onFocusedViewChange,
       className,
+      classes: classesProp,
       disabled,
       readOnly,
       timezone: timezoneProp
@@ -114,6 +113,7 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
     timezone: timezoneProp,
     value: valueProp,
     defaultValue,
+    referenceDate: referenceDateProp,
     onChange,
     valueManager: _valueManagers.singleItemValueManager
   });
@@ -126,6 +126,10 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
   });
   const translations = (0, _usePickerTranslations.usePickerTranslations)();
   const now = (0, _useUtils.useNow)(timezone);
+  const selectedId = (0, _utils.unstable_useId)();
+  const {
+    ownerState
+  } = (0, _usePickerPrivateContext.usePickerPrivateContext)();
   const {
     view,
     setView,
@@ -189,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({
@@ -220,7 +227,6 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
         throw new Error('not supported');
     }
   }, [ampm, valueOrReferenceDate, disableIgnoringDatePartForTimeValidation, maxTime, meridiemMode, minTime, minutesStep, shouldDisableTime, utils, disableFuture, disablePast, now, views]);
-  const selectedId = (0, _utils.unstable_useId)();
   const viewProps = React.useMemo(() => {
     switch (view) {
       case 'hours':
@@ -229,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,
@@ -240,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':
@@ -259,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':
@@ -278,15 +297,15 @@ const TimeClock = exports.TimeClock = /*#__PURE__*/React.forwardRef(function Tim
               getClockNumberText: translations.secondsClockNumberText,
               isDisabled: secondValue => disabled || isTimeDisabled(secondValue, 'seconds'),
               selectedId
-            })
+            }),
+            viewRange: [0, 59]
           };
         }
       default:
         throw new Error('You must provide the type for ClockView');
     }
   }, [view, utils, value, ampm, translations.hoursClockNumberText, translations.minutesClockNumberText, translations.secondsClockNumberText, meridiemMode, setValueAndGoToNextView, valueOrReferenceDate, isTimeDisabled, selectedId, disabled]);
-  const ownerState = props;
-  const classes = useUtilityClasses(ownerState);
+  const classes = useUtilityClasses(classesProp);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TimeClockRoot, (0, _extends2.default)({
     ref: ref,
     className: (0, _clsx.default)(classes.root, className),

package/node/TimeField/TimeField.js

@@ -7,18 +7,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TimeField = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _styles = require("@mui/material/styles");
-var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
 var _utils = require("@mui/utils");
 var _useTimeField = require("./useTimeField");
-var _hooks = require("../hooks");
-var _PickersTextField = require("../PickersTextField");
-var _convertFieldResponseIntoMuiTextFieldProps = require("../internals/utils/convertFieldResponseIntoMuiTextFieldProps");
+var _PickerFieldUI = require("../internals/components/PickerFieldUI");
+var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["slots", "slotProps", "InputProps", "inputProps"];
 /**
@@ -38,33 +34,21 @@ const TimeField = exports.TimeField = /*#__PURE__*/React.forwardRef(function Tim
   });
   const {
       slots,
-      slotProps,
-      InputProps,
-      inputProps
+      slotProps
     } = themeProps,
     other = (0, _objectWithoutPropertiesLoose2.default)(themeProps, _excluded);
-  const ownerState = themeProps;
-  const TextField = slots?.textField ?? (inProps.enableAccessibleFieldDOMStructure === false ? _TextField.default : _PickersTextField.PickersTextField);
-  const textFieldProps = (0, _useSlotProps.default)({
-    elementType: TextField,
-    externalSlotProps: slotProps?.textField,
-    externalForwardedProps: other,
-    ownerState,
-    additionalProps: {
-      ref: inRef
-    }
+  const textFieldProps = (0, _PickerFieldUI.useFieldTextFieldProps)({
+    slotProps,
+    ref: inRef,
+    externalForwardedProps: other
   });
-
-  // TODO: Remove when mui/material-ui#35088 will be merged
-  textFieldProps.inputProps = (0, _extends2.default)({}, inputProps, textFieldProps.inputProps);
-  textFieldProps.InputProps = (0, _extends2.default)({}, InputProps, textFieldProps.InputProps);
   const fieldResponse = (0, _useTimeField.useTimeField)(textFieldProps);
-  const convertedFieldResponse = (0, _convertFieldResponseIntoMuiTextFieldProps.convertFieldResponseIntoMuiTextFieldProps)(fieldResponse);
-  const processedFieldProps = (0, _hooks.useClearableField)((0, _extends2.default)({}, convertedFieldResponse, {
-    slots,
-    slotProps
-  }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, (0, _extends2.default)({}, processedFieldProps));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PickerFieldUI.PickerFieldUI, {
+    slots: slots,
+    slotProps: slotProps,
+    fieldResponse: fieldResponse,
+    defaultOpenPickerIcon: _icons.ClockIcon
+  });
 });
 process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   // ----------------------------- Warning --------------------------------
@@ -87,6 +71,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @default false
    */
   clearable: _propTypes.default.bool,
+  /**
+   * The position at which the clear button is placed.
+   * If the field is not clearable, the button is not rendered.
+   * @default 'end'
+   */
+  clearButtonPosition: _propTypes.default.oneOf(['end', 'start']),
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
@@ -240,6 +230,12 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldSelectedSections} newValue The new selected sections.
    */
   onSelectedSectionsChange: _propTypes.default.func,
+  /**
+   * The position at which the opening button is placed.
+   * If there is no picker to open, the button is not rendered
+   * @default 'end'
+   */
+  openPickerButtonPosition: _propTypes.default.oneOf(['end', 'start']),
   /**
    * If `true`, the component is read-only.
    * When read-only, the value cannot be changed but the user can interact with the interface.
@@ -275,10 +271,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    */
   shouldDisableTime: _propTypes.default.func,
   /**
-   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
-   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   * If `true`, the format will respect the leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (for example on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
    *
-   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (for example "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
    *
    * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
    * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.

package/node/TimeField/useTimeField.js

@@ -5,24 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useTimeField = void 0;
-var _valueManagers = require("../internals/utils/valueManagers");
 var _useField = require("../internals/hooks/useField");
-var _validation = require("../validation");
 var _hooks = require("../hooks");
-var _defaultizedFieldProps = require("../internals/hooks/defaultizedFieldProps");
-const useTimeField = inProps => {
-  const props = (0, _defaultizedFieldProps.useDefaultizedTimeField)(inProps);
+var _managers = require("../managers");
+const useTimeField = props => {
+  const manager = (0, _managers.useTimeManager)(props);
   const {
     forwardedProps,
     internalProps
   } = (0, _hooks.useSplitFieldProps)(props, 'time');
+  const internalPropsWithDefaults = (0, _useField.useFieldInternalPropsWithDefaults)({
+    manager,
+    internalProps
+  });
   return (0, _useField.useField)({
     forwardedProps,
-    internalProps,
-    valueManager: _valueManagers.singleItemValueManager,
-    fieldValueManager: _valueManagers.singleItemFieldValueManager,
-    validator: _validation.validateTime,
-    valueType: 'time'
+    internalProps: internalPropsWithDefaults,
+    valueManager: manager.internal_valueManager,
+    fieldValueManager: manager.internal_fieldValueManager,
+    validator: manager.validator,
+    valueType: manager.valueType,
+    getOpenPickerButtonAriaLabel: manager.internal_getOpenPickerButtonAriaLabel
   });
 };
 exports.useTimeField = useTimeField;

package/node/TimePicker/TimePicker.js

@@ -76,8 +76,8 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   autoFocus: _propTypes.default.bool,
   className: _propTypes.default.string,
   /**
-   * If `true`, the popover or modal will close after submitting the full date.
-   * @default `true` for desktop, `false` for mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop).
+   * If `true`, the Picker will close after submitting the full date.
+   * @default false
    */
   closeOnSelect: _propTypes.default.bool,
   /**