[DesktopDatePicker] Inline makePickerWithState call

docs/pages/api-docs/desktop-date-picker.json

@@ -2,13 +2,22 @@
   "props": {
     "onChange": { "type": { "name": "func" }, "required": true },
     "renderInput": { "type": { "name": "func" }, "required": true },
-    "acceptRegex": { "type": { "name": "instanceOf", "description": "RegExp" } },
+    "acceptRegex": {
+      "type": { "name": "instanceOf", "description": "RegExp" },
+      "default": "/\\dap/gi"
+    },
     "className": { "type": { "name": "string" } },
-    "disableCloseOnSelect": { "type": { "name": "bool" } },
+    "disableCloseOnSelect": {
+      "type": { "name": "bool" },
+      "default": "`true` for Desktop, `false` for Mobile (based on the chosen wrapper and `desktopModeMediaQuery` prop)."
+    },
     "disabled": { "type": { "name": "bool" } },
     "disableMaskedInput": { "type": { "name": "bool" } },
     "disableOpenPicker": { "type": { "name": "bool" } },
-    "getOpenDialogAriaText": { "type": { "name": "func" } },
+    "getOpenDialogAriaText": {
+      "type": { "name": "func" },
+      "default": "(value, utils) => `Choose date, selected date is ${utils.format(utils.date(value), 'fullDate')}`"
+    },
     "InputAdornmentProps": { "type": { "name": "object" } },
     "inputFormat": { "type": { "name": "string" } },
     "mask": { "type": { "name": "string" } },
@@ -28,8 +37,8 @@
     "showToolbar": { "type": { "name": "bool" } },
     "ToolbarComponent": { "type": { "name": "elementType" } },
     "toolbarFormat": { "type": { "name": "string" } },
-    "toolbarPlaceholder": { "type": { "name": "node" } },
-    "toolbarTitle": { "type": { "name": "node" } },
+    "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"–\"" },
+    "toolbarTitle": { "type": { "name": "node" }, "default": "\"SELECT DATE\"" },
     "TransitionComponent": { "type": { "name": "elementType" } },
     "value": {
       "type": {

packages/material-ui-lab/src/DesktopDatePicker/DesktopDatePicker.tsx

@@ -1,27 +1,85 @@
+import * as React from 'react';
 import PropTypes from 'prop-types';
+import { unstable_useThemeProps as useThemeProps } from '@material-ui/core/styles';
 import {
   datePickerConfig,
   DatePickerGenericComponent,
   BaseDatePickerProps,
 } from '../DatePicker/DatePicker';
-import { DesktopWrapper } from '../internal/pickers/wrappers/Wrapper';
-import { makePickerWithState } from '../internal/pickers/Picker/makePickerWithState';
+import {
+  DesktopWrapper,
+  SomeWrapper,
+  PublicWrapperProps,
+} from '../internal/pickers/wrappers/Wrapper';
+import Picker from '../internal/pickers/Picker/Picker';
+import { ParsableDate } from '../internal/pickers/constants/prop-types';
+import { MuiPickersAdapter } from '../internal/pickers/hooks/useUtils';
+import { parsePickerInputValue } from '../internal/pickers/date-utils';
+import { KeyboardDateInput } from '../internal/pickers/KeyboardDateInput';
+import { makeWrapperComponent } from '../internal/pickers/wrappers/makeWrapperComponent';
+import { PureDateInput } from '../internal/pickers/PureDateInput';
+import { usePickerState, PickerStateValueManager } from '../internal/pickers/hooks/usePickerState';
+import { AllSharedPickerProps } from '../internal/pickers/Picker/SharedPickerProps';
+
+export type AllPickerProps<T, TWrapper extends SomeWrapper = SomeWrapper> = T &
+  AllSharedPickerProps &
+  PublicWrapperProps<TWrapper>;
+
+const valueManager: PickerStateValueManager<unknown, unknown> = {
+  emptyValue: null,
+  parseInput: parsePickerInputValue,
+  areValuesEqual: (utils: MuiPickersAdapter, a: unknown, b: unknown) => utils.isEqual(a, b),
+};
+
+const WrapperComponent = makeWrapperComponent(DesktopWrapper, {
+  KeyboardDateInputComponent: KeyboardDateInput,
+  PureDateInputComponent: PureDateInput,
+});
+
+const name = 'MuiDesktopDatePicker';
+type TWrapper = typeof DesktopWrapper;
+type T = BaseDatePickerProps<unknown>;
+
+const { DefaultToolbarComponent, useInterceptProps, useValidation } = datePickerConfig;
 
 /**
  *
  * API:
  *
  * - [DesktopDatePicker API](https://material-ui.com/api/desktop-date-picker/)
  */
-// @typescript-to-proptypes-generate
-const DesktopDatePicker = makePickerWithState<BaseDatePickerProps<unknown>>(DesktopWrapper, {
-  name: 'MuiDesktopDatePicker',
-  ...datePickerConfig,
-}) as DatePickerGenericComponent<typeof DesktopWrapper>;
+const DesktopDatePicker = React.forwardRef(function DesktopDatePicker<TDate>(
+  __props: T & AllSharedPickerProps<ParsableDate<TDate>, TDate> & PublicWrapperProps<TWrapper>,
+  ref: React.Ref<HTMLInputElement>,
+) {
+  const allProps = useInterceptProps(__props) as AllPickerProps<T, TWrapper>;
+  // This is technically unsound if the type parameters appear in optional props.
+  // Optional props can be filled by `useThemeProps` with types that don't match the type parameters.
+  const props: AllPickerProps<T, TWrapper> = useThemeProps({ props: allProps, name });
+
+  const validationError = useValidation(props.value, props) !== null;
+  const { pickerProps, inputProps, wrapperProps } = usePickerState<ParsableDate<TDate>, TDate>(
+    props,
+    valueManager as PickerStateValueManager<ParsableDate<TDate>, TDate>,
+  );
 
-if (process.env.NODE_ENV !== 'production') {
-  (DesktopDatePicker as any).displayName = 'DesktopDatePicker';
-}
+  // Note that we are passing down all the value without spread.
+  // It saves us >1kb gzip and make any prop available automatically on any level down.
+  const { value, onChange, ...other } = props;
+  const AllDateInputProps = { ...inputProps, ...other, ref, validationError };
+
+  return (
+    <WrapperComponent wrapperProps={wrapperProps} DateInputProps={AllDateInputProps} {...other}>
+      <Picker
+        {...pickerProps}
+        toolbarTitle={props.label || props.toolbarTitle}
+        ToolbarComponent={other.ToolbarComponent || DefaultToolbarComponent}
+        DateInputProps={AllDateInputProps}
+        {...other}
+      />
+    </WrapperComponent>
+  );
+}) as DatePickerGenericComponent<typeof DesktopWrapper>;
 
 DesktopDatePicker.propTypes = {
   // ----------------------------- Warning --------------------------------