[fields] Fix multi input fields root element props order and types

docs/scripts/generateProptypes.ts

@@ -68,14 +68,30 @@ async function generateProptypes(program: ttp.ts.Program, sourceFile: string) {
       if (['children', 'state'].includes(prop.name) && component.name.startsWith('DataGrid')) {
         return false;
       }
-      let shouldDocument = true;
+      let shouldExclude = false;
       prop.filenames.forEach((filename) => {
-        // Don't include props from external dependencies
-        if (/node_modules/.test(filename)) {
-          shouldDocument = false;
+        const definedInNodeModule = /node_modules/.test(filename);
+
+        if (definedInNodeModule) {
+          // TODO: xGrid team should consider removing this to generate more correct proptypes as well
+          if (component.name.includes('Grid')) {
+            shouldExclude = true;
+          } else {
+            const definedInInternalModule = /node_modules\/@mui/.test(filename);
+            // we want to include props if they are from our internal components
+            // avoid including inherited `children` and `classes` as they (might) need custom implementation to work
+            if (
+              !definedInInternalModule ||
+              (definedInInternalModule && ['children', 'classes'].includes(prop.name))
+            ) {
+              shouldExclude = true;
+            }
+          }
         }
       });
-      return shouldDocument;
+
+      // filtering out `prop.filenames.size > 0` removes props from unknown origin
+      return prop.filenames.size > 0 && !shouldExclude;
     },
   });
 

packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx

@@ -313,10 +313,29 @@ DateRangePickerDayRaw.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({
+      current: PropTypes.shape({
+        focusVisible: PropTypes.func.isRequired,
+      }),
+    }),
+  ]),
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: PropTypes.bool,
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  className: PropTypes.string,
   /**
    * The date to show.
    */
@@ -336,6 +355,33 @@ DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   disableMargin: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: PropTypes.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: PropTypes.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: PropTypes.string,
   isAnimating: PropTypes.bool,
   /**
    * Set to `true` if the `day` is the end of a highlighted date range.
@@ -365,7 +411,17 @@ DateRangePickerDayRaw.propTypes = {
    * Indicates if the day should be visually selected.
    */
   isVisuallySelected: PropTypes.bool,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: PropTypes.elementType,
   onDaySelect: PropTypes.func.isRequired,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: PropTypes.func,
   onMouseEnter: PropTypes.func,
   /**
    * If `true`, day is outside of month and will be hidden.
@@ -381,11 +437,41 @@ DateRangePickerDayRaw.propTypes = {
    * @default false
    */
   showDaysOutsideCurrentMonth: PropTypes.bool,
+  style: PropTypes.object,
+  /**
+   * 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,
+  ]),
+  /**
+   * @default 0
+   */
+  tabIndex: PropTypes.number,
   /**
    * If `true`, renders as today date.
    * @default false
    */
   today: PropTypes.bool,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: PropTypes.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({
+      current: PropTypes.shape({
+        pulsate: PropTypes.func.isRequired,
+        start: PropTypes.func.isRequired,
+        stop: PropTypes.func.isRequired,
+      }),
+    }),
+  ]),
 } as any;
 
 /**