Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 11, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/dirty-bottles-shop.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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