diff --git a/packages/vkui/src/components/Search/Search.e2e-playground.tsx b/packages/vkui/src/components/Search/Search.e2e-playground.tsx
index bbe4e571f0..fd7d1cf5d5 100644
--- a/packages/vkui/src/components/Search/Search.e2e-playground.tsx
+++ b/packages/vkui/src/components/Search/Search.e2e-playground.tsx
@@ -18,6 +18,7 @@ export const SearchPlayground = (props: ComponentPlaygroundProps) => {
{
value: [undefined, 'value'],
icon: [undefined, ],
+ dir: ['ltr', 'rtl'],
},
{
value: ['value'],
@@ -38,7 +39,11 @@ export const SearchPlayground = (props: ComponentPlaygroundProps) => {
},
]}
>
- {(props: SearchProps) => }
+ {({ dir, ...props }: SearchProps) => (
+
+
+
+ )}
);
};
diff --git a/packages/vkui/src/components/Search/Search.module.css b/packages/vkui/src/components/Search/Search.module.css
index 54170d27d5..f9a4cfd8e2 100644
--- a/packages/vkui/src/components/Search/Search.module.css
+++ b/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 {
diff --git a/packages/vkui/src/components/Search/Search.tsx b/packages/vkui/src/components/Search/Search.tsx
index faafc2012d..38454f22f2 100644
--- a/packages/vkui/src/components/Search/Search.tsx
+++ b/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();
+ 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}
>
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-dark-1-snap.png
index 0a28ab0e73..3a8792209a 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:7772a331c674655a1ee366e62bc45dfa630884f9e754cf6b44e2965e4429608a
-size 39755
+oid sha256:42d967dd0655afbcdb1fdb33b3996a1aaface9e6cde3be16e5c2830adeed22de
+size 56799
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-light-1-snap.png
index c7916d996a..42e91bdf3e 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:06e3278a5fd69934681769277aa2a130bc615aa196aedbb71a3bba2e7e1e0af9
-size 37883
+oid sha256:fe17c0b33e71af52fe9814b029391b0e817fe3a27261540d8f46920f1d59f048
+size 53985
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png
index edf1f17310..1e9a1bcc8d 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:4992eb313cf6e9775d03ddc944217f40047733207c4bc5e037b2feb99aca3712
-size 66176
+oid sha256:ac45bb56e2f19ddfc01ae7cce7816e167b0e48e41958416dfd7f87b2f727c900
+size 93943
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png
index 73eb35ab6e..8bb3009042 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:50fc612ed063b02fcf7cc09989758ce8d555b956f17ad0e386ebc8e6672db76e
-size 65120
+oid sha256:905454a6ccb8388f83ea453b74006a2410ce9bee80a2aca390ebfc675a006e8c
+size 92181
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-dark-1-snap.png
index 40fcb7aa7a..aa3e251953 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:7f1f1f49030a08c38ed6a80a651f241ecfaf09db678c0cb853312358f3bbb3dd
-size 34988
+oid sha256:3ec4254b1d8b7c8b5f480256c04b23c39ea2172028bb3e17d279d167017a7255
+size 52258
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-light-1-snap.png
index 32dcf8641b..5696ead27e 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:d59a578e0a056376edac90b743625d7431f7dfabd2ea12ed3174b21b28aaca60
-size 33855
+oid sha256:bc7bb591ff12ca1afd10e827c5980be08a5759947a2e4bcdaaaaa7999321ddd3
+size 50465
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-dark-1-snap.png
index 66098f10ad..13e09328f1 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:cd32a3bcc20a39895b8aeb87884f5e99938f33f82870726d300b21dd0f5d2e9b
-size 53307
+oid sha256:4c50c363f1995638d4609af457d46e3440c935f341a5e8c9bac2855f976da0c2
+size 79788
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-light-1-snap.png
index a3f6e3f63a..a7d4d2a629 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:8c2bd4dbb8c2f8bf3b260e44ef0b58e5152f670256384ebaa415112eec17ba9d
-size 55245
+oid sha256:4a9e7afb6ef6c2de1b34fce041f41036d5b896493704be990fb1463ddbeaa9a2
+size 82649
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-dark-1-snap.png
index d0bc55bf06..f60ab501cc 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:da84b6a6368ad8db2f7751d5da88ddef88a3c1747ee392ec76a1ee47117400bc
-size 51928
+oid sha256:4c9ed3cd00b6a6280afdcdcc21d7111584cff09100d732c754aa091bfec40813
+size 77200
diff --git a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-light-1-snap.png
index 1680fd869f..b0426d924a 100644
--- a/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/Search/__image_snapshots__/search-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
-oid sha256:eb25a199ff144ee5c5ef3ae65d5a2a7f5f640b05b3eea24b20b5e140eaeac3fd
-size 51819
+oid sha256:fadf1018626c45fd233f7e0ac98ccc86ba1705f5eb8662b0ca8a18ec31edea87
+size 76878