@vkontakte/vkui 7.1.3 → 7.2.1

package/src/components/UsersStack/UsersStack.tsx

@@ -2,8 +2,7 @@
 
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { useDirection } from '../../hooks/useDirection';
-import { useExternRef } from '../../hooks/useExternRef';
+import { useConfigDirection } from '../../hooks/useConfigDirection';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Caption } from '../Typography/Caption/Caption';
@@ -143,19 +142,17 @@ export const UsersStack = ({
   size = 'm',
   children,
   avatarsPosition = 'inline-start',
-  getRootRef,
   ...restProps
 }: UsersStackProps): React.ReactNode => {
   const cmpId = React.useId();
-  const [directionRef, textDirection = 'ltr'] = useDirection();
-  const rootRef = useExternRef(getRootRef, directionRef);
+  const direction = useConfigDirection();
 
   const canShowOthers = count > 0 && count < 100 && size !== 's';
   const CounterTypography = size === 'l' ? Footnote : Caption;
 
   const photoSize = photoSizes[size];
   const directionClip =
-    textDirection === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right';
+    direction === 'ltr' ? (canShowOthers ? 'right' : 'left') : canShowOthers ? 'left' : 'right';
 
   const photosElements = photos.slice(0, visibleCount).map((photo, i) => {
     const direction = i === 0 && !canShowOthers ? 'circle' : directionClip;
@@ -212,7 +209,6 @@ export const UsersStack = ({
   return (
     <RootComponent
       {...restProps}
-      getRootRef={rootRef}
       baseClassName={classNames(
         styles.host,
         stylesSize[size],

package/src/components/View/View.module.css

@@ -2,8 +2,8 @@
   --vkui_internal--view_animation_translateY_initial: 80px;
 
   position: relative;
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
   word-wrap: break-word;
 }
 
@@ -19,15 +19,15 @@
 }
 
 .panelOverlay {
-  display: none;
   position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--vkui_internal--z_index_panel_header_fade);
+  display: none;
   inline-size: 100%;
   block-size: 100%;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  background-color: #000;
   pointer-events: none;
-  z-index: var(--vkui_internal--z_index_panel_header_fade);
+  background-color: #000;
 }
 
 .panelPrev .panelOverlay {
@@ -64,8 +64,8 @@
 }
 
 .panels {
-  block-size: 100%;
   inline-size: 100%;
+  block-size: 100%;
 }
 
 .panelIn {
@@ -74,9 +74,9 @@
 
 .panel {
   position: relative;
+  box-sizing: border-box;
   inline-size: 100%;
   block-size: 100%;
-  box-sizing: border-box;
   isolation: isolate;
 }
 

package/src/components/VisuallyHidden/VisuallyHidden.module.css

@@ -1,28 +1,28 @@
 /* stylelint-disable declaration-no-important */
 .host {
   position: absolute !important;
-  block-size: 1px !important;
   inline-size: 1px !important;
+  block-size: 1px !important;
   padding: 0 !important;
   margin: -1px !important; /* Fix for https://github.com/twbs/bootstrap/issues/25686 */
-  white-space: nowrap !important;
-  clip: rect(0, 0, 0, 0) !important;
-  clip-path: inset(50%);
   overflow: hidden !important;
+  white-space: nowrap !important;
+  user-select: none;
   border: 0 !important;
   opacity: 0;
-  user-select: none;
+  clip: rect(0, 0, 0, 0) !important;
+  clip-path: inset(50%);
 }
 
 /* Чтобы фокус скринридера, попавший на скрытый инпут был виден.
  * Особенно актуально для Android TalkBack */
 .focusableInput {
-  inset-inline-start: 0;
   inset-block-start: 0;
-  block-size: 100% !important;
+  inset-inline-start: 0;
   inline-size: 100% !important;
+  block-size: 100% !important;
+  pointer-events: none;
   clip: auto !important;
   clip-path: none !important;
-  pointer-events: none;
 }
 /* stylelint-enable declaration-no-important */

package/src/components/WriteBar/WriteBar.module.css

@@ -18,24 +18,24 @@
 }
 
 .formIn {
+  position: relative;
+  display: flex;
   flex: 1;
   min-inline-size: 0;
-  display: flex;
-  position: relative;
 }
 
 .textarea {
   box-sizing: border-box;
-  inline-size: 100%;
   flex: 1;
+  inline-size: 100%;
   min-inline-size: 0;
+  max-block-size: 120px;
   margin: 0;
-  background: transparent;
-  border: 0;
-  resize: none;
   color: var(--vkui--color_text_primary);
   appearance: none;
-  max-block-size: 120px;
+  resize: none;
+  background: transparent;
+  border: 0;
 }
 
 .textarea::placeholder {
@@ -82,11 +82,11 @@
 
 .ios .formIn {
   box-sizing: border-box;
+  margin-block: 8px;
+  margin-inline: 0;
   background-color: var(--vkui--color_write_bar_input_background);
   border: var(--vkui--size_border--regular) solid var(--vkui--color_write_bar_input_border);
   border-radius: 18px;
-  margin-block: 8px;
-  margin-inline: 0;
 }
 
 .ios .formIn:first-child {
@@ -98,8 +98,8 @@
   --vkui_internal--writebar-right-gap: calc(-1 * var(--vkui--size_border--regular));
   --vkui_internal--writebar-vertical-gap: calc(var(--vkui_internal--writebar-right-gap) - 8px);
 
-  margin-inline-end: var(--vkui_internal--writebar-right-gap);
   margin-block: var(--vkui_internal--writebar-vertical-gap);
+  margin-inline-end: var(--vkui_internal--writebar-right-gap);
 }
 
 .ios .textarea {

package/src/components/WriteBarIcon/WriteBarIcon.module.css

@@ -1,14 +1,14 @@
 .host {
-  background: none;
-  border: 0;
   position: relative;
-  color: var(--vkui--color_icon_secondary);
-  block-size: 52px;
   inline-size: 44px;
+  block-size: 52px;
+  padding: 0;
+  margin: 0;
+  color: var(--vkui--color_icon_secondary);
   cursor: pointer;
+  background: none;
+  border: 0;
   border-radius: var(--vkui--size_border_radius--regular);
-  margin: 0;
-  padding: 0;
 }
 
 .in {
@@ -20,8 +20,8 @@
 }
 
 .host:disabled {
-  opacity: 0.4;
   pointer-events: none;
+  opacity: 0.4;
 }
 
 .active {
@@ -32,7 +32,7 @@
   position: absolute;
   inset-block-start: 6px;
   inset-inline-end: 2px;
-  box-shadow: 0 0 0 2px var(--vkui--color_background_modal);
+  box-shadow: 0 0 0 2px var(--vkui--color_background_contrast_themed);
 }
 
 .ios .counter {
@@ -53,9 +53,9 @@
 
 .ios.modeSend,
 .ios.modeDone {
-  color: var(--vkui--color_icon_accent_themed);
   inline-size: 48px;
   padding-inline: 0;
+  color: var(--vkui--color_icon_accent_themed);
 }
 
 .ios.modeSend,

package/src/context/CalendarDirectionContext.ts

@@ -1,5 +1,5 @@
 import { createContext, useContext } from 'react';
-import { type Direction } from '../hooks/useDirection';
+import { type Direction } from '../lib/direction';
 
 export interface CalendarDirectionContextProps {
   direction: Direction;

package/src/helpers/getValueByKey.ts

@@ -0,0 +1,25 @@
+export const getRequiredValueByKey = <VALUE, KEY extends PropertyKey = PropertyKey>(
+  key: KEY,
+  map: Record<KEY, VALUE>,
+): VALUE => {
+  if (!map.hasOwnProperty(key)) {
+    throw new Error(`getRequiredValueByKey(${key})`);
+  }
+  return map[key];
+};
+
+export const getValueByKey = <VALUE, KEY extends PropertyKey = PropertyKey>(
+  key: KEY,
+  map: {
+    [key: string]: VALUE;
+  },
+  defaultValue: VALUE,
+): VALUE => {
+  if (!map.hasOwnProperty(key)) {
+    if (defaultValue) {
+      return defaultValue;
+    }
+    throw new Error(`getValueByKey(${String(key)})`);
+  }
+  return map[key];
+};

package/src/hooks/useAutoDetectDirection.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type Direction } from '../lib/direction';
+import { useDOM } from '../lib/dom';
+
+export const useAutoDetectDirection = (directionProp: Direction | undefined): Direction => {
+  const { window, document } = useDOM();
+
+  return React.useMemo(() => {
+    if (directionProp) {
+      return directionProp;
+    }
+    if (!window || !document) {
+      return 'ltr';
+    }
+    const styleDeclaration = window.getComputedStyle(document.body);
+    return (styleDeclaration.direction as Direction) || 'ltr';
+  }, [directionProp, document, window]);
+};

package/src/hooks/useCalendar.ts

@@ -15,7 +15,7 @@ export interface UseCalendarDependencies
     | 'disableFuture'
     | 'disablePast'
   > {
-  value?: Array<Date | null> | Date;
+  value?: Array<Date | null> | Date | null;
 }
 
 export function useCalendar({

package/src/hooks/useConfigDirection.ts

@@ -0,0 +1,8 @@
+import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+import { type Direction } from '../lib/direction';
+
+export function useConfigDirection(): Direction {
+  const { direction } = useConfigProvider();
+
+  return direction || 'ltr';
+}

package/src/hooks/useDateInput.ts

@@ -9,15 +9,15 @@ export interface UseDateInputDependencies<T, D> {
   refs: Array<React.RefObject<T | null>>;
   autoFocus?: boolean;
   disabled?: boolean;
-  value?: D;
+  value?: D | null;
   elementsConfig: (index: number) => {
     length: number;
     min: number;
     max: number;
   };
   onInternalValueChange: (value: string[]) => void;
-  getInternalValue: (value?: D | undefined) => string[];
-  onChange?: (value?: D | undefined) => void;
+  getInternalValue: (value?: D | null | undefined) => string[];
+  onClear: () => void;
   onCalendarOpenChanged?: (opened: boolean) => void;
 }
 
@@ -27,7 +27,7 @@ export function useDateInput<T extends HTMLElement, D>({
   autoFocus,
   disabled,
   elementsConfig,
-  onChange,
+  onClear,
   onInternalValueChange,
   getInternalValue,
   value,
@@ -128,9 +128,9 @@ export function useDateInput<T extends HTMLElement, D>({
   }, [disabled, focusedElement, _onCalendarOpen, refs, window]);
 
   const clear = React.useCallback(() => {
-    onChange?.(undefined);
+    onClear?.();
     selectFirst();
-  }, [onChange, selectFirst]);
+  }, [onClear, selectFirst]);
 
   const handleFieldEnter = React.useCallback(() => {
     if (!open) {

package/src/hooks/useFloatingElement.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { type Ref, useMemo } from 'react';
+import {
+  type OnPlacementChange,
+  useFloatingMiddlewaresBootstrap,
+  type UseFloatingMiddlewaresBootstrapOptions,
+  useFloatingWithInteractions,
+  type UseFloatingWithInteractionsProps,
+  type UseFloatingWithInteractionsReturn,
+  usePlacementChangeCallback,
+} from '../lib/floating';
+import { type ReferenceProps } from '../lib/floating/useFloatingWithInteractions/types';
+import { useReferenceHiddenChangeCallback } from '../lib/floating/useReferenceHiddenChangeCallback';
+import { useExternRef } from './useExternRef';
+import { useGlobalEscKeyDown } from './useGlobalEscKeyDown';
+
+export type FloatingComponentProps<FloatingElement extends HTMLElement = HTMLElement> = Pick<
+  UseFloatingWithInteractionsReturn,
+  | 'shown'
+  | 'willBeHide'
+  | 'floatingProps'
+  | 'middlewareData'
+  | 'onClose'
+  | 'onRestoreFocus'
+  | 'placement'
+> & {
+  floatingRef: React.Ref<FloatingElement>;
+  setArrowRef: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;
+};
+
+export type RenderFloatingComponentFn<FloatingElement extends HTMLElement = HTMLElement> = (
+  props: FloatingComponentProps<FloatingElement>,
+) => React.ReactNode | null;
+
+export type RemapReferencePropsFn<ReferenceElement extends HTMLElement = HTMLElement> = (
+  props: ReferenceProps<ReferenceElement> & { shown: boolean },
+) => ReferenceProps<ReferenceElement>;
+
+export type UseFloatingElementProps<
+  FloatingElement extends HTMLElement = HTMLElement,
+  ReferenceElement extends HTMLElement = HTMLElement,
+> = Omit<UseFloatingMiddlewaresBootstrapOptions, 'arrowRef'> &
+  Omit<UseFloatingWithInteractionsProps, 'placement'> & {
+    onPlacementChange?: OnPlacementChange;
+    onReferenceHiddenChange?: (hidden: boolean) => void;
+    renderFloatingComponent: RenderFloatingComponentFn<FloatingElement>;
+    remapReferenceProps?: RemapReferencePropsFn<ReferenceElement>;
+    externalFloatingElementRef?: React.Ref<FloatingElement>;
+  };
+
+export type UseFloatingResult<ReferenceElement extends HTMLElement = HTMLElement> = {
+  anchorRef: Ref<ReferenceElement>;
+  anchorProps: ReferenceProps<ReferenceElement>;
+  component: React.ReactNode | null;
+};
+
+export const useFloatingElement = <
+  ReferenceElement extends HTMLElement = HTMLElement,
+  FloatingElement extends HTMLElement = HTMLElement,
+>({
+  // useFloatingMiddlewaresBootstrap
+  placement = 'bottom-start',
+  arrow,
+  arrowHeight,
+  arrowPadding,
+  sameWidth,
+  offsetByMainAxis = 0,
+  offsetByCrossAxis = 0,
+  customMiddlewares,
+  hideWhenReferenceHidden,
+  disableFlipMiddleware = false,
+
+  // useFloatingWithInteractions
+  trigger,
+  hoverDelay,
+  closeAfterClick,
+  disabled,
+  disableInteractive,
+  disableCloseOnClickOutside,
+  disableCloseOnEscKey,
+  defaultShown,
+  shown: shownProp,
+  onShownChange,
+  onShownChanged,
+  strategy,
+  onReferenceHiddenChange,
+
+  onPlacementChange,
+
+  renderFloatingComponent,
+  externalFloatingElementRef,
+  remapReferenceProps,
+}: UseFloatingElementProps<
+  FloatingElement,
+  ReferenceElement
+>): UseFloatingResult<ReferenceElement> => {
+  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);
+
+  const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
+    placement,
+    offsetByMainAxis,
+    offsetByCrossAxis,
+    customMiddlewares,
+    hideWhenReferenceHidden,
+    sameWidth,
+    arrow,
+    arrowRef,
+    arrowPadding,
+    arrowHeight,
+    disableFlipMiddleware,
+  });
+
+  const {
+    placement: resolvedPlacement,
+    shown,
+    willBeHide,
+    refs,
+    referenceProps,
+    floatingProps,
+    middlewareData,
+    onClose,
+    onRestoreFocus,
+    onEscapeKeyDown,
+  } = useFloatingWithInteractions({
+    middlewares,
+    strategy,
+    placement: strictPlacement,
+    trigger,
+    hoverDelay,
+    closeAfterClick,
+    disabled,
+    disableInteractive,
+    disableCloseOnClickOutside,
+    disableCloseOnEscKey,
+    defaultShown,
+    shown: shownProp,
+    onShownChange,
+    onShownChanged,
+  });
+
+  const resultRef = useExternRef<FloatingElement>(externalFloatingElementRef, refs.setFloating);
+
+  usePlacementChangeCallback(placement, resolvedPlacement, onPlacementChange);
+
+  useReferenceHiddenChangeCallback(middlewareData.hide, onReferenceHiddenChange);
+
+  const component = renderFloatingComponent({
+    shown,
+    willBeHide,
+    floatingProps,
+    floatingRef: resultRef,
+    middlewareData,
+    placement: resolvedPlacement,
+    onClose,
+    onRestoreFocus,
+    setArrowRef,
+  });
+
+  useGlobalEscKeyDown(shown, onEscapeKeyDown);
+
+  const remappedReferenceProps = useMemo(
+    () =>
+      remapReferenceProps ? remapReferenceProps({ ...referenceProps, shown }) : referenceProps,
+    [remapReferenceProps, shown, referenceProps],
+  );
+
+  return {
+    anchorRef: refs.setReference,
+    anchorProps: remappedReferenceProps,
+    component,
+  };
+};

package/src/hooks/useFocusVisible.ts

@@ -1,12 +1,23 @@
 import { type FocusEvent, useCallback, useContext, useState } from 'react';
 import { AppRootContext } from '../components/AppRoot/AppRootContext';
 
-export function useFocusVisible(withKeyboardInputCheck = true): {
+/**
+ * Определяет фокус элемента, когда его наличие необходимо обозначить визуально.
+ *
+ * Этот хук полезен для обозначения фокуса, когда для навигации используется
+ * клавиатура
+ *
+ * @since 7.2.0
+ */
+export function useFocusVisible(): {
   focusVisible: boolean;
   onFocus: (event: FocusEvent<HTMLElement>) => void;
   onBlur: (event: FocusEvent<HTMLElement>) => void;
 } {
   const [isFocused, setIsFocused] = useState(false);
+
+  // FIXME: Избавиться от чека контекста, так как без AppRoot не работает фокус
+  const withKeyboardInputCheck = true;
   const { keyboardInput } = useContext(AppRootContext);
 
   const onFocus = useCallback(

package/src/hooks/useReferenceElement.tsx

@@ -0,0 +1,13 @@
+import { isValidNotReactFragmentElement } from '../lib/utils';
+import { usePatchChildren } from './usePatchChildren';
+
+export const useReferenceElement = <ElementType extends HTMLElement = HTMLElement>(
+  ...args: Parameters<typeof usePatchChildren<ElementType>>
+) => {
+  const [children, injectProps, externRef] = args;
+  const child = isValidNotReactFragmentElement(children) ? children : <span>{children}</span>;
+
+  const [, patchedChild] = usePatchChildren(child, injectProps, externRef);
+
+  return patchedChild;
+};

package/src/hooks/useTabsNavigation.ts

@@ -3,7 +3,7 @@ import { pressedKey } from '../lib/accessibility';
 import { useDOM } from '../lib/dom';
 import { useGlobalEventListener } from './useGlobalEventListener';
 
-export function useTabsNavigation(enabled = true) {
+export function useTabsNavigation(enabled = true, isRtl = false) {
   const { document } = useDOM();
   const tabsRef = React.useRef<HTMLDivElement>(null);
   const getTabEls = () => {
@@ -13,7 +13,9 @@ export function useTabsNavigation(enabled = true) {
 
     return Array.from(
       // eslint-disable-next-line no-restricted-properties
-      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),
+      tabsRef.current.querySelectorAll<HTMLDivElement>(
+        `[role=tab]:not([disabled]):not([aria-disabled='true'])`,
+      ),
     );
   };
 
@@ -41,7 +43,7 @@ export function useTabsNavigation(enabled = true) {
         } else if (key === 'End') {
           nextIndex = tabEls.length - 1;
         } else {
-          const offset = key === 'ArrowRight' ? 1 : -1;
+          const offset = (key === 'ArrowRight' ? 1 : -1) * (isRtl ? -1 : 1);
           nextIndex = currentFocusedElIndex + offset;
         }
 

package/src/hooks/useTodayDate.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { differenceInMilliseconds, endOfToday, isSameDay } from 'date-fns';
+import { differenceInMilliseconds, isSameDay, startOfTomorrow } from 'date-fns';
 import { useDOM } from '../lib/dom';
 
 /**
@@ -15,46 +15,49 @@ export function useTodayDate(listenDayChangesForUpdate = false): Date {
   const { document, window } = useDOM();
   const [todayDate, setTodayDate] = React.useState(() => new Date());
 
-  React.useEffect(() => {
-    if (!listenDayChangesForUpdate || !document || !window) {
-      return;
-    }
+  React.useEffect(
+    function setupTodaysDateRecalculationListener() {
+      if (!listenDayChangesForUpdate || !document || !window) {
+        return;
+      }
 
-    let timeout: number | undefined = undefined;
+      let timeout: number | undefined = undefined;
 
-    const recalcTimeout = () => {
-      if (document.visibilityState === 'visible') {
-        const now = new Date();
+      const recalcTimeout = () => {
+        if (document.visibilityState === 'visible') {
+          const now = new Date();
 
-        const timeToDayChange = differenceInMilliseconds(endOfToday(), now);
+          const timeToDayChange = differenceInMilliseconds(startOfTomorrow(), now);
 
-        // Удаляем старый таймаут
-        window.clearTimeout(timeout);
+          // Удаляем старый таймаут
+          window.clearTimeout(timeout);
 
-        // Создаем новый таймаут
-        timeout = window.setTimeout(() => {
-          setTodayDate(now);
-        }, timeToDayChange);
+          // Создаем новый таймаут
+          timeout = window.setTimeout(() => {
+            setTodayDate(new Date());
+          }, timeToDayChange);
 
-        // Если todayDate не обновился в таймаут - обновить при заходе на вкладку
-        if (!isSameDay(todayDate, now)) {
-          setTodayDate(now);
+          // Если todayDate не обновился в таймаут - обновить при заходе на вкладку
+          if (!isSameDay(todayDate, now)) {
+            setTodayDate(now);
+          }
         }
-      }
-    };
+      };
 
-    recalcTimeout();
+      recalcTimeout();
 
-    // Создаем слушатель visibilitychange, чтобы предотвратить пропуск обновления стейта после заморозки вкладки
-    // Если человек ее долго не трогал или закрывал крышку ноута и тп
-    // https://developer.chrome.com/blog/page-lifecycle-api/
-    document.addEventListener('visibilitychange', recalcTimeout);
+      // Создаем слушатель visibilitychange, чтобы предотвратить пропуск обновления стейта после заморозки вкладки
+      // Если человек ее долго не трогал или закрывал крышку ноута и тп
+      // https://developer.chrome.com/blog/page-lifecycle-api/
+      document.addEventListener('visibilitychange', recalcTimeout);
 
-    return () => {
-      window.clearTimeout(timeout);
-      document.removeEventListener('visibilitychange', recalcTimeout);
-    };
-  }, [document, listenDayChangesForUpdate, todayDate, window]);
+      return () => {
+        window.clearTimeout(timeout);
+        document.removeEventListener('visibilitychange', recalcTimeout);
+      };
+    },
+    [document, listenDayChangesForUpdate, todayDate, window],
+  );
 
   return todayDate;
 }