From 00bd349fc9518f846a89a99d77d756f45ab8d317 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Thu, 16 Jan 2025 15:02:08 +0300 Subject: [PATCH 01/16] feat(DirectionProvider): add direction to ConfigProvider and refactor rtl component --- .../AvatarBadge/AvatarBadgeWithPreset.tsx | 10 +-- .../Calendar/Calendar.e2e-playground.tsx | 2 +- .../vkui/src/components/Calendar/Calendar.tsx | 12 ++-- .../CalendarRange/CalendarRange.tsx | 12 ++-- .../ConfigProvider/ConfigProvider.test.tsx | 5 ++ .../ConfigProvider/ConfigProvider.tsx | 3 + .../ConfigProvider/ConfigProviderContext.tsx | 34 +++++----- .../DirectionProvider.test.tsx | 32 ++++++++++ .../DirectionProvider/DirectionProvider.tsx | 16 +++++ .../HorizontalScroll/HorizontalScroll.tsx | 7 +-- .../src/components/Pagination/Pagination.tsx | 11 ++-- .../PanelHeaderBack/PanelHeaderBack.tsx | 10 +-- .../src/components/Removable/Removable.tsx | 7 +-- .../vkui/src/components/Search/Search.tsx | 9 ++- .../SegmentedControl/SegmentedControl.tsx | 10 +-- .../vkui/src/components/Slider/Slider.tsx | 8 +-- .../Snackbar/Snackbar.e2e-playground.tsx | 2 +- .../vkui/src/components/Snackbar/Snackbar.tsx | 8 +-- .../vkui/src/components/Switch/Switch.tsx | 10 ++- packages/vkui/src/components/Tabs/Tabs.tsx | 10 +-- .../src/components/UsersStack/UsersStack.tsx | 10 +-- .../src/context/CalendarDirectionContext.ts | 2 +- .../vkui/src/hooks/useAutoDetectDirection.ts | 24 +++++++ packages/vkui/src/hooks/useConfigDirection.ts | 8 +++ packages/vkui/src/hooks/useDirection.ts | 63 ------------------- packages/vkui/src/index.ts | 3 + packages/vkui/src/lib/direction/index.ts | 1 + .../vkui/src/storybook/VKUIDecorators.tsx | 1 + .../src/testing/e2e/ComponentPlayground.tsx | 15 +++-- packages/vkui/src/testing/e2e/utils.tsx | 2 +- 30 files changed, 178 insertions(+), 169 deletions(-) create mode 100644 packages/vkui/src/components/DirectionProvider/DirectionProvider.test.tsx create mode 100644 packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx create mode 100644 packages/vkui/src/hooks/useAutoDetectDirection.ts create mode 100644 packages/vkui/src/hooks/useConfigDirection.ts delete mode 100644 packages/vkui/src/hooks/useDirection.ts create mode 100644 packages/vkui/src/lib/direction/index.ts diff --git a/packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx b/packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx index c047f3d496..6e87432aa6 100644 --- a/packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx +++ b/packages/vkui/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx @@ -2,8 +2,7 @@ import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; -import { useDirection } from '../../../hooks/useDirection'; -import { useExternRef } from '../../../hooks/useExternRef'; +import { useConfigDirection } from '../../../hooks/useConfigDirection'; import { getBadgeIconSizeByImageBaseSize, ImageBase, @@ -26,12 +25,10 @@ export interface AvatarBadgeWithPresetProps export const AvatarBadgeWithPreset: React.FC = ({ preset = 'online', className, - getRootRef, ...restProps }: AvatarBadgeWithPresetProps) => { - const [directionRef, textDirection = 'ltr'] = useDirection(); - const isRtl = textDirection === 'rtl'; - const rootRef = useExternRef(getRootRef, directionRef); + const direction = useConfigDirection(); + const isRtl = direction === 'rtl'; const { size } = React.useContext(ImageBaseContext); const badgeSize = getBadgeIconSizeByImageBaseSize(size); const isOnlinePreset = preset === 'online'; @@ -42,7 +39,6 @@ export const AvatarBadgeWithPreset: React.FC = ({ diff --git a/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx b/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx index 0b657d6c15..84f9f33586 100644 --- a/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx +++ b/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx @@ -7,7 +7,7 @@ import { Calendar, type CalendarProps } from './Calendar'; export const CalendarPlayground = (props: ComponentPlaygroundProps) => { return ( - {...props} propSets={[ { diff --git a/packages/vkui/src/components/Calendar/Calendar.tsx b/packages/vkui/src/components/Calendar/Calendar.tsx index e09ee0a62d..467e5c98ce 100644 --- a/packages/vkui/src/components/Calendar/Calendar.tsx +++ b/packages/vkui/src/components/Calendar/Calendar.tsx @@ -8,8 +8,7 @@ import { type CalendarDirectionContextProps, } from '../../context/CalendarDirectionContext'; import { useCalendar } from '../../hooks/useCalendar'; -import { useDirection } from '../../hooks/useDirection'; -import { useExternRef } from '../../hooks/useExternRef'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar'; import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect'; import { warnOnce } from '../../lib/warnOnce'; @@ -174,8 +173,7 @@ export const Calendar = ({ minDateTime, maxDateTime, }); - const [directionRef, textDirection = 'ltr'] = useDirection(); - const rootRef = useExternRef(directionRef, getRootRef); + const direction = useConfigDirection(); useIsomorphicLayoutEffect(() => { if (value) { @@ -225,9 +223,9 @@ export const Calendar = ({ const directionContextValue = React.useMemo( () => ({ - direction: textDirection, + direction, }), - [textDirection], + [direction], ); return ( @@ -235,7 +233,7 @@ export const Calendar = ({ (); const secondViewDate = addMonths(viewDate, 1); @@ -226,14 +224,14 @@ export const CalendarRange = ({ const directionContextValue = React.useMemo( () => ({ - direction: textDirection, + direction, }), - [textDirection], + [direction], ); return ( - +
{ customPanelHeaderAfterMinWidth: 90, tokensClassNames: DEFAULT_TOKENS_CLASS_NAMES, transitionMotionEnabled: false, + direction: 'ltr', }); return null; }; @@ -55,6 +56,7 @@ describe(ConfigProvider, () => { isWebView: true, tokensClassNames: { light: 'some-class-light', dark: 'some-class-dark' }, locale: 'en', + direction: 'ltr', }; it.each([ ['platform', 'android'], @@ -65,6 +67,7 @@ describe(ConfigProvider, () => { ['platform', 'light'], ['tokensClassNames', { light: 'another-class-light', dark: 'another-class-dark' }], ['locale', 'ru'], + ['direction', 'rtl'], ])('%s => %s', (prop, value) => { const newConfig = { [prop]: value }; render( @@ -96,6 +99,7 @@ describe(ConfigProviderOverride, () => { isWebView: true, tokensClassNames: { light: 'some-class-light', dark: 'some-class-dark' }, locale: 'en', + direction: 'ltr', }; it.each([ ['platform', 'android'], @@ -106,6 +110,7 @@ describe(ConfigProviderOverride, () => { ['platform', 'light'], ['tokensClassNames', { light: 'another-class-light', dark: 'another-class-dark' }], ['locale', 'ru'], + ['direction', 'rtl'], ])('%s => %s', (prop, value) => { const newConfig = { [prop]: value }; render( diff --git a/packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx b/packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx index c9e2e34c24..b0be456fb2 100644 --- a/packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx +++ b/packages/vkui/src/components/ConfigProvider/ConfigProvider.tsx @@ -3,6 +3,7 @@ import * as React from 'react'; import { IconAppearanceProvider } from '@vkontakte/icons'; import { useAutoDetectColorScheme } from '../../hooks/useAutoDetectColorScheme'; +import { useAutoDetectDirection } from '../../hooks/useAutoDetectDirection'; import { TokensClassProvider } from '../../lib/tokens'; import { excludeKeysWithUndefined } from '../../lib/utils'; import { @@ -29,10 +30,12 @@ export const ConfigProvider = (propsRaw: ConfigProviderProps): React.ReactNode = }; const colorScheme = useAutoDetectColorScheme(mergeProps.colorScheme); + const direction = useAutoDetectDirection(mergeProps.direction); const configContext = useConfigProviderContextMemo({ ...mergeProps, colorScheme, + direction, }); return ( diff --git a/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx b/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx index dc306b86a4..9c03955db4 100644 --- a/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx +++ b/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import type { ColorSchemeType } from '../../lib/colorScheme'; +import { type Direction } from '../../lib/direction'; import { platform, type PlatformType } from '../../lib/platform'; import { DEFAULT_TOKENS_CLASS_NAMES, type TokensClassNames } from '../../lib/tokens'; @@ -72,6 +73,8 @@ export interface ConfigProviderContextInterface { * Строка с языковой меткой BCP 47 */ locale: string; + + direction: Direction; } export const ConfigProviderContext: React.Context = @@ -84,6 +87,7 @@ export const ConfigProviderContext: React.Context @@ -99,20 +103,11 @@ export function useConfigProviderContextMemo(config: ConfigProviderContextInterf platform, tokensClassNames, locale, + direction, } = config; - return React.useMemo( - () => ({ - isWebView, - hasCustomPanelHeaderAfter, - customPanelHeaderAfterMinWidth, - colorScheme, - transitionMotionEnabled, - platform, - tokensClassNames, - locale, - }), - [ + return React.useMemo(() => { + return { isWebView, hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth, @@ -121,6 +116,17 @@ export function useConfigProviderContextMemo(config: ConfigProviderContextInterf platform, tokensClassNames, locale, - ], - ); + direction, + }; + }, [ + isWebView, + hasCustomPanelHeaderAfter, + customPanelHeaderAfterMinWidth, + colorScheme, + transitionMotionEnabled, + platform, + tokensClassNames, + locale, + direction, + ]); } diff --git a/packages/vkui/src/components/DirectionProvider/DirectionProvider.test.tsx b/packages/vkui/src/components/DirectionProvider/DirectionProvider.test.tsx new file mode 100644 index 0000000000..b0733b58a7 --- /dev/null +++ b/packages/vkui/src/components/DirectionProvider/DirectionProvider.test.tsx @@ -0,0 +1,32 @@ +'use no memo'; + +import { render } from '@testing-library/react'; +import { baselineComponent } from '../../testing/utils'; +import { ConfigProvider } from '../ConfigProvider/ConfigProvider'; +import { + type ConfigProviderContextInterface, + useConfigProvider, +} from '../ConfigProvider/ConfigProviderContext'; +import { DirectionProvider } from './DirectionProvider'; + +describe(DirectionProvider, () => { + baselineComponent(DirectionProvider, { forward: false, a11y: false, getRootRef: false }); + + it('override config context', () => { + let config: ConfigProviderContextInterface | undefined; + const ReadConfig = () => { + config = useConfigProvider(); + return null; + }; + + render( + + + + + , + ); + + expect(config).toEqual(expect.objectContaining({ direction: 'ltr' })); + }); +}); diff --git a/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx b/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx new file mode 100644 index 0000000000..57cdad8e78 --- /dev/null +++ b/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { type ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext'; +import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride'; + +export interface DirectionProviderProps { + value: ConfigProviderContextInterface['direction']; + children: React.ReactNode; +} + +/** + * Компонент, прокидывающий направление + * @see https://vkcom.github.io/VKUI/#/DirectionProvider + */ +export function DirectionProvider({ value, children }: DirectionProviderProps): React.ReactNode { + return {children}; +} diff --git a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx index f644c0fb30..a0eb6514c9 100644 --- a/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx +++ b/packages/vkui/src/components/HorizontalScroll/HorizontalScroll.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer'; -import { useDirection } from '../../hooks/useDirection'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { useExternRef } from '../../hooks/useExternRef'; import { easeInOutSine } from '../../lib/fx'; import type { HasRef, HTMLAttributesWithRootRef } from '../../types'; @@ -181,14 +181,13 @@ export const HorizontalScroll = ({ }: HorizontalScrollProps): React.ReactNode => { const [canScrollLeft, setCanScrollLeft] = React.useState(false); const [canScrollRight, setCanScrollRight] = React.useState(false); - const [directionRef, textDirection] = useDirection(); - const direction = textDirection || 'ltr'; + const direction = useConfigDirection(); const setCanScrollStart = direction === 'ltr' ? setCanScrollLeft : setCanScrollRight; const setCanScrollEnd = direction === 'ltr' ? setCanScrollRight : setCanScrollLeft; const isCustomScrollingRef = React.useRef(false); - const scrollerRef = useExternRef(getRef, directionRef); + const scrollerRef = useExternRef(getRef); const animationQueue = React.useRef([]); diff --git a/packages/vkui/src/components/Pagination/Pagination.tsx b/packages/vkui/src/components/Pagination/Pagination.tsx index 40e8e9d508..dca0047e08 100644 --- a/packages/vkui/src/components/Pagination/Pagination.tsx +++ b/packages/vkui/src/components/Pagination/Pagination.tsx @@ -3,8 +3,7 @@ import * as React from 'react'; import { Icon24ChevronCompactLeft, Icon24ChevronCompactRight } from '@vkontakte/icons'; import { useAdaptivity } from '../../hooks/useAdaptivity'; -import { useDirection } from '../../hooks/useDirection'; -import { useExternRef } from '../../hooks/useExternRef'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { type PaginationPageType, usePagination } from '../../hooks/usePagination'; import type { HasComponent, HTMLAttributesWithRootRef } from '../../types'; import { RootComponent } from '../RootComponent/RootComponent'; @@ -130,12 +129,10 @@ export const Pagination = ({ prevButtonTestId, nextButtonTestId, renderNavigationButton, - getRootRef, ...resetProps }: PaginationProps): React.ReactNode => { - const [directionRef, textDirection = 'ltr'] = useDirection(); - const isRtl = textDirection === 'rtl'; - const rootRef = useExternRef(getRootRef, directionRef); + const direction = useConfigDirection(); + const isRtl = direction === 'rtl'; const pages = usePagination({ currentPage, totalPages, @@ -211,7 +208,7 @@ export const Pagination = ({ ); return ( - + {navigationLabel}
  • diff --git a/packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx b/packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx index 68736b6fb2..71c65e4f4c 100644 --- a/packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx +++ b/packages/vkui/src/components/PanelHeaderBack/PanelHeaderBack.tsx @@ -10,8 +10,7 @@ import { } from '@vkontakte/icons'; import { classNames } from '@vkontakte/vkjs'; import { useAdaptivity } from '../../hooks/useAdaptivity'; -import { useDirection } from '../../hooks/useDirection'; -import { useExternRef } from '../../hooks/useExternRef'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { usePlatform } from '../../hooks/usePlatform'; import type { PlatformType } from '../../lib/platform'; import { AdaptiveIconRenderer } from '../AdaptiveIconRenderer/AdaptiveIconRenderer'; @@ -61,12 +60,10 @@ export const PanelHeaderBack = ({ className, hideLabelOnVKCom = false, hideLabelOnIOS = false, - getRootRef, ...restProps }: PanelHeaderBackProps): React.ReactNode => { const platform = usePlatform(); - const [directionRef, textDirection = 'ltr'] = useDirection(); - const rootRef = useExternRef(getRootRef, directionRef); + const direction = useConfigDirection(); const { sizeX = 'none' } = useAdaptivity(); // также label нужно скрывать при platform === 'ios' && sizeX === regular // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104 @@ -76,13 +73,12 @@ export const PanelHeaderBack = ({ return ( {label}} diff --git a/packages/vkui/src/components/Removable/Removable.tsx b/packages/vkui/src/components/Removable/Removable.tsx index bbd26675a1..b66145c809 100644 --- a/packages/vkui/src/components/Removable/Removable.tsx +++ b/packages/vkui/src/components/Removable/Removable.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { Icon24Cancel } from '@vkontakte/icons'; import { classNames } from '@vkontakte/vkjs'; -import { useDirection } from '../../hooks/useDirection'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { useGlobalEventListener } from '../../hooks/useGlobalEventListener'; import { usePlatform } from '../../hooks/usePlatform'; import { getTextFromChildren } from '../../lib/children'; @@ -55,8 +55,8 @@ const RemovableIos = ({ removeButtonTestId, disabled, }: RemovableIosOwnProps) => { - const [directionRef, textDirection = 'ltr'] = useDirection(); - const isRtl = textDirection === 'rtl'; + const direction = useConfigDirection(); + const isRtl = direction === 'rtl'; const { window } = useDOM(); const removeButtonRef = React.useRef(null); @@ -101,7 +101,6 @@ const RemovableIos = ({ className={classNames(styles.content, isRtl && styles.rtl, 'vkuiInternalRemovable__content')} style={style} onTransitionEnd={onRemoveTransitionEnd} - ref={directionRef} > { - const [directionRef, textDirection = 'ltr'] = useDirection(); - const isRtl = textDirection === 'rtl'; - const rootRef = useExternRef(directionRef, getRootRef); + const direction = useConfigDirection(); + const isRtl = direction === 'rtl'; const inputRef = useExternRef(getRef); const { value: isFocused, @@ -179,7 +178,7 @@ export const Search = ({ isRtl && styles.rtl, className, )} - ref={rootRef} + ref={getRootRef} style={style} >
    diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx b/packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx index 0570823bde..d32ea42054 100644 --- a/packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx +++ b/packages/vkui/src/components/SegmentedControl/SegmentedControl.tsx @@ -3,9 +3,8 @@ import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; import { useAdaptivity } from '../../hooks/useAdaptivity'; -import { useDirection } from '../../hooks/useDirection'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl'; -import { useExternRef } from '../../hooks/useExternRef'; import { useTabsNavigation } from '../../hooks/useTabsNavigation'; import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect'; import { warnOnce } from '../../lib/warnOnce'; @@ -59,13 +58,11 @@ export const SegmentedControl = ({ onChange: onChangeProp, value: valueProp, role = 'radiogroup', - getRootRef, ...restProps }: SegmentedControlProps): React.ReactNode => { const id = React.useId(); - const [directionRef, textDirection = 'ltr'] = useDirection(); - const rootRef = useExternRef(getRootRef, directionRef); - const isRtl = textDirection === 'rtl'; + const direction = useConfigDirection(); + const isRtl = direction === 'rtl'; const [value, onChange] = useCustomEnsuredControl({ onChange: onChangeProp, @@ -93,7 +90,6 @@ export const SegmentedControl = ({ return ( { const { sizeY = 'none' } = useAdaptivity(); - const [directionRef, textDirection = 'ltr'] = useDirection(); - const isRtl = textDirection === 'rtl'; + const direction = useConfigDirection(); + const isRtl = direction === 'rtl'; const isControlled = valueProp !== undefined; const [localValue, setValue] = React.useState(defaultValue); @@ -258,7 +258,7 @@ export const Slider = ({ className, )} style={mergeStyle(styleProp, style)} - getRootRef={directionRef} + getRootRef={getRootRef} onStart={disabled ? undefined : handlePointerStart} onMove={disabled ? undefined : handlePointerMove} onEnd={disabled ? undefined : handlePointerEnd} diff --git a/packages/vkui/src/components/Snackbar/Snackbar.e2e-playground.tsx b/packages/vkui/src/components/Snackbar/Snackbar.e2e-playground.tsx index bfd79c1e22..6ada11f0b0 100644 --- a/packages/vkui/src/components/Snackbar/Snackbar.e2e-playground.tsx +++ b/packages/vkui/src/components/Snackbar/Snackbar.e2e-playground.tsx @@ -5,7 +5,7 @@ import { ComponentPlayground, type ComponentPlaygroundProps, } from '@vkui-e2e/playground-helpers'; -import { type Direction } from '../../hooks/useDirection'; +import { type Direction } from '../../lib/direction'; import { Snackbar, type SnackbarProps } from './Snackbar'; const BASE_OFFSET_Y = 64; diff --git a/packages/vkui/src/components/Snackbar/Snackbar.tsx b/packages/vkui/src/components/Snackbar/Snackbar.tsx index 2f87c95c8f..29cb2e858e 100644 --- a/packages/vkui/src/components/Snackbar/Snackbar.tsx +++ b/packages/vkui/src/components/Snackbar/Snackbar.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; -import { useDirection } from '../../hooks/useDirection'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { useExternRef } from '../../hooks/useExternRef'; import { useFocusWithin } from '../../hooks/useFocusWithin'; import { useGlobalEscKeyDown } from '../../hooks/useGlobalEscKeyDown'; @@ -105,10 +105,10 @@ export const Snackbar: React.FC & { Basic: typeof Basic } = ({ const [open, setOpen] = React.useState(true); const [touched, setTouched] = React.useState(false); - const [directionRef, textDirection = 'ltr'] = useDirection(); - const isRtl = textDirection === 'rtl'; + const direction = useConfigDirection(); + const isRtl = direction === 'rtl'; - const rootRef = useExternRef(getRootRef, directionRef); + const rootRef = useExternRef(getRootRef); const focused = useFocusWithin(rootRef); const inRef = React.useRef(null); const panGestureRecognizer = React.useRef(null); diff --git a/packages/vkui/src/components/Switch/Switch.tsx b/packages/vkui/src/components/Switch/Switch.tsx index fa6bdd51a8..ef1dd9d5a7 100644 --- a/packages/vkui/src/components/Switch/Switch.tsx +++ b/packages/vkui/src/components/Switch/Switch.tsx @@ -3,8 +3,7 @@ import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; import { useAdaptivity } from '../../hooks/useAdaptivity'; -import { useDirection } from '../../hooks/useDirection'; -import { useExternRef } from '../../hooks/useExternRef'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { useFocusVisible } from '../../hooks/useFocusVisible'; import { useFocusVisibleClassName } from '../../hooks/useFocusVisibleClassName'; import { usePlatform } from '../../hooks/usePlatform'; @@ -38,9 +37,8 @@ export const Switch = ({ onClick, ...restProps }: SwitchProps): React.ReactNode => { - const [directionRef, textDirection = 'ltr'] = useDirection(); - const isRtl = textDirection === 'rtl'; - const rootRef = useExternRef(getRootRef, directionRef); + const direction = useConfigDirection(); + const isRtl = direction === 'rtl'; const platform = usePlatform(); const { sizeY = 'none' } = useAdaptivity(); const { focusVisible, onBlur, onFocus } = useFocusVisible(); @@ -96,7 +94,7 @@ export const Switch = ({ className, )} style={style} - ref={rootRef} + ref={getRootRef} > { const platform = usePlatform(); - const [directionRef, textDirection = 'ltr'] = useDirection(); - const rootRef = useExternRef(getRootRef, directionRef); + const direction = useConfigDirection(); const isTabFlow = role === 'tablist'; const withGaps = mode === 'accent' || mode === 'secondary'; - const { tabsRef } = useTabsNavigation(isTabFlow, textDirection === 'rtl'); + const { tabsRef } = useTabsNavigation(isTabFlow, direction === 'rtl'); return ( { const cmpId = React.useId(); - const [directionRef, textDirection = 'ltr'] = useDirection(); - const rootRef = useExternRef(getRootRef, directionRef); + const direction = useConfigDirection(); const canShowOthers = count > 0 && count < 100 && size !== 's'; const CounterTypography = size === 'l' ? Footnote : Caption; const photoSize = photoSizes[size]; const directionClip = - textDirection === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right'; + direction === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right'; const photosElements = photos.slice(0, visibleCount).map((photo, i) => { const direction = i === 0 && !canShowOthers ? 'circle' : directionClip; @@ -212,7 +209,6 @@ export const UsersStack = ({ return ( { + const [direction, setDirection] = React.useState(directionProp || 'ltr'); + const { window, document } = useDOM(); + + const update = () => { + if (directionProp) { + setDirection(directionProp); + return; + } + if (!window || !document) { + return; + } + const styleDeclaration = window.getComputedStyle(document.body); + setDirection(styleDeclaration.direction as Direction); + }; + useIsomorphicLayoutEffect(update, [window, document, directionProp]); + + return direction; +}; diff --git a/packages/vkui/src/hooks/useConfigDirection.ts b/packages/vkui/src/hooks/useConfigDirection.ts new file mode 100644 index 0000000000..21ddac288a --- /dev/null +++ b/packages/vkui/src/hooks/useConfigDirection.ts @@ -0,0 +1,8 @@ +import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext'; +import { type Direction } from '../lib/direction'; + +export function useConfigDirection(): Direction { + const { direction } = useConfigProvider(); + + return direction; +} diff --git a/packages/vkui/src/hooks/useDirection.ts b/packages/vkui/src/hooks/useDirection.ts deleted file mode 100644 index 9f6f448961..0000000000 --- a/packages/vkui/src/hooks/useDirection.ts +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react'; -import { useDOM } from '../lib/dom'; -import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect'; - -export type Direction = 'ltr' | 'rtl'; -type WritingMode = 'horizontal-tb' | 'vertical-rl' | 'vertical-lr'; - -/** - * Определяет направление текста элемента. - * - * ## Ограничения - * - * - Не следит за изменением направлением. - * - Определяется только на второй рендер. - * - * ## Пример - * - * ```jsx - * import { strict as assert } from 'node:assert'; - * - * const Component = () => { - * const [ref, direction, writingMode] = useDirection(); - * - * React.useEffect(()=>{ - * if (!direction || !writingMode) { - * return - * } - * - * assert.equal(direction, 'ltr') - * assert.equal(writingMode, 'vertical-rl') - * }, [direction, writingMode]) - * - * return
    我家没有电脑。
    - * } - * ``` - */ -export function useDirection(): [ - React.RefObject, - Direction | undefined, - WritingMode | undefined, -] { - const ref = React.useRef(null); - - const [direction, setDirection] = React.useState(undefined); - const [writingMode, setWritingMode] = React.useState(undefined); - - const { window } = useDOM(); - - const update = () => { - if (!window || !ref.current) { - return; - } - - const styleDeclaration = window.getComputedStyle(ref.current); - - setDirection(styleDeclaration.direction as Direction); - setWritingMode(styleDeclaration.writingMode as WritingMode); - }; - - useIsomorphicLayoutEffect(update, [window]); - - return [ref, direction, writingMode]; -} diff --git a/packages/vkui/src/index.ts b/packages/vkui/src/index.ts index b00181ad5a..51bcd5ce40 100644 --- a/packages/vkui/src/index.ts +++ b/packages/vkui/src/index.ts @@ -411,7 +411,9 @@ export { ColorScheme } from './lib/colorScheme'; export type { ColorSchemeType } from './lib/colorScheme'; export { DOMContext } from './lib/dom'; export { LocaleProvider } from './components/LocaleProvider/LocaleProvider'; +export { DirectionProvider } from './components/DirectionProvider/DirectionProvider'; export type { LocaleProviderProps } from './components/LocaleProvider/LocaleProvider'; +export type { DirectionProviderProps } from './components/DirectionProvider/DirectionProvider'; export { PlatformProvider } from './components/PlatformProvider/PlatformProvider'; export type { PlatformProviderProps } from './components/PlatformProvider/PlatformProvider'; export { Popover } from './components/Popover/Popover'; @@ -432,6 +434,7 @@ export { withPlatform } from './hoc/withPlatform'; * Hooks */ export { usePlatform } from './hooks/usePlatform'; +export { useConfigDirection as useDirection } from './hooks/useConfigDirection'; export { useAdaptivity } from './hooks/useAdaptivity'; export { type UseAdaptivityConditionalRender, diff --git a/packages/vkui/src/lib/direction/index.ts b/packages/vkui/src/lib/direction/index.ts new file mode 100644 index 0000000000..ea77bd26eb --- /dev/null +++ b/packages/vkui/src/lib/direction/index.ts @@ -0,0 +1 @@ +export type Direction = 'ltr' | 'rtl'; diff --git a/packages/vkui/src/storybook/VKUIDecorators.tsx b/packages/vkui/src/storybook/VKUIDecorators.tsx index 91e14c63a8..17d9ce29d6 100644 --- a/packages/vkui/src/storybook/VKUIDecorators.tsx +++ b/packages/vkui/src/storybook/VKUIDecorators.tsx @@ -41,6 +41,7 @@ export const withVKUIWrapper: Decorator = (Component, context) => { diff --git a/packages/vkui/src/testing/e2e/ComponentPlayground.tsx b/packages/vkui/src/testing/e2e/ComponentPlayground.tsx index 11fb162ece..af7f4d7f02 100644 --- a/packages/vkui/src/testing/e2e/ComponentPlayground.tsx +++ b/packages/vkui/src/testing/e2e/ComponentPlayground.tsx @@ -2,8 +2,10 @@ import * as React from 'react'; import type { AdaptivityProps } from '../../components/AdaptivityProvider/AdaptivityContext'; import { AdaptivityProvider } from '../../components/AdaptivityProvider/AdaptivityProvider'; import { ConfigProvider } from '../../components/ConfigProvider/ConfigProvider'; +import { DirectionProvider } from '../../components/DirectionProvider/DirectionProvider'; import { BREAKPOINTS } from '../../lib/adaptivity'; import type { ColorSchemeType } from '../../lib/colorScheme'; +import { type Direction } from '../../lib/direction'; import type { PlatformType } from '../../lib/platform'; import { AppDefaultWrapper, type AppDefaultWrapperProps } from './AppDefaultWrapper'; import { TEST_CLASS_NAMES } from './constants'; @@ -69,7 +71,7 @@ export const ComponentPlayground = < } {...restProps} > - {multiCartesian(propSets, { adaptive: !isVKCOM }).map((props, i) => { + {multiCartesian(propSets, { adaptive: !isVKCOM }).map((props, i) => { const clonedAdaptivityProviderProps = { ...adaptivityProviderProps }; if (props.sizeX) { @@ -80,15 +82,18 @@ export const ComponentPlayground = < clonedAdaptivityProviderProps.sizeY = props.sizeY; } + const dir = props.dir as Direction; return ( {isFixedComponent ? null : (
    {prettyProps(props)}
    )} -
    - - {children(props)} - +
    + + + {children(props)} + +
    ); diff --git a/packages/vkui/src/testing/e2e/utils.tsx b/packages/vkui/src/testing/e2e/utils.tsx index a4c0847769..6be69f453a 100644 --- a/packages/vkui/src/testing/e2e/utils.tsx +++ b/packages/vkui/src/testing/e2e/utils.tsx @@ -37,7 +37,7 @@ function getAdaptivity(adaptivity?: AdaptivityFlag) { return extra; } -type TestProps = Array; +type TestProps = Array; type CartesianOptions = { adaptive: boolean }; function cartesian( From c3886531b485c0cd6ac8dfb53111f72bebac7ef4 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Mon, 3 Feb 2025 14:23:55 +0300 Subject: [PATCH 02/16] fix: fix playground with direction --- .../Calendar/Calendar.e2e-playground.tsx | 2 +- .../calendar-android-chromium-dark-1-snap.png | 4 +-- ...calendar-android-chromium-light-1-snap.png | 4 +-- .../calendar-ios-webkit-dark-1-snap.png | 4 +-- .../calendar-ios-webkit-light-1-snap.png | 4 +-- .../calendar-vkcom-chromium-dark-1-snap.png | 4 +-- .../calendar-vkcom-chromium-light-1-snap.png | 4 +-- .../calendar-vkcom-firefox-dark-1-snap.png | 4 +-- .../calendar-vkcom-firefox-light-1-snap.png | 4 +-- .../calendar-vkcom-webkit-dark-1-snap.png | 4 +-- .../calendar-vkcom-webkit-light-1-snap.png | 4 +-- .../CalendarRange.e2e-playground.tsx | 2 +- ...ndarrange-android-chromium-dark-1-snap.png | 4 +-- ...darrange-android-chromium-light-1-snap.png | 4 +-- .../calendarrange-ios-webkit-dark-1-snap.png | 4 +-- .../calendarrange-ios-webkit-light-1-snap.png | 4 +-- .../DirectionProvider/DirectionProvider.tsx | 2 +- .../Pagination/Pagination.e2e-playground.tsx | 4 +-- ...agination-android-chromium-dark-1-snap.png | 4 +-- ...gination-android-chromium-light-1-snap.png | 4 +-- .../pagination-ios-webkit-dark-1-snap.png | 4 +-- .../pagination-ios-webkit-light-1-snap.png | 4 +-- .../PanelHeaderButton.e2e-playground.tsx | 2 +- ...eaderback-android-chromium-dark-1-snap.png | 4 +-- ...aderback-android-chromium-light-1-snap.png | 4 +-- ...panelheaderback-ios-webkit-dark-1-snap.png | 4 +-- ...anelheaderback-ios-webkit-light-1-snap.png | 4 +-- ...lheaderback-vkcom-chromium-dark-1-snap.png | 4 +-- ...headerback-vkcom-chromium-light-1-snap.png | 4 +-- ...elheaderback-vkcom-firefox-dark-1-snap.png | 4 +-- ...lheaderback-vkcom-firefox-light-1-snap.png | 4 +-- ...nelheaderback-vkcom-webkit-dark-1-snap.png | 4 +-- ...elheaderback-vkcom-webkit-light-1-snap.png | 4 +-- ...eadercontext-vkcom-webkit-light-1-snap.png | 4 +-- .../Search/Search.e2e-playground.tsx | 2 +- .../SegmentedControl.e2e-playground.tsx | 2 +- .../Slider/Slider.e2e-playground.tsx | 4 +-- .../slider-android-chromium-dark-1-snap.png | 4 +-- .../slider-android-chromium-light-1-snap.png | 4 +-- .../slider-ios-webkit-dark-1-snap.png | 4 +-- .../slider-ios-webkit-light-1-snap.png | 4 +-- .../Snackbar/Snackbar.e2e-playground.tsx | 1 + ...t-dir-rtl-android-chromium-dark-1-snap.png | 4 +-- ...-dir-rtl-android-chromium-light-1-snap.png | 4 +-- ...ent-dir-rtl-vkcom-chromium-dark-1-snap.png | 4 +-- ...nt-dir-rtl-vkcom-chromium-light-1-snap.png | 4 +-- .../Switch/Switch.e2e-playground.tsx | 2 +- .../UsersStack/UsersStack.e2e-playground.tsx | 2 +- ...sersstack-android-chromium-dark-1-snap.png | 4 +-- ...ersstack-android-chromium-light-1-snap.png | 4 +-- .../usersstack-ios-webkit-dark-1-snap.png | 4 +-- .../usersstack-ios-webkit-light-1-snap.png | 4 +-- .../usersstack-vkcom-chromium-dark-1-snap.png | 4 +-- ...usersstack-vkcom-chromium-light-1-snap.png | 4 +-- .../usersstack-vkcom-firefox-dark-1-snap.png | 4 +-- .../usersstack-vkcom-firefox-light-1-snap.png | 4 +-- .../usersstack-vkcom-webkit-dark-1-snap.png | 4 +-- .../usersstack-vkcom-webkit-light-1-snap.png | 4 +-- .../src/testing/e2e/ComponentPlayground.tsx | 27 +++++++++++-------- packages/vkui/src/testing/e2e/utils.tsx | 25 +++++++++++++++-- 60 files changed, 146 insertions(+), 119 deletions(-) diff --git a/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx b/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx index 84f9f33586..4a3264c163 100644 --- a/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx +++ b/packages/vkui/src/components/Calendar/Calendar.e2e-playground.tsx @@ -65,7 +65,7 @@ export const CalendarPlayground = (props: ComponentPlaygroundProps) => { }, { value: [new Date('1970-05-05')], - dir: ['rtl'], + $direction: 'rtl', }, ]} > diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-dark-1-snap.png index 8cf1ce061a..ababc26f1a 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:37d3b85c1d16121885dd454fd314bf3924c478b5c07bc4b4388ea72948ef1a7b -size 345451 +oid sha256:f6b3672f69245a976bc9e3d9e13c1ae852d940ccd0f9c808cfdfdba53349abdc +size 345343 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-light-1-snap.png index e4db812fcd..7d957df29d 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:792f712987b6282be246e7ba4b4b3d33b01d6ffdca974a95f3496f0405d9d2dc -size 308929 +oid sha256:b35d984e6b5efc48e9045b619a920b3768dd9ee93e8c8d7c6f79af021aae3f7f +size 309178 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-dark-1-snap.png index 4d8789716c..1f2baddb8a 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:13bbe04d02f4793591978d531a41a7e90ab9410c3516d2184076f8ba8be4bde7 -size 450516 +oid sha256:df5f3fad12d6f6e262044d6dc7dfd361fb1ba8e06d3ee727d72ffd8eaf766bbb +size 450517 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-light-1-snap.png index 80339f4c44..08bbd6b679 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:302fdbed98229797192816e45bd50c5d65f0fc0ab679988cd419424bf82b5240 -size 446116 +oid sha256:25ccca29375c79371213f86e589c7bda556e20741fd2342278eb4f10a7da7614 +size 446110 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-dark-1-snap.png index 019b1528f2..c73cedb63a 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4a8528e8139ccc4711de50d11fa125bda9b889369743c7a1aadec090d2de6395 -size 347160 +oid sha256:f00db1480d442ff2bfa80bde757ab9e3105bcc066210c6d2d2c5de9036dc3f52 +size 347081 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-light-1-snap.png index 0401dd2855..7b47c8cccd 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d7ac0eb33407630e6f988bbd0867ac40eb85b0610cfb5e30591a8f491df4a7b8 -size 316408 +oid sha256:1f2c93b94bc323715af2314388f0ea6bee4a727807d1a10916f6b3deeca3bf72 +size 316540 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-dark-1-snap.png index d7c964b866..36a3602228 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:520cbd6e35f6e9877d1667abc7d29fb5ef49a929c964633570e1a122af542fff -size 512972 +oid sha256:8ec61105b67b937748a6d3e9eaf53b219f7fe9aebe4fd0423ea0dc4494daa91d +size 513352 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-light-1-snap.png index 2bc6625b08..f0e7f8bb40 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a4d3819030c646bb76cdbe889fb2cc16bda2220455f49aceed89747e183daa8b -size 505084 +oid sha256:a3b063d50c3472c7e0935546ed88fce98c418d344a1c76d9dbc0b95e1a742be2 +size 505476 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-dark-1-snap.png index 1a830a611a..03988d555f 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a6acb40dcba8f7aefab2de6dc6ca89c65d05e39c6b13c184c2b813809fbcf9e2 -size 451614 +oid sha256:fb21a7af73900e0a685f45bc2810e9408b771a7ac84050e83f4225b99ad14449 +size 452078 diff --git a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-light-1-snap.png index 1c2e5b829d..b6f9faedc5 100644 --- a/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Calendar/__image_snapshots__/calendar-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:119260604f821191824926f89d3b7c57ec61b3cd3b0fed1821cfc9831606c58d -size 454687 +oid sha256:a796c9a03c03db50d1bbaee1dcbacc818e17ec65dce446434e2cd8e5231d201b +size 455097 diff --git a/packages/vkui/src/components/CalendarRange/CalendarRange.e2e-playground.tsx b/packages/vkui/src/components/CalendarRange/CalendarRange.e2e-playground.tsx index 49360e73f2..c6ea5650dd 100644 --- a/packages/vkui/src/components/CalendarRange/CalendarRange.e2e-playground.tsx +++ b/packages/vkui/src/components/CalendarRange/CalendarRange.e2e-playground.tsx @@ -41,7 +41,7 @@ export const CalendarRangePlayground = (props: ComponentPlaygroundProps) => { }, { value: [rangeValue], - dir: ['rtl'], + $direction: 'rtl', }, ]} > diff --git a/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-android-chromium-dark-1-snap.png b/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-android-chromium-dark-1-snap.png index cb60a71192..d8d9fd6223 100644 --- a/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b51ccca87ddc18058b99081505784484ea7327876106fff96e6d22327ab57fe7 -size 164052 +oid sha256:2b6bfdc68642581f4f998d459b0eb3126f62e80824eea3c1e508c6630bcf64f8 +size 164833 diff --git a/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-android-chromium-light-1-snap.png b/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-android-chromium-light-1-snap.png index aa4656d38c..8c6b479f0a 100644 --- a/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b57762e35b1242b8ff90b170d22301133137535c30975416b942ac2064ee0381 -size 162996 +oid sha256:523d43bd2c5777c7107f50f387f36068fccaf41693124691ce0a71f2d6b82a55 +size 163643 diff --git a/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-ios-webkit-dark-1-snap.png index 3a129c8a2a..2b207ccd08 100644 --- a/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eec576620a83a9f35c20bca5bb3612a2288fa9a9a23a473a92910415832e7f5c -size 192061 +oid sha256:1c06577355447ceb3cd4f334577618f02e05c25908ce9bb353e35c0d060c3874 +size 192840 diff --git a/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-ios-webkit-light-1-snap.png b/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-ios-webkit-light-1-snap.png index 3865e58ade..f6144982ea 100644 --- a/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/CalendarRange/__image_snapshots__/calendarrange-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4c06e4ef3edc349b5e800721204a8810ca7957d4b162f1a087ec7b6ca53c3f5b -size 189515 +oid sha256:8b797368bace892f295a0dbca71251c09fa61646ec96de866d943c1c90a959b4 +size 190213 diff --git a/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx b/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx index 57cdad8e78..b6662b577f 100644 --- a/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx +++ b/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx @@ -8,7 +8,7 @@ export interface DirectionProviderProps { } /** - * Компонент, прокидывающий направление + * Компонент, прокидывающий направление контента * @see https://vkcom.github.io/VKUI/#/DirectionProvider */ export function DirectionProvider({ value, children }: DirectionProviderProps): React.ReactNode { diff --git a/packages/vkui/src/components/Pagination/Pagination.e2e-playground.tsx b/packages/vkui/src/components/Pagination/Pagination.e2e-playground.tsx index 99d65c612c..e3d94c0f57 100644 --- a/packages/vkui/src/components/Pagination/Pagination.e2e-playground.tsx +++ b/packages/vkui/src/components/Pagination/Pagination.e2e-playground.tsx @@ -8,7 +8,7 @@ export const PaginationPlayground = (props: ComponentPlaygroundProps) => { propSets={[ { navigationButtonsStyle: ['icon', 'caption', 'both'], - dir: ['ltr', 'rtl'], + $direction: true, $adaptivity: 'y', }, { @@ -22,7 +22,7 @@ export const PaginationPlayground = (props: ComponentPlaygroundProps) => { totalPages: [123], siblingCount: [0], navigationButtonsStyle: ['icon', 'caption', 'both'], - dir: ['ltr', 'rtl'], + $direction: true, $adaptivity: 'y', }, ]} diff --git a/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-android-chromium-dark-1-snap.png index 3305762274..6e3dbcb4fd 100644 --- a/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:681dce9f82873d09bd92deffecf1104136159a7366b4fd4964176c2c187d09e0 -size 238334 +oid sha256:176996709d1ed0f1f34b7e090d2be310c590441121e81d99b6158763311a7e57 +size 240944 diff --git a/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-android-chromium-light-1-snap.png b/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-android-chromium-light-1-snap.png index acc2d874f7..a3024553e7 100644 --- a/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a965f920803edec4a685d073a14559c965d0a7a0a82818dc79b03dda6b1efae1 -size 235753 +oid sha256:43aec49c3a94273a660c5997817b18392bc3c2a2b2d4884ce332ab1c292124c2 +size 238473 diff --git a/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-dark-1-snap.png index 65e32fa8c8..1a2afbaa18 100644 --- a/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6fb75ff759dc217410da4a2cd7a3a7ceb18ef5a28741275cc68d2d14ae9a1ae0 -size 303421 +oid sha256:7575674a31a9a65c18fb02ceec785e48a50afd9c9c2622a8594da899b0a8b983 +size 302257 diff --git a/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-light-1-snap.png index bb9521094d..31614c4f7c 100644 --- a/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Pagination/__image_snapshots__/pagination-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:aaf25b84ccc8de7f377b1969bf9ce19b284d112023a7400df4bc82748ae9671b -size 298896 +oid sha256:c175f755f46962a1787bae2d6b72a1e56f6c0854b1f8078434d32e28ad7c1a7f +size 297729 diff --git a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx index 7988becc49..d82ab75e70 100644 --- a/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx +++ b/packages/vkui/src/components/PanelHeaderButton/PanelHeaderButton.e2e-playground.tsx @@ -60,7 +60,7 @@ export const PanelHeaderBackPlayground = (props: ComponentPlaygroundProps) => { { primary: [true, false], label: [undefined, 'label'], - dir: ['ltr', 'rtl'], + $direction: true, }, { hideLabelOnIOS: [true, false], diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-dark-1-snap.png index c54bb16610..276a6e587a 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0c3eccb95c7d7fc0c6f1c62bc5d121bc95b65147a24955970f6d1a348af50bcd -size 33634 +oid sha256:618d7635e6cad613c582ad29f307cd4b0ff78ef9ad8675ae43b1b510431ec495 +size 33585 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-light-1-snap.png index 3c0db9d8ed..7de797e006 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:80e025c3d3e400dcc7d718058baa154163f6d20a2b08b6e3fe09bf77320f6143 -size 31837 +oid sha256:618b1ab22c01853278fac660de901faffd2555f7d59ff39d318703ea1dea5744 +size 31789 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-dark-1-snap.png index 9516907629..c8c6473e06 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c4d034b154b4da10cfcc5d7802e0cc1d254184ef72fb1748fe976cde2ee8d62b -size 60275 +oid sha256:0c4466a249c77b00a0fc744168ead084a0da00c0cb76b4afeed51e42edbe843f +size 60066 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-light-1-snap.png index a3380507be..396337bb8b 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2a3b8f4a6bcf4532717b0b3239e0ef5fb7cfeb6263c4aecc6a53ab71b6ff7582 -size 59801 +oid sha256:f7e053973054bc3b6fd5eaf80b30cfa4925195eea8f889a697e95513a898b8e6 +size 59614 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-dark-1-snap.png index 73dfab2ee4..5c6e12bfaa 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:09d82f8086bcd391bf0062a47dd75b2de5c9f5d90e87148a4bf0ee98c97b4a97 -size 37090 +oid sha256:41632cee8465a47763570c9a01619639a28d2088786ac65a1785fb0c0734392e +size 37056 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-light-1-snap.png index c33ccc48dd..6b20cfb9a6 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:54fc6c08797bbffd1aad8d13d7740180984ad9bcf612870925a3233445450bb8 -size 36311 +oid sha256:48832d725e2bd5344db1b45a581f72da7ae69cf6a85a1914722a59e5e7a0e829 +size 36253 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-dark-1-snap.png index 964d21cd2a..1361203324 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9eb86e7aaf7a7ab4fd84785e190a5ff5bcf8977b1dd7b34e3fa1ac02142071ec -size 54525 +oid sha256:8afcdbb38a85ea14202a7d99f657fdc748b75d7a9ff5b09379aa59a5f8ed600c +size 54591 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-light-1-snap.png index 2a2f8827aa..19607227b3 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b41bd8f1ffb741c7f41a917ef47abc14debb98e06d945fe0c0e58bc11c852ed3 -size 55296 +oid sha256:d31270e886672b973309f47b74f03e6aaf3b2030eedfbfeb7623ae44d4656b17 +size 55418 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-dark-1-snap.png index afa2ebd563..38eecbd1de 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:4185e6a0cbc3728f047a302e1295e077237f76e1d80b9b1cdf1eb601d5b6ca53 -size 56822 +oid sha256:b1995c7d7bd2a12bdb9a9720c17c58b3de5a738432f2981cb4b2c0cfdaf8bfd4 +size 56887 diff --git a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-light-1-snap.png index 15a9bff2b3..1989e11bbc 100644 --- a/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderButton/__image_snapshots__/panelheaderback-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a9d35ea69317f21d374fe4b4c65d19d13d780f8b89addecff786c67579dc3dc5 -size 56743 +oid sha256:91150e4a7c33e49fa6671f73a428924da183efe021e84a309f11b8da84a75999 +size 56752 diff --git a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png index 56ab8e8e74..3239889307 100644 --- a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1cc86657eb7008afed7f6d4b857e384f803334b14a13d1e58180bc3e278dfea7 -size 12269 +oid sha256:9bf436f58a1d5d07f00e3ac793ab2134c46c3a70af5b058ae233457a3ab9b9bf +size 12275 diff --git a/packages/vkui/src/components/Search/Search.e2e-playground.tsx b/packages/vkui/src/components/Search/Search.e2e-playground.tsx index 521c43c7a7..bb8d012b9c 100644 --- a/packages/vkui/src/components/Search/Search.e2e-playground.tsx +++ b/packages/vkui/src/components/Search/Search.e2e-playground.tsx @@ -19,7 +19,7 @@ export const SearchPlayground = (props: ComponentPlaygroundProps) => { { value: [undefined, 'value'], icon: [undefined, ], - dir: ['ltr', 'rtl'], + $direction: true, }, { value: ['value'], diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e-playground.tsx b/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e-playground.tsx index c15d130387..b311b8d37c 100644 --- a/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e-playground.tsx +++ b/packages/vkui/src/components/SegmentedControl/SegmentedControl.e2e-playground.tsx @@ -39,7 +39,7 @@ export const SegmentedControlPlayground = (props: ComponentPlaygroundProps) => { ], ], defaultValue: ['fb'], - dir: ['ltr', 'rtl'], + $direction: true, }, ]} > diff --git a/packages/vkui/src/components/Slider/Slider.e2e-playground.tsx b/packages/vkui/src/components/Slider/Slider.e2e-playground.tsx index df96dee2f7..a98a460037 100644 --- a/packages/vkui/src/components/Slider/Slider.e2e-playground.tsx +++ b/packages/vkui/src/components/Slider/Slider.e2e-playground.tsx @@ -16,7 +16,7 @@ export const SliderPlayground = (props: ComponentPlaygroundProps) => { min: [-10], max: [10], value: [0], - dir: ['ltr', 'rtl'], + $direction: true, }, { multiple: [true], @@ -25,7 +25,7 @@ export const SliderPlayground = (props: ComponentPlaygroundProps) => { { multiple: [true], defaultValue: [withLabel<[number, number]>([30, 90], '30 - 90')], - dir: ['rtl'], + $direction: 'rtl', }, { defaultValue: [50], diff --git a/packages/vkui/src/components/Slider/__image_snapshots__/slider-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Slider/__image_snapshots__/slider-android-chromium-dark-1-snap.png index 18f688d5af..c2bece8191 100644 --- a/packages/vkui/src/components/Slider/__image_snapshots__/slider-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Slider/__image_snapshots__/slider-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:e1bcd3485df0ff3f803056b369f1937807bd2bd589ecd3393ac1bd0dcda1bf8d -size 47901 +oid sha256:b87f0bd1e100b782339448ea4d0661aba1f72f2b11f1d43afc85d0e8bcdde2cc +size 48173 diff --git a/packages/vkui/src/components/Slider/__image_snapshots__/slider-android-chromium-light-1-snap.png b/packages/vkui/src/components/Slider/__image_snapshots__/slider-android-chromium-light-1-snap.png index f0b791f799..a93f39415c 100644 --- a/packages/vkui/src/components/Slider/__image_snapshots__/slider-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Slider/__image_snapshots__/slider-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:04901a4771bf968908469acbbf22fb19be95f74f08c855c6db40ac6103013aae -size 44921 +oid sha256:14ce609348c655064859f5014fe7c8431ec33f059551a8ba2eb66ab433cc9990 +size 44928 diff --git a/packages/vkui/src/components/Slider/__image_snapshots__/slider-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/Slider/__image_snapshots__/slider-ios-webkit-dark-1-snap.png index d8b6fff0c5..b69f3be1f8 100644 --- a/packages/vkui/src/components/Slider/__image_snapshots__/slider-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/Slider/__image_snapshots__/slider-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d6326656683ddaf7d7628ff7f9897cc715c79da22f3f89a2f7547882cf7a1b3d -size 57435 +oid sha256:66086fa27571f3b11eff7fc7f93c7205f6352849533cd04c4338d04f8701f76c +size 57679 diff --git a/packages/vkui/src/components/Slider/__image_snapshots__/slider-ios-webkit-light-1-snap.png b/packages/vkui/src/components/Slider/__image_snapshots__/slider-ios-webkit-light-1-snap.png index 78c341a5a1..3b823e617c 100644 --- a/packages/vkui/src/components/Slider/__image_snapshots__/slider-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/Slider/__image_snapshots__/slider-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:3c47bbd2fd75ab3facc7158eeed89009352183863be3bf08457a54813a9d0579 -size 60571 +oid sha256:f805468e56a2f56cd73262646d8bbfeee46dc9649c950ba97632be2c285c5784 +size 60725 diff --git a/packages/vkui/src/components/Snackbar/Snackbar.e2e-playground.tsx b/packages/vkui/src/components/Snackbar/Snackbar.e2e-playground.tsx index 6ada11f0b0..6fe9418ae4 100644 --- a/packages/vkui/src/components/Snackbar/Snackbar.e2e-playground.tsx +++ b/packages/vkui/src/components/Snackbar/Snackbar.e2e-playground.tsx @@ -39,6 +39,7 @@ const SnackBarCommon = ({ propSets={[ { placement: ['top-start', 'top', 'top-end', 'bottom-start', 'bottom', 'bottom-end'], + $direction: dir, }, ]} > diff --git a/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-android-chromium-dark-1-snap.png b/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-android-chromium-dark-1-snap.png index 93e083503b..1bf2053ed4 100644 --- a/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:864b3c43e4189a2709fba564c13f9823744e746b043dfb8896620446edbb40e3 -size 32693 +oid sha256:94030d01c7b8b278a882bf3d6625ed1df84b68a67c25b7e25834493ce147e3d4 +size 32400 diff --git a/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-android-chromium-light-1-snap.png b/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-android-chromium-light-1-snap.png index 1fb77e3ef3..5199b6f24f 100644 --- a/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7995d3492f2f7946d22f53e7708499a6a462981f9418d474efa3bb6ec24e6f5f -size 35826 +oid sha256:6a4179f8cac475419b60a22cb1539ec9c7792e6a9a927a036754d207c9dd24cf +size 36063 diff --git a/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-vkcom-chromium-dark-1-snap.png index 4075536cce..d7fb66a78c 100644 --- a/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:12b49585b00aed6fd5c1bee4b09bd5783e87b71106419c64ce09f6dcd82a18c9 -size 18328 +oid sha256:608d3753c0797fede1b94a539243c2d2360a5cea95fcdf65870800285f624420 +size 17922 diff --git a/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-vkcom-chromium-light-1-snap.png index 7e6462e525..c035d48eb7 100644 --- a/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/Snackbar/__image_snapshots__/snackbar-placement-dir-rtl-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6de6f0db32268bfb9e39e339b4654fd6959bacbc17e3b6b795bc55a47c97ee5c -size 20486 +oid sha256:160058380c1065e9159167a726543516cd6a48aa983b6734f209ec2d030190a4 +size 20626 diff --git a/packages/vkui/src/components/Switch/Switch.e2e-playground.tsx b/packages/vkui/src/components/Switch/Switch.e2e-playground.tsx index 968bc81908..325add1082 100644 --- a/packages/vkui/src/components/Switch/Switch.e2e-playground.tsx +++ b/packages/vkui/src/components/Switch/Switch.e2e-playground.tsx @@ -9,7 +9,7 @@ export const SwitchPlayground = (props: ComponentPlaygroundProps) => { { checked: [true, false], disabled: [true, false], - dir: ['ltr', 'rtl'], + $direction: true, }, { $adaptivity: 'y', diff --git a/packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx b/packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx index 9c827de165..c502dded1d 100644 --- a/packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx +++ b/packages/vkui/src/components/UsersStack/UsersStack.e2e-playground.tsx @@ -32,7 +32,7 @@ export const UsersStackPlayground = (props: ComponentPlaygroundProps) => { photos: [threeImage], }, { - dir: ['rtl'], + $direction: true, children: ['Понравилось Анне и ещё XX людям'], size: ['s', 'm', 'l'], photos: [threeImage, fourImage], diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-android-chromium-dark-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-android-chromium-dark-1-snap.png index 3871fc86f9..2c312628a5 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-android-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-android-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c0b2b4014c33b3cd8cdaf51ca370376ff8df58e0f44892e4d269aebaf1000029 -size 452267 +oid sha256:2e84fa3f30b78787dbe5d816c3176afd071ee741e94ecdf2202bfa5bcb02a22f +size 507633 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-android-chromium-light-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-android-chromium-light-1-snap.png index 9ec665cfb7..7994bf5376 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-android-chromium-light-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-android-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c34893ec042ee0a3f31e0ea4c4a04802654e5ead0d872ae59b36715ac8399526 -size 426656 +oid sha256:ababcf8d5cdb6534bf3f7db2628d9b874790bf1b202e5f84ed97f37c99051a81 +size 477642 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-ios-webkit-dark-1-snap.png index 947f7f999b..02b1d3bab1 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-ios-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-ios-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:21d40089e80d7825446823306229181643ae624b0e299d461f2d7d72c859a7ee -size 642744 +oid sha256:b094df2f45bc37b842ffa0cece956b78742848ad48cd71cfebd4cd9be1ba323d +size 721918 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-ios-webkit-light-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-ios-webkit-light-1-snap.png index 6b759554cd..40b47bce62 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-ios-webkit-light-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-ios-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:eb6f16a068528b4c406b5996ea1c4b35d8940c1face18d6e6f45220504700cee -size 626777 +oid sha256:580a9d2a8ffa9d507152bccd5cb137d1df96ecdea2cb09341ffc7d43d507e058 +size 702162 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-chromium-dark-1-snap.png index 100557bd2e..e9b77612df 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-chromium-dark-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-chromium-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:d9d326efdf87b9599bd82a12e0d03f83e3de220531a3514654225486f16c00f1 -size 412804 +oid sha256:9374b6e714199679f36158bb236faaf9ae73dbc4a21cd0a1ee369408eff3fc69 +size 465987 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-chromium-light-1-snap.png index ec89efbd84..87bc05b536 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-chromium-light-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-chromium-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7eeb3f1f26e90847e88a4be1a8a486219f0ee1ce7b93dc1aa1111e6be76ed6d4 -size 403971 +oid sha256:38a725ae3ec3440af1417dfcf21bb4dda6d41270e72cb9f193d26af55a417828 +size 455921 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-firefox-dark-1-snap.png index 5320c3eff5..4de1b14748 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-firefox-dark-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-firefox-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6be5017d3aa572775aea4b5873b3d734974a566529f5f57bdba3020c19f10a2c -size 526655 +oid sha256:1d829ae3859b94ab04c6ea63c98a390acb139417974ad07ba977d397e510d141 +size 590924 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-firefox-light-1-snap.png index 82871d0f6b..17898b4492 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-firefox-light-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-firefox-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:27489092102bd6add69903e65fc4e649170754f60064f16a817eaf725a472d36 -size 550435 +oid sha256:69148afb83d05de1ef65aafd87d919fe1fb437f178cbf46bc714ec25e723c929 +size 618892 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-webkit-dark-1-snap.png index 8c8fb0d07c..654e2e4e07 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-webkit-dark-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-webkit-dark-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8c96f264caedef02828c0340a3a95d3dec2cdbdfc74140123498c58f8b07c32e -size 612504 +oid sha256:551743b3909114f1dee49e9844f5289216aac0e5595da89fac521c5570782d08 +size 688589 diff --git a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-webkit-light-1-snap.png index 5812bb0e79..4fbe5ba69e 100644 --- a/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/UsersStack/__image_snapshots__/usersstack-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a5d1a20f60de939d9995129a3aa5e05ed326c403df71bb522ad7e0fe7bf18d4a -size 603412 +oid sha256:d3ee1629d94816c52bd8d77f8834ffc11dc4d6d929811c623508c3be1fffa092 +size 678192 diff --git a/packages/vkui/src/testing/e2e/ComponentPlayground.tsx b/packages/vkui/src/testing/e2e/ComponentPlayground.tsx index 70d227c8fa..fee4441ef9 100644 --- a/packages/vkui/src/testing/e2e/ComponentPlayground.tsx +++ b/packages/vkui/src/testing/e2e/ComponentPlayground.tsx @@ -6,13 +6,17 @@ import { DirectionProvider } from '../../components/DirectionProvider/DirectionP import { BREAKPOINTS } from '../../lib/adaptivity'; import type { ColorSchemeType } from '../../lib/colorScheme'; import { mapObject } from '../../lib/object'; -import { type Direction } from '../../lib/direction'; import type { PlatformType } from '../../lib/platform'; import { AppDefaultWrapper, type AppDefaultWrapperProps } from './AppDefaultWrapper'; import { TEST_CLASS_NAMES } from './constants'; import { getAdaptivePxWidth, isCustomValueWithLabel, multiCartesian, prettyProps } from './utils'; -export interface InternalComponentPlaygroundProps> { +type DefaultProps = Omit< + React.ComponentProps, + 'sizeX' | 'sizeY' | 'dir' +>; + +export interface InternalComponentPlaygroundProps> { isFixedComponent?: boolean; platform: PlatformType; colorScheme: ColorSchemeType; @@ -30,9 +34,7 @@ export type ComponentPlaygroundProps = Pick< /** * Рендерит переданный в `children` компонент с разными параметрами (`propSets`). */ -export const ComponentPlayground = < - Props extends React.ComponentProps = React.ComponentProps<'div'>, ->({ +export const ComponentPlayground = = DefaultProps<'div'>>({ isFixedComponent = false, colorScheme, platform, @@ -75,17 +77,20 @@ export const ComponentPlayground = < {multiCartesian(propSets, { adaptive: !isVKCOM }).map((props, i) => { const clonedAdaptivityProviderProps = { ...adaptivityProviderProps }; - if (props.sizeX) { - clonedAdaptivityProviderProps.sizeX = props.sizeX; + const { sizeX, sizeY, dir = 'ltr', ...componentProps } = props; + + if (sizeX) { + clonedAdaptivityProviderProps.sizeX = sizeX; } - if (props.sizeY) { - clonedAdaptivityProviderProps.sizeY = props.sizeY; + if (sizeY) { + clonedAdaptivityProviderProps.sizeY = sizeY; } - const mappedProps = mapObject(props, (v) => (isCustomValueWithLabel(v) ? v.value : v)); + const mappedProps: Props = mapObject(componentProps, (v) => + isCustomValueWithLabel(v) ? v.value : v, + ); - const dir = props.dir as Direction; return ( {isFixedComponent ? null : ( diff --git a/packages/vkui/src/testing/e2e/utils.tsx b/packages/vkui/src/testing/e2e/utils.tsx index 49daa4821b..e35d25f7ce 100644 --- a/packages/vkui/src/testing/e2e/utils.tsx +++ b/packages/vkui/src/testing/e2e/utils.tsx @@ -5,6 +5,7 @@ import type { } from '../../components/AdaptivityProvider/AdaptivityContext'; import { getValueByKey } from '../../helpers/getValueByKey'; import { BREAKPOINTS, ViewWidth, type ViewWidthType } from '../../lib/adaptivity'; +import { type Direction } from '../../lib/direction'; export function getAdaptivePxWidth(viewWidth: ViewWidthType) { switch (viewWidth) { @@ -30,9 +31,13 @@ class CustomValueWithLabel { type DecoratedPropValue = T | CustomValueWithLabel; +type DirectionProps = { dir: Direction }; + type AdaptivityFlag = boolean | 'x' | 'y'; +type DirectionFlag = boolean | Direction; type PropDesc = { [K in keyof Props]?: Array> } & { $adaptivity?: AdaptivityFlag; + $direction?: DirectionFlag; }; function getAdaptivity(adaptivity?: AdaptivityFlag) { @@ -46,16 +51,32 @@ function getAdaptivity(adaptivity?: AdaptivityFlag) { return extra; } -type TestProps = Array; +function getDirection(directionFlag?: DirectionFlag): PropDesc | undefined { + const dir: PropDesc['dir'] = []; + if (directionFlag && directionFlag !== 'rtl') { + dir.push('ltr'); + } + if (directionFlag && directionFlag !== 'ltr') { + dir.push('rtl'); + } + return dir.length + ? { + dir, + } + : undefined; +} + +type TestProps = Array; type CartesianOptions = { adaptive: boolean }; function cartesian( - { $adaptivity, ...propDesc }: PropDesc, + { $adaptivity, $direction, ...propDesc }: PropDesc, ops: CartesianOptions, ): TestProps { propDesc = { ...propDesc, ...getAdaptivity(ops.adaptive ? $adaptivity : false), + ...getDirection($direction), }; return Object.entries(propDesc).reduce>( (acc, [prop, values]: [string, any]) => { From f6e89194ae58768df4a33201b381f452ceb9ea90 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Tue, 4 Feb 2025 13:34:50 +0300 Subject: [PATCH 03/16] test: fix tests with rtl --- .../SegmentedControl.test.tsx | 9 +++--- .../src/components/Slider/Slider.test.tsx | 30 ++++++++++++------- packages/vkui/src/testing/utils.tsx | 20 ------------- 3 files changed, 24 insertions(+), 35 deletions(-) diff --git a/packages/vkui/src/components/SegmentedControl/SegmentedControl.test.tsx b/packages/vkui/src/components/SegmentedControl/SegmentedControl.test.tsx index 9a126e8b58..df8b04c2bb 100644 --- a/packages/vkui/src/components/SegmentedControl/SegmentedControl.test.tsx +++ b/packages/vkui/src/components/SegmentedControl/SegmentedControl.test.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; -import { baselineComponent, mockRtlDirection } from '../../testing/utils'; +import { baselineComponent } from '../../testing/utils'; +import { DirectionProvider } from '../DirectionProvider/DirectionProvider'; import { SegmentedControl, type SegmentedControlOptionInterface, @@ -174,8 +175,6 @@ describe('SegmentedControl', () => { }); describe('check rtl', () => { - mockRtlDirection(); - it('check rtl', () => { const options: SegmentedControlOptionInterface[] = [ { label: 'vk', value: 'vk', id: 'vk' }, @@ -184,7 +183,9 @@ describe('SegmentedControl', () => { ]; const SegmentedControlTabsTest = (props: Omit) => ( - + + + ); render(); expect(ctrl()).toHaveClass(styles.rtl); diff --git a/packages/vkui/src/components/Slider/Slider.test.tsx b/packages/vkui/src/components/Slider/Slider.test.tsx index 0be9ee1675..3b985181d3 100644 --- a/packages/vkui/src/components/Slider/Slider.test.tsx +++ b/packages/vkui/src/components/Slider/Slider.test.tsx @@ -7,10 +7,10 @@ import { baselineComponent, fakeTimers, mockRect, - mockRtlDirection, userEvent, waitForFloatingPosition, } from '../../testing/utils'; +import { DirectionProvider } from '../DirectionProvider/DirectionProvider'; import type { CustomTouchEvent } from '../Touch/Touch'; import { Slider as SliderBase, type SliderMultipleProps, type SliderProps } from './Slider'; @@ -241,10 +241,12 @@ describe(Slider, () => { }); describe('check rtl view', () => { - mockRtlDirection(); - it('moves start', async () => { - render(); + render( + + + , + ); const slider = screen.getByRole('slider'); fireEvent.mouseDown(slider); @@ -260,12 +262,14 @@ describe(Slider, () => { it('moves start (multiple)', async () => { render( - , + + + , ); const startSlider = screen.getByTestId('startSlider'); const endSlider = screen.getByTestId('endSlider'); @@ -284,7 +288,11 @@ describe(Slider, () => { }); it('moves end (multiple)', async () => { - render(); + render( + + + , + ); const [startSlider, endSlider] = screen.getAllByRole('slider'); fireEvent.mouseDown(endSlider); diff --git a/packages/vkui/src/testing/utils.tsx b/packages/vkui/src/testing/utils.tsx index ba609e0c3c..e417977c65 100644 --- a/packages/vkui/src/testing/utils.tsx +++ b/packages/vkui/src/testing/utils.tsx @@ -44,26 +44,6 @@ export function fakeTimers() { }); } -export function mockRtlDirection() { - const originalGetComputedStyle = window.getComputedStyle; - - let getComputedStyleMock: ReturnType | null = null; - beforeEach(() => { - /** - * Мокаем получение direction - */ - getComputedStyleMock = jest.spyOn(window, 'getComputedStyle').mockImplementation((e) => { - return { - ...originalGetComputedStyle(e), - direction: 'rtl', - }; - }); - }); - afterEach(() => { - getComputedStyleMock.mockRestore(); - }); -} - export const imgOnlyAttributes: ImgOnlyAttributes = { alt: 'test', crossOrigin: 'anonymous', From a869e69a3af17f74bf430dec2f105dceae7fb087 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Tue, 4 Feb 2025 14:09:36 +0300 Subject: [PATCH 04/16] feat(DirectionProvider): add story --- .../DirectionProvider.stories.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 packages/vkui/src/components/DirectionProvider/DirectionProvider.stories.tsx diff --git a/packages/vkui/src/components/DirectionProvider/DirectionProvider.stories.tsx b/packages/vkui/src/components/DirectionProvider/DirectionProvider.stories.tsx new file mode 100644 index 0000000000..fc13e098ff --- /dev/null +++ b/packages/vkui/src/components/DirectionProvider/DirectionProvider.stories.tsx @@ -0,0 +1,34 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; +import { CanvasFullLayout, DisableCartesianParam } from '../../storybook/constants'; +import { Div } from '../Div/Div'; +import { Flex } from '../Flex/Flex'; +import { DirectionProvider, type DirectionProviderProps } from './DirectionProvider'; + +const story: Meta = { + title: 'Service/DirectionProvider', + component: DirectionProvider, + parameters: { ...CanvasFullLayout, ...DisableCartesianParam }, +}; + +export default story; + +const Fixture = () => { + const dir = useConfigDirection(); + + return ( + +
    1
    +
    2
    +
    3
    +     + ); +}; + +export const Playground: StoryObj = { + render: (args) => ( + + + + ), +}; From 459b6e8471c7501dd4f6e54239abe82240e95b78 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Tue, 4 Feb 2025 15:21:17 +0300 Subject: [PATCH 05/16] doc(DirectionProvider): add documentation --- .../components/DirectionProvider/Readme.md | 30 +++++++++++++++++++ styleguide/config.js | 1 + 2 files changed, 31 insertions(+) create mode 100644 packages/vkui/src/components/DirectionProvider/Readme.md diff --git a/packages/vkui/src/components/DirectionProvider/Readme.md b/packages/vkui/src/components/DirectionProvider/Readme.md new file mode 100644 index 0000000000..bce9d5ed64 --- /dev/null +++ b/packages/vkui/src/components/DirectionProvider/Readme.md @@ -0,0 +1,30 @@ +Позволяет переопределить направление контента для определенной части приложения + +> ⚠️ Всегда добавляйте атрибут `dir` к корневому элементу внутри `DirectionProvider`. Это необходимо для корректной работы логических CSS-свойств. +> +> Без указания атрибута `dir` браузер не сможет правильно интерпретировать логические свойства, что приведет к некорректному отображению вёрстки. + +## Пример использования + +```jsx static +function MyContent() { + const direction = useDirection(); + + return ( +
    +

    Контент с {direction === 'rtl' ? 'RTL' : 'LTR'} направлением

    +
    + Отступ слева для LTR и справа для RTL +
    +
    + ); +} + +function App() { + return ( + + + + ); +} +``` diff --git a/styleguide/config.js b/styleguide/config.js index 197a15151c..7b2d3767f0 100644 --- a/styleguide/config.js +++ b/styleguide/config.js @@ -361,6 +361,7 @@ const baseConfig = { `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/Touch/Touch.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/PlatformProvider/PlatformProvider.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/ColorSchemeProvider/ColorSchemeProvider.tsx`, + `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/DirectionProvider/DirectionProvider.tsx`, `../${VKUI_PACKAGE.PATHS.COMPONENTS_DIR}/VisuallyHidden/VisuallyHidden.tsx`, ], }, From 568dd60a3038dfaed42adfbe01cad94deee77466 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Tue, 4 Feb 2025 15:31:53 +0300 Subject: [PATCH 06/16] fix(Calendar,CalendarRange): remove context --- .../vkui/src/components/Calendar/Calendar.tsx | 151 +++++++------- .../components/CalendarDay/CalendarDay.tsx | 4 +- .../CalendarHeader/CalendarHeader.tsx | 4 +- .../CalendarRange/CalendarRange.tsx | 184 ++++++++---------- 4 files changed, 154 insertions(+), 189 deletions(-) diff --git a/packages/vkui/src/components/Calendar/Calendar.tsx b/packages/vkui/src/components/Calendar/Calendar.tsx index 467e5c98ce..cd48e1b52a 100644 --- a/packages/vkui/src/components/Calendar/Calendar.tsx +++ b/packages/vkui/src/components/Calendar/Calendar.tsx @@ -3,12 +3,7 @@ import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; import { isSameDay, isSameMonth } from 'date-fns'; -import { - CalendarDirectionContext, - type CalendarDirectionContextProps, -} from '../../context/CalendarDirectionContext'; import { useCalendar } from '../../hooks/useCalendar'; -import { useConfigDirection } from '../../hooks/useConfigDirection'; import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar'; import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect'; import { warnOnce } from '../../lib/warnOnce'; @@ -173,7 +168,6 @@ export const Calendar = ({ minDateTime, maxDateTime, }); - const direction = useConfigDirection(); useIsomorphicLayoutEffect(() => { if (value) { @@ -221,83 +215,74 @@ export const Calendar = ({ [value], ); - const directionContextValue = React.useMemo( - () => ({ - direction, - }), - [direction], - ); - return ( - - - - - {enableTime && value && size !== 's' && ( -
    - -
    - )} -     -     + + + + {enableTime && value && size !== 's' && ( +
    + +
    + )} +     ); }; diff --git a/packages/vkui/src/components/CalendarDay/CalendarDay.tsx b/packages/vkui/src/components/CalendarDay/CalendarDay.tsx index 09a43050a7..efceb26b62 100644 --- a/packages/vkui/src/components/CalendarDay/CalendarDay.tsx +++ b/packages/vkui/src/components/CalendarDay/CalendarDay.tsx @@ -2,7 +2,6 @@ import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; -import { useCalendarDirectionContext } from '../../context/CalendarDirectionContext'; import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from '../../hooks/useKeyboardInputTracker'; import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext'; import { Tappable } from '../Tappable/Tappable'; @@ -67,9 +66,8 @@ export const CalendarDay: React.FC = React.memo( testId, ...restProps }: CalendarDayProps) => { - const { locale } = useConfigProvider(); + const { locale, direction } = useConfigProvider(); const ref = React.useRef(null); - const { direction } = useCalendarDirectionContext(); const onClick = React.useCallback(() => onChange(day), [day, onChange]); const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]); const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]); diff --git a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx index a2624a3925..98964fce3b 100644 --- a/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx +++ b/packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx @@ -9,7 +9,6 @@ import { } from '@vkontakte/icons'; import { classNames } from '@vkontakte/vkjs'; import { addMonths, setMonth, setYear, subMonths } from 'date-fns'; -import { useCalendarDirectionContext } from '../../context/CalendarDirectionContext'; import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, getMonths, getYears } from '../../lib/calendar'; import type { HTMLAttributesWithRootRef } from '../../types'; import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider'; @@ -104,8 +103,7 @@ export const CalendarHeader = ({ nextMonthButtonTestId, ...restProps }: CalendarHeaderProps): React.ReactNode => { - const { locale } = useConfigProvider(); - const { direction } = useCalendarDirectionContext(); + const { locale, direction } = useConfigProvider(); const onMonthsChange = React.useCallback( (_: ChangeEvent, newValue: SelectProps['value']) => diff --git a/packages/vkui/src/components/CalendarRange/CalendarRange.tsx b/packages/vkui/src/components/CalendarRange/CalendarRange.tsx index 5c2cc86bbe..822ad52125 100644 --- a/packages/vkui/src/components/CalendarRange/CalendarRange.tsx +++ b/packages/vkui/src/components/CalendarRange/CalendarRange.tsx @@ -12,12 +12,7 @@ import { startOfDay, subMonths, } from 'date-fns'; -import { - CalendarDirectionContext, - type CalendarDirectionContextProps, -} from '../../context/CalendarDirectionContext'; import { useCalendar } from '../../hooks/useCalendar'; -import { useConfigDirection } from '../../hooks/useConfigDirection'; import { isFirstDay, isLastDay, navigateDate } from '../../lib/calendar'; import type { HTMLAttributesWithRootRef } from '../../types'; import { @@ -119,8 +114,6 @@ export const CalendarRange = ({ isYearDisabled, } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate }); - const direction = useConfigDirection(); - const [hintedDate, setHintedDate] = React.useState(); const secondViewDate = addMonths(viewDate, 1); @@ -222,99 +215,90 @@ export const CalendarRange = ({ [setViewDate], ); - const directionContextValue = React.useMemo( - () => ({ - direction, - }), - [direction], - ); - return ( - - -
    - - -
    -
    - - -
    -     -     + +
    + + +
    +
    + + +
    +     ); }; From 31bfedca5b3daf7828da07364f1a1eb743e72268 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Tue, 4 Feb 2025 16:04:02 +0300 Subject: [PATCH 07/16] fix: run prettier --- packages/vkui/src/components/DirectionProvider/Readme.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/vkui/src/components/DirectionProvider/Readme.md b/packages/vkui/src/components/DirectionProvider/Readme.md index bce9d5ed64..36b41bab6d 100644 --- a/packages/vkui/src/components/DirectionProvider/Readme.md +++ b/packages/vkui/src/components/DirectionProvider/Readme.md @@ -13,9 +13,7 @@ function MyContent() { return (

    Контент с {direction === 'rtl' ? 'RTL' : 'LTR'} направлением

    -
    - Отступ слева для LTR и справа для RTL -
    +
    Отступ слева для LTR и справа для RTL
    ); } From 9d84b68998e0962f0817b89c45d7c967b1508e3a Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Tue, 4 Feb 2025 16:17:30 +0300 Subject: [PATCH 08/16] test: update screenshot --- .../panelheadercontext-vkcom-webkit-light-1-snap.png | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png index 3239889307..7c40e3e869 100644 --- a/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png +++ b/packages/vkui/src/components/PanelHeaderContext/__image_snapshots__/panelheadercontext-vkcom-webkit-light-1-snap.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:9bf436f58a1d5d07f00e3ac793ab2134c46c3a70af5b058ae233457a3ab9b9bf -size 12275 +oid sha256:9e6936d0b7316407b55bb0cd019509469b97b264103b4771f1d8d4b847d28ec5 +size 12273 From b437947b43df23df6f977766784ccfb3176c34ef Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Tue, 11 Feb 2025 12:42:26 +0300 Subject: [PATCH 09/16] doc(ConfigProvider): add info about direction in props --- .../components/ConfigProvider/ConfigProviderContext.tsx | 9 ++++++++- packages/vkui/src/components/ConfigProvider/Readme.md | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx b/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx index 9c03955db4..5d3679790b 100644 --- a/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx +++ b/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx @@ -73,7 +73,14 @@ export interface ConfigProviderContextInterface { * Строка с языковой меткой BCP 47 */ locale: string; - + /** + * Направление контента. + * + * При использовании определенного значения, важно установить атрибут `dir` с таким же значением либо на дочерний элемент, + * либо на все страницу в целом. + * + * @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы + */ direction: Direction; } diff --git a/packages/vkui/src/components/ConfigProvider/Readme.md b/packages/vkui/src/components/ConfigProvider/Readme.md index 0e9fefadf3..172c94c66b 100644 --- a/packages/vkui/src/components/ConfigProvider/Readme.md +++ b/packages/vkui/src/components/ConfigProvider/Readme.md @@ -4,4 +4,4 @@ > > Обратите внимание, что в вашем приложении должен быть только один `ConfigProvider`. Если вам необходимо > переопределить какой-то из параметров, то это можно сделать с помощью [`PlatformProvider`](#/PlatformProvider), -> [`ColorSchemeProvider`](#/ColorSchemeProvider) или [`LocaleProvider`](#/LocaleProvider) +> [`ColorSchemeProvider`](#/ColorSchemeProvider), [`LocaleProvider`](#/LocaleProvider) или [`DirectionProvider`](#/DirectionProvider) From b5db80c2bc71884111cd3f5509586147e5048d09 Mon Sep 17 00:00:00 2001 From: Eldar <61377022+EldarMuhamethanov@users.noreply.github.com> Date: Tue, 11 Feb 2025 16:12:04 +0300 Subject: [PATCH 10/16] doc: add @since to doc Co-authored-by: Inomdzhon Mirdzhamolov --- .../vkui/src/components/DirectionProvider/DirectionProvider.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx b/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx index b6662b577f..ca26470cb6 100644 --- a/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx +++ b/packages/vkui/src/components/DirectionProvider/DirectionProvider.tsx @@ -10,6 +10,7 @@ export interface DirectionProviderProps { /** * Компонент, прокидывающий направление контента * @see https://vkcom.github.io/VKUI/#/DirectionProvider + * @since 7.2.0 */ export function DirectionProvider({ value, children }: DirectionProviderProps): React.ReactNode { return {children}; From dc17935213bb032946d217e4040d01fa0a405443 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Wed, 12 Feb 2025 11:49:22 +0300 Subject: [PATCH 11/16] fix(Gallery): replace useDirection to useConfigDirection --- .../components/CarouselBase/CarouselBase.tsx | 6 +- .../src/components/Gallery/Gallery.test.tsx | 60 +++++++++---------- .../components/ScrollArrow/ScrollArrow.tsx | 8 +-- 3 files changed, 35 insertions(+), 39 deletions(-) diff --git a/packages/vkui/src/components/CarouselBase/CarouselBase.tsx b/packages/vkui/src/components/CarouselBase/CarouselBase.tsx index 234e90231b..f3e548b933 100644 --- a/packages/vkui/src/components/CarouselBase/CarouselBase.tsx +++ b/packages/vkui/src/components/CarouselBase/CarouselBase.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import { classNames } from '@vkontakte/vkjs'; import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer'; -import { useDirection } from '../../hooks/useDirection'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import { useExternRef } from '../../hooks/useExternRef'; import { useMutationObserver } from '../../hooks/useMutationObserver'; import { useResizeObserver } from '../../hooks/useResizeObserver'; @@ -71,10 +71,10 @@ export const CarouselBase = ({ }: BaseGalleryProps): React.ReactNode => { const slidesStore = React.useRef>({}); const slidesManager = React.useRef(SLIDES_MANAGER_STATE); - const [directionRef, textDirection = 'ltr'] = useDirection(); + const textDirection = useConfigDirection(); const isRtl = textDirection === 'rtl'; - const rootRef = useExternRef(getRootRef, directionRef); + const rootRef = useExternRef(getRootRef); const viewportRef = useExternRef(getRef); const layerRef = React.useRef(null); const animationFrameRef = React.useRef | null>(null); diff --git a/packages/vkui/src/components/Gallery/Gallery.test.tsx b/packages/vkui/src/components/Gallery/Gallery.test.tsx index 73c94e51d4..276dfe0c0f 100644 --- a/packages/vkui/src/components/Gallery/Gallery.test.tsx +++ b/packages/vkui/src/components/Gallery/Gallery.test.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import { fireEvent, render, screen } from '@testing-library/react'; import { noop } from '@vkontakte/vkjs'; -import { baselineComponent, mockRtlDirection, setNodeEnv } from '../../testing/utils'; +import { baselineComponent, setNodeEnv } from '../../testing/utils'; import type { AlignType } from '../../types'; import { ANIMATION_DURATION } from '../CarouselBase/constants'; import { revertRtlValue } from '../CarouselBase/helpers'; import { type BaseGalleryProps } from '../CarouselBase/types'; +import { DirectionProvider } from '../DirectionProvider/DirectionProvider'; import { Gallery } from './Gallery'; const mockRAF = () => { @@ -160,33 +161,34 @@ const setup = ({ }; const Fixture = ({ slideIndex }: { slideIndex: number }) => ( - `slide-${index + 1}`} - bulletTestId={(index, active) => (active ? `bullet-${index}-active` : `bullet-${index}`)} - prevArrowTestId="prev-arrow" - nextArrowTestId="next-arrow" - dir={isRtl ? 'rtl' : 'ltr'} - > - {Array.from({ length: numberOfSlides }).map((_v, index) => ( - mockSlideData(e, index)}> - {index + 1} - - ))} - + + `slide-${index + 1}`} + bulletTestId={(index, active) => (active ? `bullet-${index}-active` : `bullet-${index}`)} + prevArrowTestId="prev-arrow" + nextArrowTestId="next-arrow" + > + {Array.from({ length: numberOfSlides }).map((_v, index) => ( + mockSlideData(e, index)}> + {index + 1} + + ))} + + ); const component = render(); @@ -766,8 +768,6 @@ describe('Gallery', () => { }); describe('check correct working with rtl direction', () => { - mockRtlDirection(); - it('check max and min restrictions', () => { const onChange = jest.fn(); const onDragStart = jest.fn(); diff --git a/packages/vkui/src/components/ScrollArrow/ScrollArrow.tsx b/packages/vkui/src/components/ScrollArrow/ScrollArrow.tsx index 99f2f16d50..7a7d9d5b26 100644 --- a/packages/vkui/src/components/ScrollArrow/ScrollArrow.tsx +++ b/packages/vkui/src/components/ScrollArrow/ScrollArrow.tsx @@ -3,8 +3,7 @@ import * as React from 'react'; import { Icon16Chevron, Icon24Chevron } from '@vkontakte/icons'; import { classNames } from '@vkontakte/vkjs'; -import { useDirection } from '../../hooks/useDirection'; -import { useExternRef } from '../../hooks/useExternRef'; +import { useConfigDirection } from '../../hooks/useConfigDirection'; import type { HasRootRef } from '../../types'; import { RootComponent } from '../RootComponent/RootComponent'; import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden'; @@ -68,11 +67,9 @@ export const ScrollArrow = ({ direction, label: labelProp, children = , - getRootRef, ...restProps }: ScrollArrowProps): React.ReactNode => { - const [directionRef, textDirection = 'ltr'] = useDirection(); - const rootRef = useExternRef(getRootRef, directionRef); + const textDirection = useConfigDirection(); const label = labelProp ?? labelDirection[direction]; return ( @@ -85,7 +82,6 @@ export const ScrollArrow = ({ stylesDirection[direction], textDirection === 'rtl' && styles.rtl, )} - getRootRef={rootRef} {...restProps} > {label && {label}} From 4919a8153ecbc58a0a75967e6354163ecc5bc5ca Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Wed, 12 Feb 2025 13:32:11 +0300 Subject: [PATCH 12/16] fix: improve auto detect direction --- packages/vkui/src/hooks/useAutoDetectDirection.ts | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/vkui/src/hooks/useAutoDetectDirection.ts b/packages/vkui/src/hooks/useAutoDetectDirection.ts index 78f46a3973..84f496b0c7 100644 --- a/packages/vkui/src/hooks/useAutoDetectDirection.ts +++ b/packages/vkui/src/hooks/useAutoDetectDirection.ts @@ -1,24 +1,20 @@ import * as React from 'react'; import { type Direction } from '../lib/direction'; import { useDOM } from '../lib/dom'; -import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect'; export const useAutoDetectDirection = (directionProp: Direction): Direction => { - const [direction, setDirection] = React.useState(directionProp || 'ltr'); const { window, document } = useDOM(); - const update = () => { + const getGlobalDir = () => { if (directionProp) { - setDirection(directionProp); - return; + return directionProp; } if (!window || !document) { - return; + return 'ltr'; } const styleDeclaration = window.getComputedStyle(document.body); - setDirection(styleDeclaration.direction as Direction); + return styleDeclaration.direction as Direction; }; - useIsomorphicLayoutEffect(update, [window, document, directionProp]); - return direction; + return React.useMemo(() => getGlobalDir(), [directionProp, document, window]); }; From 885f24143fd2b232b06b8598549132750404b960 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Wed, 12 Feb 2025 13:32:46 +0300 Subject: [PATCH 13/16] fix: improve auto detect direction --- packages/vkui/src/hooks/useAutoDetectDirection.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/vkui/src/hooks/useAutoDetectDirection.ts b/packages/vkui/src/hooks/useAutoDetectDirection.ts index 84f496b0c7..2467476cb1 100644 --- a/packages/vkui/src/hooks/useAutoDetectDirection.ts +++ b/packages/vkui/src/hooks/useAutoDetectDirection.ts @@ -5,7 +5,7 @@ import { useDOM } from '../lib/dom'; export const useAutoDetectDirection = (directionProp: Direction): Direction => { const { window, document } = useDOM(); - const getGlobalDir = () => { + return React.useMemo(() => { if (directionProp) { return directionProp; } @@ -14,7 +14,5 @@ export const useAutoDetectDirection = (directionProp: Direction): Direction => { } const styleDeclaration = window.getComputedStyle(document.body); return styleDeclaration.direction as Direction; - }; - - return React.useMemo(() => getGlobalDir(), [directionProp, document, window]); + }, [directionProp, document, window]); }; From 0f9ce0d3acfe73d2f8405771e575614899fc3264 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Wed, 12 Feb 2025 13:43:17 +0300 Subject: [PATCH 14/16] fix(Gallery): fix screenshot --- packages/vkui/src/components/Gallery/Gallery.e2e-playground.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vkui/src/components/Gallery/Gallery.e2e-playground.tsx b/packages/vkui/src/components/Gallery/Gallery.e2e-playground.tsx index cb9b57379a..9d2aefc1e6 100644 --- a/packages/vkui/src/components/Gallery/Gallery.e2e-playground.tsx +++ b/packages/vkui/src/components/Gallery/Gallery.e2e-playground.tsx @@ -43,7 +43,7 @@ export const GalleryPlayground = (props: ComponentPlaygroundProps) => { align: ['center', 'left'], bullets: ['light', 'dark', false], slideWidth: ['90%', '100%'], - dir: ['ltr', 'rtl'], + $direction: true, }, ]} > From 610cc8108bbf88841b8df7a24f71421df57c7a2a Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Wed, 12 Feb 2025 13:56:32 +0300 Subject: [PATCH 15/16] feat(SSR): add prop direction --- packages/vkui/src/lib/SSR.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/packages/vkui/src/lib/SSR.tsx b/packages/vkui/src/lib/SSR.tsx index 53465be4a0..6464f51f2d 100644 --- a/packages/vkui/src/lib/SSR.tsx +++ b/packages/vkui/src/lib/SSR.tsx @@ -3,23 +3,32 @@ import * as React from 'react'; import { ConfigProviderOverride } from '../components/ConfigProvider/ConfigProviderOverride'; import { type BrowserInfo, computeBrowserInfo } from './browser'; +import { type Direction } from './direction'; import { platform as getPlatform } from './platform'; export interface SSRWrapperProps { userAgent?: string; browserInfo?: BrowserInfo; + direction?: Direction; children?: React.ReactNode; } /** * @see https://vkcom.github.io/VKUI/#/SSR */ -export const SSRWrapper: React.FC = ({ userAgent, browserInfo, children }) => { +export const SSRWrapper: React.FC = ({ + userAgent, + browserInfo, + direction = 'ltr', + children, +}) => { if (!browserInfo && userAgent) { browserInfo = computeBrowserInfo(userAgent); } return ( - {children} + + {children} + ); }; From 550b1944d651384cb75763c73b4112fd1b4d7e70 Mon Sep 17 00:00:00 2001 From: "e.muhamethanov" Date: Fri, 14 Feb 2025 18:54:29 +0300 Subject: [PATCH 16/16] fix: fix autodetect direction --- .../src/components/ConfigProvider/ConfigProviderContext.tsx | 4 ++-- packages/vkui/src/hooks/useAutoDetectDirection.ts | 4 ++-- packages/vkui/src/hooks/useConfigDirection.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx b/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx index 5d3679790b..7b1c26ba65 100644 --- a/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx +++ b/packages/vkui/src/components/ConfigProvider/ConfigProviderContext.tsx @@ -81,7 +81,7 @@ export interface ConfigProviderContextInterface { * * @default Определяется автоматически в зависимости от значения атрибута `dir` установленного на `body` страницы */ - direction: Direction; + direction: Direction | undefined; } export const ConfigProviderContext: React.Context = @@ -94,7 +94,7 @@ export const ConfigProviderContext: React.Context diff --git a/packages/vkui/src/hooks/useAutoDetectDirection.ts b/packages/vkui/src/hooks/useAutoDetectDirection.ts index 2467476cb1..0cf43f78c7 100644 --- a/packages/vkui/src/hooks/useAutoDetectDirection.ts +++ b/packages/vkui/src/hooks/useAutoDetectDirection.ts @@ -2,7 +2,7 @@ import * as React from 'react'; import { type Direction } from '../lib/direction'; import { useDOM } from '../lib/dom'; -export const useAutoDetectDirection = (directionProp: Direction): Direction => { +export const useAutoDetectDirection = (directionProp: Direction | undefined): Direction => { const { window, document } = useDOM(); return React.useMemo(() => { @@ -13,6 +13,6 @@ export const useAutoDetectDirection = (directionProp: Direction): Direction => { return 'ltr'; } const styleDeclaration = window.getComputedStyle(document.body); - return styleDeclaration.direction as Direction; + return (styleDeclaration.direction as Direction) || 'ltr'; }, [directionProp, document, window]); }; diff --git a/packages/vkui/src/hooks/useConfigDirection.ts b/packages/vkui/src/hooks/useConfigDirection.ts index 21ddac288a..1abdd03704 100644 --- a/packages/vkui/src/hooks/useConfigDirection.ts +++ b/packages/vkui/src/hooks/useConfigDirection.ts @@ -4,5 +4,5 @@ import { type Direction } from '../lib/direction'; export function useConfigDirection(): Direction { const { direction } = useConfigProvider(); - return direction; + return direction || 'ltr'; }