feat(DirectionProvider): add direction to ConfigProvider

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<AvatarBadgeWithPresetProps> = ({
   preset = 'online',
   className,
-  getRootRef,
   ...restProps
 }: AvatarBadgeWithPresetProps) => {
-  const [directionRef, textDirection = 'ltr'] = useDirection<HTMLDivElement>();
-  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<AvatarBadgeWithPresetProps> = ({
     <ImageBase.Badge
       background="stroke"
       className={classNames(styles.host, isRtl && styles.rtl, presetClassName, className)}
-      getRootRef={rootRef}
       {...restProps}
     >
       <Icon width={badgeSize} height={badgeSize} />

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 (
-    <ComponentPlayground
+    <ComponentPlayground<CalendarProps>
       {...props}
       propSets={[
         {
@@ -65,7 +65,7 @@ export const CalendarPlayground = (props: ComponentPlaygroundProps) => {
         },
         {
           value: [new Date('1970-05-05')],
-          dir: ['rtl'],
+          $direction: 'rtl',
         },
       ]}
     >

packages/vkui/src/components/Calendar/Calendar.tsx

@@ -3,13 +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 { useDirection } from '../../hooks/useDirection';
-import { useExternRef } from '../../hooks/useExternRef';
 import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
@@ -174,8 +168,6 @@ export const Calendar = ({
     minDateTime,
     maxDateTime,
   });
-  const [directionRef, textDirection = 'ltr'] = useDirection();
-  const rootRef = useExternRef(directionRef, getRootRef);
 
   useIsomorphicLayoutEffect(() => {
     if (value) {
@@ -223,83 +215,74 @@ export const Calendar = ({
     [value],
   );
 
-  const directionContextValue = React.useMemo<CalendarDirectionContextProps>(
-    () => ({
-      direction: textDirection,
-    }),
-    [textDirection],
-  );
-
   return (
-    <CalendarDirectionContext.Provider value={directionContextValue}>
-      <RootComponent
-        {...props}
-        baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}
-        getRootRef={rootRef}
-      >
-        <CalendarHeader
-          viewDate={externalViewDate || viewDate}
-          onChange={setViewDate}
-          onNextMonth={setNextMonth}
-          onPrevMonth={setPrevMonth}
-          disablePickers={disablePickers || size === 's'}
-          className={styles.header}
-          prevMonthLabel={prevMonthLabel}
-          nextMonthLabel={nextMonthLabel}
-          changeMonthLabel={changeMonthLabel}
-          changeYearLabel={changeYearLabel}
-          prevMonthIcon={prevMonthIcon}
-          nextMonthIcon={nextMonthIcon}
-          prevMonthProps={prevMonthProps}
-          nextMonthProps={nextMonthProps}
-          isMonthDisabled={isMonthDisabled}
-          isYearDisabled={isYearDisabled}
-          nextMonthButtonTestId={nextMonthButtonTestId}
-          prevMonthButtonTestId={prevMonthButtonTestId}
-          monthDropdownTestId={monthDropdownTestId}
-          yearDropdownTestId={yearDropdownTestId}
-        />
-        <CalendarDays
-          viewDate={externalViewDate || viewDate}
-          value={value}
-          weekStartsOn={weekStartsOn}
-          isDayFocused={isDayFocused}
-          tabIndex={0}
-          aria-label={changeDayLabel}
-          onKeyDown={handleKeyDown}
-          onDayChange={onDayChange}
-          isDayActive={isDayActive}
-          isDaySelectionStart={isFirstDay}
-          isDaySelectionEnd={isLastDay}
-          isDayDisabled={isDayDisabled}
-          onBlur={resetSelectedDay}
-          showNeighboringMonth={showNeighboringMonth}
-          size={size}
-          dayProps={dayProps}
-          listenDayChangesForUpdate={listenDayChangesForUpdate}
-          renderDayContent={renderDayContent}
-          dayTestId={dayTestId}
-        />
-        {enableTime && value && size !== 's' && (
-          <div className={styles.time}>
-            <CalendarTime
-              value={value}
-              onChange={onChange}
-              onDoneButtonClick={onDoneButtonClick}
-              doneButtonText={doneButtonText}
-              doneButtonDisabled={doneButtonDisabled}
-              doneButtonShow={doneButtonShow}
-              DoneButton={DoneButton}
-              changeHoursLabel={changeHoursLabel}
-              changeMinutesLabel={changeMinutesLabel}
-              isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}
-              minutesTestId={minutesTestId}
-              hoursTestId={hoursTestId}
-              doneButtonTestId={doneButtonTestId}
-            />
-          </div>
-        )}
-      </RootComponent>
-    </CalendarDirectionContext.Provider>
+    <RootComponent
+      {...props}
+      baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}
+      getRootRef={getRootRef}
+    >
+      <CalendarHeader
+        viewDate={externalViewDate || viewDate}
+        onChange={setViewDate}
+        onNextMonth={setNextMonth}
+        onPrevMonth={setPrevMonth}
+        disablePickers={disablePickers || size === 's'}
+        className={styles.header}
+        prevMonthLabel={prevMonthLabel}
+        nextMonthLabel={nextMonthLabel}
+        changeMonthLabel={changeMonthLabel}
+        changeYearLabel={changeYearLabel}
+        prevMonthIcon={prevMonthIcon}
+        nextMonthIcon={nextMonthIcon}
+        prevMonthProps={prevMonthProps}
+        nextMonthProps={nextMonthProps}
+        isMonthDisabled={isMonthDisabled}
+        isYearDisabled={isYearDisabled}
+        nextMonthButtonTestId={nextMonthButtonTestId}
+        prevMonthButtonTestId={prevMonthButtonTestId}
+        monthDropdownTestId={monthDropdownTestId}
+        yearDropdownTestId={yearDropdownTestId}
+      />
+      <CalendarDays
+        viewDate={externalViewDate || viewDate}
+        value={value}
+        weekStartsOn={weekStartsOn}
+        isDayFocused={isDayFocused}
+        tabIndex={0}
+        aria-label={changeDayLabel}
+        onKeyDown={handleKeyDown}
+        onDayChange={onDayChange}
+        isDayActive={isDayActive}
+        isDaySelectionStart={isFirstDay}
+        isDaySelectionEnd={isLastDay}
+        isDayDisabled={isDayDisabled}
+        onBlur={resetSelectedDay}
+        showNeighboringMonth={showNeighboringMonth}
+        size={size}
+        dayProps={dayProps}
+        listenDayChangesForUpdate={listenDayChangesForUpdate}
+        renderDayContent={renderDayContent}
+        dayTestId={dayTestId}
+      />
+      {enableTime && value && size !== 's' && (
+        <div className={styles.time}>
+          <CalendarTime
+            value={value}
+            onChange={onChange}
+            onDoneButtonClick={onDoneButtonClick}
+            doneButtonText={doneButtonText}
+            doneButtonDisabled={doneButtonDisabled}
+            doneButtonShow={doneButtonShow}
+            DoneButton={DoneButton}
+            changeHoursLabel={changeHoursLabel}
+            changeMinutesLabel={changeMinutesLabel}
+            isDayDisabled={minDateTime || maxDateTime ? isDayDisabled : undefined}
+            minutesTestId={minutesTestId}
+            hoursTestId={hoursTestId}
+            doneButtonTestId={doneButtonTestId}
+          />
+        </div>
+      )}
+    </RootComponent>
   );
 };

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<CalendarDayProps> = React.memo(
     testId,
     ...restProps
   }: CalendarDayProps) => {
-    const { locale } = useConfigProvider();
+    const { locale, direction } = useConfigProvider();
     const ref = React.useRef<HTMLElement>(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]);

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<HTMLSelectElement>, newValue: SelectProps['value']) =>

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

@@ -41,7 +41,7 @@ export const CalendarRangePlayground = (props: ComponentPlaygroundProps) => {
         },
         {
           value: [rangeValue],
-          dir: ['rtl'],
+          $direction: 'rtl',
         },
       ]}
     >