@mui/x-date-pickers 6.2.1 → 6.3.1

package/MultiSectionDigitalClock/MultiSectionDigitalClockSection.js

@@ -0,0 +1,151 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["autoFocus", "onChange", "className", "disabled", "readOnly", "items", "active", "slots", "slotProps", "skipDisabled"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { alpha, styled, useThemeProps } from '@mui/material/styles';
+import composeClasses from '@mui/utils/composeClasses';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import useForkRef from '@mui/utils/useForkRef';
+import { getMultiSectionDigitalClockSectionUtilityClass } from './multiSectionDigitalClockSectionClasses';
+import { DIGITAL_CLOCK_VIEW_HEIGHT } from '../internals/constants/dimensions';
+import { jsx as _jsx } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root'],
+    item: ['item']
+  };
+  return composeClasses(slots, getMultiSectionDigitalClockSectionUtilityClass, classes);
+};
+const MultiSectionDigitalClockSectionRoot = styled(MenuList, {
+  name: 'MuiMultiSectionDigitalClockSection',
+  slot: 'Root',
+  overridesResolver: (_, styles) => styles.root
+})(({
+  theme,
+  ownerState
+}) => ({
+  maxHeight: DIGITAL_CLOCK_VIEW_HEIGHT,
+  width: 56,
+  padding: 0,
+  overflow: 'hidden',
+  scrollBehavior: ownerState.alreadyRendered ? 'smooth' : 'auto',
+  '&:hover': {
+    overflowY: 'auto'
+  },
+  '&:not(:first-of-type)': {
+    borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
+  },
+  '&:after': {
+    display: 'block',
+    content: '""',
+    height: 188
+  }
+}));
+const MultiSectionDigitalClockSectionItem = styled(MenuItem, {
+  name: 'MuiMultiSectionDigitalClockSection',
+  slot: 'Item',
+  overridesResolver: (_, styles) => styles.item
+})(({
+  theme
+}) => ({
+  padding: 8,
+  margin: '2px 4px',
+  width: 48,
+  justifyContent: 'center',
+  '&:first-of-type': {
+    marginTop: 4
+  },
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.hoverOpacity)
+  },
+  '&.Mui-selected': {
+    backgroundColor: (theme.vars || theme).palette.primary.main,
+    color: (theme.vars || theme).palette.primary.contrastText,
+    '&:focus-visible, &:hover': {
+      backgroundColor: (theme.vars || theme).palette.primary.dark
+    }
+  },
+  '&.Mui-focusVisible': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
+  }
+}));
+/**
+ * @ignore - internal component.
+ */
+export const MultiSectionDigitalClockSection = /*#__PURE__*/React.forwardRef(function MultiSectionDigitalClockSection(inProps, ref) {
+  var _slots$digitalClockSe;
+  const containerRef = React.useRef(null);
+  const handleRef = useForkRef(ref, containerRef);
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiMultiSectionDigitalClockSection'
+  });
+  const {
+      autoFocus,
+      onChange,
+      className,
+      disabled,
+      readOnly,
+      items,
+      active,
+      slots,
+      slotProps,
+      skipDisabled
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = React.useMemo(() => _extends({}, props, {
+    alreadyRendered: !!containerRef.current
+  }), [props]);
+  const classes = useUtilityClasses(ownerState);
+  const DigitalClockSectionItem = (_slots$digitalClockSe = slots == null ? void 0 : slots.digitalClockSectionItem) != null ? _slots$digitalClockSe : MultiSectionDigitalClockSectionItem;
+  React.useEffect(() => {
+    if (containerRef.current === null) {
+      return;
+    }
+    const selectedItem = containerRef.current.querySelector('[role="option"][aria-selected="true"]');
+    if (!selectedItem) {
+      return;
+    }
+    if (active && autoFocus) {
+      selectedItem.focus();
+    }
+    const offsetTop = selectedItem.offsetTop;
+
+    // Subtracting the 4px of extra margin intended for the first visible section item
+    containerRef.current.scrollTop = offsetTop - 4;
+  });
+  return /*#__PURE__*/_jsx(MultiSectionDigitalClockSectionRoot, _extends({
+    ref: handleRef,
+    className: clsx(classes.root, className),
+    ownerState: ownerState,
+    autoFocusItem: autoFocus && active,
+    role: "listbox"
+  }, other, {
+    children: items.map(option => {
+      var _option$isDisabled, _option$isDisabled2;
+      if (skipDisabled && (_option$isDisabled = option.isDisabled) != null && _option$isDisabled.call(option, option.value)) {
+        return null;
+      }
+      const isSelected = option.isSelected(option.value);
+      return /*#__PURE__*/_jsx(DigitalClockSectionItem, _extends({
+        onClick: () => !readOnly && onChange(option.value),
+        selected: isSelected,
+        disabled: disabled != null ? disabled : (_option$isDisabled2 = option.isDisabled) == null ? void 0 : _option$isDisabled2.call(option, option.value),
+        disableRipple: readOnly,
+        role: "option"
+        // aria-readonly is not supported here and does not have any effect
+        ,
+        "aria-disabled": readOnly,
+        "aria-label": option.ariaLabel,
+        "aria-selected": isSelected
+      }, slotProps == null ? void 0 : slotProps.digitalClockSectionItem, {
+        children: option.label
+      }), option.label);
+    })
+  }));
+});

package/MultiSectionDigitalClock/index.d.ts

@@ -0,0 +1,7 @@
+export { MultiSectionDigitalClock } from './MultiSectionDigitalClock';
+export type { MultiSectionDigitalClockProps, MultiSectionDigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponentsProps, } from './MultiSectionDigitalClock.types';
+export { multiSectionDigitalClockSectionClasses } from './multiSectionDigitalClockSectionClasses';
+export type { MultiSectionDigitalClockSectionClasses, MultiSectionDigitalClockSectionClassKey, } from './multiSectionDigitalClockSectionClasses';
+export type { ExportedMultiSectionDigitalClockSectionProps } from './MultiSectionDigitalClockSection';
+export { multiSectionDigitalClockClasses, getMultiSectionDigitalClockUtilityClass, } from './multiSectionDigitalClockClasses';
+export type { MultiSectionDigitalClockClasses, MultiSectionDigitalClockClassKey, } from './multiSectionDigitalClockClasses';

package/MultiSectionDigitalClock/index.js

@@ -0,0 +1,3 @@
+export { MultiSectionDigitalClock } from './MultiSectionDigitalClock';
+export { multiSectionDigitalClockSectionClasses } from './multiSectionDigitalClockSectionClasses';
+export { multiSectionDigitalClockClasses, getMultiSectionDigitalClockUtilityClass } from './multiSectionDigitalClockClasses';

package/MultiSectionDigitalClock/multiSectionDigitalClockClasses.d.ts

@@ -0,0 +1,7 @@
+export interface MultiSectionDigitalClockClasses {
+    /** Styles applied to the root element. */
+    root: string;
+}
+export type MultiSectionDigitalClockClassKey = keyof MultiSectionDigitalClockClasses;
+export declare function getMultiSectionDigitalClockUtilityClass(slot: string): string;
+export declare const multiSectionDigitalClockClasses: MultiSectionDigitalClockClasses;

package/MultiSectionDigitalClock/multiSectionDigitalClockClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMultiSectionDigitalClockUtilityClass(slot) {
+  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+}
+export const multiSectionDigitalClockClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root']);

package/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.d.ts

@@ -0,0 +1,9 @@
+export interface MultiSectionDigitalClockSectionClasses {
+    /** Styles applied to the root (list) element. */
+    root: string;
+    /** Styles applied to the list item (by default: MenuItem) element. */
+    item: string;
+}
+export type MultiSectionDigitalClockSectionClassKey = keyof MultiSectionDigitalClockSectionClasses;
+export declare function getMultiSectionDigitalClockSectionUtilityClass(slot: string): string;
+export declare const multiSectionDigitalClockSectionClasses: MultiSectionDigitalClockSectionClasses;

package/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
+  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+}
+export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);

package/MultiSectionDigitalClock/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/MultiSectionDigitalClock/index.js",
+  "types": "./index.d.ts"
+}

package/PickersDay/PickersDay.js

@@ -63,8 +63,11 @@ const styleArg = ({
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
   },
-  [`&.${pickersDayClasses.disabled}`]: {
+  [`&.${pickersDayClasses.disabled}:not(.${pickersDayClasses.selected})`]: {
     color: (theme.vars || theme).palette.text.disabled
+  },
+  [`&.${pickersDayClasses.disabled}&.${pickersDayClasses.selected}`]: {
+    opacity: 0.6
   }
 }, !ownerState.disableMargin && {
   margin: `0 ${DAY_MARGIN}px`

package/PickersLayout/PickersLayout.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PickersLayoutProps } from './PickersLayout.types';
-import { DateOrTimeView } from '../models';
+import { DateOrTimeViewWithMeridiem } from '../internals/models';
 declare const PickersLayoutRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     ownerState: {
         isLandscape: boolean;
@@ -9,7 +9,7 @@ declare const PickersLayoutRoot: import("@emotion/styled").StyledComponent<impor
 export { PickersLayoutRoot };
 export declare const PickersLayoutContentWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 declare const PickersLayout: {
-    <TValue, TDate, TView extends DateOrTimeView>(inProps: PickersLayoutProps<TValue, TDate, TView>): JSX.Element;
+    <TValue, TDate, TView extends DateOrTimeViewWithMeridiem>(inProps: PickersLayoutProps<TValue, TDate, TView>): JSX.Element;
     propTypes: any;
 };
 export { PickersLayout };

package/PickersLayout/PickersLayout.js

@@ -155,8 +155,8 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   value: PropTypes.any,
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
   wrapperVariant: PropTypes.oneOf(['desktop', 'mobile'])
 } : void 0;
 export { PickersLayout };

package/PickersLayout/PickersLayout.types.d.ts

@@ -2,15 +2,14 @@ import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/base/utils';
 import { PickersActionBarProps } from '../PickersActionBar';
-import { DateOrTimeView } from '../models';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
-import { WrapperVariant } from '../internals/models/common';
+import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
-export interface ExportedPickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeView> {
+export interface ExportedPickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Custom component for the action bar, it is placed below the picker views.
      * @default PickersActionBar
@@ -27,13 +26,13 @@ export interface ExportedPickersLayoutSlotsComponent<TValue, TDate, TView extend
      */
     Layout?: React.JSXElementConstructor<PickersLayoutProps<TValue, TDate, TView> & React.RefAttributes<HTMLDivElement>>;
 }
-interface PickersLayoutActionBarOwnerState<TValue, TDate, TView extends DateOrTimeView> extends PickersLayoutProps<TValue, TDate, TView> {
+interface PickersLayoutActionBarOwnerState<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends PickersLayoutProps<TValue, TDate, TView> {
     wrapperVariant: WrapperVariant;
 }
 interface PickersShortcutsOwnerState<TValue> extends PickersShortcutsProps<TValue> {
     wrapperVariant: WrapperVariant;
 }
-export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeView> {
+export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> {
     /**
      * Props passed down to the action bar component.
      */
@@ -47,7 +46,7 @@ export interface ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView
      */
     layout?: Partial<PickersLayoutProps<TValue, TDate, TView>>;
 }
-export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponent<TValue, TDate, TView> {
+export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponent<TValue, TDate, TView> {
     /**
      * Tabs enabling toggling between views.
      */
@@ -58,7 +57,7 @@ export interface PickersLayoutSlotsComponent<TValue, TDate, TView extends DateOr
      */
     Toolbar?: React.JSXElementConstructor<BaseToolbarProps<TValue, TView>>;
 }
-export interface PickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeView> extends ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView> {
+export interface PickersLayoutSlotsComponentsProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends ExportedPickersLayoutSlotsComponentsProps<TValue, TDate, TView> {
     /**
      * Props passed down to the tabs component.
      */
@@ -68,7 +67,7 @@ export interface PickersLayoutSlotsComponentsProps<TValue, TDate, TView extends
      */
     toolbar?: ExportedBaseToolbarProps;
 }
-export interface PickersLayoutProps<TValue, TDate, TView extends DateOrTimeView> extends Omit<UsePickerLayoutPropsResponseLayoutProps<TValue, TView>, 'value'> {
+export interface PickersLayoutProps<TValue, TDate, TView extends DateOrTimeViewWithMeridiem> extends Omit<UsePickerLayoutPropsResponseLayoutProps<TValue, TView>, 'value'> {
     value?: TValue;
     className?: string;
     children?: React.ReactNode;

package/PickersLayout/usePickerLayout.d.ts

@@ -1,6 +1,6 @@
 import { PickersLayoutProps, SubComponents } from './PickersLayout.types';
-import { DateOrTimeView } from '../models';
+import { DateOrTimeViewWithMeridiem } from '../internals/models';
 interface UsePickerLayoutResponse extends SubComponents {
 }
-declare const usePickerLayout: <TValue, TDate, TView extends DateOrTimeView>(props: PickersLayoutProps<TValue, TDate, TView>) => UsePickerLayoutResponse;
+declare const usePickerLayout: <TValue, TDate, TView extends DateOrTimeViewWithMeridiem>(props: PickersLayoutProps<TValue, TDate, TView>) => UsePickerLayoutResponse;
 export default usePickerLayout;

package/README.md

@@ -42,15 +42,6 @@ This component has the following peer dependencies that you will need to install
 },
 ```
 
-If you need to use `js-joda`, `date-fns-jalali`, `jalaali`, or `hijri` library, you should be able to find the corresponding date-library from [`@date-io`](https://github.com/dmtrKovalenko/date-io#projects).
-In such a case, you will have to install both the date-library and the corresponding @date-io adapter.
-
-```jsx
-// To use moment-jalaali
-npm install moment-jalaali
-npm install @date-io/jalaali
-```
-
 After installation completed, you have to set the `dateAdapter` prop of the `LocalizationProvider` accordingly.
 The supported adapters are exported from `@mui/x-date-pickers`.
 

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -6,7 +6,7 @@ import { renderTimeViewClock } from '../timeViewRenderers';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTimePicker(inProps, ref) {
   var _defaultizedProps$dis, _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo, _defaultizedProps$slo2;
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiStaticDateTimePicker');
@@ -283,6 +283,7 @@ StaticDateTimePicker.propTypes = {
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.

package/StaticTimePicker/StaticTimePicker.js

@@ -5,7 +5,7 @@ import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
 import { renderTimeViewClock } from '../timeViewRenderers';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateTime } from '../internals/hooks/validation/useTimeValidation';
+import { validateTime } from '../internals/utils/validation/validateTime';
 const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker(inProps, ref) {
   var _defaultizedProps$dis, _defaultizedProps$amp, _defaultizedProps$slo;
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiStaticTimePicker');
@@ -185,6 +185,7 @@ StaticTimePicker.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.

package/StaticTimePicker/StaticTimePicker.types.d.ts

@@ -6,7 +6,7 @@ export interface StaticTimePickerSlotsComponent<TDate> extends BaseTimePickerSlo
 }
 export interface StaticTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, UseStaticPickerSlotsComponentsProps<TDate, TimeView> {
 }
-export interface StaticTimePickerProps<TDate> extends BaseTimePickerProps<TDate>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
+export interface StaticTimePickerProps<TDate> extends BaseTimePickerProps<TDate, TimeView>, MakeOptional<StaticOnlyPickerProps, 'displayStaticWrapperAs'> {
     /**
      * Overridable components.
      * @default {}

package/TimeClock/TimeClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "className", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -85,6 +85,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       views = ['hours', 'minutes'],
       openTo,
       onViewChange,
+      focusedView,
+      onFocusedViewChange,
       className,
       disabled,
       readOnly
@@ -113,7 +115,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     views,
     openTo,
     onViewChange,
-    onChange: handleValueChange
+    onChange: handleValueChange,
+    focusedView,
+    onFocusedViewChange
   });
   const selectedTimeOrMidnight = React.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
   const {
@@ -271,7 +275,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     ownerState: ownerState
   }, other, {
     children: [/*#__PURE__*/_jsx(Clock, _extends({
-      autoFocus: autoFocus,
+      autoFocus: autoFocus != null ? autoFocus : !!focusedView,
       ampmInClock: ampmInClock && views.includes('hours'),
       value: value,
       type: view,
@@ -313,7 +317,10 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   ampmInClock: PropTypes.bool,
   /**
-   * Set to `true` if focus should be moved to clock picker.
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
   /**
@@ -339,7 +346,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   defaultValue: PropTypes.any,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the picker views and text field are disabled.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -358,6 +365,10 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * Controlled focused view.
+   */
+  focusedView: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
@@ -378,20 +389,30 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @template TDate
    * @param {TDate | null} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: PropTypes.func,
+  /**
+   * Callback fired on focused view change.
+   * @template TView
+   * @param {TView} view The new view to focus or not.
+   * @param {boolean} hasFocus `true` if the view should be focused.
+   */
+  onFocusedViewChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @param {TimeView} view The new view.
+   * @template TView
+   * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,
   /**
-   * Initially open view.
-   * @default 'hours'
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
    */
   openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * Make picker read only.
+   * If `true`, the picker views and text field are read-only.
    * @default false
    */
   readOnly: PropTypes.bool,
@@ -405,6 +426,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
@@ -431,12 +453,13 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   value: PropTypes.any,
   /**
-   * Controlled open view.
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
    */
   view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * Views for calendar picker.
-   * @default ['hours', 'minutes']
+   * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/TimeClock/TimeClock.types.d.ts

@@ -1,17 +1,10 @@
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
 import { TimeClockClasses } from './timeClockClasses';
-import { TimeValidationProps, BaseTimeValidationProps } from '../internals/hooks/validation/models';
 import { PickersArrowSwitcherSlotsComponent, PickersArrowSwitcherSlotsComponentsProps } from '../internals/components/PickersArrowSwitcher';
-import { TimeView } from '../models';
-import { PickerSelectionState } from '../internals/hooks/usePicker/usePickerValue.types';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
-export interface ExportedTimeClockProps<TDate> extends TimeValidationProps<TDate>, BaseTimeValidationProps {
-    /**
-     * 12h/24h view for hour selection clock.
-     * @default `utils.is12HourCycleInCurrentLocale()`
-     */
-    ampm?: boolean;
+import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
+import { TimeView } from '../models';
+import { TimeViewWithMeridiem } from '../internals/models';
+export interface ExportedTimeClockProps<TDate> extends ExportedBaseClockProps<TDate> {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default false
@@ -22,16 +15,7 @@ export interface TimeClockSlotsComponent extends PickersArrowSwitcherSlotsCompon
 }
 export interface TimeClockSlotsComponentsProps extends PickersArrowSwitcherSlotsComponentsProps {
 }
-export interface TimeClockProps<TDate> extends ExportedTimeClockProps<TDate> {
-    className?: string;
-    /**
-     * The system prop that allows defining system overrides as well as additional CSS styles.
-     */
-    sx?: SxProps<Theme>;
-    /**
-     * Set to `true` if focus should be moved to clock picker.
-     */
-    autoFocus?: boolean;
+export interface TimeClockProps<TDate, TView extends TimeViewWithMeridiem = TimeView> extends ExportedTimeClockProps<TDate>, BaseClockProps<TDate, TView> {
     /**
      * Override or extend the styles applied to the component.
      */
@@ -58,51 +42,5 @@ export interface TimeClockProps<TDate> extends ExportedTimeClockProps<TDate> {
      * @default {}
      */
     slotProps?: TimeClockSlotsComponentsProps;
-    /**
-     * The selected value.
-     * Used when the component is controlled.
-     */
-    value?: TDate | null;
-    /**
-     * The default selected value.
-     * Used when the component is not controlled.
-     */
-    defaultValue?: TDate | null;
-    /**
-     * Callback fired when the value changes.
-     * @template TDate
-     * @param {TDate | null} value The new value.
-     * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
-     */
-    onChange?: (value: TDate | null, selectionState?: PickerSelectionState) => void;
     showViewSwitcher?: boolean;
-    /**
-     * Controlled open view.
-     */
-    view?: TimeView;
-    /**
-     * Views for calendar picker.
-     * @default ['hours', 'minutes']
-     */
-    views?: readonly TimeView[];
-    /**
-     * Callback fired on view change.
-     * @param {TimeView} view The new view.
-     */
-    onViewChange?: (view: TimeView) => void;
-    /**
-     * Initially open view.
-     * @default 'hours'
-     */
-    openTo?: TimeView;
-    /**
-     * If `true`, the picker and text field are disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Make picker read only.
-     * @default false
-     */
-    readOnly?: boolean;
 }