@mui/x-date-pickers 6.2.0 → 6.3.0

package/DateField/useDateField.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "selectedSections", "onSelectedSectionsChange", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
-import { validateDate } from '../internals/hooks/validation/useDateValidation';
+import { validateDate } from '../internals/utils/validation/validateDate';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
 const useDefaultizedDateField = props => {
@@ -28,6 +28,7 @@ export const useDateField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -51,6 +52,7 @@ export const useDateField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,

package/DatePicker/DatePickerToolbar.js

@@ -131,6 +131,6 @@ process.env.NODE_ENV !== "production" ? DatePickerToolbar.propTypes = {
    * Currently visible picker view.
    */
   view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
 } : void 0;
 export { DatePickerToolbar };

package/DateTimeField/DateTimeField.js

@@ -55,11 +55,13 @@ const DateTimeField = /*#__PURE__*/React.forwardRef(function DateTimeField(inPro
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -298,6 +300,7 @@ process.env.NODE_ENV !== "production" ? DateTimeField.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.
@@ -310,6 +313,21 @@ process.env.NODE_ENV !== "production" ? DateTimeField.propTypes = {
    * @returns {boolean} If `true`, the year will be disabled.
    */
   shouldDisableYear: PropTypes.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`)
+   *
+   * 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°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, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
    */

package/DateTimeField/DateTimeField.types.d.ts

@@ -4,8 +4,9 @@ import TextField from '@mui/material/TextField';
 import { DateTimeValidationError, FieldSection } from '../models';
 import { UseFieldInternalProps } from '../internals/hooks/useField';
 import { DefaultizedProps, MakeOptional } from '../internals/models/helpers';
-import { BaseDateValidationProps, BaseTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/hooks/validation/models';
-import { FieldsTextFieldProps, UncapitalizeObjectKeys } from '../internals';
+import { BaseDateValidationProps, BaseTimeValidationProps, DayValidationProps, MonthValidationProps, TimeValidationProps, YearValidationProps } from '../internals/models/validation';
+import { FieldsTextFieldProps } from '../internals/models/fields';
+import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
 export interface UseDateTimeFieldParams<TDate, TChildProps extends {}> {
     props: UseDateTimeFieldComponentProps<TDate, TChildProps>;
     inputRef?: React.Ref<HTMLInputElement>;

package/DateTimeField/useDateTimeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "shouldDisableDate", "shouldDisableMonth", "shouldDisableYear", "minDate", "maxDate", "disableFuture", "disablePast", "minTime", "maxTime", "minDateTime", "maxDateTime", "minutesStep", "disableIgnoringDatePartForTimeValidation", "shouldDisableClock", "shouldDisableTime", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
-import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 import { applyDefaultDate } from '../internals/utils/date-utils';
 import { useUtils, useDefaultDates } from '../internals/hooks/useUtils';
 const useDefaultizedDateTimeField = props => {
@@ -33,6 +33,7 @@ export const useDateTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -63,6 +64,7 @@ export const useDateTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,

package/DateTimePicker/DateTimePicker.js

@@ -326,6 +326,7 @@ process.env.NODE_ENV !== "production" ? DateTimePicker.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/DateTimePicker/shared.d.ts

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import { DefaultizedProps } from '../internals/models/helpers';
-import { DateOrTimeView, DateTimeValidationError } from '../models';
+import { DateOrTimeView, DateTimeValidationError, TimeView } from '../models';
 import { DateCalendarSlotsComponent, DateCalendarSlotsComponentsProps, ExportedDateCalendarProps } from '../DateCalendar/DateCalendar.types';
-import { TimeClockSlotsComponent, TimeClockSlotsComponentsProps, ExportedTimeClockProps } from '../TimeClock/TimeClock.types';
+import { TimeClockSlotsComponent, TimeClockSlotsComponentsProps } from '../TimeClock/TimeClock.types';
 import { BasePickerInputProps } from '../internals/models/props/basePickerProps';
 import { DateTimePickerTabsProps, ExportedDateTimePickerTabsProps } from './DateTimePickerTabs';
-import { BaseDateValidationProps, BaseTimeValidationProps } from '../internals/hooks/validation/models';
+import { BaseDateValidationProps, BaseTimeValidationProps } from '../internals/models/validation';
 import { LocalizedComponent } from '../locales/utils/pickersLocaleTextApi';
 import { DateTimePickerToolbarProps, ExportedDateTimePickerToolbarProps } from './DateTimePickerToolbar';
 import { PickerViewRendererLookup } from '../internals/hooks/usePicker/usePickerViews';
 import { DateViewRendererProps } from '../dateViewRenderers';
 import { TimeViewRendererProps } from '../timeViewRenderers';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
+import { BaseClockProps, ExportedBaseClockProps } from '../internals/models/props/clock';
 export interface BaseDateTimePickerSlotsComponent<TDate> extends DateCalendarSlotsComponent<TDate>, TimeClockSlotsComponent {
     /**
      * Tabs enabling toggling between date and time pickers.
@@ -34,7 +35,7 @@ export interface BaseDateTimePickerSlotsComponentsProps<TDate> extends DateCalen
      */
     toolbar?: ExportedDateTimePickerToolbarProps;
 }
-export interface BaseDateTimePickerProps<TDate> extends BasePickerInputProps<TDate | null, TDate, DateOrTimeView, DateTimeValidationError>, Omit<ExportedDateCalendarProps<TDate>, 'onViewChange'>, ExportedTimeClockProps<TDate> {
+export interface BaseDateTimePickerProps<TDate> extends BasePickerInputProps<TDate | null, TDate, DateOrTimeView, DateTimeValidationError>, Omit<ExportedDateCalendarProps<TDate>, 'onViewChange'>, ExportedBaseClockProps<TDate> {
     /**
      * Display ampm controls under the clock (instead of in the toolbar).
      * @default true on desktop, false on mobile
@@ -75,7 +76,7 @@ export interface BaseDateTimePickerProps<TDate> extends BasePickerInputProps<TDa
      * If `null`, the section will only have field editing.
      * If `undefined`, internally defined view will be the used.
      */
-    viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, DateOrTimeView, DateViewRendererProps<TDate, DateOrTimeView> & TimeViewRendererProps<TDate, DateOrTimeView>, {}>>;
+    viewRenderers?: Partial<PickerViewRendererLookup<TDate | null, DateOrTimeView, DateViewRendererProps<TDate, DateOrTimeView> & TimeViewRendererProps<TimeView, BaseClockProps<TDate, TimeView>>, {}>>;
 }
 type UseDateTimePickerDefaultizedProps<TDate, Props extends BaseDateTimePickerProps<TDate>> = LocalizedComponent<TDate, DefaultizedProps<Props, 'views' | 'openTo' | 'orientation' | 'ampm' | keyof BaseDateValidationProps<TDate> | keyof BaseTimeValidationProps>>;
 export declare function useDateTimePickerDefaultizedProps<TDate, Props extends BaseDateTimePickerProps<TDate>>(props: Props, name: string): Omit<UseDateTimePickerDefaultizedProps<TDate, Props>, 'components' | 'componentsProps'>;

package/DesktopDatePicker/DesktopDatePicker.js

@@ -8,7 +8,7 @@ import { useLocaleText, useUtils, validateDate } from '../internals';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
 import { Calendar } from '../internals/components/icons';
 import { DateField } from '../DateField';
-import { extractValidationProps } from '../internals/utils/validation';
+import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePicker(inProps, ref) {
   var _defaultizedProps$yea, _defaultizedProps$slo2;
@@ -49,6 +49,7 @@ const DesktopDatePicker = /*#__PURE__*/React.forwardRef(function DesktopDatePick
   } = useDesktopPicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'date',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
     validator: validateDate
   });

package/DesktopDateTimePicker/DesktopDateTimePicker.js

@@ -9,7 +9,7 @@ import { renderDateViewCalendar } from '../dateViewRenderers';
 import { useLocaleText, validateDateTime } from '../internals';
 import { Calendar } from '../internals/components/icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
-import { extractValidationProps } from '../internals/utils/validation';
+import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
 const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDateTimePicker(inProps, ref) {
   var _defaultizedProps$amp, _defaultizedProps$yea, _defaultizedProps$slo2, _defaultizedProps$slo3;
   const localeText = useLocaleText();
@@ -57,6 +57,7 @@ const DesktopDateTimePicker = /*#__PURE__*/React.forwardRef(function DesktopDate
   } = useDesktopPicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'date-time',
     getOpenDialogAriaText: localeText.openDatePickerDialogue,
     validator: validateDateTime
   });
@@ -350,6 +351,7 @@ DesktopDateTimePicker.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/DesktopTimePicker/DesktopTimePicker.js

@@ -8,24 +8,40 @@ import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
 import { useLocaleText, validateTime } from '../internals';
 import { Clock } from '../internals/components/icons';
 import { useDesktopPicker } from '../internals/hooks/useDesktopPicker';
-import { extractValidationProps } from '../internals/utils/validation';
+import { extractValidationProps } from '../internals/utils/validation/extractValidationProps';
+import { renderDigitalClockTimeView, renderMultiSectionDigitalClockTimeView } from '../timeViewRenderers';
 const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePicker(inProps, ref) {
-  var _defaultizedProps$amp, _defaultizedProps$slo2;
+  var _defaultizedProps$thr, _defaultizedProps$amp, _defaultizedProps$slo2, _defaultizedProps$slo3;
   const localeText = useLocaleText();
 
   // Props with the default values common to all time pickers
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiDesktopTimePicker');
+  const thresholdToRenderTimeInASingleColumn = (_defaultizedProps$thr = defaultizedProps.thresholdToRenderTimeInASingleColumn) != null ? _defaultizedProps$thr : 24;
+  const timeSteps = _extends({
+    hours: 1,
+    minutes: 5,
+    seconds: 5
+  }, defaultizedProps.timeSteps);
+  const shouldRenderTimeInASingleColumn = 24 * 60 / (timeSteps.hours * timeSteps.minutes) <= thresholdToRenderTimeInASingleColumn;
+  const renderTimeView = shouldRenderTimeInASingleColumn ? renderDigitalClockTimeView : renderMultiSectionDigitalClockTimeView;
   const viewRenderers = _extends({
-    hours: null,
-    minutes: null,
-    seconds: null
+    hours: renderTimeView,
+    minutes: renderTimeView,
+    seconds: renderTimeView,
+    meridiem: renderTimeView
   }, defaultizedProps.viewRenderers);
   const ampmInClock = (_defaultizedProps$amp = defaultizedProps.ampmInClock) != null ? _defaultizedProps$amp : true;
+  const actionBarActions = shouldRenderTimeInASingleColumn ? [] : ['accept'];
+  const views = defaultizedProps.ampm ? [...defaultizedProps.views, 'meridiem'] : defaultizedProps.views;
 
   // Props with the default values specific to the desktop variant
   const props = _extends({}, defaultizedProps, {
     ampmInClock,
+    timeSteps,
     viewRenderers,
+    // Setting only `hours` time view in case of single column time picker
+    // Allows for easy view lifecycle management
+    views: shouldRenderTimeInASingleColumn ? ['hours'] : views,
     slots: _extends({
       field: TimeField,
       openPickerIcon: Clock
@@ -41,7 +57,10 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
       toolbar: _extends({
         hidden: true,
         ampmInClock
-      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar)
+      }, (_defaultizedProps$slo2 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo2.toolbar),
+      actionBar: _extends({
+        actions: actionBarActions
+      }, (_defaultizedProps$slo3 = defaultizedProps.slotProps) == null ? void 0 : _defaultizedProps$slo3.actionBar)
     })
   });
   const {
@@ -49,6 +68,7 @@ const DesktopTimePicker = /*#__PURE__*/React.forwardRef(function DesktopTimePick
   } = useDesktopPicker({
     props,
     valueManager: singleItemValueManager,
+    valueType: 'time',
     getOpenDialogAriaText: localeText.openTimePickerDialogue,
     validator: validateTime
   });
@@ -223,7 +243,7 @@ DesktopTimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  openTo: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Force rendering in particular orientation.
    */
@@ -252,11 +272,17 @@ DesktopTimePicker.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.
    */
   shouldDisableTime: PropTypes.func,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -271,6 +297,22 @@ DesktopTimePicker.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -281,7 +323,7 @@ DesktopTimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -289,6 +331,7 @@ DesktopTimePicker.propTypes = {
    */
   viewRenderers: PropTypes.shape({
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     seconds: PropTypes.func
   }),

package/DesktopTimePicker/DesktopTimePicker.types.d.ts

@@ -1,13 +1,21 @@
 import { UseDesktopPickerSlotsComponent, ExportedUseDesktopPickerSlotsComponentsProps, DesktopOnlyPickerProps } from '../internals/hooks/useDesktopPicker';
 import { BaseTimePickerProps, BaseTimePickerSlotsComponent, BaseTimePickerSlotsComponentsProps } from '../TimePicker/shared';
 import { MakeOptional } from '../internals/models/helpers';
-import { TimeView } from '../models';
+import { TimeViewWithMeridiem } from '../internals/models';
 import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration';
-export interface DesktopTimePickerSlotsComponent<TDate> extends BaseTimePickerSlotsComponent<TDate>, MakeOptional<UseDesktopPickerSlotsComponent<TDate, TimeView>, 'Field' | 'OpenPickerIcon'> {
+import { DesktopOnlyTimePickerProps } from '../internals/models/props/clock';
+import { DigitalClockSlotsComponent, DigitalClockSlotsComponentsProps } from '../DigitalClock';
+import { MultiSectionDigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponentsProps } from '../MultiSectionDigitalClock';
+import { TimeView } from '../models';
+export interface DesktopTimePickerSlotsComponent<TDate> extends BaseTimePickerSlotsComponent<TDate>, MakeOptional<UseDesktopPickerSlotsComponent<TDate, TimeViewWithMeridiem>, 'Field' | 'OpenPickerIcon'>, DigitalClockSlotsComponent, MultiSectionDigitalClockSlotsComponent {
 }
-export interface DesktopTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, ExportedUseDesktopPickerSlotsComponentsProps<TDate, TimeView> {
+export interface DesktopTimePickerSlotsComponentsProps<TDate> extends BaseTimePickerSlotsComponentsProps, ExportedUseDesktopPickerSlotsComponentsProps<TDate, TimeViewWithMeridiem>, DigitalClockSlotsComponentsProps, MultiSectionDigitalClockSlotsComponentsProps {
 }
-export interface DesktopTimePickerProps<TDate> extends BaseTimePickerProps<TDate>, DesktopOnlyPickerProps<TDate> {
+export interface DesktopTimePickerProps<TDate> extends BaseTimePickerProps<TDate, TimeViewWithMeridiem>, DesktopOnlyPickerProps<TDate>, DesktopOnlyTimePickerProps<TDate> {
+    /**
+     * Available views.
+     */
+    views?: readonly TimeView[];
     /**
      * Overridable components.
      * @default {}

package/DigitalClock/DigitalClock.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DigitalClockProps } from './DigitalClock.types';
+type DigitalClockComponent = (<TDate>(props: DigitalClockProps<TDate> & React.RefAttributes<HTMLDivElement>) => JSX.Element) & {
+    propTypes?: any;
+};
+export declare const DigitalClock: DigitalClockComponent;
+export {};