[docs-infra] Always document the className and render props (#1226)

docs/reference/generated/menu-checkbox-item.json

@@ -32,6 +32,14 @@
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {

docs/reference/generated/menu-item.json

@@ -19,6 +19,14 @@
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {},

docs/reference/generated/menu-radio-item.json

@@ -24,6 +24,14 @@
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {

docs/reference/generated/select-item-text.json

@@ -1,7 +1,16 @@
 {
   "name": "SelectItemText",
   "description": "A text label of the select item.\nRenders a `<div>` element.",
-  "props": {},
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
   "dataAttributes": {},
   "cssVariables": {}
 }

docs/reference/generated/select-item.json

@@ -15,6 +15,14 @@
       "type": "boolean",
       "default": "false",
       "description": "Whether the component should ignore user interaction."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {},

docs/reference/generated/select-scroll-down-arrow.json

@@ -2,10 +2,18 @@
   "name": "SelectScrollDownArrow",
   "description": "An element that scrolls the select menu down when hovered.\nRenders a `<div>` element.",
   "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",
       "description": "Whether to keep the HTML element in the DOM while the select menu is not scrollable."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {

docs/reference/generated/select-scroll-up-arrow.json

@@ -2,10 +2,18 @@
   "name": "SelectScrollUpArrow",
   "description": "An element that scrolls the select menu down when hovered.\nRenders a `<div>` element.",
   "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",
       "description": "Whether to keep the HTML element in the DOM while the select menu is not scrollable."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
     }
   },
   "dataAttributes": {

packages/react/src/menu/checkbox-item/MenuCheckboxItem.tsx

@@ -281,6 +281,11 @@ MenuCheckboxItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Whether to close the menu when the item is clicked.
    * @default false
@@ -314,6 +319,13 @@ MenuCheckboxItem.propTypes /* remove-proptypes */ = {
    * The click handler for the menu item.
    */
   onClick: PropTypes.func,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
 
 export { MenuCheckboxItem };

packages/react/src/menu/item/MenuItem.tsx

@@ -232,6 +232,11 @@ MenuItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Whether to close the menu when the item is clicked.
    *
@@ -255,6 +260,13 @@ MenuItem.propTypes /* remove-proptypes */ = {
    * The click handler for the menu item.
    */
   onClick: PropTypes.func,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
 
 export { MenuItem };

packages/react/src/menu/radio-item/MenuRadioItem.tsx

@@ -275,6 +275,11 @@ MenuRadioItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Whether to close the menu when the item is clicked.
    * @default false
@@ -297,6 +302,13 @@ MenuRadioItem.propTypes /* remove-proptypes */ = {
    * The click handler for the menu item.
    */
   onClick: PropTypes.func,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /**
    * Value of the radio item.
    * This is the value that will be set in the MenuRadioGroup when the item is selected.

packages/react/src/select/item-text/SelectItemText.tsx

@@ -139,6 +139,18 @@ SelectItemText.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
 
 export { SelectItemText };

packages/react/src/select/item/SelectItem.tsx

@@ -321,6 +321,11 @@ SelectItem.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Whether the component should ignore user interaction.
    * @default false
@@ -331,6 +336,13 @@ SelectItem.propTypes /* remove-proptypes */ = {
    * and when the item is matched during keyboard text navigation.
    */
   label: PropTypes.string,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /**
    * A unique value that identifies this select item.
    * @default null

packages/react/src/select/scroll-down-arrow/SelectScrollDownArrow.tsx

@@ -37,11 +37,23 @@ SelectScrollDownArrow.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Whether to keep the HTML element in the DOM while the select menu is not scrollable.
    * @default false
    */
   keepMounted: PropTypes.bool,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
 
 export { SelectScrollDownArrow };

packages/react/src/select/scroll-up-arrow/SelectScrollUpArrow.tsx

@@ -37,11 +37,23 @@ SelectScrollUpArrow.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   /**
    * Whether to keep the HTML element in the DOM while the select menu is not scrollable.
    * @default false
    */
   keepMounted: PropTypes.bool,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
 } as any;
 
 export { SelectScrollUpArrow };

scripts/generateProptypes.ts

@@ -71,7 +71,6 @@ async function generateProptypes(project: TypeScriptProject, sourceFile: string)
 
   const sourceContent = await fse.readFile(sourceFile, 'utf8');
   const isTsFile = /(\.(ts|tsx))/.test(sourceFile);
-  const propsFile = sourceFile.replace(/(\.d\.ts|\.tsx|\.ts)/g, '.types.ts');
 
   const result = injectPropTypesInFile({
     components,
@@ -117,16 +116,15 @@ async function generateProptypes(project: TypeScriptProject, sourceFile: string)
         return generated;
       },
       shouldInclude: ({ prop }) => {
-        if (prop.name === 'children') {
+        if (prop.name === 'children' || prop.name === 'className' || prop.name === 'render') {
           return true;
         }
         let shouldDocument;
 
         prop.filenames.forEach((filename) => {
           const isExternal = filename !== sourceFile;
 
-          const implementedBySelfPropsFile = filename === propsFile;
-          if (!isExternal || implementedBySelfPropsFile) {
+          if (!isExternal) {
             shouldDocument = true;
           }
         });