From b658bd51a4b1ee60eab610262fbbc12222c1335a Mon Sep 17 00:00:00 2001
From: Eldar <61377022+EldarMuhamethanov@users.noreply.github.com>
Date: Thu, 26 Dec 2024 17:46:25 +0300
Subject: [PATCH] feat(Cell): fix rtl view (#8116)

* feat(Cell): fix rtl view

* fix: fix prettier

* fix(Removable): fix css variable name
---
 .../src/components/Removable/Removable.module.css  | 13 +++++++++++++
 .../vkui/src/components/Removable/Removable.tsx    | 14 +++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/vkui/src/components/Removable/Removable.module.css b/packages/vkui/src/components/Removable/Removable.module.css
index ab63dc4065..c662bc30cd 100644
--- a/packages/vkui/src/components/Removable/Removable.module.css
+++ b/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 {
diff --git a/packages/vkui/src/components/Removable/Removable.tsx b/packages/vkui/src/components/Removable/Removable.tsx
index e9faa2812e..bbd26675a1 100644
--- a/packages/vkui/src/components/Removable/Removable.tsx
+++ b/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}