Feature: RTL (adazzle#2803)

* Use css logic properties

* Use :dir pseudo class to set row borders

* Fix virtualization

* Use block/inline size instead of height/ width

* use start/end with text align

* Adjust context menu styles

* Fix expand icon styles

* Use padding-block/inline

* Fix virtualization and column resize

* Add Rtl example

* Revert rename

* scrollTop is positive

* Fix margin

* Rename css variables for clarity

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update src/DataGrid.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Update website/Nav.tsx

Co-authored-by: Nicolas Stepien <[email protected]>

* Add missing content menu style, minor cleanup

* Add global Right to left checkbox

* Add key to create root component when direction is changed

* Update readme

* Fix styling

* Fix frozen cell style

* Fix box shadow

* Add dir prop

* Add direction prop

* Update examples to use the direction prop

* Update README.md

Co-authored-by: Nicolas Stepien <[email protected]>

* Remove key

* Fix resizing

* Add key to recreate grid when direction is changed

* Fix direction in portals

* Fix arrow direction in rtl

* Switch left/right keys for groups

* Update README.md

Co-authored-by: Nicolas Stepien <[email protected]>

* Use the direction prop

* Add direction prop

* More details on RTL

* Update type

* Test direction prop

* Fix tests

* Update README.md

Co-authored-by: Nicolas Stepien <[email protected]>

* Move the direction file outside

* Remove dir and use a new sign variable

* Add a comment

* Move rtl tests to keyboardNavigation.test

* Revert "Move rtl tests to keyboardNavigation.test"

This reverts commit d188c85.

* Only move the navigation tests to keyboardNavigation.test file

* Remove confusing comment

* Key is not required

Co-authored-by: Nicolas Stepien <[email protected]>

Author: amanmahajan7

README.md

@@ -41,6 +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) 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
 
@@ -232,6 +233,15 @@ function MyGrid() {
 
 ###### `rowClass?: Maybe<(row: R) => Maybe<string>>`
 
+##### `direction?: Maybe<'ltr' | 'rtl'>`
+
+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
+- Column resize handle is shown on the left edge of the column
+- Scrollbar is moved to the left
+
 ###### `className?: string | undefined`
 
 ###### `style?: CSSProperties | undefined`

src/DataGrid.tsx

@@ -39,6 +39,7 @@ import {
   getColSpan,
   max,
   sign,
+  abs,
   getSelectedCellColSpan
 } from './utils';
 
@@ -54,7 +55,8 @@ import type {
   SortColumn,
   RowHeightArgs,
   Maybe,
-  Components
+  Components,
+  Direction
 } from './types';
 
 export interface SelectCellState extends Position {
@@ -169,6 +171,7 @@ export interface DataGridProps<R, SR = unknown, K extends Key = Key> extends Sha
    */
   components?: Maybe<Components<R, SR>>;
   rowClass?: Maybe<(row: R) => Maybe<string>>;
+  direction?: Maybe<Direction>;
   'data-testid'?: Maybe<string>;
 }
 
@@ -216,6 +219,7 @@ function DataGrid<R, SR, K extends Key>(
     className,
     style,
     rowClass,
+    direction,
     // ARIA
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
@@ -238,6 +242,7 @@ function DataGrid<R, SR, K extends Key>(
   const noRowsFallback = components?.noRowsFallback ?? defaultComponents?.noRowsFallback;
   const cellNavigationMode = rawCellNavigationMode ?? 'NONE';
   enableVirtualization ??= true;
+  direction ??= 'ltr';
 
   /**
    * states
@@ -270,6 +275,9 @@ function DataGrid<R, SR, K extends Key>(
   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 defaultGridComponents = useMemo(
     () => ({
@@ -566,9 +574,9 @@ function DataGrid<R, SR, K extends Key>(
         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);
@@ -600,7 +608,8 @@ function DataGrid<R, SR, K extends Key>(
   function handleScroll(event: React.UIEvent<HTMLDivElement>) {
     const { scrollTop, scrollLeft } = event.currentTarget;
     setScrollTop(scrollTop);
-    setScrollLeft(scrollLeft);
+    // scrollLeft is nagative when direction is rtl
+    setScrollLeft(abs(scrollLeft));
     onScroll?.(event);
   }
 
@@ -749,10 +758,11 @@ function DataGrid<R, SR, K extends Key>(
 
       const isCellAtLeftBoundary = left < scrollLeft + totalFrozenColumnWidth;
       const isCellAtRightBoundary = right > clientWidth + scrollLeft;
+      const sign = isRtl ? -1 : 1;
       if (isCellAtLeftBoundary) {
-        current.scrollLeft = left - totalFrozenColumnWidth;
+        current.scrollLeft = (left - totalFrozenColumnWidth) * sign;
       } else if (isCellAtRightBoundary) {
-        current.scrollLeft = right - clientWidth;
+        current.scrollLeft = (right - clientWidth) * sign;
       }
     }
 
@@ -775,13 +785,7 @@ function DataGrid<R, SR, K extends Key>(
     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];
@@ -801,9 +805,9 @@ function DataGrid<R, SR, K extends Key>(
       case 'ArrowDown':
         return { idx, rowIdx: rowIdx + 1 };
       case 'ArrowLeft':
-        return { idx: idx - 1, rowIdx };
+        return isRtl ? { idx: idx + 1, rowIdx } : { idx: idx - 1, rowIdx };
       case 'ArrowRight':
-        return { 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':
@@ -1117,16 +1121,18 @@ function DataGrid<R, SR, K extends Key>(
           ...style,
           gridTemplateRows: templateRows,
           '--rdg-header-row-height': `${headerRowHeight}px`,
-          '--rdg-row-width': `${totalColumnWidth}px`,
+          '--rdg-grid-inline-size': `${totalColumnWidth}px`,
           '--rdg-summary-row-height': `${summaryRowHeight}px`,
-          '--rdg-grid-height': `${
+          '--rdg-grid-block-size': `${
             max(totalRowHeight, clientHeight) +
             headerRowHeight +
             summaryRowsCount * summaryRowHeight
           }px`,
+          '--rdg-sign': isRtl ? -1 : 1,
           ...getLayoutCssVars()
         } as unknown as React.CSSProperties
       }
+      dir={direction}
       ref={gridRef}
       onScroll={handleScroll}
       onKeyDown={handleKeyDown}
@@ -1156,6 +1162,7 @@ function DataGrid<R, SR, K extends Key>(
           selectedCellIdx={isHeaderRowSelected ? selectedPosition.idx : undefined}
           selectCell={selectHeaderCellLatest}
           shouldFocusGrid={!selectedCellIsWithinSelectionBounds}
+          direction={direction}
         />
         {rows.length === 0 && noRowsFallback ? (
           noRowsFallback

src/DragHandle.tsx

@@ -6,15 +6,15 @@ import type { DataGridProps, SelectCellState } from './DataGrid';
 const cellDragHandle = css`
   cursor: move;
   position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 8px;
-  height: 8px;
+  inset-inline-end: 0;
+  inset-block-end: 0;
+  inline-size: 8px;
+  block-size: 8px;
   background-color: var(--rdg-selection-color);
 
   &:hover {
-    width: 16px;
-    height: 16px;
+    inline-size: 16px;
+    block-size: 16px;
     border: 2px solid var(--rdg-selection-color);
     background-color: var(--rdg-background-color);
   }

src/GroupRow.tsx

@@ -33,7 +33,7 @@ const groupRow = css`
   }
 
   > .${cell}:not(:last-child):not(.${cellFrozenLast}) {
-    border-right: none;
+    border-inline-end: none;
   }
 `;
 

src/HeaderCell.tsx

@@ -13,10 +13,10 @@ const cellResizable = css`
     content: '';
     cursor: col-resize;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    width: 10px;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    inset-block-end: 0;
+    inline-size: 10px;
   }
 `;
 
@@ -31,6 +31,7 @@ type SharedHeaderRowProps<R, SR> = Pick<
   | 'selectCell'
   | 'onColumnResize'
   | 'shouldFocusGrid'
+  | 'direction'
 >;
 
 export interface HeaderCellProps<R, SR> extends SharedHeaderRowProps<R, SR> {
@@ -49,8 +50,10 @@ export default function HeaderCell<R, SR>({
   sortColumns,
   onSortColumnsChange,
   selectCell,
-  shouldFocusGrid
+  shouldFocusGrid,
+  direction
 }: HeaderCellProps<R, SR>) {
+  const isRtl = direction === 'rtl';
   const { ref, tabIndex, onFocus } = useRovingCellRef(isCellSelected);
   const sortIndex = sortColumns?.findIndex((sort) => sort.columnKey === column.key);
   const sortColumn =
@@ -72,16 +75,17 @@ export default function HeaderCell<R, SR>({
     }
 
     const { currentTarget, pointerId } = event;
-    const { right } = currentTarget.getBoundingClientRect();
-    const offset = right - event.clientX;
+    const { right, left } = currentTarget.getBoundingClientRect();
+    const offset = isRtl ? event.clientX - left : right - event.clientX;
 
     if (offset > 11) {
       // +1px to account for the border size
       return;
     }
 
     function onPointerMove(event: PointerEvent) {
-      const width = event.clientX + offset - currentTarget.getBoundingClientRect().left;
+      const { right, left } = currentTarget.getBoundingClientRect();
+      const width = isRtl ? right + offset - event.clientX : event.clientX + offset - left;
       if (width > 0) {
         onColumnResize(column, width);
       }
@@ -139,8 +143,8 @@ export default function HeaderCell<R, SR>({
   }
 
   function onDoubleClick(event: React.MouseEvent<HTMLDivElement>) {
-    const { right } = event.currentTarget.getBoundingClientRect();
-    const offset = right - event.clientX;
+    const { right, left } = event.currentTarget.getBoundingClientRect();
+    const offset = isRtl ? event.clientX - left : right - event.clientX;
 
     if (offset > 11) {
       // +1px to account for the border size

src/HeaderRow.tsx

@@ -3,7 +3,7 @@ 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';
@@ -22,6 +22,7 @@ export interface HeaderRowProps<R, SR, K extends React.Key> extends SharedDataGr
   lastFrozenColumnIndex: number;
   selectedCellIdx: number | undefined;
   shouldFocusGrid: boolean;
+  direction: Direction;
 }
 
 const headerRow = css`
@@ -34,7 +35,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} {
@@ -54,7 +55,8 @@ function HeaderRow<R, SR, K extends React.Key>({
   lastFrozenColumnIndex,
   selectedCellIdx,
   selectCell,
-  shouldFocusGrid
+  shouldFocusGrid,
+  direction
 }: HeaderRowProps<R, SR, K>) {
   const cells = [];
   for (let index = 0; index < columns.length; index++) {
@@ -77,6 +79,7 @@ function HeaderRow<R, SR, K extends React.Key>({
         sortColumns={sortColumns}
         selectCell={selectCell}
         shouldFocusGrid={shouldFocusGrid && index === 0}
+        direction={direction}
       />
     );
   }

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<R, SR>

src/SummaryRow.tsx

@@ -33,7 +33,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);
   }
 `;
 

src/editors/TextEditor.tsx

@@ -5,9 +5,10 @@ const textEditor = css`
   appearance: none;
 
   box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  padding: 0px 6px 0 6px;
+  inline-size: 100%;
+  block-size: 100%;
+  padding-block: 0;
+  padding-inline: 6px;
   border: 2px solid #ccc;
   vertical-align: top;
   color: var(--rdg-color);

src/formatters/CheckboxFormatter.tsx

@@ -11,7 +11,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}`;
@@ -24,8 +24,8 @@ const checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`;
 
 const checkbox = css`
   content: '';
-  width: 20px;
-  height: 20px;
+  inline-size: 20px;
+  block-size: 20px;
   border: 2px solid var(--rdg-border-color);
   background-color: var(--rdg-background-color);
   .${checkboxInput}:checked + & {

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;

src/style/cell.ts

@@ -3,9 +3,10 @@ import { css } from '@linaria/core';
 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);
+  padding-block: 0;
+  padding-inline: 8px;
+  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;