feat(Cell): fix rtl view (#8116)

* feat(Cell): fix rtl view

* fix: fix prettier

* fix(Removable): fix css variable name

packages/vkui/src/components/Removable/Removable.module.css

@@ -3,6 +3,19 @@
   display: flex;
   align-items: center;
   padding-inline-start: var(--vkui--size_base_padding_horizontal--regular);
+  transform: translateX(
+    calc(
+      -1px * var(--vkui_internal_Removable_remove_offset) *
+        var(--vkui_internal_Removable_remove_offset_direction)
+    )
+  );
+
+  --vkui_internal_Removable_remove_offset: 0;
+  --vkui_internal_Removable_remove_offset_direction: 1;
+}
+
+.rtl {
+  --vkui_internal_Removable_remove_offset_direction: -1;
 }
 
 .action {

packages/vkui/src/components/Removable/Removable.tsx

@@ -3,11 +3,12 @@
 import * as React from 'react';
 import { Icon24Cancel } from '@vkontakte/icons';
 import { classNames } from '@vkontakte/vkjs';
+import { useDirection } from '../../hooks/useDirection';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePlatform } from '../../hooks/usePlatform';
 import { getTextFromChildren } from '../../lib/children';
 import { useDOM } from '../../lib/dom';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { IconButton } from '../IconButton/IconButton';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Tappable } from '../Tappable/Tappable';
@@ -54,6 +55,8 @@ const RemovableIos = ({
   removeButtonTestId,
   disabled,
 }: RemovableIosOwnProps) => {
+  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();
+  const isRtl = textDirection === 'rtl';
   const { window } = useDOM();
 
   const removeButtonRef = React.useRef<HTMLElement>(null);
@@ -89,11 +92,16 @@ const RemovableIos = ({
     updateRemoveOffset(offsetWidth);
   };
 
+  const style: CSSCustomProperties = {
+    '--vkui_internal_Removable_remove_offset': String(removeOffset ?? 0),
+  };
+
   return (
     <div
-      className={classNames(styles.content, 'vkuiInternalRemovable__content')}
-      style={{ transform: `translateX(-${removeOffset ?? 0}px)` }}
+      className={classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content')}
+      style={style}
       onTransitionEnd={onRemoveTransitionEnd}
+      ref={directionRef}
     >
       <IconButton
         hasActive={false}