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,