feat(Calendar): fix view in rtl (#8068)

* fix(Calendar): fix view in rtl

* fix(Calendar): make rtl with context

* test: add screenshot test to rtl

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

@@ -63,6 +63,10 @@ export const CalendarPlayground = (props: ComponentPlaygroundProps) => {
           minDateTime: [new Date('1970-05-03')],
           maxDateTime: [new Date('1970-05-10')],
         },
+        {
+          value: [new Date('1970-05-05')],
+          dir: ['rtl'],
+        },
       ]}
     >
       {(props: CalendarProps) => <Calendar {...props} />}

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

@@ -3,7 +3,13 @@
 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';
@@ -99,6 +105,7 @@ const warn = warnOnce('Calendar');
  * @see https://vkcom.github.io/VKUI/#/Calendar
  */
 export const Calendar = ({
+  getRootRef,
   value,
   onChange,
   disablePast,
@@ -167,6 +174,8 @@ export const Calendar = ({
     minDateTime,
     maxDateTime,
   });
+  const [directionRef, textDirection = 'ltr'] = useDirection();
+  const rootRef = useExternRef(directionRef, getRootRef);
 
   useIsomorphicLayoutEffect(() => {
     if (value) {
@@ -214,70 +223,83 @@ export const Calendar = ({
     [value],
   );
 
+  const directionContextValue = React.useMemo<CalendarDirectionContextProps>(
+    () => ({
+      direction: textDirection,
+    }),
+    [textDirection],
+  );
+
   return (
-    <RootComponent {...props} baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}>
-      <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 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>
   );
 };

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

@@ -61,6 +61,10 @@
   transform: translateX(-50%);
 }
 
+.rtl .today .dayNumber::after {
+  transform: translateX(50%);
+}
+
 .today .innerActive .dayNumber::after {
   border-block-end-color: var(--vkui--color_stroke_contrast);
 }

packages/vkui/src/components/CalendarDay/CalendarDay.tsx

@@ -2,6 +2,7 @@
 
 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';
@@ -68,6 +69,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
   }: CalendarDayProps) => {
     const { locale } = 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]);
@@ -104,7 +106,11 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
 
     return (
       <Tappable
-        baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}
+        baseClassName={classNames(
+          styles.host,
+          size === 's' && styles.sizeS,
+          direction === 'rtl' && styles.rtl,
+        )}
         hoverMode={styles.hostHovered}
         activeMode={styles.hostActivated}
         hasActive={false}

packages/vkui/src/components/CalendarHeader/CalendarHeader.tsx

@@ -9,6 +9,7 @@ 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,6 +105,8 @@ export const CalendarHeader = ({
   ...restProps
 }: CalendarHeaderProps): React.ReactNode => {
   const { locale } = useConfigProvider();
+  const { direction } = useCalendarDirectionContext();
+
   const onMonthsChange = React.useCallback(
     (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>
       onChange(setMonth(viewDate, Number(newValue))),
@@ -176,7 +179,7 @@ export const CalendarHeader = ({
             <VisuallyHidden>
               {prevMonthLabel}, {formatter.format(subMonths(viewDate, 1))}
             </VisuallyHidden>
-            {prevMonthIcon}
+            {direction === 'ltr' ? prevMonthIcon : nextMonthIcon}
           </Tappable>
         </AdaptivityProvider>
       )}
@@ -242,7 +245,7 @@ export const CalendarHeader = ({
             <VisuallyHidden>
               {nextMonthLabel}, {formatter.format(addMonths(viewDate, 1))}
             </VisuallyHidden>
-            {nextMonthIcon}
+            {direction === 'ltr' ? nextMonthIcon : prevMonthIcon}
           </Tappable>
         </AdaptivityProvider>
       )}

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

@@ -33,6 +33,10 @@ export const CalendarRangePlayground = (props: ComponentPlaygroundProps) => {
             </span>,
           ],
         },
+        {
+          value: [[new Date('1970-05-05'), new Date('1970-06-05')]],
+          dir: ['rtl'],
+        },
       ]}
     >
       {(props: CalendarRangeProps) => <CalendarRange {...props} />}