feat(Search): fix rtl view (#8105)

* feat(Search): fix rtl view

* feat(Search): fix rtl view

* fix(Seach): fix prettier

Author: EldarMuhamethanov

packages/vkui/src/components/Search/Search.e2e-playground.tsx

@@ -18,6 +18,7 @@ export const SearchPlayground = (props: ComponentPlaygroundProps) => {
         {
           value: [undefined, 'value'],
           icon: [undefined, <Icon16Add key="" />],
+          dir: ['ltr', 'rtl'],
         },
         {
           value: ['value'],
@@ -38,7 +39,11 @@ export const SearchPlayground = (props: ComponentPlaygroundProps) => {
         },
       ]}
     >
-      {(props: SearchProps) => <Search style={{ maxWidth: '320px' }} {...props} />}
+      {({ dir, ...props }: SearchProps) => (
+        <div dir={dir}>
+          <Search style={{ maxWidth: '320px' }} {...props} />
+        </div>
+      )}
     </ComponentPlayground>
   );
 };

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

@@ -4,6 +4,11 @@
   -webkit-tap-highlight-color: transparent;
 
   --vkui_internal--search_height: var(--vkui--size_search_height--regular);
+  --vkui_internal--search_shift_direction: 1;
+}
+
+.rtl {
+  --vkui_internal--search_shift_direction: -1;
 }
 
 .withPadding {
@@ -130,14 +135,21 @@
   color: var(--vkui--color_icon_secondary);
   transition: transform 0.3s var(--vkui--animation_easing_platform);
   /* Используем translate3d, чтобы поправить дергание при наведении в Safari */
-  transform: translate3d(100%, 0, 0);
+  transform: translate3d(calc(var(--vkui_internal--search_shift_direction) * 100%), 0, 0);
 
   --vkui_internal--search_icon_size: calc(var(--vkui_internal--search_height) + 4px);
 }
 
 .hasIcon .controls {
   /* Исключаем параметр icon из расчёта, чтобы он оставался видимым */
-  transform: translate3d(calc(100% - var(--vkui_internal--search_icon_size)), 0, 0);
+  transform: translate3d(
+    calc(
+      var(--vkui_internal--search_shift_direction) *
+        calc(100% - var(--vkui_internal--search_icon_size))
+    ),
+    0,
+    0
+  );
 }
 
 .hasValue .controls {

packages/vkui/src/components/Search/Search.tsx

@@ -6,6 +6,7 @@ import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { useBooleanState } from '../../hooks/useBooleanState';
+import { useDirection } from '../../hooks/useDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useNativeFormResetListener } from '../../hooks/useNativeFormResetListener';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -75,6 +76,9 @@ export const Search = ({
   onFindButtonClick,
   ...inputProps
 }: SearchProps): React.ReactNode => {
+  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();
+  const isRtl = textDirection === 'rtl';
+  const rootRef = useExternRef(directionRef, getRootRef);
   const inputRef = useExternRef(getRef);
   const {
     value: isFocused,
@@ -172,9 +176,10 @@ export const Search = ({
         iconProp && styles.hasIcon,
         inputProps.disabled && styles.disabled,
         !noPadding && styles.withPadding,
+        isRtl && styles.rtl,
         className,
       )}
-      ref={getRootRef}
+      ref={rootRef}
       style={style}
     >
       <div className={styles.field}>