Improve RowProps and CellProps generics docs

Author: bvaughn

lib/components/grid/types.ts

@@ -7,7 +7,7 @@ import type {
 } from "react";
 import type { TagNames } from "../../types";
 
-type ForbiddenKeys = "columnIndex" | "rowIndex" | "style";
+type ForbiddenKeys = "ariaAttributes" | "columnIndex" | "rowIndex" | "style";
 type ExcludeForbiddenKeys<Type> = {
   [Key in keyof Type]: Key extends ForbiddenKeys ? never : Type[Key];
 };
@@ -40,7 +40,7 @@ export type GridProps<
    * Additional props to be passed to the cell-rendering component.
    * Grid will automatically re-render cells when values in this object change.
    *
-   * ⚠️ This object must not contain either an `index` or `style` prop.
+   * ⚠️ This object must not contain `ariaAttributes`, `columnIndex`, `rowIndex`, or `style` props.
    */
   cellProps: ExcludeForbiddenKeys<CellProps>;
 

lib/components/list/types.ts

@@ -125,7 +125,7 @@ export type ListProps<
    * Additional props to be passed to the row-rendering component.
    * List will automatically re-render rows when values in this object change.
    *
-   * ⚠️ This object must not contain either an `index` or `style` prop.
+   * ⚠️ This object must not contain `ariaAttributes`, `index`, or `style` props.
    */
   rowProps: ExcludeForbiddenKeys<RowProps>;
 

public/generated/js-docs/Grid.json

@@ -35,10 +35,10 @@
     },
     "cellProps": {
       "description": "Additional props to be passed to the cell-rendering component.\nGrid will automatically re-render cells when values in this object change.",
-      "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-labelName\"><span class=\"tok-propertyName\">cellProps</span></span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">ExcludeForbiddenKeys</span><span class=\"\">&#60;</span><span class=\"tok-typeName\">CellProps</span></div>",
+      "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-labelName\"><span class=\"tok-propertyName\">cellProps</span></span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">CellProps</span></div>",
       "name": "cellProps",
       "required": true,
-      "warning": "This object must not contain either an <code>index</code> or <code>style</code> prop."
+      "warning": "This object must not contain <code>ariaAttributes</code>, <code>columnIndex</code>, <code>rowIndex</code>, or <code>style</code> props."
     },
     "columnCount": {
       "description": "Number of columns to be rendered in the grid.",

public/generated/js-docs/List.json

@@ -73,10 +73,10 @@
     },
     "rowProps": {
       "description": "Additional props to be passed to the row-rendering component.\nList will automatically re-render rows when values in this object change.",
-      "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-labelName\"><span class=\"tok-propertyName\">rowProps</span></span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">ExcludeForbiddenKeys</span><span class=\"\">&#60;</span><span class=\"tok-typeName\">RowProps</span></div>",
+      "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-labelName\"><span class=\"tok-propertyName\">rowProps</span></span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">RowProps</span></div>",
       "name": "rowProps",
       "required": true,
-      "warning": "This object must not contain either an <code>index</code> or <code>style</code> prop."
+      "warning": "This object must not contain <code>ariaAttributes</code>, <code>index</code>, or <code>style</code> props."
     },
     "tagName": {
       "description": "Can be used to override the root HTML element rendered by the List component.\nThe default value is \"div\", meaning that List renders an HTMLDivElement as its root.",

scripts/compile-docs.ts

@@ -55,8 +55,6 @@ async function run() {
       for (const name in component.props) {
         const prop = component.props[name];
 
-        // TODO ExcludeForbiddenKeys
-
         let textToFormat = prop.type.raw;
         if (!textToFormat && prop.type.name.includes(":")) {
           // Edge case where some prop types aren't registered as containing raw TS
@@ -65,6 +63,11 @@ async function run() {
 
         if (!textToFormat) {
           textToFormat = `${prop.type.name}`;
+
+          const match = textToFormat.match(/ExcludeForbiddenKeys<([^>]+)>/);
+          if (match) {
+            textToFormat = match[1];
+          }
         }
 
         if (prop.defaultValue?.value) {