@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/AspectRatio/AspectRatio.module.css

@@ -6,10 +6,10 @@
 }
 
 .host::before {
-  content: '';
-  block-size: 0;
   display: block;
+  block-size: 0;
   padding-block-end: calc((1 / var(--vkui_internal--aspect_ratio, 1)) * 100%);
+  content: '';
 }
 
 /* stylelint-disable-next-line selector-max-universal */

package/src/components/Avatar/Avatar.module.css

@@ -50,6 +50,6 @@
   font-family: var(--vkui--font_family_accent);
   font-weight: 600;
   line-height: 1;
-  text-transform: uppercase;
   text-align: center;
+  text-transform: uppercase;
 }

package/src/components/Avatar/AvatarBadge/AvatarBadge.module.css

@@ -1,21 +1,26 @@
 .host {
-  inset-inline-end: 0;
   inset-block-end: 0;
+  inset-inline-end: 0;
 }
 
 .shifted {
-  inset-inline-end: -2px;
   inset-block-end: -2px;
+  inset-inline-end: -2px;
 }
 
 .presetOnline,
 .presetOnlineMobile {
-  inset-inline-end: 14%;
   inset-block-end: 14%;
+  inset-inline-end: 14%;
   color: var(--vkui--color_accent_green);
   transform: translate(50%, 50%);
 }
 
+.rtl.presetOnline,
+.rtl.presetOnlineMobile {
+  transform: translate(-50%, 50%);
+}
+
 /**
  * Перебиваем свойства `ImageBaseBadge` для этих кейсов
  */

package/src/components/Avatar/AvatarBadge/AvatarBadgeWithPreset.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useConfigDirection } from '../../../hooks/useConfigDirection';
 import {
   getBadgeIconSizeByImageBaseSize,
   ImageBase,
@@ -26,6 +27,8 @@ export const AvatarBadgeWithPreset: React.FC<AvatarBadgeWithPresetProps> = ({
   className,
   ...restProps
 }: AvatarBadgeWithPresetProps) => {
+  const direction = useConfigDirection();
+  const isRtl = direction === 'rtl';
   const { size } = React.useContext(ImageBaseContext);
   const badgeSize = getBadgeIconSizeByImageBaseSize(size);
   const isOnlinePreset = preset === 'online';
@@ -35,7 +38,7 @@ export const AvatarBadgeWithPreset: React.FC<AvatarBadgeWithPresetProps> = ({
   return (
     <ImageBase.Badge
       background="stroke"
-      className={classNames(styles.host, presetClassName, className)}
+      className={classNames(styles.host, isRtl && styles.rtl, presetClassName, className)}
       {...restProps}
     >
       <Icon width={badgeSize} height={badgeSize} />

package/src/components/Banner/Banner.module.css

@@ -1,47 +1,47 @@
 .host {
-  isolation: isolate;
-  color: var(--vkui--color_text_primary);
   position: relative;
   display: flex;
   flex-flow: row nowrap;
   align-items: stretch;
   padding: var(--vkui_internal--banner-padding);
+  overflow: hidden;
+  color: var(--vkui--color_text_primary);
   background-color: var(--vkui--color_background_secondary);
   border-radius: var(--vkui--size_border_radius--regular);
-  overflow: hidden;
+  isolation: isolate;
 
   --vkui_internal--banner-padding: 12px;
 }
 
 .host::before {
-  content: '';
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_banner_content);
+  box-sizing: border-box;
   display: block;
   inline-size: 100%;
   block-size: 100%;
+  pointer-events: none;
+  content: '';
   border: var(--vkui--size_border--regular) solid var(--vkui--color_image_border_alpha);
   border-radius: inherit;
-  pointer-events: none;
-  box-sizing: border-box;
-  z-index: var(--vkui_internal--z_index_banner_content);
 }
 
 .before {
   position: relative;
-  margin-inline-end: 12px;
   z-index: var(--vkui_internal--z_index_banner_content);
+  margin-inline-end: 12px;
 }
 
 .content {
   position: relative;
-  flex: 1;
+  z-index: var(--vkui_internal--z_index_banner_content);
   display: flex;
-  justify-content: center;
+  flex: 1;
   flex-direction: column;
+  justify-content: center;
   min-inline-size: 0;
-  z-index: var(--vkui_internal--z_index_banner_content);
 }
 
 .subtitle,
@@ -51,8 +51,8 @@
 
 .bg {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--vkui_internal--z_index_banner_background);
 }
 
@@ -75,16 +75,16 @@
 }
 
 .dismiss {
-  margin-block-start: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
-  margin-inline-end: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
-  align-self: flex-start;
+  z-index: var(--vkui_internal--z_index_banner_hover);
   display: flex;
   flex-flow: row nowrap;
   align-content: center;
   align-items: center;
+  align-self: flex-start;
   justify-content: center;
+  margin-block-start: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
+  margin-inline-end: calc(-1 * (var(--vkui_internal--banner-padding) - 2px));
   color: var(--vkui--color_icon_secondary);
-  z-index: var(--vkui_internal--z_index_banner_hover);
 }
 
 .actions {

package/src/components/Button/Button.module.css

@@ -1,14 +1,14 @@
 .host {
   position: relative;
-  display: inline-block;
   box-sizing: border-box;
-  border: 0;
+  display: inline-block;
+  min-inline-size: var(--vkui--size_button_minimum_width--regular);
+  max-inline-size: 100%;
   min-block-size: var(--vkui--size_button_small_height--compact);
-  margin: 0;
   padding: 0;
+  margin: 0;
+  border: 0;
   border-radius: var(--vkui--size_border_radius--regular);
-  max-inline-size: 100%;
-  min-inline-size: var(--vkui--size_button_minimum_width--regular);
   transition:
     background-color 0.15s ease-out,
     color 0.15s ease-out;
@@ -40,19 +40,19 @@
 
 .stretched {
   display: block;
-  inline-size: 100%;
   flex-grow: 1;
   flex-basis: 0;
+  inline-size: 100%;
 }
 
 .in {
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: center;
   inline-size: 100%;
   min-block-size: inherit;
   text-align: center;
-  box-sizing: border-box;
 }
 
 .alignLeft .in {
@@ -77,10 +77,10 @@
 }
 
 .content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: var(--vkui--font_weight_accent2);
+  white-space: nowrap;
 }
 
 .sizeS .content:first-child {
@@ -165,13 +165,13 @@
 .singleIcon .before,
 .modeTertiary.singleIcon .after,
 .modeTertiary.singleIcon .before {
-  margin-inline: auto;
   padding-inline: 0;
+  margin-inline: auto;
 }
 
 .modeLink {
-  background: none;
   min-inline-size: initial;
+  background: none;
 }
 
 .modeLink .after,

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -65,3 +65,5 @@ export const ButtonGroup = ({
     />
   );
 };
+
+ButtonGroup.displayName = 'ButtonGroup';

package/src/components/Calendar/Calendar.module.css

@@ -1,21 +1,21 @@
 .host {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  inline-size: 305px;
+  padding: 12px;
   background: var(--vkui--color_background_contrast_themed);
   border: 0.5px solid var(--vkui--color_separator_primary);
-  box-sizing: border-box;
-  box-shadow: var(--vkui--elevation1);
   border-radius: 8px;
-  inline-size: 305px;
-  padding: 12px;
+  box-shadow: var(--vkui--elevation1);
 }
 
 .time {
-  border-block-start: 1px solid var(--vkui--color_separator_primary);
-  margin-block: 12px 0;
-  margin-inline: -12px;
   padding-block: 12px 0;
   padding-inline: 12px;
+  margin-block: 12px 0;
+  margin-inline: -12px;
+  border-block-start: 1px solid var(--vkui--color_separator_primary);
 }
 
 .header {

package/src/components/Calendar/Calendar.tsx

@@ -3,14 +3,10 @@
 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 { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
 import { clamp, isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';
+import { convertDateFromTimeZone, convertDateToTimeZone } from '../../lib/date';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HTMLAttributesWithRootRef } from '../../types';
@@ -38,7 +34,7 @@ export type CalendarTestsProps = CalendarDaysTestsProps &
   CalendarTimeTestsProps;
 
 export interface CalendarProps
-  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'defaultValue'>,
     Pick<CalendarTimeProps, 'changeHoursLabel' | 'changeMinutesLabel'>,
     Pick<
       CalendarHeaderProps,
@@ -56,7 +52,8 @@ export interface CalendarProps
     Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate' | 'renderDayContent'>,
     CalendarDoneButtonProps,
     CalendarTestsProps {
-  value?: Date;
+  value?: Date | null;
+  defaultValue?: Date | null;
   /**
    * Запрещает выбор даты в прошлом.
    * Применяется, если не заданы `shouldDisableDate` и `disableFuture`.
@@ -73,7 +70,7 @@ export interface CalendarProps
   weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
   showNeighboringMonth?: boolean;
   size?: 's' | 'm';
-  onChange?: (value?: Date) => void;
+  onChange?: (value?: Date) => void; // TODO [>=8]: поменять тип на `(value?: Date | null) => void`
   /**
    * Позволяет запретить выбор даты.
    */
@@ -97,6 +94,10 @@ export interface CalendarProps
    * Применяется, если не заданы `shouldDisableDate` и `disablePast`/`disableFuture`.
    */
   maxDateTime?: Date;
+  /**
+   * Свойство для отображения времени в нужной таймзоне
+   */
+  timezone?: string;
 }
 
 const warn = warnOnce('Calendar');
@@ -106,7 +107,8 @@ const warn = warnOnce('Calendar');
  */
 export const Calendar = ({
   getRootRef,
-  value,
+  value: valueProp,
+  defaultValue,
   onChange,
   disablePast,
   disableFuture,
@@ -141,6 +143,7 @@ export const Calendar = ({
   renderDayContent,
   minDateTime,
   maxDateTime,
+  timezone,
   minutesTestId,
   hoursTestId,
   doneButtonTestId,
@@ -151,6 +154,24 @@ export const Calendar = ({
   dayTestId,
   ...props
 }: CalendarProps): React.ReactNode => {
+  const _onChange = React.useCallback(
+    (date: Date | null | undefined) => {
+      onChange?.(convertDateFromTimeZone(date, timezone) || undefined);
+    },
+    [onChange, timezone],
+  );
+
+  const [value, updateValue] = useCustomEnsuredControl<Date | null | undefined>({
+    value: valueProp,
+    defaultValue,
+    onChange: _onChange,
+  });
+
+  const timeZonedValue: Date | null | undefined = React.useMemo(
+    () => convertDateToTimeZone(value, timezone),
+    [timezone, value],
+  );
+
   const {
     viewDate,
     setViewDate,
@@ -164,7 +185,7 @@ export const Calendar = ({
     isMonthDisabled,
     isYearDisabled,
   } = useCalendar({
-    value,
+    value: timeZonedValue,
     disableFuture,
     disablePast,
     shouldDisableDate,
@@ -174,14 +195,12 @@ export const Calendar = ({
     minDateTime,
     maxDateTime,
   });
-  const [directionRef, textDirection = 'ltr'] = useDirection();
-  const rootRef = useExternRef(directionRef, getRootRef);
 
   useIsomorphicLayoutEffect(() => {
-    if (value) {
-      setViewDate(value);
+    if (timeZonedValue) {
+      setViewDate(timeZonedValue);
     }
-  }, [value]);
+  }, [timeZonedValue]);
 
   if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {
     warn("Нельзя включить селекты выбора месяца/года, если размер календаря 's'", 'error');
@@ -197,109 +216,100 @@ export const Calendar = ({
         event.preventDefault();
       }
 
-      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);
+      const newFocusedDay = navigateDate(focusedDay ?? timeZonedValue, event.key);
 
       if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {
         setViewDate(newFocusedDay);
       }
       setFocusedDay(newFocusedDay);
     },
-    [focusedDay, setFocusedDay, setViewDate, value, viewDate],
+    [focusedDay, setFocusedDay, setViewDate, timeZonedValue, viewDate],
   );
 
   const onDayChange = React.useCallback(
     (date: Date) => {
-      let actualDate = setTimeEqual(date, value);
+      let actualDate = setTimeEqual(date, timeZonedValue);
       if (minDateTime || maxDateTime) {
         actualDate = clamp(actualDate, { min: minDateTime, max: maxDateTime });
       }
-      onChange?.(actualDate);
+      updateValue(actualDate);
     },
-    [value, onChange, maxDateTime, minDateTime],
+    [timeZonedValue, updateValue, maxDateTime, minDateTime],
   );
 
   const isDayActive = React.useCallback(
-    (day: Date) => Boolean(value && isSameDay(day, value)),
-    [value],
-  );
-
-  const directionContextValue = React.useMemo<CalendarDirectionContextProps>(
-    () => ({
-      direction: textDirection,
-    }),
-    [textDirection],
+    (day: Date) => Boolean(timeZonedValue && isSameDay(day, timeZonedValue)),
+    [timeZonedValue],
   );
 
   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={timeZonedValue}
+        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 && timeZonedValue && size !== 's' && (
+        <div className={styles.time}>
+          <CalendarTime
+            value={timeZonedValue}
+            onChange={updateValue}
+            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>
   );
 };

package/src/components/CalendarDay/CalendarDay.module.css

@@ -1,16 +1,16 @@
 .content {
-  border-radius: 0;
+  block-size: 100%;
+  font-family: var(--vkui--font_family_base);
   font-size: 14px;
   color: var(--vkui--color_text_primary);
-  font-family: var(--vkui--font_family_base);
-  block-size: 100%;
+  border-radius: 0;
 }
 
 .host,
 .hidden {
-  border-radius: 0;
-  flex-basis: calc(100% / 7);
   flex-grow: 0;
+  flex-basis: calc(100% / 7);
+  border-radius: 0;
 }
 
 .hidden,
@@ -52,12 +52,12 @@
 }
 
 .today .dayNumber::after {
-  content: '';
-  border-block-end: 2px solid var(--vkui--color_stroke_accent);
-  inline-size: 16px;
-  display: block;
   position: relative;
   inset-inline-start: 50%;
+  display: block;
+  inline-size: 16px;
+  content: '';
+  border-block-end: 2px solid var(--vkui--color_stroke_accent);
   transform: translateX(-50%);
 }
 
@@ -74,8 +74,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
 }
 
 .inner {
@@ -92,8 +92,8 @@
 }
 
 .innerActive {
-  background-color: var(--vkui--color_background_accent);
   color: var(--vkui--color_text_contrast);
+  background-color: var(--vkui--color_background_accent);
 }
 
 .hostHovered .inner.innerActive {

package/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]);