diff --git a/.changeset/quick-seals-do.md b/.changeset/quick-seals-do.md new file mode 100644 index 0000000000..d86b171789 --- /dev/null +++ b/.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 diff --git a/.changeset/strange-pens-smell.md b/.changeset/strange-pens-smell.md new file mode 100644 index 0000000000..76fb82640e --- /dev/null +++ b/.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 diff --git a/packages/paste-core/components/data-grid/src/DataGridCell.tsx b/packages/paste-core/components/data-grid/src/DataGridCell.tsx index 0009419047..27ebf6541a 100644 --- a/packages/paste-core/components/data-grid/src/DataGridCell.tsx +++ b/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> const dataGridState = React.useContext(DataGridContext); const cellRef = React.useRef(null) as React.RefObject; - 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> }, 10); }, [dataGridState.actionable]); - return ( - - ); + return ; }; DataGridCell.displayName = "DataGridCell"; diff --git a/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx b/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx index f91bee517a..5e4ec07e84 100644 --- a/packages/paste-core/components/data-grid/stories/components/ComposableCellsDataGrid.tsx +++ b/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(originalValue); + return ( + + { + setValue(change.target.value); + }} + /> + + ); +}; + 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 ( - - {}} - /> - + ); } if (colIndex === 4) { diff --git a/packages/paste-core/components/data-grid/stories/components/FixedCellHeights.tsx b/packages/paste-core/components/data-grid/stories/components/FixedCellHeights.tsx new file mode 100644 index 0000000000..c4845a2854 --- /dev/null +++ b/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 ( + + + + + + + Settings + + + Extensions + + + Keyboard shortcuts + + + ); +}; + +const InputCell: React.FC<{ colIndex: number; rowIndex: number; value: string | null }> = ({ + colIndex, + rowIndex, + value: originalValue, +}): JSX.Element => { + const [value, setValue] = React.useState(originalValue); + return ( + +