fix(AnalyticalTable): fix keyboard navigation for RTL text direction (#4990)

Author: Lukas742

packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts

@@ -61,7 +61,7 @@ const navigateFromActiveSubCompItem = (currentlyFocusedCell, e) => {
   setFocus(currentlyFocusedCell, recursiveSubComponentElementSearch(e.target));
 };
 
-const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties, data, columns } }) => {
+const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties, data, columns, state } }) => {
   const { showOverlay, tableRef } = webComponentsReactProperties;
   const currentlyFocusedCell = useRef<HTMLDivElement>(null);
   const noData = data.length === 0;
@@ -143,6 +143,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
 
   const onKeyboardNavigation = useCallback(
     (e) => {
+      const { isRtl } = state;
       const isActiveItemInSubComponent = e.target.dataset.subcomponentActiveElement;
       // check if target is cell and if so proceed from there
       if (
@@ -228,7 +229,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
               return;
             }
             const newElement = tableRef.current.querySelector(
-              `div[data-column-index="${columnIndex + 1}"][data-row-index="${rowIndex}"]`
+              `div[data-column-index="${columnIndex + (isRtl ? -1 : 1)}"][data-row-index="${rowIndex}"]`
             );
             if (newElement) {
               setFocus(currentlyFocusedCell, newElement);
@@ -244,7 +245,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
               return;
             }
             const newElement = tableRef.current.querySelector(
-              `div[data-column-index="${columnIndex - 1}"][data-row-index="${rowIndex}"]`
+              `div[data-column-index="${columnIndex - (isRtl ? -1 : 1)}"][data-row-index="${rowIndex}"]`
             );
             if (newElement) {
               setFocus(currentlyFocusedCell, newElement);
@@ -309,7 +310,7 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
         }
       }
     },
-    [currentlyFocusedCell.current, tableRef.current]
+    [currentlyFocusedCell.current, tableRef.current, state?.isRtl]
   );
   if (showOverlay) {
     return tableProps;