@vkontakte/vkui 7.0.0 → 7.1.0

package/src/hooks/useDirection.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useDOM } from '../lib/dom';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
-type Direction = 'ltr' | 'rtl';
+export type Direction = 'ltr' | 'rtl';
 type WritingMode = 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';
 
 /**
@@ -35,11 +35,11 @@ type WritingMode = 'horizontal-tb' | 'vertical-rl' | 'vertical-lr';
  * ```
  */
 export function useDirection<T extends HTMLElement>(): [
-  React.RefObject<T>,
+  React.RefObject<T | null>,
   Direction | undefined,
   WritingMode | undefined,
 ] {
-  const ref = React.useRef<T>(null);
+  const ref = React.useRef<T | null>(null);
 
   const [direction, setDirection] = React.useState<Direction | undefined>(undefined);
   const [writingMode, setWritingMode] = React.useState<WritingMode | undefined>(undefined);

package/src/hooks/useDraggableWithDomApi/types.ts

@@ -25,7 +25,7 @@ export type SiblingItem = {
 export type SwappedItemRange = { from: number; to: number };
 
 export interface UseDraggableProps<T extends HTMLElement = HTMLElement> {
-  elRef: React.MutableRefObject<T | null>;
+  elRef: React.RefObject<T | null>;
   onDragFinish?: (value: SwappedItemRange) => void;
 }
 

package/src/hooks/useEnsuredControl.ts

@@ -50,7 +50,7 @@ export function useCustomEnsuredControl<V = any>({
   const isControlled = value !== undefined;
   const [localValue, setLocalValue] = React.useState(defaultValue);
 
-  const preservedControlledValueRef = React.useRef<V | undefined>();
+  const preservedControlledValueRef = React.useRef<V | undefined>(undefined);
   useIsomorphicLayoutEffect(() => {
     preservedControlledValueRef.current = value;
   });

package/src/hooks/useExternRef.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { setRef } from '../lib/utils';
 
-class ExternalRef<T> implements React.MutableRefObject<T | null> {
+class ExternalRef<T> implements React.RefObject<T | null> {
   #element: T | null = null;
   readonly #externRefs = new Set<React.Ref<T>>();
 
@@ -45,7 +45,7 @@ class ExternalRef<T> implements React.MutableRefObject<T | null> {
 
 export function useExternRef<T>(
   ...externRefs: Array<React.Ref<T> | undefined | false>
-): React.MutableRefObject<T | null> {
+): React.RefObject<T | null> {
   const ref = React.useRef<ExternalRef<T> | null>(null);
   if (ref.current === null) {
     ref.current = new ExternalRef(externRefs);

package/src/hooks/useFocusTrap.ts

@@ -112,7 +112,7 @@ export type UseFocusTrapProps = {
  * @private
  */
 export const useFocusTrap = (
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | null>,
   {
     mount = true,
     disabled = false,

package/src/hooks/useGlobalOnClickOutside.ts

@@ -8,7 +8,7 @@ import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
  * @private
  */
 export const useGlobalOnClickOutside = <
-  T extends React.RefObject<ElementType> | undefined | null,
+  T extends React.RefObject<ElementType | null> | undefined | null,
   ElementType extends Element = Element,
 >(
   callback: (event: MouseEvent) => void,

package/src/hooks/useKeyboardInputTracker.ts

@@ -29,7 +29,7 @@ const EVENT_OPTIONS = {
  *
  * @private
  */
-export function useKeyboardInputTracker(): React.MutableRefObject<boolean> {
+export function useKeyboardInputTracker(): React.RefObject<boolean> {
   const { document } = useDOM();
   const keyboardFocusingStartedRef = React.useRef(false);
 

package/src/hooks/useMutationObserver.ts

@@ -3,7 +3,7 @@ import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 import { useStableCallback } from './useStableCallback';
 
 export const useMutationObserver = (
-  ref: React.MutableRefObject<HTMLElement | null> | React.RefObject<HTMLElement | null> | null,
+  ref: React.RefObject<HTMLElement | null> | null,
   callback: () => void,
 ): void => {
   const stableCallback = useStableCallback(callback);

package/src/hooks/useNativeFormResetListener.ts

@@ -2,7 +2,7 @@ import type * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
 export const useNativeFormResetListener = (
-  ref: React.RefObject<HTMLElement>,
+  ref: React.RefObject<HTMLElement | null>,
   handler: (event: Event) => void,
 ): void => {
   useIsomorphicLayoutEffect(() => {

package/src/hooks/usePatchChildren.ts

@@ -19,14 +19,7 @@ type InjectProps<T> = Omit<React.HTMLAttributes<T>, keyof React.DOMAttributes<T>
 
 type ExpectedReactElement<T> = React.ReactElement<HasRootRef<T> & React.DOMAttributes<T>>;
 
-type ChildrenElement<T> =
-  | ExpectedReactElement<T>
-  | React.ReactText
-  | React.ReactFragment
-  | React.ReactPortal
-  | boolean
-  | null
-  | undefined;
+type ChildrenElement<T> = ExpectedReactElement<T> | React.ReactNode;
 
 /**
  * Хук позволяет пропатчить переданный компонент так, чтобы можно было получить ссылку на его
@@ -55,7 +48,7 @@ export const usePatchChildren = <ElementType extends HTMLElement = HTMLElement>(
   children?: ChildrenElement<ElementType>,
   injectProps?: InjectProps<ElementType>,
   externRef?: React.Ref<ElementType>,
-): [React.MutableRefObject<ElementType | null>, ChildrenElement<ElementType> | undefined] => {
+): [React.RefObject<ElementType | null>, ChildrenElement<ElementType> | undefined] => {
   const isValidElementResult = isValidNotReactFragmentElement(children);
   const isDOMTypeElementResult =
     isValidElementResult &&

package/src/hooks/usePrevious.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
  * @deprecated постарайтесь избавится от этого хука или используйте `useStateWithPrev`
  */
 export function usePrevious<T>(value: T): T | undefined {
-  const ref = React.useRef<T | undefined>();
+  const ref = React.useRef<T | undefined>(undefined);
 
   React.useEffect(() => {
     ref.current = value;

package/src/hooks/useResizeObserver.ts

@@ -1,30 +1,54 @@
 import { useEffect } from 'react';
 import type * as React from 'react';
+import { useDOM } from '../lib/dom';
 import { CustomResizeObserver } from '../lib/floating/customResizeObserver';
+import { isRefObject } from '../lib/isRefObject';
 import { useStableCallback } from './useStableCallback';
 
 /**
  * Хук вызывает переданный коллбэк при изменении размеров элемента.
  */
 export function useResizeObserver(
-  ref: React.MutableRefObject<HTMLElement | null> | React.RefObject<HTMLElement | null> | null,
-  callback: (element: HTMLElement) => void,
+  ref: React.RefObject<HTMLElement | null> | Window | null | undefined,
+  callback: (element: HTMLElement | Window) => void,
 ): void {
   const stableCallback = useStableCallback(callback);
+  const { window } = useDOM();
 
   useEffect(
     function addResizeObserverHandler() {
+      if (!ref || !window) {
+        return;
+      }
+
+      if (ref === window) {
+        const onResize = () => stableCallback(ref);
+        ref.addEventListener('resize', onResize);
+        return () => ref.removeEventListener('resize', onResize);
+      }
+
       /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */
-      if (!ref || !ref.current) {
+      if (!isRefObject(ref) || !ref.current) {
         return;
       }
       const element = ref.current;
-      const observer = new CustomResizeObserver(() => stableCallback(element));
+      const canUseResizeObserver =
+        'ResizeObserver' in window && window.ResizeObserver !== undefined;
+
+      const observeFn = () => stableCallback(element);
+
+      const observer: ResizeObserver | CustomResizeObserver = canUseResizeObserver
+        ? // eslint-disable-next-line compat/compat
+          new ResizeObserver(observeFn)
+        : new CustomResizeObserver(observeFn);
       observer.observe(element);
-      observer.appendToTheDOM();
+
+      if (observer instanceof CustomResizeObserver) {
+        observer.appendToTheDOM();
+      }
 
       return () => observer.disconnect();
     },
-    [ref, stableCallback],
+    [ref, stableCallback, window],
   );
 }

package/src/hooks/useStateWithPrev.ts

@@ -35,9 +35,5 @@ function reducer<T>(
 export function useStateWithPrev<T>(
   initialState: T | (() => T),
 ): [[T, T | undefined], React.Dispatch<React.SetStateAction<T>>] {
-  return React.useReducer<React.Reducer<[T, T | undefined], React.SetStateAction<T>>, undefined>(
-    reducer,
-    undefined,
-    () => initializer(initialState),
-  );
+  return React.useReducer(reducer, undefined, () => initializer(initialState));
 }

package/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts

@@ -10,7 +10,7 @@ export function useSyncHTMLWithBaseVKUIClasses({
   enable,
   layout,
 }: {
-  appRootRef: React.RefObject<HTMLElement>;
+  appRootRef: React.RefObject<HTMLElement | null>;
   mode: AppRootMode;
   layout?: AppRootLayout;
   enable: boolean;

package/src/hooks/useSyncHTMLWithTokens.ts

@@ -5,7 +5,7 @@ export function useSyncHTMLWithTokens({
   appRootRef,
   enable,
 }: {
-  appRootRef: React.RefObject<HTMLElement>;
+  appRootRef: React.RefObject<HTMLElement | null>;
   enable: boolean;
 }) {
   const tokenClassName = useTokensClassName();

package/src/hooks/useTabsNavigation.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { pressedKey } from '../lib/accessibility';
+import { useDOM } from '../lib/dom';
+import { useGlobalEventListener } from './useGlobalEventListener';
+
+export function useTabsNavigation(enabled = true) {
+  const { document } = useDOM();
+  const tabsRef = React.useRef<HTMLDivElement>(null);
+  const getTabEls = () => {
+    if (!tabsRef.current) {
+      return [];
+    }
+
+    return Array.from(
+      // eslint-disable-next-line no-restricted-properties
+      tabsRef.current.querySelectorAll<HTMLDivElement>('[role=tab]:not([disabled])'),
+    );
+  };
+
+  const handleDocumentKeydown = (event: KeyboardEvent) => {
+    if (!document || !tabsRef.current || !enabled) {
+      return;
+    }
+
+    const key = pressedKey(event);
+
+    switch (key) {
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'End':
+      case 'Home': {
+        const tabEls = getTabEls();
+        const currentFocusedElIndex = tabEls.findIndex((el) => document.activeElement === el);
+        if (currentFocusedElIndex === -1) {
+          return;
+        }
+
+        let nextIndex = 0;
+        if (key === 'Home') {
+          nextIndex = 0;
+        } else if (key === 'End') {
+          nextIndex = tabEls.length - 1;
+        } else {
+          const offset = key === 'ArrowRight' ? 1 : -1;
+          nextIndex = currentFocusedElIndex + offset;
+        }
+
+        const nextTabEl = tabEls[nextIndex];
+
+        if (nextTabEl) {
+          event.preventDefault();
+          nextTabEl.focus();
+        }
+
+        break;
+      }
+      /*
+       В JAWS и NVDA стрелка вниз активирует контент.
+       Это не прописано в стандартах, но по ссылке ниже это рекомендуется делать.
+       https://inclusive-components.design/tabbed-interfaces/
+      */
+      case 'ArrowDown': {
+        const tabEls = getTabEls();
+        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);
+
+        if (!currentFocusedEl || currentFocusedEl.getAttribute('aria-selected') !== 'true') {
+          return;
+        }
+
+        const relatedContentElId = currentFocusedEl.getAttribute('aria-controls');
+        if (!relatedContentElId) {
+          return;
+        }
+
+        // eslint-disable-next-line no-restricted-properties
+        const relatedContentEl = document.getElementById(relatedContentElId);
+        if (!relatedContentEl) {
+          return;
+        }
+
+        event.preventDefault();
+        relatedContentEl.focus();
+
+        break;
+      }
+      case 'Space':
+      case 'Enter': {
+        const tabEls = getTabEls();
+        const currentFocusedEl = tabEls.find((el) => document.activeElement === el);
+        if (currentFocusedEl) {
+          currentFocusedEl.click();
+        }
+      }
+    }
+  };
+
+  useGlobalEventListener(document, 'keydown', handleDocumentKeydown, {
+    capture: true,
+  });
+
+  return {
+    tabsRef,
+  };
+}

package/src/index.ts

@@ -60,6 +60,9 @@ export type {
   ImageBaseExpectedIconProps,
   ImageBaseBadgeProps,
   ImageBaseOverlayProps,
+  ImageBaseFloatElementProps,
+  FloatElementPlacement,
+  FloatElementIndentation,
 } from './components/ImageBase/ImageBase';
 
 /**
@@ -275,6 +278,7 @@ export type { CustomPaginationPageButtonProps } from './components/Pagination/Pa
 export type { CustomPaginationNavigationButton } from './components/Pagination/PaginationNavigationButton/PaginationNavigationButton';
 export { Accordion } from './components/Accordion/Accordion';
 export type { AccordionProps } from './components/Accordion/Accordion';
+export { AccordionContext } from './components/Accordion/AccordionContext';
 export type { AccordionSummaryProps } from './components/Accordion/AccordionSummary';
 export type { AccordionContentProps } from './components/Accordion/AccordionContent';
 
@@ -404,6 +408,7 @@ export { ColorSchemeProvider } from './components/ColorSchemeProvider/ColorSchem
 export type { ColorSchemeProviderProps } from './components/ColorSchemeProvider/ColorSchemeProvider';
 export { ColorScheme } from './lib/colorScheme';
 export type { ColorSchemeType } from './lib/colorScheme';
+export { DOMContext } from './lib/dom';
 export { LocaleProvider } from './components/LocaleProvider/LocaleProvider';
 export type { LocaleProviderProps } from './components/LocaleProvider/LocaleProvider';
 export { PlatformProvider } from './components/PlatformProvider/PlatformProvider';
@@ -415,6 +420,7 @@ export type {
   PopoverArrowProps,
   PopoverContentRenderProp,
 } from './components/Popover/Popover';
+export { usePopover } from './components/Popover/usePopover';
 
 /**
  * HOCs
@@ -444,6 +450,7 @@ export { useNavTransition } from './components/NavTransitionContext/NavTransitio
 export { useNavDirection } from './components/NavTransitionDirectionContext/NavTransitionDirectionContext';
 export { useNavId } from './components/NavIdContext/useNavId';
 export type { TransitionDirection } from './components/NavTransitionDirectionContext/NavTransitionDirectionContext';
+export { useCSSKeyframesAnimationController as unstable_useCSSKeyframesAnimationController } from './lib/animation';
 
 /**
  * Utils

package/src/lib/animation/useCSSTransition.ts

@@ -32,7 +32,7 @@ export type UseCSSTransitionOptions = {
 export type UseCSSTransition<Ref extends Element = Element> = [
   state: UseCSSTransitionState,
   {
-    ref: React.RefObject<Ref>;
+    ref: React.RefObject<Ref | null>;
     onTransitionEnd?: TransitionEventHandler;
   },
 ];

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

@@ -9,11 +9,11 @@ import {
   sizeMiddleware,
 } from '../adapters';
 import { checkIsNotAutoPlacement, getAutoPlacementAlign } from '../functions';
-import type {
-  ArrowOptions,
-  Placement,
-  PlacementWithAuto,
-  UseFloatingMiddleware,
+import {
+  type ArrowOptions,
+  type Placement,
+  type PlacementWithAuto,
+  type UseFloatingMiddleware,
 } from '../types/common';
 
 export interface UseFloatingMiddlewaresBootstrapOptions {
@@ -131,16 +131,16 @@ export const useFloatingMiddlewaresBootstrap = ({
 
     return { middlewares, strictPlacement: isAutoPlacement ? undefined : placement };
   }, [
+    placement,
     offsetByCrossAxis,
-    arrowRef,
     arrow,
     arrowHeight,
-    arrowPadding,
     offsetByMainAxis,
+    disableFlipMiddleware,
     sameWidth,
     customMiddlewares,
-    placement,
     hideWhenReferenceHidden,
-    disableFlipMiddleware,
+    arrowRef,
+    arrowPadding,
   ]);
 };

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

@@ -1,8 +1,9 @@
-import type {
-  Placement,
-  UseFloatingData,
-  UseFloatingMiddleware,
-  UseFloatingRefs,
+import {
+  type FloatingPositionStrategy,
+  type Placement,
+  type UseFloatingData,
+  type UseFloatingMiddleware,
+  type UseFloatingRefs,
 } from '../types/common';
 
 export type InteractiveTriggerType = 'click' | 'hover' | 'focus';
@@ -25,6 +26,15 @@ export type OnShownChange = (shown: boolean, reason?: ShownChangeReason) => void
 
 export interface UseFloatingWithInteractionsProps {
   placement?: Placement;
+  /**
+   * Стратегия позиционирования всплывающего элемента.
+   *
+   * - `"fixed"` - позиционируется, используя `position: fixed`. Является значением по умолчанию
+   * - `"absolute"` - позиционируется, используя `position: absolute`, относительно ближайшего элемента с `position: relative`
+   *
+   * > `strategy="absolute"` Рекомендуется использовать с `usePortal={false}`. И нужно не забыть обернуть в элемент с `position: relative`
+   */
+  strategy?: FloatingPositionStrategy;
   middlewares?: UseFloatingMiddleware[];
   /**
    * Механика вызова всплывающего элемента.

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

@@ -33,6 +33,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
 
   // UseFloating
   placement: placementProp = 'bottom',
+  strategy: strategyProp = 'fixed',
   middlewares,
   hoverDelay = 0,
   closeAfterClick = false,
@@ -73,7 +74,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
 
   const blockMouseEnterRef = React.useRef(false);
   const blockFocusRef = React.useRef(false);
-  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
   const handleCloseOnReferenceClickOutsideDisabled =
     disabled || disableCloseOnClickOutside || willBeHide || !shownLocalState.shown;
@@ -84,7 +85,7 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
 
   // Библиотека `floating-ui`
   const { placement, x, y, strategy, refs, middlewareData } = useFloating<T>({
-    strategy: 'fixed',
+    strategy: strategyProp,
     placement: placementProp,
     middleware: middlewares,
     whileElementsMounted,
@@ -323,6 +324,10 @@ export const useFloatingWithInteractions = <T extends HTMLElement = HTMLElement>
   const referencePropsRef = React.useRef<ReferenceProps>({});
   const floatingPropsRef = React.useRef<FloatingProps>({ style: {} });
 
+  useIsomorphicLayoutEffect(() => {
+    referencePropsRef.current = {};
+  }, [triggerOnHover, triggerOnFocus, triggerOnClick]);
+
   if (shownFinalState) {
     floatingPropsRef.current.style = convertFloatingDataToReactCSSProperties(
       strategy,

package/src/lib/utils.ts

@@ -14,12 +14,12 @@ export function setRef<T>(element: T, ref?: React.Ref<T>): void {
     if (typeof ref === 'function') {
       ref(element);
     } else {
-      (ref as React.MutableRefObject<T>).current = element;
+      (ref as React.RefObject<T>).current = element;
     }
   }
 }
 
-export function multiRef<T>(...refs: Array<React.Ref<T> | undefined>): React.RefObject<T> {
+export function multiRef<T>(...refs: Array<React.Ref<T> | undefined>): React.RefObject<T | null> {
   let current: T | null = null;
   return {
     get current() {

package/src/styles/constants.css

@@ -77,6 +77,7 @@
   --vkui_internal--z_index_image_base_overlay: 0;
   --vkui_internal--z_index_image_base_border: 1;
   --vkui_internal--z_index_image_base_badge: 2;
+  --vkui_internal--z_index_image_base_positioned_element: 3;
 
   /* z_index HorizontalScroll isolate */
   --vkui_internal--z_index_horizontal_scroll_arrow: 1;

package/dist/components/BaseGallery/BaseGallery.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import type { BaseGalleryProps } from './types';
-export declare const BaseGallery: ({ bullets, getRootRef, children, slideWidth, slideIndex, dragDisabled, onDragStart, onDragEnd, onChange, onPrevClick, onNextClick, align, showArrows, getRef, arrowSize, ...restProps }: BaseGalleryProps) => React.ReactNode;
-//# sourceMappingURL=BaseGallery.d.ts.map

package/dist/components/BaseGallery/BaseGallery.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseGallery.d.ts","sourceRoot":"","sources":["../../../src/components/BaseGallery/BaseGallery.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EAAE,gBAAgB,EAAkD,MAAM,SAAS,CAAC;AA2BhG,eAAO,MAAM,WAAW,4LAiBrB,gBAAgB,KAAG,KAAK,CAAC,SAkU3B,CAAC"}