Skip to content

Commit 3f6e05d

Browse files
nkrantznkrantz
authored
feat(data-grid): add ability to set role to treegrid (#3541)
1 parent c023e73 commit 3f6e05d

File tree

3 files changed

+44
-29
lines changed

3 files changed

+44
-29
lines changed

‎.changeset/dirty-bottles-shop.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
"@twilio-paste/data-grid": minor
3+
"@twilio-paste/core": minor
4+
---
5+
6+
[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.

‎packages/paste-core/components/data-grid/src/DataGrid.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,14 @@ export interface DataGridProps extends TableProps {
2525
*/
2626
element?: TableProps["element"];
2727
"aria-label": string;
28+
/**
29+
* If creating a treegrid, set this to "treegrid" to override the default role of "grid"
30+
*
31+
* @default "grid"
32+
* @type {"treegrid"}
33+
* @memberof DataGridProps
34+
*/
35+
role?: "treegrid";
2836
}
2937

3038
/**
@@ -35,7 +43,7 @@ export interface DataGridProps extends TableProps {
3543
* @param {string} element - customization element
3644
*/
3745
export const DataGrid = React.forwardRef<HTMLTableElement, DataGridProps>(
38-
({ element = "DATA_GRID", striped = false, ...props }, ref) => {
46+
({ element = "DATA_GRID", role = "grid", striped = false, ...props }, ref) => {
3947
const dataGridId = `data-grid-${useUID()}`;
4048
const lastFocusedElement = React.useRef<Element | null>(null);
4149
const compositeState = useCompositeState({ unstable_virtual: false });
@@ -148,7 +156,7 @@ export const DataGrid = React.forwardRef<HTMLTableElement, DataGridProps>(
148156
ref={ref}
149157
as={Table}
150158
element={element}
151-
role="grid"
159+
role={role}
152160
onKeyDown={handleKeypress}
153161
onMouseDown={handleMouseDown}
154162
onFocus={handleFocus}

‎packages/paste-core/components/data-grid/type-docs.json‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"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."
4141
},
4242
"aria-autocomplete": {
43-
"type": "\"none\" | \"list\" | \"inline\" | \"both\"",
43+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
4444
"defaultValue": null,
4545
"required": false,
4646
"externalProp": true,
@@ -152,7 +152,7 @@
152152
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
153153
},
154154
"aria-haspopup": {
155-
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"",
155+
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"",
156156
"defaultValue": null,
157157
"required": false,
158158
"externalProp": true,
@@ -476,7 +476,7 @@
476476
"externalProp": true
477477
},
478478
"inputMode": {
479-
"type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"",
479+
"type": "| \"text\"\n | \"none\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"\n | \"search\"",
480480
"defaultValue": null,
481481
"required": false,
482482
"externalProp": true,
@@ -1560,10 +1560,11 @@
15601560
"externalProp": true
15611561
},
15621562
"role": {
1563-
"type": "AriaRole",
1564-
"defaultValue": null,
1563+
"type": "\"treegrid\"",
1564+
"defaultValue": "grid",
15651565
"required": false,
1566-
"externalProp": true
1566+
"externalProp": false,
1567+
"description": "If creating a treegrid, set this to \"treegrid\" to override the default role of \"grid\""
15671568
},
15681569
"rules": {
15691570
"type": "\"none\" | \"groups\" | \"rows\" | \"columns\" | \"all\"",
@@ -1706,7 +1707,7 @@
17061707
"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."
17071708
},
17081709
"aria-autocomplete": {
1709-
"type": "\"none\" | \"list\" | \"inline\" | \"both\"",
1710+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
17101711
"defaultValue": null,
17111712
"required": false,
17121713
"externalProp": true,
@@ -1818,7 +1819,7 @@
18181819
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
18191820
},
18201821
"aria-haspopup": {
1821-
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"",
1822+
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"",
18221823
"defaultValue": null,
18231824
"required": false,
18241825
"externalProp": true,
@@ -2119,7 +2120,7 @@
21192120
"externalProp": true
21202121
},
21212122
"inputMode": {
2122-
"type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"",
2123+
"type": "| \"text\"\n | \"none\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"\n | \"search\"",
21232124
"defaultValue": null,
21242125
"required": false,
21252126
"externalProp": true,
@@ -3303,7 +3304,7 @@
33033304
"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."
33043305
},
33053306
"aria-autocomplete": {
3306-
"type": "\"none\" | \"list\" | \"inline\" | \"both\"",
3307+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
33073308
"defaultValue": null,
33083309
"required": false,
33093310
"externalProp": true,
@@ -3415,7 +3416,7 @@
34153416
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
34163417
},
34173418
"aria-haspopup": {
3418-
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"",
3419+
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"",
34193420
"defaultValue": null,
34203421
"required": false,
34213422
"externalProp": true,
@@ -3716,7 +3717,7 @@
37163717
"externalProp": true
37173718
},
37183719
"inputMode": {
3719-
"type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"",
3720+
"type": "| \"text\"\n | \"none\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"\n | \"search\"",
37203721
"defaultValue": null,
37213722
"required": false,
37223723
"externalProp": true,
@@ -4918,7 +4919,7 @@
49184919
"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."
49194920
},
49204921
"aria-autocomplete": {
4921-
"type": "\"none\" | \"list\" | \"inline\" | \"both\"",
4922+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
49224923
"defaultValue": null,
49234924
"required": false,
49244925
"externalProp": true,
@@ -5030,7 +5031,7 @@
50305031
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
50315032
},
50325033
"aria-haspopup": {
5033-
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"",
5034+
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"",
50345035
"defaultValue": null,
50355036
"required": false,
50365037
"externalProp": true,
@@ -5343,7 +5344,7 @@
53435344
"externalProp": true
53445345
},
53455346
"inputMode": {
5346-
"type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"",
5347+
"type": "| \"text\"\n | \"none\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"\n | \"search\"",
53475348
"defaultValue": null,
53485349
"required": false,
53495350
"externalProp": true,
@@ -6546,7 +6547,7 @@
65466547
"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."
65476548
},
65486549
"aria-autocomplete": {
6549-
"type": "\"none\" | \"list\" | \"inline\" | \"both\"",
6550+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
65506551
"defaultValue": null,
65516552
"required": false,
65526553
"externalProp": true,
@@ -6658,7 +6659,7 @@
66586659
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
66596660
},
66606661
"aria-haspopup": {
6661-
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"",
6662+
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"",
66626663
"defaultValue": null,
66636664
"required": false,
66646665
"externalProp": true,
@@ -7028,7 +7029,7 @@
70287029
"externalProp": true
70297030
},
70307031
"inputMode": {
7031-
"type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"",
7032+
"type": "| \"text\"\n | \"none\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"\n | \"search\"",
70327033
"defaultValue": null,
70337034
"required": false,
70347035
"externalProp": true,
@@ -8217,7 +8218,7 @@
82178218
"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."
82188219
},
82198220
"aria-autocomplete": {
8220-
"type": "\"none\" | \"list\" | \"inline\" | \"both\"",
8221+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
82218222
"defaultValue": null,
82228223
"required": false,
82238224
"externalProp": true,
@@ -8329,7 +8330,7 @@
83298330
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
83308331
},
83318332
"aria-haspopup": {
8332-
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"",
8333+
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"",
83338334
"defaultValue": null,
83348335
"required": false,
83358336
"externalProp": true,
@@ -8630,7 +8631,7 @@
86308631
"externalProp": true
86318632
},
86328633
"inputMode": {
8633-
"type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"",
8634+
"type": "| \"text\"\n | \"none\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"\n | \"search\"",
86348635
"defaultValue": null,
86358636
"required": false,
86368637
"externalProp": true,
@@ -9812,7 +9813,7 @@
98129813
"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."
98139814
},
98149815
"aria-autocomplete": {
9815-
"type": "\"none\" | \"list\" | \"inline\" | \"both\"",
9816+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
98169817
"defaultValue": null,
98179818
"required": false,
98189819
"externalProp": true,
@@ -9924,7 +9925,7 @@
99249925
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
99259926
},
99269927
"aria-haspopup": {
9927-
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"",
9928+
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"",
99289929
"defaultValue": null,
99299930
"required": false,
99309931
"externalProp": true,
@@ -10244,7 +10245,7 @@
1024410245
"externalProp": true
1024510246
},
1024610247
"inputMode": {
10247-
"type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"",
10248+
"type": "| \"text\"\n | \"none\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"\n | \"search\"",
1024810249
"defaultValue": null,
1024910250
"required": false,
1025010251
"externalProp": true,
@@ -11440,7 +11441,7 @@
1144011441
"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."
1144111442
},
1144211443
"aria-autocomplete": {
11443-
"type": "\"none\" | \"list\" | \"inline\" | \"both\"",
11444+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
1144411445
"defaultValue": null,
1144511446
"required": false,
1144611447
"externalProp": true,
@@ -11552,7 +11553,7 @@
1155211553
"description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation."
1155311554
},
1155411555
"aria-haspopup": {
11555-
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"",
11556+
"type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"listbox\"\n | \"tree\"\n | \"grid\"",
1155611557
"defaultValue": null,
1155711558
"required": false,
1155811559
"externalProp": true,
@@ -11853,7 +11854,7 @@
1185311854
"externalProp": true
1185411855
},
1185511856
"inputMode": {
11856-
"type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"",
11857+
"type": "| \"text\"\n | \"none\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"\n | \"search\"",
1185711858
"defaultValue": null,
1185811859
"required": false,
1185911860
"externalProp": true,

0 commit comments

Comments
 (0)