@vkontakte/vkui 7.5.4 → 7.6.1

package/src/hooks/useCalendar.ts

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { addMonths, endOfDay, isAfter, isBefore, isSameDay, startOfDay, subMonths } from 'date-fns';
+import { isSameDate } from '@vkontakte/vkjs';
+import { addMonths, startOfDay, subMonths } from 'date-fns';
 import type { CalendarProps } from '../components/Calendar/Calendar';
 import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, isDayMinMaxRestricted } from '../lib/calendar';
+import { endOfDay } from '../lib/date';
 
 export interface UseCalendarDependencies
   extends Pick<
@@ -65,7 +67,7 @@ export function useCalendar({
   );
 
   const isDayFocused = React.useCallback(
-    (day: Date) => Boolean(focusedDay && isSameDay(day, focusedDay)),
+    (day: Date) => Boolean(focusedDay && isSameDate(day, focusedDay)),
     [focusedDay],
   );
 
@@ -76,10 +78,10 @@ export function useCalendar({
         return shouldDisableDate(day);
       }
       if (disableFuture) {
-        return isAfter(startOfDay(day), now);
+        return startOfDay(day) > now;
       }
       if (disablePast) {
-        return isBefore(endOfDay(day), now);
+        return endOfDay(day) < now;
       }
       if (minDateTime || maxDateTime) {
         return isDayMinMaxRestricted(day, { min: minDateTime, max: maxDateTime, withTime });

package/src/hooks/useFloatingElement.tsx

@@ -69,6 +69,7 @@ export const useFloatingElement = <
   customMiddlewares,
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
+  disableShiftMiddleware = false,
 
   // useFloatingWithInteractions
   trigger,
@@ -108,6 +109,7 @@ export const useFloatingElement = <
     arrowPadding,
     arrowHeight,
     disableFlipMiddleware,
+    disableShiftMiddleware,
   });
 
   const {

package/src/hooks/useTodayDate.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { differenceInMilliseconds, isSameDay, startOfTomorrow } from 'date-fns';
+import { isSameDate } from '@vkontakte/vkjs';
+import { differenceInMilliseconds, startOfTomorrow } from 'date-fns';
 import { useDOM } from '../lib/dom';
 
 /**
@@ -38,7 +39,7 @@ export function useTodayDate(listenDayChangesForUpdate = false): Date {
           }, timeToDayChange);
 
           // Если todayDate не обновился в таймаут - обновить при заходе на вкладку
-          if (!isSameDay(todayDate, now)) {
+          if (!isSameDate(todayDate, now)) {
             setTodayDate(now);
           }
         }

package/src/index.ts

@@ -309,9 +309,9 @@ export { DropZone } from './components/DropZone/DropZone';
 export type { DropZoneProps } from './components/DropZone/DropZone';
 export { Input } from './components/Input/Input';
 export type { InputProps } from './components/Input/Input';
+export type { ChipProps } from './components/ChipsInputBase/Chip/Chip';
 export { Chip } from './components/ChipsInputBase/Chip/Chip';
 export type {
-  ChipProps,
   ChipOption,
   RenderChipProps,
   ChipOptionValue,
@@ -343,10 +343,12 @@ export type { NativeSelectProps } from './components/NativeSelect/NativeSelect';
 export { CustomSelect } from './components/CustomSelect/CustomSelect';
 export type {
   SelectProps,
-  CustomSelectOptionInterface,
-  CustomSelectRenderOption,
   CustomSelectClearButtonProps,
 } from './components/CustomSelect/CustomSelect';
+export type {
+  CustomSelectOptionInterface,
+  CustomSelectRenderOption,
+} from './components/CustomSelect/types';
 export { CustomSelectOption } from './components/CustomSelectOption/CustomSelectOption';
 export type { CustomSelectOptionProps } from './components/CustomSelectOption/CustomSelectOption';
 export { SegmentedControl } from './components/SegmentedControl/SegmentedControl';

package/src/lib/accessibility.ts

@@ -42,6 +42,8 @@ const EVENT_KEY_TO_COMMON_KEY_MAP = new Map([
   [' ', Keys.SPACE],
   ['Tab', Keys.TAB],
   ['Escape', Keys.ESCAPE],
+  ['Delete', Keys.DELETE],
+  ['Backspace', Keys.BACKSPACE],
   ['Home', Keys.HOME],
   ['End', Keys.END],
   ['ArrowLeft', Keys.ARROW_LEFT],
@@ -67,6 +69,8 @@ export function pressedKey<T extends KeyboardEvent | React.KeyboardEvent>(
   | 'ArrowDown'
   | 'PageUp'
   | 'PageDown'
+  | 'Backspace'
+  | 'Delete'
   | null {
   const foundKey = EVENT_KEY_TO_COMMON_KEY_MAP.get(event.key);
   return foundKey ? foundKey : null;

package/src/lib/calendar.ts

@@ -1,15 +1,10 @@
+import { isSameDate } from '@vkontakte/vkjs';
 import {
   addDays,
   addMonths,
   addWeeks,
   eachDayOfInterval,
-  endOfMonth,
   endOfWeek,
-  isAfter,
-  isBefore,
-  isFirstDayOfMonth,
-  isLastDayOfMonth,
-  isSameDay,
   startOfMonth,
   startOfWeek,
   subDays,
@@ -18,6 +13,7 @@ import {
 } from 'date-fns';
 import { clamp as clampNumber } from '../helpers/math';
 import { Keys, type KeysValues } from './accessibility';
+import { endOfMonth, isLastDayOfMonth } from './date';
 
 export const DEFAULT_MAX_YEAR = 9999;
 // 100 - из-за ограничений dayjs https://github.com/iamkun/dayjs/issues/2591
@@ -138,7 +134,7 @@ export const getWeeks = (viewDate: Date, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
   let current = start;
   const nestedWeeks: Date[][] = [];
   let lastDay = null;
-  while (isBefore(current, end)) {
+  while (current < end) {
     const weekNumber = Math.floor(count / 7);
     nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
     const day = current.getDay();
@@ -164,7 +160,7 @@ export const setTimeEqual = (to: Date, from?: Date | null): Date => {
 };
 
 export const isFirstDay = (day: Date, dayOfWeek: number): boolean =>
-  dayOfWeek === 0 || isFirstDayOfMonth(day);
+  dayOfWeek === 0 || day.getDate() === 1;
 
 export const isLastDay = (day: Date, dayOfWeek: number): boolean =>
   dayOfWeek === 6 || isLastDayOfMonth(day);
@@ -174,10 +170,10 @@ export const isLastDay = (day: Date, dayOfWeek: number): boolean =>
  */
 export function clamp(day: Date, options: { min?: Date; max?: Date } = {}): Date {
   const { min, max } = options;
-  if (min && isBefore(day, min)) {
+  if (min && day < min) {
     return min;
   }
-  if (max && isAfter(day, max)) {
+  if (max && day > max) {
     return max;
   }
   return day;
@@ -191,8 +187,8 @@ export function isDayMinMaxRestricted(
   options: { min?: Date; max?: Date; withTime?: boolean } = {},
 ): boolean {
   const { min, max, withTime = false } = options;
-  if (!withTime && ((min && isSameDay(day, min)) || (max && isSameDay(day, max)))) {
+  if (!withTime && ((min && isSameDate(day, min)) || (max && isSameDate(day, max)))) {
     return false;
   }
-  return Boolean((min && isBefore(day, min)) || (max && isAfter(day, max)));
+  return Boolean((min && day < min) || (max && day > max));
 }

package/src/lib/date.ts

@@ -1,5 +1,5 @@
+import { isSameDate } from '@vkontakte/vkjs';
 import { TZDateMini } from '@vkontakte/vkui-date-fns-tz';
-import { lightFormat } from 'date-fns';
 
 export function parse(input: string, format: string, referenceDate: Date = new Date()): Date {
   const match2 = /^\d\d/; // 00 - 99
@@ -141,10 +141,89 @@ export const convertDateFromTimeZone = (
   return date ? TZDateMini.tz(systemTimezone, date) : undefined;
 };
 
-export function format(date: Date | number, format: string): string {
-  return lightFormat(date, format);
+const dateOptions: Intl.DateTimeFormatOptions = {
+  day: '2-digit',
+  month: '2-digit',
+  year: 'numeric',
+};
+
+// dd.MM.yyyy
+export const dateFormatter = /*#__PURE__*/ new Intl.DateTimeFormat('ru-RU', dateOptions);
+
+class DateTimeFormat extends Intl.DateTimeFormat {
+  constructor() {
+    super('ru-RU', {
+      ...dateOptions,
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  }
+
+  format(date?: Date | number): string {
+    return super.format(date).replace(',', '');
+  }
+}
+
+// dd.MM.yyyy HH:mm
+export const dateTimeFormatter = /*#__PURE__*/ new DateTimeFormat();
+
+/**
+ * Возвращает дату конца месяца
+ */
+export function endOfMonth(date: Date): Date {
+  const result = new Date(date);
+  const month = result.getMonth();
+  result.setFullYear(result.getFullYear(), month + 1, 0);
+  result.setHours(23, 59, 59, 999);
+  return result;
+}
+
+export function endOfDay(date: Date): Date {
+  const result = new Date(date);
+  result.setHours(23, 59, 59, 999);
+  return result;
+}
+
+/**
+ * Проверяет, что переданные даты относятся к одному и тому же месяцу
+ *
+ * @example
+ * ```ts
+ * import assert from 'node:assert';
+ * import { isSameMonth } from './date.ts';
+ *
+ * const d1 = new Date();
+ * const d2 = new Date();
+ * assert.ok(isSameMonth(d1, d2));
+ * ```
+ */
+export function isSameMonth(d1: Date, d2: Date): boolean {
+  return d1.getMonth() === d2.getMonth() && d1.getFullYear() === d2.getFullYear();
+}
+
+export function isLastDayOfMonth(date: Date) {
+  return +endOfDay(date) === +endOfMonth(date);
+}
+
+export function isWithinInterval(date: Date, interval: [Date, Date]) {
+  const [startTime, endTime] = interval.sort((a, b) => +a - +b);
+
+  return date >= startTime && date <= endTime;
+}
+
+export function isToday(date: Date) {
+  return isSameDate(date, new Date());
+}
+
+export function isYesterday(date: Date) {
+  const yesterday = new Date();
+  yesterday.setDate(yesterday.getDate() - 1);
+
+  return isSameDate(date, yesterday);
 }
 
 export function isMatch(input: string, format: string): boolean {
   return !isNaN(+parse(input, format));
 }
+
+export const millisecondsInSecond = 1000;

package/src/lib/floating/useFloatingMiddlewaresBootstrap/index.ts

@@ -27,6 +27,11 @@ export interface UseFloatingMiddlewaresBootstrapOptions {
    * Не оказывает влияния при `placement` значениях - `'auto' | 'auto-start' | 'auto-end'`
    */
   disableFlipMiddleware?: boolean;
+  /**
+   * Позволяет отключить смещение по главной оси,
+   * которое не даёт всплывающему элементу выходить за границы видимой области.
+   */
+  disableShiftMiddleware?: boolean;
   /**
    * Задаёт резервный вариант размещения по перпендикулярной оси.
    */
@@ -78,6 +83,7 @@ export const useFloatingMiddlewaresBootstrap = ({
   customMiddlewares,
   hideWhenReferenceHidden,
   disableFlipMiddleware = false,
+  disableShiftMiddleware = false,
   flipMiddlewareFallbackAxisSideDirection = 'end',
 }: UseFloatingMiddlewaresBootstrapOptions): {
   middlewares: UseFloatingMiddleware[];
@@ -92,28 +98,34 @@ export const useFloatingMiddlewaresBootstrap = ({
       }),
     ];
 
-    const shiftMiddlewareInstance = shiftMiddleware();
+    const shift = disableShiftMiddleware ? null : shiftMiddleware();
 
     // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#conflict-with-autoplacementjs
     if (isAutoPlacement) {
-      middlewares.push(
-        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }),
-        shiftMiddlewareInstance,
-      );
+      middlewares.push(autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placement) }));
+      if (shift) {
+        middlewares.push(shift);
+      }
     } else if (!disableFlipMiddleware) {
-      const flipMiddlewareInstance = flipMiddleware({
+      const flip = flipMiddleware({
         crossAxis: 'alignment',
         fallbackAxisSideDirection: flipMiddlewareFallbackAxisSideDirection,
       });
 
       // см. https://github.com/floating-ui/floating-ui/blob/%40floating-ui/core%401.7.1/website/pages/docs/flip.mdx#combining-with-shiftjs
       if (placement.includes('-')) {
-        middlewares.push(flipMiddlewareInstance, shiftMiddlewareInstance);
+        middlewares.push(flip);
+        if (shift) {
+          middlewares.push(shift);
+        }
       } else {
-        middlewares.push(shiftMiddlewareInstance, flipMiddlewareInstance);
+        if (shift) {
+          middlewares.push(shift);
+        }
+        middlewares.push(flip);
       }
-    } else {
-      middlewares.push(shiftMiddlewareInstance);
+    } else if (shift) {
+      middlewares.push(shift);
     }
 
     if (sameWidth) {
@@ -154,6 +166,7 @@ export const useFloatingMiddlewaresBootstrap = ({
     arrowHeight,
     offsetByMainAxis,
     disableFlipMiddleware,
+    disableShiftMiddleware,
     flipMiddlewareFallbackAxisSideDirection,
     sameWidth,
     customMiddlewares,

package/src/lib/floating/useFloatingWithInteractions/types.ts

@@ -49,6 +49,8 @@ export interface UseFloatingWithInteractionsProps {
    * > ⚠️`"hover"` на тач-устройствах будет работать как `"click"`, с одним лишь нюансом, что
    * > не будет закрываться при повторном нажатии на целевой элемент. Для закрытия необходимо нажать
    * > на область вне целевого элемента и выпадающего окна.
+   *
+   * **Избегайте использования `trigger="hover"` как единственного механизма активации, так как пользователи клавиатуры или скринридеров не смогут использовать компонент**
    */
   trigger?: TriggerType;
   /**

package/src/lib/touch/UIPanGestureRecognizer.ts

@@ -1,3 +1,4 @@
+import { millisecondsInSecond } from '../date';
 import { getFirstTouchEventData } from '../dom';
 
 export type Direction = { axis: 'x' | 'y'; direction: -1 | 1 | null };
@@ -5,7 +6,6 @@ export type Direction = { axis: 'x' | 'y'; direction: -1 | 1 | null };
 export type Coords = { x: number; y: number };
 
 const DEFAULT_INITIAL_TIME = 0;
-const MILLISECONDS = 1000;
 
 /**
  * JS имплементация класса из UIKIt iOS.
@@ -50,7 +50,7 @@ export class UIPanGestureRecognizer {
   }
 
   velocity(): Coords {
-    const deltaTime = (Date.now() - this.initialTime) / MILLISECONDS;
+    const deltaTime = (Date.now() - this.initialTime) / millisecondsInSecond;
 
     if (deltaTime <= 0) {
       return { x: 0, y: 0 };

package/src/lib/utils.ts

@@ -35,6 +35,9 @@ export function multiRef<T>(...refs: Array<React.Ref<T> | undefined>): React.Ref
 export const stopPropagation = <T extends React.SyntheticEvent>(event: T): void =>
   event.stopPropagation();
 
+export const preventDefault = <T extends React.SyntheticEvent>(event: T): void =>
+  event.preventDefault();
+
 export function addClassNameToElement(element: HTMLElement, className: string): void {
   const elementClassName = element.getAttribute('class') || '';
   const updatedClassName = `${elementClassName}${elementClassName ? ' ' : ''}${className}`;

package/src/styles/dynamicTokens.css

@@ -1,15 +1,26 @@
 /* stylelint-disable selector-pseudo-class-disallowed-list */
 
+/*
+В Windows можно менять общий масштаб интерфейса от 100 до 500%. Готовые пресеты 125%, 150% и 175%.
+В случаях, когда `--vkui--size_border--regular` используется не для свойства `border`, а для `height`,
+одна из линий становится размером больше чем остальные.
+
+Поэтому используем пограничные значения DPI, чтобы смена на субпиксельные значения срабатывала раньше:
+- 1.01dppx вместо 2dppx для 101% и до 200%;
+- 2.01dppx вместо 3dppx для 201% и больше;
+
+@see https://github.com/VKCOM/VKUI/issues/8864
+*/
 :root {
   --vkui--size_border--regular: var(--vkui--size_border1x--regular);
 }
 
-@media (min-resolution: 2dppx) {
+@media (min-resolution: 1.01dppx) {
   :root {
     --vkui--size_border--regular: var(--vkui--size_border2x--regular);
   }
 }
-@media (min-resolution: 3dppx) {
+@media (min-resolution: 2.01dppx) {
   :root {
     --vkui--size_border--regular: var(--vkui--size_border3x--regular);
   }