From f6088673ae1f793b09da8ee6ce162bca0403e644 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Sat, 29 Jan 2022 19:21:53 -0600 Subject: [PATCH 01/51] Use css logic properties --- src/DragHandle.tsx | 4 ++-- src/GroupRow.tsx | 2 +- src/HeaderCell.tsx | 6 +++--- src/HeaderRow.tsx | 2 +- src/SummaryCell.tsx | 4 ++-- src/SummaryRow.tsx | 2 +- src/formatters/SelectCellFormatter.tsx | 2 +- src/formatters/ToggleGroupFormatter.tsx | 2 +- src/style/cell.ts | 4 ++-- src/style/core.ts | 7 +++---- src/utils/index.ts | 4 ++-- website/Nav.tsx | 4 ++-- website/demos/CellNavigation.tsx | 2 +- website/demos/CommonFeatures.tsx | 2 +- website/demos/ContextMenu.tsx | 4 ++-- website/demos/HeaderFilters.tsx | 2 +- website/demos/InfiniteScrolling.tsx | 4 ++-- website/demos/ScrollToRow.tsx | 4 ++-- website/demos/TreeView.tsx | 2 +- .../demos/components/Formatters/CellExpanderFormatter.tsx | 2 +- .../demos/components/Formatters/ChildRowDeleteButton.tsx | 8 ++++---- website/index.html | 2 +- 22 files changed, 37 insertions(+), 38 deletions(-) diff --git a/src/DragHandle.tsx b/src/DragHandle.tsx index b03c1231e1..4409a1f67e 100644 --- a/src/DragHandle.tsx +++ b/src/DragHandle.tsx @@ -6,8 +6,8 @@ import type { DataGridProps, SelectCellState } from './DataGrid'; const cellDragHandle = css` cursor: move; position: absolute; - right: 0; - bottom: 0; + inset-inline-end: 0; + inset-block-end: 0; width: 8px; height: 8px; background-color: var(--rdg-selection-color); diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx index 3aa824389f..6d5b45f93f 100644 --- a/src/GroupRow.tsx +++ b/src/GroupRow.tsx @@ -33,7 +33,7 @@ const groupRow = css` } > .${cell}:not(:last-child):not(.${cellFrozenLast}) { - border-right: none; + border-inline-end: none; } `; diff --git a/src/HeaderCell.tsx b/src/HeaderCell.tsx index fa81895504..48d15f7727 100644 --- a/src/HeaderCell.tsx +++ b/src/HeaderCell.tsx @@ -13,9 +13,9 @@ const cellResizable = css` content: ''; cursor: col-resize; position: absolute; - top: 0; - right: 0; - bottom: 0; + inset-block-start: 0; + inset-inline-end: 0; + inset-block-end: 0; width: 10px; } `; diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index 109cf3d419..8100dd669a 100644 --- a/src/HeaderRow.tsx +++ b/src/HeaderRow.tsx @@ -34,7 +34,7 @@ const headerRow = css` /* Should have a higher value than 1 to show up above frozen cells */ z-index: 2; position: sticky; - top: 0; + inset-block-start: 0; } > .${cellFrozen} { diff --git a/src/SummaryCell.tsx b/src/SummaryCell.tsx index 071161b036..86411c701a 100644 --- a/src/SummaryCell.tsx +++ b/src/SummaryCell.tsx @@ -6,8 +6,8 @@ import type { CalculatedColumn, CellRendererProps } from './types'; import { useRovingCellRef } from './hooks'; export const summaryCellClassname = css` - top: var(--rdg-summary-row-top); - bottom: var(--rdg-summary-row-bottom); + inset-block-start: var(--rdg-summary-row-top); + inset-block-end: var(--rdg-summary-row-bottom); `; interface SharedCellRendererProps diff --git a/src/SummaryRow.tsx b/src/SummaryRow.tsx index 510f699998..ad5dae7c0d 100644 --- a/src/SummaryRow.tsx +++ b/src/SummaryRow.tsx @@ -29,7 +29,7 @@ const summaryRow = css` const summaryRowBorderClassname = css` & > .${cell} { - border-top: 2px solid var(--rdg-summary-border-color); + border-block-start: 2px solid var(--rdg-summary-border-color); } `; diff --git a/src/formatters/SelectCellFormatter.tsx b/src/formatters/SelectCellFormatter.tsx index a5a811413f..e39be9afcb 100644 --- a/src/formatters/SelectCellFormatter.tsx +++ b/src/formatters/SelectCellFormatter.tsx @@ -9,7 +9,7 @@ const checkboxLabel = css` justify-content: center; position: absolute; inset: 0; - margin-right: 1px; /* align checkbox in row group cell */ + margin-inline-end: 1px; /* align checkbox in row group cell */ `; const checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`; diff --git a/src/formatters/ToggleGroupFormatter.tsx b/src/formatters/ToggleGroupFormatter.tsx index 67eddae8cf..f076c3019b 100644 --- a/src/formatters/ToggleGroupFormatter.tsx +++ b/src/formatters/ToggleGroupFormatter.tsx @@ -9,7 +9,7 @@ const groupCellContent = css` const groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`; const caret = css` - margin-left: 4px; + margin-inline-start: 4px; stroke: currentColor; stroke-width: 1.5px; fill: transparent; diff --git a/src/style/cell.ts b/src/style/cell.ts index aaa091a4f5..d4823551c8 100644 --- a/src/style/cell.ts +++ b/src/style/cell.ts @@ -4,8 +4,8 @@ export const cell = css` contain: strict; contain: size layout style paint; padding: 0 8px; - border-right: 1px solid var(--rdg-border-color); - border-bottom: 1px solid var(--rdg-border-color); + border-inline-end: 1px solid var(--rdg-border-color); + border-block-end: 1px solid var(--rdg-border-color); grid-row-start: var(--rdg-grid-row-start); background-color: inherit; diff --git a/src/style/core.ts b/src/style/core.ts index 4037d0c4d3..94ba302c86 100644 --- a/src/style/core.ts +++ b/src/style/core.ts @@ -56,7 +56,6 @@ const root = css` background-color: var(--rdg-background-color); color: var(--rdg-color); font-size: var(--rdg-font-size); - direction: ltr; /* set stacking context in safari */ @supports not (contain: strict) { @@ -74,8 +73,8 @@ const root = css` &::before { content: ''; position: absolute; - top: 0; - left: 0; + inset-block-start: 0; + inset-inline-start: 0; height: var(--rdg-grid-height); width: var(--rdg-row-width); } @@ -108,6 +107,6 @@ export const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDraggi export const focusSinkClassname = css` position: sticky; - left: 0; + inset-inline-start: 0; grid-column-start: 1; `; diff --git a/src/utils/index.ts b/src/utils/index.ts index 1ce63bba44..2e91479e49 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -9,7 +9,7 @@ export * from './domUtils'; export * from './keyboardUtils'; export * from './selectedCellUtils'; -export const { min, max, round, floor, sign } = Math; +export const { min, max, round, floor, sign, abs } = Math; export function assertIsValidKeyGetter( keyGetter: unknown @@ -36,7 +36,7 @@ export function getCellStyle( return { gridColumnStart: column.idx + 1, gridColumnEnd: colSpan !== undefined ? `span ${colSpan}` : undefined, - left: column.frozen ? `var(--rdg-frozen-left-${column.idx})` : undefined + insetInlineStart: column.frozen ? `var(--rdg-frozen-left-${column.idx})` : undefined }; } diff --git a/website/Nav.tsx b/website/Nav.tsx index 46fe1a890c..590ce7a4ef 100644 --- a/website/Nav.tsx +++ b/website/Nav.tsx @@ -7,10 +7,10 @@ const navClassname = css` white-space: nowrap; @media (prefers-color-scheme: light) { - border-left: 4px solid hsl(210deg 50% 80%); + border-inline-start: 4px solid hsl(210deg 50% 80%); } @media (prefers-color-scheme: dark) { - border-left: 4px solid hsl(210deg 50% 40%); + border-inline-start: 4px solid hsl(210deg 50% 40%); } h1, diff --git a/website/demos/CellNavigation.tsx b/website/demos/CellNavigation.tsx index ac15b52b36..65cd98ce4a 100644 --- a/website/demos/CellNavigation.tsx +++ b/website/demos/CellNavigation.tsx @@ -75,7 +75,7 @@ export default function CellNavigation() { return ( <> -
+
Cell Navigation Modes:
); diff --git a/website/demos/MillionCells.tsx b/website/demos/MillionCells.tsx index cce4e37418..8879948ff1 100644 --- a/website/demos/MillionCells.tsx +++ b/website/demos/MillionCells.tsx @@ -1,6 +1,7 @@ import { useMemo } from 'react'; import DataGrid from '../../src'; import type { Column, FormatterProps } from '../../src'; +import type { Props } from './types'; type Row = number; const rows: readonly Row[] = [...Array(1000).keys()]; @@ -13,7 +14,7 @@ function CellFormatter(props: FormatterProps) { ); } -export default function MillionCells() { +export default function MillionCells({ direction }: Props) { const columns = useMemo((): readonly Column[] => { const columns: Column[] = []; @@ -31,5 +32,13 @@ export default function MillionCells() { return columns; }, []); - return ; + return ( + + ); } diff --git a/website/demos/NoRows.tsx b/website/demos/NoRows.tsx index a7fde4e59b..a65aa92d59 100644 --- a/website/demos/NoRows.tsx +++ b/website/demos/NoRows.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import DataGrid, { SelectColumn } from '../../src'; import type { Column } from '../../src'; +import type { Props } from './types'; function EmptyRowsRenderer() { return ( @@ -32,7 +33,7 @@ function rowKeyGetter(row: Row) { return row.id; } -export default function NoRows() { +export default function NoRows({ direction }: Props) { const [selectedRows, onSelectedRowsChange] = useState((): ReadonlySet => new Set()); return ( @@ -44,6 +45,7 @@ export default function NoRows() { onSelectedRowsChange={onSelectedRowsChange} rowKeyGetter={rowKeyGetter} className="small-grid" + direction={direction} /> ); } diff --git a/website/demos/Resizable.tsx b/website/demos/Resizable.tsx index e0adf25d4c..2f40487351 100644 --- a/website/demos/Resizable.tsx +++ b/website/demos/Resizable.tsx @@ -1,5 +1,6 @@ import DataGrid from '../../src'; import type { Column, FormatterProps } from '../../src'; +import type { Props } from './types'; type Row = number; const rows: readonly Row[] = [...Array(100).keys()]; @@ -23,8 +24,14 @@ for (let i = 0; i < 50; i++) { }); } -export default function ResizableGrid() { +export default function ResizableGrid({ direction }: Props) { return ( - + ); } diff --git a/website/demos/RowsReordering.tsx b/website/demos/RowsReordering.tsx index 4a23b52ff8..cda67827e0 100644 --- a/website/demos/RowsReordering.tsx +++ b/website/demos/RowsReordering.tsx @@ -5,6 +5,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend'; import { DraggableRowRenderer } from './components/RowRenderers'; import DataGrid, { TextEditor } from '../../src'; import type { Column, RowRendererProps } from '../../src'; +import type { Props } from './types'; interface Row { id: number; @@ -54,7 +55,7 @@ const columns: readonly Column[] = [ } ]; -export default function RowsReordering() { +export default function RowsReordering({ direction }: Props) { const [rows, setRows] = useState(createRows); const RowRenderer = useCallback((props: RowRendererProps) => { @@ -71,7 +72,13 @@ export default function RowsReordering() { return ( - + ); } diff --git a/website/demos/ScrollToRow.tsx b/website/demos/ScrollToRow.tsx index f541ed9b18..15c1eda99a 100644 --- a/website/demos/ScrollToRow.tsx +++ b/website/demos/ScrollToRow.tsx @@ -1,6 +1,7 @@ import { useState, useRef } from 'react'; import DataGrid from '../../src'; import type { Column, DataGridHandle } from '../../src'; +import type { Props } from './types'; interface Row { id: number; @@ -14,7 +15,7 @@ const columns: readonly Column[] = [ { key: 'count', name: 'Count' } ]; -export default function ScrollToRow() { +export default function ScrollToRow({ direction }: Props) { const [rows] = useState(() => { const rows: Row[] = []; @@ -45,7 +46,7 @@ export default function ScrollToRow() { Scroll to row
- + ); } diff --git a/website/demos/TreeView.tsx b/website/demos/TreeView.tsx index 11b74a59e2..6bc8f6847a 100644 --- a/website/demos/TreeView.tsx +++ b/website/demos/TreeView.tsx @@ -3,6 +3,7 @@ import { useState, useReducer, useMemo } from 'react'; import DataGrid from '../../src'; import type { Column } from '../../src'; import { CellExpanderFormatter, ChildRowDeleteButton } from './components/Formatters'; +import type { Props } from './types'; interface Row { id: string; @@ -111,7 +112,7 @@ function reducer(rows: Row[], { type, id }: Action): Row[] { const defaultRows = createRows(); -export default function TreeView() { +export default function TreeView({ direction }: Props) { const [rows, dispatch] = useReducer(reducer, defaultRows); const [allowDelete, setAllowDelete] = useState(true); const columns: Column[] = useMemo(() => { @@ -175,7 +176,7 @@ export default function TreeView() { onChange={() => setAllowDelete(!allowDelete)} /> - + ); } diff --git a/website/demos/VariableRowHeight.tsx b/website/demos/VariableRowHeight.tsx index af77ff3d4a..f6bdb2cb35 100644 --- a/website/demos/VariableRowHeight.tsx +++ b/website/demos/VariableRowHeight.tsx @@ -2,6 +2,7 @@ import { useMemo } from 'react'; import DataGrid from '../../src'; import type { Column, FormatterProps } from '../../src'; +import type { Props } from './types'; type Row = number; const rows: readonly Row[] = [...Array(500).keys()]; @@ -14,7 +15,7 @@ function CellFormatter(props: FormatterProps) { ); } -export default function VariableRowHeight() { +export default function VariableRowHeight({ direction }: Props) { const columns = useMemo((): readonly Column[] => { const columns: Column[] = []; @@ -32,7 +33,15 @@ export default function VariableRowHeight() { return columns; }, []); - return ; + return ( + + ); } function rowHeight() { diff --git a/website/demos/types.ts b/website/demos/types.ts new file mode 100644 index 0000000000..ffbeb9f8da --- /dev/null +++ b/website/demos/types.ts @@ -0,0 +1,5 @@ +export type Direction = 'ltr' | 'rtl'; + +export interface Props { + direction: Direction; +} diff --git a/website/root.tsx b/website/root.tsx index 3b5adb3e0b..d6d0eb5cc5 100644 --- a/website/root.tsx +++ b/website/root.tsx @@ -3,9 +3,9 @@ import { render } from 'react-dom'; import { css } from '@linaria/core'; import { HashRouter as Router, Switch, Redirect, Route } from 'react-router-dom'; -import type { Direction } from './Nav'; import Nav from './Nav'; +import type { Direction } from './demos/types'; import CommonFeatures from './demos/CommonFeatures'; import AllFeatures from './demos/AllFeatures'; import CellNavigation from './demos/CellNavigation'; @@ -90,55 +90,55 @@ function Root() { - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + Nothing to see here From a69892a3013c23f8ef6423e94a8a9f51d5012b9b Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 1 Feb 2022 12:54:45 -0600 Subject: [PATCH 29/51] Update README.md Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 37c1b9e837..112c9de75c 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ - [Cell editing](https://adazzle.github.io/react-data-grid/#/common-features) - [Cell copy / pasting](https://adazzle.github.io/react-data-grid/#/all-features) - [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/#/all-features) -- RTL languages support. We recommend using Firefox as Chrome has a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1140374) and frozen columns do not work and [`dir:` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) is not supported +- Right-to-left (RTL) text support. We recommend using Firefox as Chrome has a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1140374) with frozen columns, and the [`:dir` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) is not supported ## Links From 34a13ebaf5d6ec216e747549ef3f950e4a894a40 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 1 Feb 2022 13:00:57 -0600 Subject: [PATCH 30/51] Remove key --- src/DataGrid.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 61a3b5641d..82e9bda262 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -1116,7 +1116,6 @@ function DataGrid( } as unknown as React.CSSProperties } dir={direction} - key={direction} // recreate grid as scroll position is not compatible b/w ltr and rtl ref={gridRef} onScroll={handleScroll} onKeyDown={handleKeyDown} From 61e8619d5b07c49754ae7cf459e51ac7a88c34d5 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 1 Feb 2022 13:21:39 -0600 Subject: [PATCH 31/51] Fix resizing --- src/DataGrid.tsx | 6 ++++-- src/HeaderRow.tsx | 9 ++++++--- src/types.ts | 2 ++ 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 82e9bda262..577ff2576b 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -49,7 +49,8 @@ import type { CellNavigationMode, SortColumn, RowHeightArgs, - Maybe + Maybe, + Direction } from './types'; export interface SelectCellState extends Position { @@ -165,7 +166,7 @@ export interface DataGridProps extends Sha rowRenderer?: Maybe>>; noRowsFallback?: React.ReactNode; rowClass?: Maybe<(row: R) => Maybe>; - direction?: Maybe<'ltr' | 'rtl'>; + direction?: Maybe; 'data-testid'?: Maybe; } @@ -1144,6 +1145,7 @@ function DataGrid( selectedCellIdx={isHeaderRowSelected ? selectedPosition.idx : undefined} selectCell={selectHeaderCellLatest} shouldFocusGrid={!selectedCellIsWithinSelectionBounds} + direction={direction} /> {rows.length === 0 && noRowsFallback ? ( noRowsFallback diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index e4ddbef9d6..e24abf968d 100644 --- a/src/HeaderRow.tsx +++ b/src/HeaderRow.tsx @@ -3,14 +3,14 @@ import clsx from 'clsx'; import { css } from '@linaria/core'; import HeaderCell from './HeaderCell'; -import type { CalculatedColumn } from './types'; +import type { CalculatedColumn, Direction } from './types'; import { getColSpan, getRowStyle } from './utils'; import type { DataGridProps } from './DataGrid'; import { cell, cellFrozen, rowSelectedClassname } from './style'; type SharedDataGridProps = Pick< DataGridProps, - 'sortColumns' | 'onSortColumnsChange' | 'direction' + 'sortColumns' | 'onSortColumnsChange' >; export interface HeaderRowProps extends SharedDataGridProps { @@ -22,6 +22,7 @@ export interface HeaderRowProps extends SharedDataGr lastFrozenColumnIndex: number; selectedCellIdx: number | undefined; shouldFocusGrid: boolean; + direction: Direction; } const headerRow = css` @@ -54,7 +55,8 @@ function HeaderRow({ lastFrozenColumnIndex, selectedCellIdx, selectCell, - shouldFocusGrid + shouldFocusGrid, + direction }: HeaderRowProps) { const cells = []; for (let index = 0; index < columns.length; index++) { @@ -77,6 +79,7 @@ function HeaderRow({ sortColumns={sortColumns} selectCell={selectCell} shouldFocusGrid={shouldFocusGrid && index === 0} + direction={direction} /> ); } diff --git a/src/types.ts b/src/types.ts index db5dee99ff..5c8b0b68c2 100644 --- a/src/types.ts +++ b/src/types.ts @@ -200,3 +200,5 @@ export type ColSpanArgs = | { type: 'SUMMARY'; row: SR }; export type RowHeightArgs = { type: 'ROW'; row: R } | { type: 'GROUP'; row: GroupRow }; + +export type Direction = 'ltr' | 'rtl'; From 168cc789913edd338dfbe70f602bf4581763dceb Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 1 Feb 2022 13:28:45 -0600 Subject: [PATCH 32/51] Add key to recreate grid when direction is changed --- website/Nav.tsx | 2 +- website/demos/AllFeatures.tsx | 1 + website/demos/CellNavigation.tsx | 1 + website/demos/ColumnSpanning.tsx | 1 + website/demos/ColumnsReordering.tsx | 1 + website/demos/CommonFeatures.tsx | 1 + website/demos/ContextMenu.tsx | 1 + website/demos/Grouping.tsx | 1 + website/demos/HeaderFilters.tsx | 1 + website/demos/InfiniteScrolling.tsx | 1 + website/demos/MasterDetail.tsx | 4 +++- website/demos/MillionCells.tsx | 1 + website/demos/NoRows.tsx | 1 + website/demos/Resizable.tsx | 1 + website/demos/RowsReordering.tsx | 1 + website/demos/ScrollToRow.tsx | 2 +- website/demos/TreeView.tsx | 8 +++++++- website/demos/VariableRowHeight.tsx | 1 + website/demos/types.ts | 2 +- website/root.tsx | 2 +- 20 files changed, 28 insertions(+), 6 deletions(-) diff --git a/website/Nav.tsx b/website/Nav.tsx index 83022ca76a..4002a72268 100644 --- a/website/Nav.tsx +++ b/website/Nav.tsx @@ -1,7 +1,7 @@ import { NavLink } from 'react-router-dom'; import { css } from '@linaria/core'; -import type { Direction } from './demos/types'; +import type { Direction } from '../src/types'; const navClassname = css` display: flex; diff --git a/website/demos/AllFeatures.tsx b/website/demos/AllFeatures.tsx index 4ecc6f5f29..631dd6d9f3 100644 --- a/website/demos/AllFeatures.tsx +++ b/website/demos/AllFeatures.tsx @@ -200,6 +200,7 @@ export default function AllFeatures({ direction }: Props) { return ( } diff --git a/website/demos/Resizable.tsx b/website/demos/Resizable.tsx index 2f40487351..0931a86554 100644 --- a/website/demos/Resizable.tsx +++ b/website/demos/Resizable.tsx @@ -27,6 +27,7 @@ for (let i = 0; i < 50; i++) { export default function ResizableGrid({ direction }: Props) { return ( - + ); } diff --git a/website/demos/TreeView.tsx b/website/demos/TreeView.tsx index 6bc8f6847a..e75c63741d 100644 --- a/website/demos/TreeView.tsx +++ b/website/demos/TreeView.tsx @@ -176,7 +176,13 @@ export default function TreeView({ direction }: Props) { onChange={() => setAllowDelete(!allowDelete)} /> - + ); } diff --git a/website/demos/VariableRowHeight.tsx b/website/demos/VariableRowHeight.tsx index f6bdb2cb35..fd9a1511cf 100644 --- a/website/demos/VariableRowHeight.tsx +++ b/website/demos/VariableRowHeight.tsx @@ -35,6 +35,7 @@ export default function VariableRowHeight({ direction }: Props) { return ( Date: Tue, 1 Feb 2022 13:58:14 -0600 Subject: [PATCH 33/51] Fix direction in portals --- website/demos/CommonFeatures.tsx | 6 ++++-- website/demos/ContextMenu.tsx | 16 +++++++++------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/website/demos/CommonFeatures.tsx b/website/demos/CommonFeatures.tsx index f7eb7bf943..8d8a9456ac 100644 --- a/website/demos/CommonFeatures.tsx +++ b/website/demos/CommonFeatures.tsx @@ -9,6 +9,7 @@ import { stopPropagation } from '../../src/utils'; import { exportToCsv, exportToXlsx, exportToPdf } from './exportUtils'; import { textEditorClassname } from '../../src/editors/TextEditor'; import type { Props } from './types'; +import type { Direction } from '../../src/types'; const toolbarClassname = css` text-align: end; @@ -72,7 +73,7 @@ interface Row { available: boolean; } -function getColumns(countries: string[]): readonly Column[] { +function getColumns(countries: string[], direction: Direction): readonly Column[] { return [ SelectColumn, { @@ -154,6 +155,7 @@ function getColumns(countries: string[]): readonly Column[] { editor({ row, onRowChange, onClose }) { return createPortal(
{ if (event.key === 'Escape') { @@ -316,7 +318,7 @@ export default function CommonFeatures({ direction }: Props) { return [...new Set(rows.map((r) => r.country))].sort(new Intl.Collator().compare); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); - const columns = useMemo(() => getColumns(countries), [countries]); + const columns = useMemo(() => getColumns(countries, direction), [countries, direction]); const summaryRows = useMemo(() => { const summaryRow: SummaryRow = { diff --git a/website/demos/ContextMenu.tsx b/website/demos/ContextMenu.tsx index 7805cf3345..1791de0177 100644 --- a/website/demos/ContextMenu.tsx +++ b/website/demos/ContextMenu.tsx @@ -174,13 +174,15 @@ export default function ContextMenuDemo({ direction }: Props) { direction={direction} /> {createPortal( - - Delete Row - - Above - Below - - , +
+ + Delete Row + + Above + Below + + +
, document.body )} From 9c5e0a82cb41019c69ed46674b069ae9e0f10cb3 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 1 Feb 2022 14:00:59 -0600 Subject: [PATCH 34/51] Fix arrow direction in rtl --- src/DataGrid.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 577ff2576b..bf8be14988 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -790,9 +790,9 @@ function DataGrid( case 'ArrowDown': return { idx, rowIdx: rowIdx + 1 }; case 'ArrowLeft': - return { idx: idx - 1, rowIdx }; + return direction === 'rtl' ? { idx: idx + 1, rowIdx } : { idx: idx - 1, rowIdx }; case 'ArrowRight': - return { idx: idx + 1, rowIdx }; + return direction === 'rtl' ? { idx: idx - 1, rowIdx } : { idx: idx + 1, rowIdx }; case 'Tab': return { idx: idx + (shiftKey ? -1 : 1), rowIdx }; case 'Home': From 77049272849c6a95073e3f9b5377c201059eab5e Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 1 Feb 2022 14:07:29 -0600 Subject: [PATCH 35/51] Switch left/right keys for groups --- src/DataGrid.tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index bf8be14988..ee658b080b 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -266,6 +266,9 @@ function DataGrid( const clientHeight = gridHeight - headerRowHeight - summaryRowsCount * summaryRowHeight; const isSelectable = selectedRows != null && onSelectedRowsChange != null; const isHeaderRowSelected = selectedPosition.rowIdx === -1; + const isRtl = direction === 'rtl'; + const leftKey = isRtl ? 'ArrowRight' : 'ArrowLeft'; + const rightKey = isRtl ? 'ArrowLeft' : 'ArrowRight'; const allRowsSelected = useMemo((): boolean => { // no rows to select = explicitely unchecked @@ -554,9 +557,9 @@ function DataGrid( isGroupRow(row) && selectedPosition.idx === -1 && // Collapse the current group row if it is focused and is in expanded state - ((key === 'ArrowLeft' && row.isExpanded) || + ((key === leftKey && row.isExpanded) || // Expand the current group row if it is focused and is in collapsed state - (key === 'ArrowRight' && !row.isExpanded)) + (key === rightKey && !row.isExpanded)) ) { event.preventDefault(); // Prevents scrolling toggleGroup(row.id); @@ -737,7 +740,7 @@ function DataGrid( const isCellAtLeftBoundary = left < scrollLeft + totalFrozenColumnWidth; const isCellAtRightBoundary = right > clientWidth + scrollLeft; - const sign = direction === 'rtl' ? -1 : 1; + const sign = isRtl ? -1 : 1; if (isCellAtLeftBoundary) { current.scrollLeft = (left - totalFrozenColumnWidth) * sign; } else if (isCellAtRightBoundary) { @@ -764,13 +767,7 @@ function DataGrid( const isRowSelected = selectedCellIsWithinSelectionBounds && idx === -1; // If a group row is focused, and it is collapsed, move to the parent group row (if there is one). - if ( - key === 'ArrowLeft' && - isRowSelected && - isGroupRow(row) && - !row.isExpanded && - row.level !== 0 - ) { + if (key === leftKey && isRowSelected && isGroupRow(row) && !row.isExpanded && row.level !== 0) { let parentRowIdx = -1; for (let i = selectedPosition.rowIdx - 1; i >= 0; i--) { const parentRow = rows[i]; @@ -790,9 +787,9 @@ function DataGrid( case 'ArrowDown': return { idx, rowIdx: rowIdx + 1 }; case 'ArrowLeft': - return direction === 'rtl' ? { idx: idx + 1, rowIdx } : { idx: idx - 1, rowIdx }; + return isRtl ? { idx: idx + 1, rowIdx } : { idx: idx - 1, rowIdx }; case 'ArrowRight': - return direction === 'rtl' ? { idx: idx - 1, rowIdx } : { idx: idx + 1, rowIdx }; + return isRtl ? { idx: idx - 1, rowIdx } : { idx: idx + 1, rowIdx }; case 'Tab': return { idx: idx + (shiftKey ? -1 : 1), rowIdx }; case 'Home': From d1737627b3c7eed949825ac2ef45e11adf67513e Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 9 Feb 2022 10:31:28 -0600 Subject: [PATCH 36/51] Update README.md Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 437434a275..04d38232a2 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ - [Cell copy / pasting](https://adazzle.github.io/react-data-grid/#/all-features) - [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/#/all-features) - [Customizable Components](https://adazzle.github.io/react-data-grid/#/customizable-components) -- Right-to-left (RTL) text support. We recommend using Firefox as Chrome has a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1140374) with frozen columns, and the [`:dir` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) is not supported +- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1140374) with frozen columns, and the [`:dir` pseudo class](https://developer.mozilla.org/en-US/docs/Web/CSS/:dir) is not supported ## Links From f6e23b11702daf005fc22640105cdb76228ec9c4 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 9 Feb 2022 16:57:16 -0600 Subject: [PATCH 37/51] Use the direction prop --- website/demos/CustomizableComponents.tsx | 5 ++++- website/root.tsx | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/website/demos/CustomizableComponents.tsx b/website/demos/CustomizableComponents.tsx index 8d15d2b7dc..b22ed6cb92 100644 --- a/website/demos/CustomizableComponents.tsx +++ b/website/demos/CustomizableComponents.tsx @@ -2,6 +2,7 @@ import { useMemo, useState, forwardRef } from 'react'; import DataGrid, { SelectColumn, TextEditor } from '../../src'; import type { Column, CheckboxFormatterProps, SortColumn, SortIconProps } from '../../src'; +import type { Props } from './types'; interface Row { id: number; @@ -56,7 +57,7 @@ const columns: readonly Column[] = [ } ]; -export default function CustomizableComponents() { +export default function CustomizableComponents({ direction }: Props) { const [rows, setRows] = useState(createRows); const [sortColumns, setSortColumns] = useState([]); const [selectedRows, setSelectedRows] = useState>(() => new Set()); @@ -78,6 +79,7 @@ export default function CustomizableComponents() { return ( ); } diff --git a/website/root.tsx b/website/root.tsx index 482ebb9f7b..a9792c3b6a 100644 --- a/website/root.tsx +++ b/website/root.tsx @@ -109,7 +109,7 @@ function Root() { - + From 0d62d4ec19725daab9c3dd2b340e3df253398fac Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 9 Feb 2022 17:02:15 -0600 Subject: [PATCH 38/51] Add direction prop --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 04d38232a2..4db4aeecfa 100644 --- a/README.md +++ b/README.md @@ -233,6 +233,10 @@ function MyGrid() { ###### `rowClass?: Maybe<(row: R) => Maybe>` +##### `direction` + +This propertly sets the text direction of the grid. Supported values are `ltr` and `rtl`. + ###### `className?: string | undefined` ###### `style?: CSSProperties | undefined` From 00015838c6a83870e5edb093614576dc2a377cd2 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 9 Feb 2022 17:44:49 -0600 Subject: [PATCH 39/51] More details on RTL --- README.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4db4aeecfa..f518efb363 100644 --- a/README.md +++ b/README.md @@ -235,7 +235,12 @@ function MyGrid() { ##### `direction` -This propertly sets the text direction of the grid. Supported values are `ltr` and `rtl`. +This propertly sets the text direction of the grid. Supported values are `ltr` and `rtl`. Setting `direction` to `rtl` has the following affects + +- Columns flow from right to left +- Frozen columns are pinned on the right +- Column resize handle is shown on the left edge of the column +- Scrollbar is moved to the left ###### `className?: string | undefined` From 132b34ad46c7b1bdb7a92a18b43c6f40c789bf6a Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 9 Feb 2022 17:46:33 -0600 Subject: [PATCH 40/51] Update type --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f518efb363..1ab48d2c69 100644 --- a/README.md +++ b/README.md @@ -233,9 +233,9 @@ function MyGrid() { ###### `rowClass?: Maybe<(row: R) => Maybe>` -##### `direction` +##### `direction?: Maybe<'ltr' | 'rtl'>` -This propertly sets the text direction of the grid. Supported values are `ltr` and `rtl`. Setting `direction` to `rtl` has the following affects +This propertly sets the text direction of the grid. Setting `direction` to `rtl` has the following affects - Columns flow from right to left - Frozen columns are pinned on the right From b4dc8e8984fa6478e558fcef4389f9823d6be782 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Wed, 9 Feb 2022 21:32:12 -0600 Subject: [PATCH 41/51] Test direction prop --- test/column/direction.test.ts | 54 +++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 test/column/direction.test.ts diff --git a/test/column/direction.test.ts b/test/column/direction.test.ts new file mode 100644 index 0000000000..c1e90b0ab1 --- /dev/null +++ b/test/column/direction.test.ts @@ -0,0 +1,54 @@ +import userEvent from '@testing-library/user-event'; + +import type { Column } from '../../src'; +import { getGrid, getSelectedCell, setup } from '../utils'; + +interface Row { + id: number; + name: string; +} + +const columns: readonly Column[] = [ + { + key: 'id', + name: 'ID' + }, + { + key: 'name', + name: 'Name' + } +]; + +const rows: readonly Row[] = []; + +test('should use left to right direction by default', () => { + setup({ rows, columns }); + expect(getGrid()).toHaveAttribute('dir', 'ltr'); +}); + +test('should use left to right direction if direction prop is set to ltr', () => { + setup({ rows, columns, direction: 'ltr' }); + expect(getGrid()).toHaveAttribute('dir', 'ltr'); +}); + +test('should use right to left direction if direction prop is set to rtl', () => { + setup({ rows, columns, direction: 'rtl' }); + expect(getGrid()).toHaveAttribute('dir', 'rtl'); +}); + +test('should not change the left and right arrow behavior for right to left languages', () => { + setup({ rows, columns, direction: 'rtl' }); + userEvent.tab(); + // it seems like the dir prop is not supported in jsdom. + // in a real browser, name will be selected + expect(getSelectedCell()).toHaveTextContent('ID'); + userEvent.tab(); + expect(getSelectedCell()).toHaveTextContent('Name'); + // as we reverse the arrow direction for rtl, so in jsdom arrowright moves to the left + userEvent.type(getSelectedCell(), '{arrowright}'); + expect(getSelectedCell()).toHaveTextContent('ID'); + userEvent.type(getSelectedCell(), '{arrowleft}'); + expect(getSelectedCell()).toHaveTextContent('Name'); + userEvent.type(getSelectedCell(), '{arrowleft}'); + expect(getSelectedCell()).toHaveTextContent('Name'); +}); From 9a11792571b9ee0ea60ba84b9c6bfebf375cca69 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 06:11:44 -0600 Subject: [PATCH 42/51] Fix tests --- test/column/direction.test.ts | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/test/column/direction.test.ts b/test/column/direction.test.ts index c1e90b0ab1..059b2beab4 100644 --- a/test/column/direction.test.ts +++ b/test/column/direction.test.ts @@ -1,7 +1,7 @@ import userEvent from '@testing-library/user-event'; import type { Column } from '../../src'; -import { getGrid, getSelectedCell, setup } from '../utils'; +import { getGrid, setup, validateCellPosition } from '../utils'; interface Row { id: number; @@ -39,16 +39,15 @@ test('should use right to left direction if direction prop is set to rtl', () => test('should not change the left and right arrow behavior for right to left languages', () => { setup({ rows, columns, direction: 'rtl' }); userEvent.tab(); - // it seems like the dir prop is not supported in jsdom. - // in a real browser, name will be selected - expect(getSelectedCell()).toHaveTextContent('ID'); + validateCellPosition(0, 0); userEvent.tab(); - expect(getSelectedCell()).toHaveTextContent('Name'); - // as we reverse the arrow direction for rtl, so in jsdom arrowright moves to the left - userEvent.type(getSelectedCell(), '{arrowright}'); - expect(getSelectedCell()).toHaveTextContent('ID'); - userEvent.type(getSelectedCell(), '{arrowleft}'); - expect(getSelectedCell()).toHaveTextContent('Name'); - userEvent.type(getSelectedCell(), '{arrowleft}'); - expect(getSelectedCell()).toHaveTextContent('Name'); + validateCellPosition(1, 0); + // we reverse the arrow direction for rtl, but in JSDOM arrowright moves to the left + // it seems like the dir attribute is not supported + userEvent.keyboard('{arrowright}'); + validateCellPosition(0, 0); + userEvent.keyboard('{arrowleft}'); + validateCellPosition(1, 0); + userEvent.keyboard('{arrowleft}'); + validateCellPosition(1, 0); }); From 06270e392756b01c2c0d1099d190cc64ad6942c8 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 06:33:42 -0600 Subject: [PATCH 43/51] Update README.md Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1ab48d2c69..ed856f3cf9 100644 --- a/README.md +++ b/README.md @@ -235,7 +235,7 @@ function MyGrid() { ##### `direction?: Maybe<'ltr' | 'rtl'>` -This propertly sets the text direction of the grid. Setting `direction` to `rtl` has the following affects +This property sets the text direction of the grid, it defaults to `'ltr'` (left-to-right). Setting `direction` to `'rtl'` has the following effects: - Columns flow from right to left - Frozen columns are pinned on the right From 2feb4fe589a52baeedda06fe3f3a9cf032b2743c Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 06:55:35 -0600 Subject: [PATCH 44/51] Move the direction file outside --- test/{column => }/direction.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename test/{column => }/direction.test.ts (92%) diff --git a/test/column/direction.test.ts b/test/direction.test.ts similarity index 92% rename from test/column/direction.test.ts rename to test/direction.test.ts index 059b2beab4..cc1f4695d0 100644 --- a/test/column/direction.test.ts +++ b/test/direction.test.ts @@ -1,7 +1,7 @@ import userEvent from '@testing-library/user-event'; -import type { Column } from '../../src'; -import { getGrid, setup, validateCellPosition } from '../utils'; +import type { Column } from '../src'; +import { getGrid, setup, validateCellPosition } from './utils'; interface Row { id: number; From 1ab24334e35664c041ae017e501f93724be93556 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 08:21:00 -0600 Subject: [PATCH 45/51] Remove dir and use a new sign variable --- src/DataGrid.tsx | 1 + src/style/core.ts | 5 +---- src/style/row.ts | 10 ++++------ 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 75c82959bc..5d4a7b0482 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -1127,6 +1127,7 @@ function DataGrid( headerRowHeight + summaryRowsCount * summaryRowHeight }px`, + '--rdg-sign': isRtl ? -1 : 1, ...getLayoutCssVars() } as unknown as React.CSSProperties } diff --git a/src/style/core.ts b/src/style/core.ts index 371b916aa4..077d4478ee 100644 --- a/src/style/core.ts +++ b/src/style/core.ts @@ -36,10 +36,7 @@ const darkTheme = ` const root = css` ${lightTheme} --rdg-selection-color: #66afe9; - --rdg-frozen-cell-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3); - &:dir(rtl) { - --rdg-frozen-cell-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3); - } + --rdg-frozen-cell-box-shadow: calc(2px * var(--rdg-sign)) 0 5px -2px rgba(136, 136, 136, 0.3); --rdg-font-size: 14px; display: grid; diff --git a/src/style/row.ts b/src/style/row.ts index 76dadfb6f9..350b74eb33 100644 --- a/src/style/row.ts +++ b/src/style/row.ts @@ -23,21 +23,19 @@ export const row = css` export const rowClassname = `rdg-row ${row}`; const topBoxShadow = 'inset 0 2px 0 0 var(--rdg-selection-color)'; -const rightBoxShadow = 'inset -2px 0 0 0 var(--rdg-selection-color)'; +const rightBoxShadow = 'inset calc(-2px * var(--rdg-sign)) 0 0 0 var(--rdg-selection-color)'; const bottomBoxShadow = 'inset 0 -2px 0 0 var(--rdg-selection-color)'; -const leftBoxShadow = 'inset 2px 0 0 0 var(--rdg-selection-color)'; +const leftBoxShadow = 'inset calc(2px * var(--rdg-sign)) 0 0 0 var(--rdg-selection-color)'; const rowSelected = css` outline: none; > .${cell} { box-shadow: ${topBoxShadow}, ${bottomBoxShadow}; - &:first-child, - &:last-child:dir(rtl) { + &:first-child { box-shadow: ${topBoxShadow}, ${bottomBoxShadow}, ${leftBoxShadow}; } - &:last-child, - &:first-child:dir(rtl) { + &:last-child { box-shadow: ${topBoxShadow}, ${bottomBoxShadow}, ${rightBoxShadow}; } } From 3649f3cb21baa0a6a577f961d8206c588d4065ab Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 08:23:12 -0600 Subject: [PATCH 46/51] Add a comment --- src/DataGrid.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index 5d4a7b0482..51300089e5 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -608,6 +608,7 @@ function DataGrid( function handleScroll(event: React.UIEvent) { const { scrollTop, scrollLeft } = event.currentTarget; setScrollTop(scrollTop); + // scrollLeft is nagative when direction is rtl setScrollLeft(abs(scrollLeft)); onScroll?.(event); } From d188c85415003e172c283e92a260cdf70eb21caf Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 09:01:58 -0600 Subject: [PATCH 47/51] Move rtl tests to keyboardNavigation.test --- test/direction.test.ts | 53 -------------------------------- test/keyboardNavigation.test.tsx | 33 ++++++++++++++++++++ 2 files changed, 33 insertions(+), 53 deletions(-) delete mode 100644 test/direction.test.ts diff --git a/test/direction.test.ts b/test/direction.test.ts deleted file mode 100644 index cc1f4695d0..0000000000 --- a/test/direction.test.ts +++ /dev/null @@ -1,53 +0,0 @@ -import userEvent from '@testing-library/user-event'; - -import type { Column } from '../src'; -import { getGrid, setup, validateCellPosition } from './utils'; - -interface Row { - id: number; - name: string; -} - -const columns: readonly Column[] = [ - { - key: 'id', - name: 'ID' - }, - { - key: 'name', - name: 'Name' - } -]; - -const rows: readonly Row[] = []; - -test('should use left to right direction by default', () => { - setup({ rows, columns }); - expect(getGrid()).toHaveAttribute('dir', 'ltr'); -}); - -test('should use left to right direction if direction prop is set to ltr', () => { - setup({ rows, columns, direction: 'ltr' }); - expect(getGrid()).toHaveAttribute('dir', 'ltr'); -}); - -test('should use right to left direction if direction prop is set to rtl', () => { - setup({ rows, columns, direction: 'rtl' }); - expect(getGrid()).toHaveAttribute('dir', 'rtl'); -}); - -test('should not change the left and right arrow behavior for right to left languages', () => { - setup({ rows, columns, direction: 'rtl' }); - userEvent.tab(); - validateCellPosition(0, 0); - userEvent.tab(); - validateCellPosition(1, 0); - // we reverse the arrow direction for rtl, but in JSDOM arrowright moves to the left - // it seems like the dir attribute is not supported - userEvent.keyboard('{arrowright}'); - validateCellPosition(0, 0); - userEvent.keyboard('{arrowleft}'); - validateCellPosition(1, 0); - userEvent.keyboard('{arrowleft}'); - validateCellPosition(1, 0); -}); diff --git a/test/keyboardNavigation.test.tsx b/test/keyboardNavigation.test.tsx index fa7bdb27b4..d37320d7a1 100644 --- a/test/keyboardNavigation.test.tsx +++ b/test/keyboardNavigation.test.tsx @@ -377,3 +377,36 @@ test('reset selected cell when row is removed', () => { expect(getSelectedCell()).not.toBeInTheDocument(); }); + +test('should use left to right direction by default', () => { + setup({ rows, columns }); + expect(getGrid()).toHaveAttribute('dir', 'ltr'); +}); + +test('should use left to right direction if direction prop is set to ltr', () => { + setup({ rows, columns, direction: 'ltr' }); + expect(getGrid()).toHaveAttribute('dir', 'ltr'); +}); + +test('should use right to left direction if direction prop is set to rtl', () => { + setup({ rows, columns, direction: 'rtl' }); + expect(getGrid()).toHaveAttribute('dir', 'rtl'); +}); + +test('should not change the left and right arrow behavior for right to left languages', () => { + setup({ rows, columns, direction: 'rtl' }); + userEvent.tab(); + validateCellPosition(0, 0); + userEvent.tab(); + validateCellPosition(1, 0); + // we reverse the arrow direction for rtl, but in JSDOM arrowright moves to the left + // it seems like the dir attribute is not supported + userEvent.keyboard('{arrowright}'); + validateCellPosition(0, 0); + userEvent.keyboard('{arrowright}'); + validateCellPosition(0, 0); + userEvent.keyboard('{arrowleft}'); + validateCellPosition(1, 0); + userEvent.keyboard('{arrowleft}'); + validateCellPosition(2, 0); +}); From f39184122b274a92e02552365be425245338f96b Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 09:06:24 -0600 Subject: [PATCH 48/51] Revert "Move rtl tests to keyboardNavigation.test" This reverts commit d188c85415003e172c283e92a260cdf70eb21caf. --- test/direction.test.ts | 53 ++++++++++++++++++++++++++++++++ test/keyboardNavigation.test.tsx | 33 -------------------- 2 files changed, 53 insertions(+), 33 deletions(-) create mode 100644 test/direction.test.ts diff --git a/test/direction.test.ts b/test/direction.test.ts new file mode 100644 index 0000000000..cc1f4695d0 --- /dev/null +++ b/test/direction.test.ts @@ -0,0 +1,53 @@ +import userEvent from '@testing-library/user-event'; + +import type { Column } from '../src'; +import { getGrid, setup, validateCellPosition } from './utils'; + +interface Row { + id: number; + name: string; +} + +const columns: readonly Column[] = [ + { + key: 'id', + name: 'ID' + }, + { + key: 'name', + name: 'Name' + } +]; + +const rows: readonly Row[] = []; + +test('should use left to right direction by default', () => { + setup({ rows, columns }); + expect(getGrid()).toHaveAttribute('dir', 'ltr'); +}); + +test('should use left to right direction if direction prop is set to ltr', () => { + setup({ rows, columns, direction: 'ltr' }); + expect(getGrid()).toHaveAttribute('dir', 'ltr'); +}); + +test('should use right to left direction if direction prop is set to rtl', () => { + setup({ rows, columns, direction: 'rtl' }); + expect(getGrid()).toHaveAttribute('dir', 'rtl'); +}); + +test('should not change the left and right arrow behavior for right to left languages', () => { + setup({ rows, columns, direction: 'rtl' }); + userEvent.tab(); + validateCellPosition(0, 0); + userEvent.tab(); + validateCellPosition(1, 0); + // we reverse the arrow direction for rtl, but in JSDOM arrowright moves to the left + // it seems like the dir attribute is not supported + userEvent.keyboard('{arrowright}'); + validateCellPosition(0, 0); + userEvent.keyboard('{arrowleft}'); + validateCellPosition(1, 0); + userEvent.keyboard('{arrowleft}'); + validateCellPosition(1, 0); +}); diff --git a/test/keyboardNavigation.test.tsx b/test/keyboardNavigation.test.tsx index d37320d7a1..fa7bdb27b4 100644 --- a/test/keyboardNavigation.test.tsx +++ b/test/keyboardNavigation.test.tsx @@ -377,36 +377,3 @@ test('reset selected cell when row is removed', () => { expect(getSelectedCell()).not.toBeInTheDocument(); }); - -test('should use left to right direction by default', () => { - setup({ rows, columns }); - expect(getGrid()).toHaveAttribute('dir', 'ltr'); -}); - -test('should use left to right direction if direction prop is set to ltr', () => { - setup({ rows, columns, direction: 'ltr' }); - expect(getGrid()).toHaveAttribute('dir', 'ltr'); -}); - -test('should use right to left direction if direction prop is set to rtl', () => { - setup({ rows, columns, direction: 'rtl' }); - expect(getGrid()).toHaveAttribute('dir', 'rtl'); -}); - -test('should not change the left and right arrow behavior for right to left languages', () => { - setup({ rows, columns, direction: 'rtl' }); - userEvent.tab(); - validateCellPosition(0, 0); - userEvent.tab(); - validateCellPosition(1, 0); - // we reverse the arrow direction for rtl, but in JSDOM arrowright moves to the left - // it seems like the dir attribute is not supported - userEvent.keyboard('{arrowright}'); - validateCellPosition(0, 0); - userEvent.keyboard('{arrowright}'); - validateCellPosition(0, 0); - userEvent.keyboard('{arrowleft}'); - validateCellPosition(1, 0); - userEvent.keyboard('{arrowleft}'); - validateCellPosition(2, 0); -}); From 07c52639ba3cd7be81701b5cb97c0e4376dceb42 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 09:07:54 -0600 Subject: [PATCH 49/51] Only move the navigation tests to keyboardNavigation.test file --- test/direction.test.ts | 20 +------------------- test/keyboardNavigation.test.tsx | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/test/direction.test.ts b/test/direction.test.ts index cc1f4695d0..8e2dc8d12e 100644 --- a/test/direction.test.ts +++ b/test/direction.test.ts @@ -1,7 +1,5 @@ -import userEvent from '@testing-library/user-event'; - import type { Column } from '../src'; -import { getGrid, setup, validateCellPosition } from './utils'; +import { getGrid, setup } from './utils'; interface Row { id: number; @@ -35,19 +33,3 @@ test('should use right to left direction if direction prop is set to rtl', () => setup({ rows, columns, direction: 'rtl' }); expect(getGrid()).toHaveAttribute('dir', 'rtl'); }); - -test('should not change the left and right arrow behavior for right to left languages', () => { - setup({ rows, columns, direction: 'rtl' }); - userEvent.tab(); - validateCellPosition(0, 0); - userEvent.tab(); - validateCellPosition(1, 0); - // we reverse the arrow direction for rtl, but in JSDOM arrowright moves to the left - // it seems like the dir attribute is not supported - userEvent.keyboard('{arrowright}'); - validateCellPosition(0, 0); - userEvent.keyboard('{arrowleft}'); - validateCellPosition(1, 0); - userEvent.keyboard('{arrowleft}'); - validateCellPosition(1, 0); -}); diff --git a/test/keyboardNavigation.test.tsx b/test/keyboardNavigation.test.tsx index fa7bdb27b4..628ec68347 100644 --- a/test/keyboardNavigation.test.tsx +++ b/test/keyboardNavigation.test.tsx @@ -377,3 +377,21 @@ test('reset selected cell when row is removed', () => { expect(getSelectedCell()).not.toBeInTheDocument(); }); + +test('should not change the left and right arrow behavior for right to left languages', () => { + setup({ rows, columns, direction: 'rtl' }); + userEvent.tab(); + validateCellPosition(0, 0); + userEvent.tab(); + validateCellPosition(1, 0); + // we reverse the arrow direction for rtl, but in JSDOM arrowright moves to the left + // it seems like the dir attribute is not supported + userEvent.keyboard('{arrowright}'); + validateCellPosition(0, 0); + userEvent.keyboard('{arrowright}'); + validateCellPosition(0, 0); + userEvent.keyboard('{arrowleft}'); + validateCellPosition(1, 0); + userEvent.keyboard('{arrowleft}'); + validateCellPosition(2, 0); +}); From 4929122b5fd4df17c67cefc4881bfb5a3dd2dffb Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 09:46:11 -0600 Subject: [PATCH 50/51] Remove confusing comment --- test/keyboardNavigation.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/test/keyboardNavigation.test.tsx b/test/keyboardNavigation.test.tsx index 628ec68347..c694b6059f 100644 --- a/test/keyboardNavigation.test.tsx +++ b/test/keyboardNavigation.test.tsx @@ -384,8 +384,6 @@ test('should not change the left and right arrow behavior for right to left lang validateCellPosition(0, 0); userEvent.tab(); validateCellPosition(1, 0); - // we reverse the arrow direction for rtl, but in JSDOM arrowright moves to the left - // it seems like the dir attribute is not supported userEvent.keyboard('{arrowright}'); validateCellPosition(0, 0); userEvent.keyboard('{arrowright}'); From 5600176ea7785906d2f5a74031fa2f48751bf58a Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 10 Feb 2022 09:56:24 -0600 Subject: [PATCH 51/51] Key is not required --- website/demos/AllFeatures.tsx | 1 - website/demos/CellNavigation.tsx | 1 - website/demos/ColumnSpanning.tsx | 1 - website/demos/ColumnsReordering.tsx | 1 - website/demos/CommonFeatures.tsx | 1 - website/demos/ContextMenu.tsx | 1 - website/demos/CustomizableComponents.tsx | 1 - website/demos/Grouping.tsx | 1 - website/demos/HeaderFilters.tsx | 1 - website/demos/InfiniteScrolling.tsx | 1 - website/demos/MasterDetail.tsx | 1 - website/demos/MillionCells.tsx | 1 - website/demos/NoRows.tsx | 1 - website/demos/Resizable.tsx | 1 - website/demos/RowsReordering.tsx | 1 - website/demos/ScrollToRow.tsx | 2 +- website/demos/TreeView.tsx | 8 +------- website/demos/VariableRowHeight.tsx | 1 - 18 files changed, 2 insertions(+), 24 deletions(-) diff --git a/website/demos/AllFeatures.tsx b/website/demos/AllFeatures.tsx index 631dd6d9f3..4ecc6f5f29 100644 --- a/website/demos/AllFeatures.tsx +++ b/website/demos/AllFeatures.tsx @@ -200,7 +200,6 @@ export default function AllFeatures({ direction }: Props) { return (
}} diff --git a/website/demos/Resizable.tsx b/website/demos/Resizable.tsx index 0931a86554..2f40487351 100644 --- a/website/demos/Resizable.tsx +++ b/website/demos/Resizable.tsx @@ -27,7 +27,6 @@ for (let i = 0; i < 50; i++) { export default function ResizableGrid({ direction }: Props) { return ( - + ); } diff --git a/website/demos/TreeView.tsx b/website/demos/TreeView.tsx index e75c63741d..6bc8f6847a 100644 --- a/website/demos/TreeView.tsx +++ b/website/demos/TreeView.tsx @@ -176,13 +176,7 @@ export default function TreeView({ direction }: Props) { onChange={() => setAllowDelete(!allowDelete)} /> - + ); } diff --git a/website/demos/VariableRowHeight.tsx b/website/demos/VariableRowHeight.tsx index fd9a1511cf..f6bdb2cb35 100644 --- a/website/demos/VariableRowHeight.tsx +++ b/website/demos/VariableRowHeight.tsx @@ -35,7 +35,6 @@ export default function VariableRowHeight({ direction }: Props) { return (