chore: Add RTL support for the Table component. (#2155)

pages/table-fragments/sticky-columns-custom.page.tsx

@@ -90,9 +90,9 @@ function TableCell({
     stickyColumns,
     getClassName: props => ({
       [styles['sticky-cell']]: !!props,
-      [styles['sticky-cell-last-left']]: !!props?.lastLeft,
-      [styles['sticky-cell-last-right']]: !!props?.lastRight,
-      [styles['sticky-cell-pad-left']]: !!props?.padLeft,
+      [styles['sticky-cell-last-left']]: !!props?.lastInsetInlineStart,
+      [styles['sticky-cell-last-right']]: !!props?.lastInsetInlineEnd,
+      [styles['sticky-cell-pad-left']]: !!props?.padInlineStart,
     }),
   });
   return (

pages/table/resizable-coloumns-flex-grow.page.tsx

@@ -30,7 +30,7 @@ export default function () {
           display: 'flex',
           alignItems: 'stretch',
           flexWrap: 'nowrap',
-          width: 'calc(100% - 32px)',
+          inlineSize: 'calc(100% - 32px)',
           margin: '16px',
         }}
       >

src/internal/direction.ts

@@ -42,3 +42,14 @@ export function getLogicalBoundingClientRect(element: HTMLElement | SVGElement)
     insetInlineEnd,
   };
 }
+
+/**
+ * The pageX position needs to be converted so it is relative to the right of
+ * the document in order for computations to yield the same result in both
+ * element directions.
+ */
+export function getLogicalPageX(event: MouseEvent) {
+  return event.target instanceof HTMLElement && isRtl(event.target)
+    ? document.documentElement.clientWidth - event.pageX
+    : event.pageX;
+}

src/internal/utils/handle-key.ts

@@ -3,7 +3,11 @@
 import { KeyCode } from '../keycode';
 import { isRtl } from '../direction';
 
-interface EventLike {
+export function isEventLike(event: any): event is EventLike {
+  return event.currentTarget instanceof HTMLElement;
+}
+
+export interface EventLike {
   keyCode: number;
   currentTarget: HTMLElement;
 }
@@ -15,6 +19,7 @@ export default function handleKey(
     onBlockEnd,
     onBlockStart,
     onEnd,
+    onEscape,
     onHome,
     onInlineEnd,
     onInlineStart,
@@ -25,6 +30,7 @@ export default function handleKey(
     onBlockEnd?: () => void;
     onBlockStart?: () => void;
     onEnd?: () => void;
+    onEscape?: () => void;
     onHome?: () => void;
     onInlineEnd?: () => void;
     onInlineStart?: () => void;
@@ -43,6 +49,9 @@ export default function handleKey(
     case KeyCode.space:
       onActivate?.();
       break;
+    case KeyCode.escape:
+      onEscape?.();
+      break;
     case KeyCode.home:
       onHome?.();
       break;

src/table/__tests__/empty-state.test.tsx

@@ -83,23 +83,23 @@ function mockResizeObserver(contentBoxWidth: number) {
 test('should apply width to the empty state container', () => {
   const fireCallbacks = mockResizeObserver(600);
   const { wrapper } = renderTable(<Table columnDefinitions={defaultColumns} items={[]} />);
-  expect(findStickyParent(wrapper).style.width).toEqual('600px');
+  expect(findStickyParent(wrapper).style.inlineSize).toEqual('600px');
 
   fireCallbacks({ contentBoxWidth: 700 } as unknown as ContainerQueryEntry);
-  expect(findStickyParent(wrapper).style.width).toEqual('700px');
+  expect(findStickyParent(wrapper).style.inlineSize).toEqual('700px');
 });
 
 test('should floor the value to prevent unwanted horizontal scrolling', () => {
   mockResizeObserver(123.4);
   const { wrapper } = renderTable(<Table columnDefinitions={defaultColumns} items={[]} />);
-  expect(findStickyParent(wrapper).style.width).toEqual('123px');
+  expect(findStickyParent(wrapper).style.inlineSize).toEqual('123px');
 });
 
 test('should not apply width when browser does not support position sticky', () => {
   mockResizeObserver(600);
   jest.mocked(supportsStickyPosition).mockReturnValue(false);
   const { wrapper } = renderTable(<Table columnDefinitions={defaultColumns} items={[]} />);
-  expect(findStickyParent(wrapper).style.width).toEqual('');
+  expect(findStickyParent(wrapper).style.inlineSize).toEqual('');
 });
 
 test('should set colspan attribute matching to the total number of columns', () => {

src/table/__tests__/resizable-columns.test.tsx

@@ -465,3 +465,39 @@ test('should set last column width to "auto" when container width exceeds total
   fireCallbacks({ contentBoxWidth: totalColumnsWidth + 1 } as unknown as ContainerQueryEntry);
   expect(wrapper.findColumnHeaders().map(w => w.getElement().style.width)).toEqual(['150px', 'auto']);
 });
+
+describe('resize in rtl', () => {
+  beforeEach(() => {
+    document.body.style.direction = 'rtl';
+  });
+
+  test('should resize column to grow', () => {
+    const { wrapper } = renderTable(<Table {...defaultProps} />);
+    expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '150px' });
+
+    fireMousedown(wrapper.findColumnResizer(1)!);
+    fireMouseMove(-200);
+    fireMouseup(-200);
+    expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '200px' });
+  });
+
+  test('should resize column to shrink', () => {
+    const { wrapper } = renderTable(<Table {...defaultProps} />);
+    expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '150px' });
+
+    fireMousedown(wrapper.findColumnResizer(1)!);
+    fireMouseMove(-130);
+    fireMouseup(-130);
+    expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '130px' });
+  });
+
+  test('should not allow to resize column below the min width', () => {
+    const { wrapper } = renderTable(<Table {...defaultProps} />);
+    expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '150px' });
+
+    fireMousedown(wrapper.findColumnResizer(1)!);
+    fireMouseMove(-10);
+    fireMouseup(-10);
+    expect(wrapper.findColumnHeaders()[0].getElement()).toHaveStyle({ width: '80px' });
+  });
+});

src/table/body-cell/styles.scss

@@ -98,7 +98,7 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       */
     &:first-child.has-striped-rows {
       @include cell-offset(awsui.$space-xxs);
-      &-sticky-cell-pad-left {
+      &-sticky-cell-pad-inline-start {
         @include cell-offset(awsui.$space-table-horizontal);
       }
     }
@@ -184,19 +184,34 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       &:last-child {
         box-shadow: 4px 0 0 0 awsui.$color-background-container-content;
         clip-path: inset(0 0 0 0);
-        &.sticky-cell-last-right {
+        &.sticky-cell-last-inline-end {
           box-shadow: awsui.$shadow-sticky-column-last, 8px 0 0 0 awsui.$color-background-container-content;
           clip-path: inset(0 0 0 -24px);
+
+          @include styles.with-direction('rtl') {
+            box-shadow: awsui.$shadow-sticky-column-first;
+            clip-path: inset(0 -24px 0 0);
+          }
         }
       }
     }
-    &-last-left {
+    &-last-inline-start {
       box-shadow: awsui.$shadow-sticky-column-first;
       clip-path: inset(0px -24px 0px 0px);
+
+      @include styles.with-direction('rtl') {
+        box-shadow: awsui.$shadow-sticky-column-last;
+        clip-path: inset(0 0 0 -24px);
+      }
     }
-    &-last-right {
+    &-last-inline-end {
       box-shadow: awsui.$shadow-sticky-column-last;
       clip-path: inset(0 0 0 -24px);
+
+      @include styles.with-direction('rtl') {
+        box-shadow: awsui.$shadow-sticky-column-first;
+        clip-path: inset(0 -24px 0 0);
+      }
     }
     @include styles.with-motion {
       transition-property: padding;

src/table/expandable-rows/styles.scss

@@ -12,8 +12,16 @@
 .expand-toggle-icon {
   transform: rotate(-90deg);
 
+  @include styles.with-direction('rtl') {
+    transform: rotate(90deg);
+  }
+
   &-expanded {
     transform: rotate(0deg);
+
+    @include styles.with-direction('rtl') {
+      transform: rotate(0deg);
+    }
   }
 }
 

src/table/header-cell/styles.scss

@@ -66,17 +66,28 @@
     &-pad-left:not(.has-selection) {
       padding-inline-start: awsui.$space-table-horizontal;
     }
-    &-last-left {
+    &-last-inline-start {
       box-shadow: awsui.$shadow-sticky-column-first;
       clip-path: inset(0px -24px 0px 0px);
       & > .resize-divider {
         display: none;
       }
+
+      @include styles.with-direction('rtl') {
+        box-shadow: awsui.$shadow-sticky-column-last;
+        clip-path: inset(0 0 0 -24px);
+      }
     }
-    &-last-right {
+    &-last-inline-end {
       box-shadow: awsui.$shadow-sticky-column-last;
       clip-path: inset(0 0 0 -24px);
+
+      @include styles.with-direction('rtl') {
+        box-shadow: awsui.$shadow-sticky-column-first;
+        clip-path: inset(0 -24px 0 0);
+      }
     }
+
     @include styles.with-motion {
       transition-property: padding;
       transition-duration: awsui.$motion-duration-transition-show-quick;
@@ -167,7 +178,7 @@ settings icon in the pagination slot.
 .header-cell.is-visual-refresh {
   &:first-child:not(.has-striped-rows) {
     @include cell-offset(awsui.$space-xxxs);
-    &.sticky-cell-pad-left {
+    &.sticky-cell-pad-inline-start {
       @include cell-offset(awsui.$space-table-horizontal);
     }
   }

src/table/internal.tsx

@@ -50,6 +50,7 @@ import { NoDataCell } from './no-data-cell';
 import { usePerformanceMarks } from '../internal/hooks/use-performance-marks';
 import { getContentHeaderClassName } from '../internal/utils/content-header-utils';
 import { useExpandableTableProps } from './expandable-rows/expandable-rows-utils';
+import { getLogicalBoundingClientRect } from '../internal/direction';
 
 const GRID_NAVIGATION_PAGE_SIZE = 10;
 const SELECTION_COLUMN_WIDTH = 54;
@@ -309,8 +310,9 @@ const InternalTable = React.forwardRef(
     });
     const toolsHeaderWrapper = useRef<HTMLDivElement>(null);
     // If is mobile, we take into consideration the AppLayout's mobile bar and we subtract the tools wrapper height so only the table header is sticky
-    const toolsHeaderHeight =
-      (toolsHeaderWrapper?.current as HTMLDivElement | null)?.getBoundingClientRect().height ?? 0;
+    const toolsHeaderHeight = toolsHeaderWrapper?.current
+      ? getLogicalBoundingClientRect(toolsHeaderWrapper.current).blockSize
+      : 0;
 
     const colIndexOffset = selectionType ? 1 : 0;
     const totalColumnsCount = visibleColumnDefinitions.length + colIndexOffset;

src/table/no-data-cell.tsx

@@ -29,12 +29,12 @@ export function NoDataCell({
 }: NoDataCellProps) {
   const cellContentRef = useRef<HTMLDivElement>(null);
 
-  useResizeObserver(containerRef, ({ contentBoxWidth: containerWidth }) => {
+  useResizeObserver(containerRef, ({ contentBoxWidth: containerInlineSize }) => {
     if (tableRef.current && cellContentRef.current && supportsStickyPosition()) {
-      const tablePaddingLeft = parseFloat(getComputedStyle(tableRef.current).paddingLeft) || 0;
-      const tablePaddingRight = parseFloat(getComputedStyle(tableRef.current).paddingRight) || 0;
-      const contentWidth = containerWidth + tablePaddingLeft + tablePaddingRight;
-      cellContentRef.current.style.width = Math.floor(contentWidth) + 'px';
+      const tablePaddingInlineStart = parseFloat(getComputedStyle(tableRef.current).paddingInlineStart) || 0;
+      const tablePaddingInlineEnd = parseFloat(getComputedStyle(tableRef.current).paddingInlineEnd) || 0;
+      const inlineSize = containerInlineSize + tablePaddingInlineStart + tablePaddingInlineEnd;
+      cellContentRef.current.style.inlineSize = Math.floor(inlineSize) + 'px';
     }
   });