Skip to content

Commit

Permalink
feat(data-grid): add ability to set role to treegrid
Browse files Browse the repository at this point in the history
  • Loading branch information
nkrantz committed Oct 10, 2023
1 parent c023e73 commit d97e0bd
Show file tree
Hide file tree
Showing 3 changed files with 44 additions and 29 deletions.
6 changes: 6 additions & 0 deletions .changeset/dirty-bottles-shop.md
Original file line number Diff line number Diff line change
@@ -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.
12 changes: 10 additions & 2 deletions packages/paste-core/components/data-grid/src/DataGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}

/**
Expand All @@ -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 });
Expand Down Expand Up @@ -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}
Expand Down
55 changes: 28 additions & 27 deletions packages/paste-core/components/data-grid/type-docs.json
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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\"",
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit d97e0bd

Please sign in to comment.