feat(textarea,data-grid): interactive elements and controlled height

.changeset/quick-seals-do.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/data-grid": patch
+"@twilio-paste/core": patch
+---
+
+[DataGridCell] reworked the click events triggered to allow interactive elements to correctly pull focus

.changeset/strange-pens-smell.md

@@ -0,0 +1,6 @@
+---
+"@twilio-paste/textarea": minor
+"@twilio-paste/core": minor
+---
+
+[TextArea] exposed a prop to allow the minRows to be configured effectively setting the min height

packages/paste-core/components/data-grid/src/DataGridCell.tsx

@@ -9,7 +9,7 @@ import { Td } from "./table/Td";
 import type { TdProps } from "./table/Td";
 import { Th } from "./table/Th";
 import type { ThProps } from "./table/Th";
-import { ensureFocus, isCell, updateTabIndexForActionable } from "./utils";
+import { isCell, updateTabIndexForActionable } from "./utils";
 
 // This module can only be referenced with ECMAScript imports/exports by turning on the 'esModuleInterop' flag and referencing its default export
 
@@ -56,12 +56,6 @@ export const DataGridCell: React.FC<React.PropsWithChildren<DataGridCellProps>>
   const dataGridState = React.useContext(DataGridContext);
   const cellRef = React.useRef(null) as React.RefObject<HTMLTableCellElement | null>;
 
-  const handleMouseDown = React.useCallback(() => {
-    if (cellRef.current) {
-      ensureFocus(cellRef.current);
-    }
-  }, []);
-
   /**
    * MutationObserver callback for the cell
    * Handles correcting tabindex values on the cell and children outside of the React lifecycle
@@ -111,16 +105,7 @@ export const DataGridCell: React.FC<React.PropsWithChildren<DataGridCellProps>>
     }, 10);
   }, [dataGridState.actionable]);
 
-  return (
-    <CompositeItem
-      {...props}
-      {...dataGridState}
-      element={element}
-      ref={cellRef}
-      as={as === "td" ? Td : Th}
-      onClick={handleMouseDown}
-    />
-  );
+  return <CompositeItem {...props} {...dataGridState} element={element} ref={cellRef} as={as === "td" ? Td : Th} />;
 };
 
 DataGridCell.displayName = "DataGridCell";

packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx

@@ -30,6 +30,27 @@ const ActionMenu = (): JSX.Element => {
   );
 };
 
+const InputCell: React.FC<{ colIndex: number; rowIndex: number; value: string | null }> = ({
+  colIndex,
+  rowIndex,
+  value: originalValue,
+}): JSX.Element => {
+  const [value, setValue] = React.useState<string | null>(originalValue);
+  return (
+    <DataGridCell key={`col-${colIndex}`}>
+      <Input
+        aria-label={TableHeaderData[colIndex]}
+        data-testid={`input-${rowIndex}-${colIndex}`}
+        value={value || ""}
+        type="text"
+        onChange={(change) => {
+          setValue(change.target.value);
+        }}
+      />
+    </DataGridCell>
+  );
+};
+
 export const ComposableCellsDataGrid = (): JSX.Element => {
   /* eslint-disable react/no-array-index-key */
   return (
@@ -50,15 +71,12 @@ export const ComposableCellsDataGrid = (): JSX.Element => {
             {row.map((col, colIndex) => {
               if (colIndex === 0 || colIndex === 1) {
                 return (
-                  <DataGridCell key={`col-${colIndex}`}>
-                    <Input
-                      aria-label={TableHeaderData[colIndex]}
-                      data-testid={`input-${rowIndex}-${colIndex}`}
-                      value={col || ""}
-                      type="text"
-                      onChange={() => {}}
-                    />
-                  </DataGridCell>
+                  <InputCell
+                    key={`input-cell-${rowIndex}-${colIndex}`}
+                    colIndex={colIndex}
+                    rowIndex={rowIndex}
+                    value={col}
+                  />
                 );
               }
               if (colIndex === 4) {

packages/paste-core/components/data-grid/stories/components/FixedCellHeights.tsx

@@ -0,0 +1,120 @@
+import { Box } from "@twilio-paste/box";
+import { EditableCodeBlock } from "@twilio-paste/editable-code-block";
+import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon";
+import { Menu, MenuButton, MenuItem, MenuSeparator, useMenuState } from "@twilio-paste/menu";
+import { Option, Select } from "@twilio-paste/select";
+import { TextArea } from "@twilio-paste/textarea";
+import * as React from "react";
+import type { JSX } from "react";
+
+import { DataGrid, DataGridBody, DataGridCell, DataGridHead, DataGridHeader, DataGridRow } from "../../src";
+import { TableBodyData, TableHeaderData } from "./constants";
+
+const ActionMenu = (): JSX.Element => {
+  const menu = useMenuState();
+  return (
+    <Box display="flex" justifyContent="center">
+      <MenuButton {...menu} variant="reset" size="reset">
+        <MoreIcon decorative={false} title="More options" />
+      </MenuButton>
+      <Menu {...menu} aria-label="Preferences">
+        <MenuItem {...menu} href="https://google.com">
+          Settings
+        </MenuItem>
+        <MenuItem {...menu} disabled>
+          Extensions
+        </MenuItem>
+        <MenuSeparator {...menu} />
+        <MenuItem {...menu}>Keyboard shortcuts</MenuItem>
+      </Menu>
+    </Box>
+  );
+};
+
+const InputCell: React.FC<{ colIndex: number; rowIndex: number; value: string | null }> = ({
+  colIndex,
+  rowIndex,
+  value: originalValue,
+}): JSX.Element => {
+  const [value, setValue] = React.useState<string | null>(originalValue);
+  return (
+    <DataGridCell key={`col-${colIndex}`}>
+      <TextArea
+        aria-label={TableHeaderData[colIndex]}
+        data-testid={`input-${rowIndex}-${colIndex}`}
+        value={value || ""}
+        onChange={(change) => {
+          setValue(change.target.value);
+        }}
+        maxRows={6}
+        minRows={6}
+        id={`text-area-${rowIndex}-${colIndex}`}
+      />
+    </DataGridCell>
+  );
+};
+
+export const FixedCellHeightDataGrid = (): JSX.Element => {
+  /* eslint-disable react/no-array-index-key */
+  return (
+    <DataGrid aria-label="User list" data-testid="data-grid" striped>
+      <DataGridHead>
+        <DataGridRow>
+          <DataGridHeader data-testid="header-1">{TableHeaderData[0]}</DataGridHeader>
+          <DataGridHeader>{TableHeaderData[1]}</DataGridHeader>
+          <DataGridHeader>{TableHeaderData[2]}</DataGridHeader>
+          <DataGridHeader>{TableHeaderData[3]}</DataGridHeader>
+          <DataGridHeader>{TableHeaderData[4]}</DataGridHeader>
+          <DataGridHeader>Actions</DataGridHeader>
+        </DataGridRow>
+      </DataGridHead>
+      <DataGridBody>
+        {TableBodyData.map((row, rowIndex) => (
+          <DataGridRow key={`row-${rowIndex}`}>
+            {row.map((col, colIndex) => {
+              if (colIndex === 0 || colIndex === 1) {
+                return (
+                  <InputCell
+                    key={`input-cell-${rowIndex}-${colIndex}`}
+                    colIndex={colIndex}
+                    rowIndex={rowIndex}
+                    value={col}
+                  />
+                );
+              }
+              if (colIndex === 3) {
+                return (
+                  <DataGridCell key={`col-${colIndex}`}>
+                    <EditableCodeBlock
+                      width="300px"
+                      // calculated height based on min row number (20px) * number of rows (6) + padding (2 * 8px)
+                      height="136px"
+                      defaultLanguage="typescript"
+                      defaultValue={`const user: User = new UserAccount("${row[colIndex]}");`}
+                    />
+                  </DataGridCell>
+                );
+              }
+              if (colIndex === 4) {
+                return (
+                  <DataGridCell key={`col-${colIndex}`}>
+                    <Select key={`select-${rowIndex}-${colIndex}`} defaultValue="dogs" aria-label="Phone">
+                      <Option value="cats">(415) 555-CATS</Option>
+                      <Option value="dogs">(415) 555-DOGS</Option>
+                      <Option value="mice">(415) 555-MICE</Option>
+                    </Select>
+                  </DataGridCell>
+                );
+              }
+              return <DataGridCell key={`col-${colIndex}`}>{col}</DataGridCell>;
+            })}
+            <DataGridCell key="col-5">
+              <ActionMenu />
+            </DataGridCell>
+          </DataGridRow>
+        ))}
+      </DataGridBody>
+    </DataGrid>
+  );
+  /* eslint-enable react/no-array-index-key */
+};

packages/paste-core/components/data-grid/stories/index.stories.tsx

@@ -9,6 +9,7 @@ export { I18nDataGrid } from "./components/I18nDataGrid";
 export { DataGridLayouts } from "./components/DataGridLayouts";
 export { ColumnSpanDataGrid } from "./components/ColumnSpanDataGrid";
 export { StickyHeaderDataGrid } from "./components/StickyHeaderDataGrid";
+export { FixedCellHeightDataGrid } from "./components/FixedCellHeights";
 
 // eslint-disable-next-line import/no-default-export
 export default {

packages/paste-core/components/textarea/src/TextArea.tsx

@@ -103,6 +103,14 @@ export interface TextAreaProps extends Omit<HTMLPasteProps<"textarea">, "maxRows
    * @memberof TextAreaProps
    */
   maxRows?: number;
+  /**
+   * Adjust how big the textarea should start.
+   *
+   * @default 3
+   * @type {(number)}
+   * @memberof TextAreaProps
+   */
+  minRows?: number;
   /**
    * The size of the textarea is strictly controlled by the component
    *
@@ -182,6 +190,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       variant,
       resize = "none",
       maxRows = 10,
+      minRows = 3,
       // size, height and width should not be passed down
       size,
       height,
@@ -209,7 +218,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
           readOnly={readOnly}
           ref={ref}
           rows={3}
-          minRows={3}
+          minRows={minRows}
           maxRows={maxRows}
           spellCheck
           resize={resize}

packages/paste-core/components/textarea/type-docs.json

@@ -632,6 +632,13 @@
       "required": false,
       "externalProp": true
     },
+    "minRows": {
+      "type": "number",
+      "defaultValue": "3",
+      "required": false,
+      "externalProp": false,
+      "description": "Adjust how big the textarea should start."
+    },
     "name": {
       "type": "string",
       "defaultValue": null,

packages/paste-website/src/pages/components/textarea/index.mdx

@@ -63,22 +63,22 @@ A Textarea allows for any text to be entered and can't be restricted as other [i
 ### Accessibility
 
 - Include a visible label on **all** form fields.
-- Each label must use the `htmlFor` prop that equals the `id` of the associated textarea.
+- Each label must use the `htmlFor` prop that equals the `id` of the associated Textarea.
 - Avoid placeholder text. It's not broadly supported by assistive technologies, doesn't display in older browsers, and dissapears from the field when a user enters text.
 - Use 1 of 3 ways to label a form field:
   - Visible label with [Label](/components/label) (preferred)
-  - Visible label that's associated to the textarea with `aria-labelledby`
+  - Visible label that's associated to the Textarea with `aria-labelledby`
   - Label directly using `aria-label`
 - Provide clear identification of required fields in the label or at the start of a form. If you use the required field indicator, include the form key at the start of the form.
   - Use the `required` prop to programatically indicate they are required to browsers.
 - Use [Help Text](/components/help-text) and an error icon to show [inline error text](/patterns/error-state) on any field that errors to make it visually clear that the field changed.
-- If the textarea has associated help text or error text, include the `aria-describedby` prop on the textarea. This should match the `id` of the help or error text.
+- If the Textarea has associated help text or error text, include the `aria-describedby` prop on the Textarea. This should match the `id` of the help or error text.
 
 ## Examples
 
 ### Textarea
 
-The Textarea should include the base `Textarea`, along with supporting elements to compose a textarea field that gives the user the context they need to successfully fill it out:
+The Textarea should include the base `Textarea`, along with supporting elements to compose a Textarea field that gives the user the context they need to successfully fill it out:
 
 - [**Label**](/components/label) — Every form field should have a label. The label should indicate what should be entered into field.
 - **Required field indicator** — If most of the fields on a form are optional, indicate the few that are required with text or a required indicator.
@@ -88,13 +88,13 @@ The Textarea should include the base `Textarea`, along with supporting elements
   <CalloutHeading as="h4">Accessibility insight</CalloutHeading>
   <CalloutText>
     Make sure to connect the <inlineCode>Label</inlineCode> to the <inlineCode>TextArea</inlineCode>. This is done with
-    the <inlineCode>htmlFor</inlineCode> prop on the label, and the <inlineCode>id</inlineCode> prop on the textarea.
+    the <inlineCode>htmlFor</inlineCode> prop on the label, and the <inlineCode>id</inlineCode> prop on the Textarea.
     Those two need to match.
   </CalloutText>
   <CalloutText>
-    If the textarea has any associated help text, the textarea should also use the{' '}
+    If the Textarea has any associated help text, the Textarea should also use the{' '}
     <inlineCode>aria-describedby</inlineCode> prop that equals the <inlineCode>id</inlineCode> of the help text. This
-    ensures screen readers know the help text ties directly to the textarea.
+    ensures screen readers know the help text ties directly to the Textarea.
   </CalloutText>
 </Callout>
 
@@ -139,9 +139,9 @@ The Textarea should include the base `Textarea`, along with supporting elements
 
 ### Resizable Textarea
 
-By default, the textarea is not resizable by the user. To change this, add the prop `resize='vertical'`.
+By default, the Textarea is not resizable by the user. To change this, add the prop `resize='vertical'`.
 
-You may also provide a `maxRows` prop to limit how much the textArea grows. By default this value is 10.
+You may also provide a `maxRows` prop to limit how much the Textarea grows. By default this value is 10. You can also set a `minRows` value used to control the minimum height of the Textarea. By default this value is 3.
 
 <LivePreview scope={{Label, HelpText, TextArea}} language="jsx">
   {`<>
@@ -191,7 +191,7 @@ Use a read-only form field when a field's value can't be changed, but users shou
 
 ## Composition notes
 
-A textarea field must have at least a label and a textarea.
+A Textarea field must have at least a label and a Textarea.
 
 <LivePreview scope={{Label, TextArea}} language="jsx">
   {`<>
@@ -228,7 +228,7 @@ Labels should clearly describe the value being requested. They should be concise
 
 To support internationalization, avoid starting a sentence with the label and using the field to finish it since sentence structures vary across languages. For example, use "Call log expiration date" or "How long should logs be stored?". Don't use "Remove logs after:".
 
-Give users enough information in help text to prevent textarea and formatting errors. Keep it concise and scoped to information that will help with validation. For example, use help text if a password field has specific requirements that a user should know prior to filling it out.
+Give users enough information in help text to prevent Textarea and formatting errors. Keep it concise and scoped to information that will help with validation. For example, use help text if a password field has specific requirements that a user should know prior to filling it out.
 
 ### Required field indicator
 
@@ -250,23 +250,23 @@ Use Help Text to show an inline error that to explains how to fix the error. For
 
 ### Optional compositional elements
 
-- **Prefix/suffix** — Use a prefix or suffix to help users format their textarea and to provide more context about the value a user is entering. For example, you could prefix or suffix a field with a currency symbol, or use suffix to append a character counter. Make sure to consider internationalization when using prefixes or suffixes since formatting may differ across languages. For example, currency symbols are placed on the left in American English, while they're placed on the right in French. Don't use prefix/suffix text as a replacement for a label.
+- **Prefix/suffix** — Use a prefix or suffix to help users format their Textarea and to provide more context about the value a user is entering. For example, you could prefix or suffix a field with a currency symbol, or use suffix to append a character counter. Make sure to consider internationalization when using prefixes or suffixes since formatting may differ across languages. For example, currency symbols are placed on the left in American English, while they're placed on the right in French. Don't use prefix/suffix text as a replacement for a label.
 - **Icon** — Use an icon if you need to give the user additional controls for the field. For example, use an icon to clear a field on click, removing the need for users to manually delete their entered value. Place icon buttons that trigger an action on the right side of the field. If you need 2 actions on a field (e.g., popover trigger and clear field), place the icon button that affects the field value on the right, and the other icon on the left.
 
 ## When to use a Textarea
 
-Use a textarea when users are expected to enter text that exceeds a single line, usually longer than a sentence.
+Use a Textarea when users are expected to enter text that exceeds a single line, usually longer than a sentence.
 
 <DoDont>
-  <Do title="Do" body="Use a textarea to encourage longer text entry." center>
+  <Do title="Do" body="Use a Textarea to encourage longer text entry." center>
     <Box width="100%" padding="space60">
       <Label htmlFor="long_do">Tell us your life story</Label>
       <TextArea onChange={() => {}} id="long_do" name="long_do" />
     </Box>
   </Do>
   <Dont
     title="Don't"
-    body="Don't use a textarea when text entry is expected to be short since it could confuse users. Use an input instead."
+    body="Don't use a Textarea when text entry is expected to be short since it could confuse users. Use an input instead."
     center
   >
     <Box width="100%" padding="space60">

packages/paste-website/src/pages/experiences/navigation/index.mdx

@@ -119,7 +119,7 @@ The Sidebar and Topbar navigation components have the following considerations:
 
 <StoryPreview
   title="Generic docs full composition"
-  storyID="components-sidebar-fullcompositions--docs"
+  storyID="components-sidebar-docs--docs"
   code={`
 <Sidebar
   sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}