@vkontakte/vkui 7.0.1 → 7.1.0

package/src/components/CalendarRange/CalendarRange.tsx

@@ -12,7 +12,13 @@ import {
   startOfDay,
   subMonths,
 } 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 { isFirstDay, isLastDay, navigateDate } from '../../lib/calendar';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import {
@@ -31,7 +37,13 @@ import styles from './CalendarRange.module.css';
 export type DateRangeType = [Date | null, Date | null];
 
 export type CalendarRangeTestsProps = CalendarDaysTestsProps & {
+  /**
+   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в левой части
+   */
   leftPartHeaderTestsData?: CalendarHeaderTestsProps;
+  /**
+   * Передает атрибуты `data-testid` для интерактивных элементов в заголовке календаря в правой части
+   */
   rightPartHeaderTestsData?: CalendarHeaderTestsProps;
 };
 
@@ -91,6 +103,7 @@ export const CalendarRange = ({
   dayTestId,
   leftPartHeaderTestsData,
   rightPartHeaderTestsData,
+  getRootRef,
   ...props
 }: CalendarRangeProps): React.ReactNode => {
   const {
@@ -106,6 +119,10 @@ export const CalendarRange = ({
     isMonthDisabled,
     isYearDisabled,
   } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
+
+  const [directionRef, textDirection = 'ltr'] = useDirection();
+  const rootRef = useExternRef(directionRef, getRootRef);
+
   const [hintedDate, setHintedDate] = React.useState<DateRangeType>();
   const secondViewDate = addMonths(viewDate, 1);
 
@@ -207,90 +224,99 @@ export const CalendarRange = ({
     [setViewDate],
   );
 
+  const directionContextValue = React.useMemo<CalendarDirectionContextProps>(
+    () => ({
+      direction: textDirection,
+    }),
+    [textDirection],
+  );
+
   return (
-    <RootComponent {...props} baseClassName={styles.host}>
-      <div className={styles.inner}>
-        <CalendarHeader
-          viewDate={viewDate}
-          onChange={setViewDate}
-          nextMonthHidden
-          onPrevMonth={setPrevMonth}
-          disablePickers={disablePickers}
-          className={styles.header}
-          prevMonthLabel={prevMonthLabel}
-          nextMonthLabel={nextMonthLabel}
-          changeMonthLabel={changeMonthLabel}
-          changeYearLabel={changeYearLabel}
-          prevMonthIcon={prevMonthIcon}
-          isMonthDisabled={isMonthDisabled}
-          isYearDisabled={isYearDisabled}
-          {...leftPartHeaderTestsData}
-        />
-        <CalendarDays
-          viewDate={viewDate}
-          value={value}
-          weekStartsOn={weekStartsOn}
-          onKeyDown={handleKeyDown}
-          isDayFocused={isDayFocused}
-          onDayChange={onDayChange}
-          isDaySelected={isDaySelected}
-          isDayActive={isDayActive}
-          isDaySelectionEnd={isDaySelectionEnd}
-          isDaySelectionStart={isDaySelectionStart}
-          isDayHinted={isDayHinted}
-          onDayEnter={onDayEnter}
-          onDayLeave={onDayLeave}
-          isHintedDaySelectionEnd={isHintedDaySelectionEnd}
-          isHintedDaySelectionStart={isHintedDaySelectionStart}
-          isDayDisabled={isDayDisabled}
-          listenDayChangesForUpdate={listenDayChangesForUpdate}
-          renderDayContent={renderDayContent}
-          aria-label={changeDayLabel}
-          dayTestId={dayTestId}
-        />
-      </div>
-      <div className={styles.inner}>
-        <CalendarHeader
-          viewDate={secondViewDate}
-          onChange={onRightPartViewDateChange}
-          prevMonthHidden
-          onNextMonth={setNextMonth}
-          disablePickers={disablePickers}
-          className={styles.header}
-          prevMonthLabel={prevMonthLabel}
-          nextMonthLabel={nextMonthLabel}
-          changeMonthLabel={changeMonthLabel}
-          changeYearLabel={changeYearLabel}
-          nextMonthIcon={nextMonthIcon}
-          isMonthDisabled={isMonthDisabled}
-          isYearDisabled={isYearDisabled}
-          {...rightPartHeaderTestsData}
-        />
-        <CalendarDays
-          viewDate={secondViewDate}
-          value={value}
-          weekStartsOn={weekStartsOn}
-          aria-label={changeDayLabel}
-          onKeyDown={handleKeyDown}
-          isDayFocused={isDayFocused}
-          onDayChange={onDayChange}
-          isDaySelected={isDaySelected}
-          isDayActive={isDayActive}
-          isDaySelectionEnd={isDaySelectionEnd}
-          isDaySelectionStart={isDaySelectionStart}
-          isDayHinted={isDayHinted}
-          onDayEnter={onDayEnter}
-          onDayLeave={onDayLeave}
-          isHintedDaySelectionEnd={isHintedDaySelectionEnd}
-          isHintedDaySelectionStart={isHintedDaySelectionStart}
-          isDayDisabled={isDayDisabled}
-          listenDayChangesForUpdate={listenDayChangesForUpdate}
-          renderDayContent={renderDayContent}
-          tabIndex={0}
-          onBlur={resetSelectedDay}
-          dayTestId={dayTestId}
-        />
-      </div>
-    </RootComponent>
+    <CalendarDirectionContext.Provider value={directionContextValue}>
+      <RootComponent {...props} baseClassName={styles.host} getRootRef={rootRef}>
+        <div className={styles.inner}>
+          <CalendarHeader
+            viewDate={viewDate}
+            onChange={setViewDate}
+            nextMonthHidden
+            onPrevMonth={setPrevMonth}
+            disablePickers={disablePickers}
+            className={styles.header}
+            prevMonthLabel={prevMonthLabel}
+            nextMonthLabel={nextMonthLabel}
+            changeMonthLabel={changeMonthLabel}
+            changeYearLabel={changeYearLabel}
+            prevMonthIcon={prevMonthIcon}
+            isMonthDisabled={isMonthDisabled}
+            isYearDisabled={isYearDisabled}
+            {...leftPartHeaderTestsData}
+          />
+          <CalendarDays
+            viewDate={viewDate}
+            value={value}
+            weekStartsOn={weekStartsOn}
+            onKeyDown={handleKeyDown}
+            isDayFocused={isDayFocused}
+            onDayChange={onDayChange}
+            isDaySelected={isDaySelected}
+            isDayActive={isDayActive}
+            isDaySelectionEnd={isDaySelectionEnd}
+            isDaySelectionStart={isDaySelectionStart}
+            isDayHinted={isDayHinted}
+            onDayEnter={onDayEnter}
+            onDayLeave={onDayLeave}
+            isHintedDaySelectionEnd={isHintedDaySelectionEnd}
+            isHintedDaySelectionStart={isHintedDaySelectionStart}
+            isDayDisabled={isDayDisabled}
+            listenDayChangesForUpdate={listenDayChangesForUpdate}
+            renderDayContent={renderDayContent}
+            aria-label={changeDayLabel}
+            dayTestId={dayTestId}
+          />
+        </div>
+        <div className={styles.inner}>
+          <CalendarHeader
+            viewDate={secondViewDate}
+            onChange={onRightPartViewDateChange}
+            prevMonthHidden
+            onNextMonth={setNextMonth}
+            disablePickers={disablePickers}
+            className={styles.header}
+            prevMonthLabel={prevMonthLabel}
+            nextMonthLabel={nextMonthLabel}
+            changeMonthLabel={changeMonthLabel}
+            changeYearLabel={changeYearLabel}
+            nextMonthIcon={nextMonthIcon}
+            isMonthDisabled={isMonthDisabled}
+            isYearDisabled={isYearDisabled}
+            {...rightPartHeaderTestsData}
+          />
+          <CalendarDays
+            viewDate={secondViewDate}
+            value={value}
+            weekStartsOn={weekStartsOn}
+            aria-label={changeDayLabel}
+            onKeyDown={handleKeyDown}
+            isDayFocused={isDayFocused}
+            onDayChange={onDayChange}
+            isDaySelected={isDaySelected}
+            isDayActive={isDayActive}
+            isDaySelectionEnd={isDaySelectionEnd}
+            isDaySelectionStart={isDaySelectionStart}
+            isDayHinted={isDayHinted}
+            onDayEnter={onDayEnter}
+            onDayLeave={onDayLeave}
+            isHintedDaySelectionEnd={isHintedDaySelectionEnd}
+            isHintedDaySelectionStart={isHintedDaySelectionStart}
+            isDayDisabled={isDayDisabled}
+            listenDayChangesForUpdate={listenDayChangesForUpdate}
+            renderDayContent={renderDayContent}
+            tabIndex={0}
+            onBlur={resetSelectedDay}
+            dayTestId={dayTestId}
+          />
+        </div>
+      </RootComponent>
+    </CalendarDirectionContext.Provider>
   );
 };

package/src/components/CalendarTime/CalendarTime.tsx

@@ -1,29 +1,48 @@
 'use client';
 
-import { type ChangeEvent } from 'react';
+import { type ChangeEvent, useRef } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { setHours, setMinutes } from 'date-fns';
+import { Keys, pressedKey } from '../../lib/accessibility';
 import { AdaptivityProvider } from '../AdaptivityProvider/AdaptivityProvider';
-import { Button } from '../Button/Button';
+import { Button, type ButtonProps } from '../Button/Button';
 import { CustomSelect, type SelectProps } from '../CustomSelect/CustomSelect';
 import styles from './CalendarTime.module.css';
 
+const selectFilterFn = () => true;
+
 export type CalendarTimeTestsProps = {
+  /**
+   * Передает атрибут `data-testid` для дропдауна выбора часа в календаре
+   */
   hoursTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для дропдауна выбора минут в календаре
+   */
   minutesTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки "Готово" в календаре
+   */
   doneButtonTestId?: string;
 };
 
-export interface CalendarTimeProps extends CalendarTimeTestsProps {
-  value: Date;
+export type CalendarDoneButtonProps = {
+  /**
+   * Кастомное отображение кнопки Done.
+   */
+  DoneButton?: React.ComponentType<ButtonProps>;
   doneButtonText?: string;
   doneButtonShow?: boolean;
   doneButtonDisabled?: boolean;
+  onDoneButtonClick?: () => void;
+};
+
+export interface CalendarTimeProps extends CalendarTimeTestsProps, CalendarDoneButtonProps {
+  value: Date;
   changeHoursLabel?: string;
   changeMinutesLabel?: string;
   onChange?: (value: Date) => void;
-  onDoneButtonClick?: () => void;
   isDayDisabled?: (day: Date, withTime?: boolean) => boolean;
 }
 
@@ -43,6 +62,17 @@ for (let i = 0; i < 60; i += 1) {
   minutes.push({ value: i, label: String(i).padStart(2, '0') });
 }
 
+const validateValue = (
+  value: string,
+  validValues: Array<{
+    value: number;
+    label: string;
+  }>,
+): boolean => {
+  const numValue = Number(value);
+  return !isNaN(numValue) && validValues.some((v) => v.value === numValue);
+};
+
 export const CalendarTime = ({
   value,
   onChange,
@@ -56,7 +86,12 @@ export const CalendarTime = ({
   minutesTestId,
   hoursTestId,
   doneButtonTestId,
+  DoneButton,
 }: CalendarTimeProps): React.ReactNode => {
+  const hoursInputRef = useRef<HTMLInputElement | null>(null);
+  const minutesInputRef = useRef<HTMLInputElement | null>(null);
+  const doneButtonRef = useRef<HTMLButtonElement | null>(null);
+
   const localHours = isDayDisabled
     ? hours.map((hour) => {
         return { ...hour, disabled: isDayDisabled(setHours(value, hour.value), true) };
@@ -69,6 +104,26 @@ export const CalendarTime = ({
       })
     : minutes;
 
+  const onPickerValueChange = (
+    e: ChangeEvent<HTMLInputElement>,
+    validate: (numericValue: string) => boolean,
+    setter: (value: Date, numericValue: number) => Date,
+  ) => {
+    const numericValue = e.target.value.replace(/\D/g, '');
+    e.target.value = numericValue;
+    if (validate(numericValue)) {
+      onChange?.(setter(value, Number(numericValue)));
+    }
+  };
+
+  const onHoursInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onPickerValueChange(e, (numValue) => validateValue(numValue, localHours), setHours);
+  };
+
+  const onMinutesInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onPickerValueChange(e, (numValue) => validateValue(numValue, localMinutes), setMinutes);
+  };
+
   const onHoursChange = React.useCallback(
     (_: ChangeEvent<HTMLSelectElement>, newValue: SelectProps['value']) =>
       onChange?.(setHours(value, Number(newValue))),
@@ -80,6 +135,39 @@ export const CalendarTime = ({
     [onChange, value],
   );
 
+  const onPickerKeyDown = (e: React.KeyboardEvent) => {
+    const key = pressedKey(e);
+    if (key === Keys.ENTER || key === Keys.TAB) {
+      const steps = [hoursInputRef, minutesInputRef, doneButtonRef];
+      const currentStepIndex = steps.findIndex((step) => step.current === e.target);
+      const diff = e.key === 'Tab' && e.shiftKey ? -1 : 1;
+      const nextStepIndex = currentStepIndex + diff;
+      if (nextStepIndex < 0 || nextStepIndex >= steps.length) {
+        return;
+      }
+      e.preventDefault();
+      const nextStep = steps[nextStepIndex];
+      nextStep.current?.focus();
+    }
+  };
+
+  const renderDoneButton = () => {
+    const ButtonComponent = DoneButton ?? Button;
+    return (
+      <ButtonComponent
+        mode="secondary"
+        onClick={onDoneButtonClick}
+        size="l"
+        getRootRef={doneButtonRef}
+        onKeyDown={onPickerKeyDown}
+        disabled={doneButtonDisabled}
+        data-testid={doneButtonTestId}
+      >
+        {doneButtonText}
+      </ButtonComponent>
+    );
+  };
+
   return (
     <div className={classNames(styles.host, !doneButtonShow && styles.host__withoutDone)}>
       <div className={styles.picker}>
@@ -89,6 +177,11 @@ export const CalendarTime = ({
             options={localHours}
             onChange={onHoursChange}
             forceDropdownPortal={false}
+            searchable
+            filterFn={selectFilterFn}
+            onInputChange={onHoursInputChange}
+            onInputKeyDown={onPickerKeyDown}
+            getSelectInputRef={hoursInputRef}
             aria-label={changeHoursLabel}
             data-testid={hoursTestId}
           />
@@ -102,6 +195,11 @@ export const CalendarTime = ({
             options={localMinutes}
             onChange={onMinutesChange}
             forceDropdownPortal={false}
+            searchable
+            filterFn={selectFilterFn}
+            onInputChange={onMinutesInputChange}
+            getSelectInputRef={minutesInputRef}
+            onInputKeyDown={onPickerKeyDown}
             aria-label={changeMinutesLabel}
             data-testid={minutesTestId}
           />
@@ -109,17 +207,7 @@ export const CalendarTime = ({
       </div>
       {doneButtonShow && (
         <div className={styles.button}>
-          <AdaptivityProvider sizeY="compact">
-            <Button
-              mode="secondary"
-              onClick={onDoneButtonClick}
-              size="l"
-              disabled={doneButtonDisabled}
-              data-testid={doneButtonTestId}
-            >
-              {doneButtonText}
-            </Button>
-          </AdaptivityProvider>
+          <AdaptivityProvider sizeY="compact">{renderDoneButton()}</AdaptivityProvider>
         </div>
       )}
     </div>

package/src/components/CardScroll/CardScroll.tsx

@@ -14,12 +14,14 @@ const stylesSize = {
   l: 'vkuiInternalCardScroll--size-l',
 };
 
-export interface CardScrollProps extends HTMLAttributesWithRootRef<HTMLDivElement>, HasComponent {
+export interface CardScrollProps
+  extends HTMLAttributesWithRootRef<HTMLDivElement>,
+    HasComponent,
+    Pick<HorizontalScrollProps, 'showArrows' | 'prevButtonTestId' | 'nextButtonTestId'> {
   /**
    * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
    */
   size?: 's' | 'm' | 'l' | false;
-  showArrows?: HorizontalScrollProps['showArrows'];
   /**
    * Добавляет отступы по краям слева и справа
    */
@@ -35,6 +37,8 @@ export const CardScroll = ({
   showArrows = true,
   padding = false,
   Component = 'ul',
+  prevButtonTestId,
+  nextButtonTestId,
   ...restProps
 }: CardScrollProps): React.ReactNode => {
   const refContainer = React.useRef<HTMLDivElement>(null);
@@ -109,6 +113,8 @@ export const CardScroll = ({
         getScrollToLeft={getScrollToLeft}
         getScrollToRight={getScrollToRight}
         showArrows={showArrows}
+        prevButtonTestId={prevButtonTestId}
+        nextButtonTestId={nextButtonTestId}
       >
         <div className={styles.in} ref={refContainer}>
           <span className={styles.gap} ref={gapRef} />

package/src/components/CarouselBase/Bullets.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { type BaseGalleryProps } from './types';
+import styles from './CarouselBase.module.css';
+
+export interface BulletsTestIds {
+  /**
+   * Передает атрибут `data-testid` для bullets
+   */
+  bulletTestId?: (index: number, active: boolean) => string;
+}
+
+interface BulletsProps extends BulletsTestIds {
+  bullets: Exclude<BaseGalleryProps['bullets'], false | undefined>;
+  slideIndex: number;
+  count: number;
+}
+
+const stylesBullets = {
+  dark: styles.bulletsDark,
+  light: styles.bulletsLight,
+};
+
+export const Bullets: React.FC<BulletsProps> = ({ bullets, slideIndex, count, bulletTestId }) => {
+  return (
+    <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          className={classNames(styles.bullet, index === slideIndex && styles.bulletActive)}
+          data-testid={bulletTestId?.(index, index === slideIndex)}
+          key={index}
+        />
+      ))}
+    </div>
+  );
+};

package/src/components/{BaseGallery/BaseGallery.module.css → CarouselBase/CarouselBase.module.css}

@@ -83,10 +83,28 @@
 
 .arrow {
   position: absolute;
-  inset-block-start: 0;
   opacity: 0;
 }
 
+.arrowAreaStretch {
+  inset-block-start: 0;
+}
+
+.arrowAreaFit {
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+  block-size: auto;
+  padding-block: calc(var(--vkui--size_base_padding_vertical--regular) * 2);
+}
+
+.arrowStart {
+  padding-inline-end: var(--vkui--size_base_padding_horizontal--regular);
+}
+
+.arrowEnd {
+  padding-inline-start: var(--vkui--size_base_padding_horizontal--regular);
+}
+
 .host:hover .arrow {
   opacity: var(--vkui--opacity_disable_accessibility);
 }