feat(data-grid): add ability to set role to treegrid (#3541)

twilio-labs · Oct 11, 2023 · 3f6e05d · 3f6e05d
1 parent c023e73
commit 3f6e05d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 29 deletions.
diff --git a/.changeset/dirty-bottles-shop.md b/.changeset/dirty-bottles-shop.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/data-grid": minor
+"@twilio-paste/core": minor
+---
+
+[Data Grid] Add ability to override default "grid" role to be "treegrid" for making custom tree grid components using Data Grid. "treegrid" is the only valid type that can be passed to role.
diff --git a/packages/paste-core/components/data-grid/src/DataGrid.tsx b/packages/paste-core/components/data-grid/src/DataGrid.tsx
@@ -25,6 +25,14 @@ export interface DataGridProps extends TableProps {
    */
   element?: TableProps["element"];
   "aria-label": string;
+  /**
+   * If creating a treegrid, set this to "treegrid" to override the default role of "grid"
+   *
+   * @default "grid"
+   * @type {"treegrid"}
+   * @memberof DataGridProps
+   */
+  role?: "treegrid";
 }
 
 /**
@@ -35,7 +43,7 @@ export interface DataGridProps extends TableProps {
  * @param {string} element - customization element
  */
 export const DataGrid = React.forwardRef<HTMLTableElement, DataGridProps>(
-  ({ element = "DATA_GRID", striped = false, ...props }, ref) => {
+  ({ element = "DATA_GRID", role = "grid", striped = false, ...props }, ref) => {
     const dataGridId = `data-grid-${useUID()}`;
     const lastFocusedElement = React.useRef<Element | null>(null);
     const compositeState = useCompositeState({ unstable_virtual: false });
@@ -148,7 +156,7 @@ export const DataGrid = React.forwardRef<HTMLTableElement, DataGridProps>(
           ref={ref}
           as={Table}
           element={element}
-          role="grid"
+          role={role}
           onKeyDown={handleKeypress}
           onMouseDown={handleMouseDown}
           onFocus={handleFocus}

diff --git a/packages/paste-core/components/data-grid/type-docs.json b/packages/paste-core/components/data-grid/type-docs.json
@@ -40,7 +40,7 @@
       "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
     },
     "aria-autocomplete": {
-      "type": "\"none\" | \"list\" | \"inline\" | \"both\"",
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -152,7 +152,7 @@
       "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
     },
     "aria-haspopup": {
-      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -476,7 +476,7 @@
       "externalProp": true
     },
     "inputMode": {
-      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -1560,10 +1560,11 @@
       "externalProp": true
     },
     "role": {
-      "type": "AriaRole",
-      "defaultValue": null,
+      "type": "\"treegrid\"",
+      "defaultValue": "grid",
       "required": false,
-      "externalProp": true
+      "externalProp": false,
+      "description": "If creating a treegrid, set this to \"treegrid\" to override the default role of \"grid\""
     },
     "rules": {
       "type": "\"none\" | \"groups\" | \"rows\" | \"columns\" | \"all\"",
@@ -1706,7 +1707,7 @@
       "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
     },
     "aria-autocomplete": {
-      "type": "\"none\" | \"list\" | \"inline\" | \"both\"",
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -1818,7 +1819,7 @@
       "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
     },
     "aria-haspopup": {
-      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -2119,7 +2120,7 @@
       "externalProp": true
     },
     "inputMode": {
-      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -3303,7 +3304,7 @@
       "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
     },
     "aria-autocomplete": {
-      "type": "\"none\" | \"list\" | \"inline\" | \"both\"",
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -3415,7 +3416,7 @@
       "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
     },
     "aria-haspopup": {
-      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -3716,7 +3717,7 @@
       "externalProp": true
     },
     "inputMode": {
-      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -4918,7 +4919,7 @@
       "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
     },
     "aria-autocomplete": {
-      "type": "\"none\" | \"list\" | \"inline\" | \"both\"",
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -5030,7 +5031,7 @@
       "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
     },
     "aria-haspopup": {
-      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -5343,7 +5344,7 @@
       "externalProp": true
     },
     "inputMode": {
-      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -6546,7 +6547,7 @@
       "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
     },
     "aria-autocomplete": {
-      "type": "\"none\" | \"list\" | \"inline\" | \"both\"",
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -6658,7 +6659,7 @@
       "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
     },
     "aria-haspopup": {
-      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -7028,7 +7029,7 @@
       "externalProp": true
     },
     "inputMode": {
-      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -8217,7 +8218,7 @@
       "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
     },
     "aria-autocomplete": {
-      "type": "\"none\" | \"list\" | \"inline\" | \"both\"",
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -8329,7 +8330,7 @@
       "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
     },
     "aria-haspopup": {
-      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -8630,7 +8631,7 @@
       "externalProp": true
     },
     "inputMode": {
-      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -9812,7 +9813,7 @@
       "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
     },
     "aria-autocomplete": {
-      "type": "\"none\" | \"list\" | \"inline\" | \"both\"",
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -9924,7 +9925,7 @@
       "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
     },
     "aria-haspopup": {
-      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -10244,7 +10245,7 @@
       "externalProp": true
     },
     "inputMode": {
-      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -11440,7 +11441,7 @@
       "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute."
     },
     "aria-autocomplete": {
-      "type": "\"none\" | \"list\" | \"inline\" | \"both\"",
+      "type": "\"none\" | \"inline\" | \"list\" | \"both\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -11552,7 +11553,7 @@
       "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
     },
     "aria-haspopup": {
-      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"grid\"\n  | \"listbox\"\n  | \"tree\"",
+      "type": "| boolean\n  | \"dialog\"\n  | \"menu\"\n  | \"true\"\n  | \"false\"\n  | \"listbox\"\n  | \"tree\"\n  | \"grid\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,
@@ -11853,7 +11854,7 @@
       "externalProp": true
     },
     "inputMode": {
-      "type": "| \"text\"\n  | \"none\"\n  | \"search\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"",
+      "type": "| \"text\"\n  | \"none\"\n  | \"tel\"\n  | \"url\"\n  | \"email\"\n  | \"numeric\"\n  | \"decimal\"\n  | \"search\"",
       "defaultValue": null,
       "required": false,
       "externalProp": true,