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

@@ -141,7 +141,7 @@ The Textarea should include the base `Textarea`, along with supporting elements
 
 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">
   {`<>