Merge branch 'main' into fix/growinginput

twilio-labs · Oct 12, 2023 · b96b427 · b96b427
2 parents 9b4b715 + 1a70ec0
commit b96b427
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 31 deletions.
diff --git a/.changeset/dirty-bottles-shop.md 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/.changeset/fifty-peas-swim.md b/.changeset/fifty-peas-swim.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/chat-composer": patch
+"@twilio-paste/core": patch
+---
+
+[Chat Composer] Change overflowY from "scroll" to "auto" to prevent non-scrollable scrollbar bug
diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx
@@ -116,7 +116,7 @@ export const ChatComposer = React.forwardRef<HTMLDivElement, ChatComposerProps>(
         paddingX="space40"
         borderRadius="borderRadius20"
         _focusWithin={{ boxShadow: "shadowFocus" }}
-        overflowY="scroll"
+        overflowY="auto"
         maxHeight={maxHeight}
         disabled={disabled}
         aria-disabled={disabled}

diff --git 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<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 });
@@ -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}

diff --git 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,

diff --git a/packages/paste-website/src/component-examples/ChatComposerExamples.tsx b/packages/paste-website/src/component-examples/ChatComposerExamples.tsx
@@ -213,7 +213,7 @@ export const ChatDialogExample = `const ChatDialog = () => {
 
   return (
     <Box>
-      <Box ref={scrollerRef} overflowX="hidden" overflowY="scroll" maxHeight="size50" tabIndex={0}>
+      <Box ref={scrollerRef} overflowX="hidden" overflowY="auto" maxHeight="size50" tabIndex={0}>
         <ChatLogger ref={loggerRef} chats={chats} />
       </Box>
       <Box