From d97e0bd73f6cb8700bb2bce7e6caa811374917ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Tue, 10 Oct 2023 16:26:52 -0400 Subject: [PATCH] feat(data-grid): add ability to set role to treegrid --- .changeset/dirty-bottles-shop.md | 6 ++ .../components/data-grid/src/DataGrid.tsx | 12 +++- .../components/data-grid/type-docs.json | 55 ++++++++++--------- 3 files changed, 44 insertions(+), 29 deletions(-) create mode 100644 .changeset/dirty-bottles-shop.md diff --git a/.changeset/dirty-bottles-shop.md b/.changeset/dirty-bottles-shop.md new file mode 100644 index 0000000000..536088f2b9 --- /dev/null +++ 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 index 6eb3db8756..579f006975 100644 --- 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( - ({ 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(null); const compositeState = useCompositeState({ unstable_virtual: false }); @@ -148,7 +156,7 @@ export const DataGrid = React.forwardRef( 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 index 166bd8ea29..9cb5febe7a 100644 --- 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,