@vkontakte/vkui 6.5.2 → 6.6.0

package/src/components/View/ViewInfinite.tsx

@@ -2,20 +2,20 @@ import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { withContext } from '../../hoc/withContext';
 import { withPlatform } from '../../hoc/withPlatform';
-import { canUseDOM, DOMProps, withDOM } from '../../lib/dom';
-import { getNavId, NavIdProps } from '../../lib/getNavId';
+import { canUseDOM, type DOMProps, withDOM } from '../../lib/dom';
+import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
-import { HasPlatform, HTMLAttributesWithRootRef } from '../../types';
-import { ScrollContext, ScrollContextInterface } from '../AppRoot/ScrollContext';
+import type { HasPlatform, HTMLAttributesWithRootRef } from '../../types';
+import { ScrollContext, type ScrollContextInterface } from '../AppRoot/ScrollContext';
 import {
   ConfigProviderContext,
-  ConfigProviderContextInterface,
+  type ConfigProviderContextInterface,
 } from '../ConfigProvider/ConfigProviderContext';
 import { NavViewIdContext } from '../NavIdContext/NavIdContext';
 import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
 import { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';
-import { SplitColContext, SplitColContextProps } from '../SplitCol/SplitColContext';
-import { Touch, TouchEvent } from '../Touch/Touch';
+import { SplitColContext, type SplitColContextProps } from '../SplitCol/SplitColContext';
+import { type CustomTouchEvent, Touch } from '../Touch/Touch';
 import {
   getSwipeBackPredicates,
   hasHorizontalScrollableElementWithScrolledToLeft,
@@ -401,7 +401,7 @@ class ViewInfiniteComponent extends React.Component<
     });
   }
 
-  handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext = (event: TouchEvent) => {
+  handleTouchMoveXForNativeIOSSwipeBackOrSwipeNext = (event: CustomTouchEvent) => {
     if (this.state.browserSwipe) {
       return;
     }
@@ -413,7 +413,7 @@ class ViewInfiniteComponent extends React.Component<
     }
   };
 
-  handleTouchMoveXForIOSSwipeBackSimulation = (event: TouchEvent) => {
+  handleTouchMoveXForIOSSwipeBackSimulation = (event: CustomTouchEvent) => {
     if (this.swipeBackPrevented || swipeBackExcluded(event)) {
       return;
     }
@@ -480,7 +480,7 @@ class ViewInfiniteComponent extends React.Component<
     }
   };
 
-  handleTouchEndForIOSSwipeBackSimulation = (event: TouchEvent) => {
+  handleTouchEndForIOSSwipeBackSimulation = (event: CustomTouchEvent) => {
     this.swipeBackPrevented = false;
 
     if (this.state.swipingBack && this.window) {

package/src/components/View/utils.ts

@@ -1,9 +1,9 @@
 import { getOverflowAncestors } from '../../lib/floating';
-import { TouchEvent } from '../Touch/Touch';
+import { type CustomTouchEvent } from '../Touch/Touch';
 
 const swipeBackExcludedSelector = 'input, textarea, [data-vkui-swipe-back=false]';
 
-export function swipeBackExcluded(e: TouchEvent): boolean {
+export function swipeBackExcluded(e: CustomTouchEvent): boolean {
   const target = e.originalEvent.target as HTMLElement;
   // eslint-disable-next-line no-restricted-properties
   return Boolean(target?.closest?.(swipeBackExcludedSelector));

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

@@ -11,6 +11,7 @@
   overflow: hidden !important;
   border: 0 !important;
   opacity: 0;
+  user-select: none;
 }
 
 /* Чтобы фокус скринридера, попавший на скрытый инпут был виден.

package/src/components/WriteBar/WriteBar.tsx

@@ -3,11 +3,11 @@ import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { callMultiple } from '../../lib/callMultiple';
-import { HasRef, HasRootRef } from '../../types';
+import type { HasRef, HasRootRef } from '../../types';
 import { useResizeTextarea } from '../Textarea/useResizeTextarea';
 import { Headline } from '../Typography/Headline/Headline';
 import { Title } from '../Typography/Title/Title';
-import { TypographyProps } from '../Typography/Typography';
+import type { TypographyProps } from '../Typography/Typography';
 import styles from './WriteBar.module.css';
 
 export interface WriteBarProps

package/src/helpers/getMergedSameEventsByProps.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { AnyFunction } from '@vkontakte/vkjs';
 import type { PickOnlyFunctionProps } from '../types';
 

package/src/hoc/withPlatform.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
-import { HasPlatform } from '../types';
+import type { HasPlatform } from '../types';
 
 export function withPlatform<T extends HasPlatform>(
   Component: React.ComponentType<T>,

package/src/hooks/useAdaptivityConditionalRender/helpers.ts

@@ -1,9 +1,9 @@
 import {
-  SizeTypeValues,
+  type SizeTypeValues,
   tryToCheckIsDesktop,
-  ViewHeightType,
+  type ViewHeightType,
   ViewWidth,
-  ViewWidthType,
+  type ViewWidthType,
 } from '../../lib/adaptivity';
 import type { PlatformType } from '../../lib/platform';
 import type {

package/src/hooks/useAdaptivityConditionalRender/types.ts

@@ -1,4 +1,4 @@
-import { type CSSBreakpoints, SizeTypeValues } from '../../lib/adaptivity';
+import type { CSSBreakpoints, SizeTypeValues } from '../../lib/adaptivity';
 
 export type ForcedHiddenByAdaptivityProviderType = false; // имеется ввиду, что зашили значение, например, <AdaptivityProvider sizeY="regular" />
 

package/src/hooks/useAppearance.ts

@@ -1,5 +1,5 @@
 import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
-import { AppearanceType, DEFAULT_APPEARANCE } from '../lib/appearance';
+import { type AppearanceType, DEFAULT_APPEARANCE } from '../lib/appearance';
 
 export function useAppearance(): AppearanceType {
   const { appearance } = useConfigProvider();

package/src/hooks/useAutoFocus.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
 export function useAutoFocus(

package/src/hooks/useCalendar.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { addMonths, endOfDay, isAfter, isBefore, isSameDay, startOfDay, subMonths } from 'date-fns';
-import { CalendarProps } from '../components/Calendar/Calendar';
+import type { CalendarProps } from '../components/Calendar/Calendar';
 import { DEFAULT_MAX_YEAR, DEFAULT_MIN_YEAR, isDayMinMaxRestricted } from '../lib/calendar';
 
 export interface UseCalendarDependencies

package/src/hooks/useDraggableWithDomApi/types.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import type { TouchEvent } from '../../components/Touch/Touch';
+import type * as React from 'react';
+import type { CustomTouchEvent } from '../../components/Touch/Touch';
 
 export type Direction = 'up' | 'down';
 
@@ -30,9 +30,9 @@ export interface UseDraggableProps<T extends HTMLElement = HTMLElement> {
 }
 
 export interface DraggableProps {
-  onDragStart: (this: void, event: TouchEvent) => void;
-  onDragEnd: (this: void, event: TouchEvent) => void;
-  onDragMove: (this: void, event: TouchEvent) => void;
+  onDragStart: (this: void, event: CustomTouchEvent) => void;
+  onDragEnd: (this: void, event: CustomTouchEvent) => void;
+  onDragMove: (this: void, event: CustomTouchEvent) => void;
 }
 
 export interface UseDraggable extends DraggableProps {

package/src/hooks/useDraggableWithDomApi/useDraggableWithDomApi.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { TouchEvent } from '../../components/Touch/Touch';
+import type { CustomTouchEvent } from '../../components/Touch/Touch';
 import { getBoundingClientRect, getNearestOverflowAncestor, getNodeScroll } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { createAutoScrollController, getAutoScrollingData } from './autoScroll';
@@ -192,12 +192,12 @@ export const useDraggableWithDomApi = <T extends HTMLElement>({
     }, AUTO_SCROLL_START_DELAY);
   };
 
-  const onDragStart = (event: TouchEvent) => {
+  const onDragStart = (event: CustomTouchEvent) => {
     event.originalEvent.stopPropagation();
     event.originalEvent.preventDefault();
   };
 
-  const onDragMove = (event: TouchEvent) => {
+  const onDragMove = (event: CustomTouchEvent) => {
     event.originalEvent.stopPropagation();
     event.originalEvent.preventDefault();
 
@@ -236,7 +236,7 @@ export const useDraggableWithDomApi = <T extends HTMLElement>({
     }
   };
 
-  const onDragEnd = (event: TouchEvent) => {
+  const onDragEnd = (event: CustomTouchEvent) => {
     event.originalEvent.stopPropagation();
     event.originalEvent.preventDefault();
 

package/src/hooks/useFocusVisible.ts

@@ -1,4 +1,4 @@
-import { FocusEvent, useCallback, useContext, useState } from 'react';
+import { type FocusEvent, useCallback, useContext, useState } from 'react';
 import { AppRootContext } from '../components/AppRoot/AppRootContext';
 
 export function useFocusVisible(withKeyboardInputCheck = true): {

package/src/hooks/useFocusVisibleClassName.ts

@@ -1,5 +1,5 @@
 import { classNames } from '@vkontakte/vkjs';
-import { LiteralUnion } from '../types';
+import type { LiteralUnion } from '../types';
 import styles from '../styles/focusVisible.module.css';
 
 export const focusVisiblePresetModeClassNames: Record<'inside' | 'outside', string> = {

package/src/hooks/useGlobalOnClickOutside.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { isElement, useDOM } from '../lib/dom';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 

package/src/hooks/useMutationObserver.ts

@@ -0,0 +1,22 @@
+import type * as React from 'react';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import { useStableCallback } from './useStableCallback';
+
+export const useMutationObserver = (
+  ref: React.MutableRefObject<HTMLElement | null> | React.RefObject<HTMLElement | null> | null,
+  callback: () => void,
+): void => {
+  const stableCallback = useStableCallback(callback);
+
+  useIsomorphicLayoutEffect(() => {
+    if (!ref || !ref.current) {
+      return;
+    }
+    const observer = new MutationObserver(stableCallback);
+    observer.observe(ref.current, {
+      subtree: true,
+      childList: true,
+    });
+    return () => observer.disconnect();
+  }, [ref, stableCallback]);
+};

package/src/hooks/useNativeFormResetListener.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
 export const useNativeFormResetListener = (

package/src/hooks/usePlatform.ts

@@ -1,5 +1,5 @@
 import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
-import { PlatformType } from '../lib/platform';
+import type { PlatformType } from '../lib/platform';
 
 export function usePlatform(): PlatformType {
   const { platform } = useConfigProvider();

package/src/hooks/useResizeObserver.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import * as React from 'react';
+import type * as React from 'react';
 import { CustomResizeObserver } from '../lib/floating/customResizeObserver';
 import { useStableCallback } from './useStableCallback';
 

package/src/index.ts

@@ -124,15 +124,18 @@ export type {
 export { ActionSheetItem } from './components/ActionSheetItem/ActionSheetItem';
 export type { ActionSheetItemProps } from './components/ActionSheetItem/ActionSheetItem';
 export { ActionSheetDefaultIosCloseItem } from './components/ActionSheet/ActionSheetDefaultIosCloseItem';
-export { ScreenSpinner, ScreenSpinnerContext } from './components/ScreenSpinner/ScreenSpinner';
-export type {
-  ScreenSpinnerProps,
-  ScreenSpinnerContextProps,
-} from './components/ScreenSpinner/ScreenSpinner';
+export { ScreenSpinner } from './components/ScreenSpinner/ScreenSpinner';
+export { ScreenSpinnerContext } from './components/ScreenSpinner/context';
+export type { ScreenSpinnerProps } from './components/ScreenSpinner/ScreenSpinner';
+export type { ScreenSpinnerContextProps } from './components/ScreenSpinner/context';
 export { Snackbar } from './components/Snackbar/Snackbar';
 export type { SnackbarProps } from './components/Snackbar/Snackbar';
 export { Tooltip } from './components/Tooltip/Tooltip';
-export type { TooltipProps } from './components/Tooltip/Tooltip';
+export type {
+  TooltipProps,
+  TooltipOnShownChange,
+  TooltipArrowProps,
+} from './components/Tooltip/Tooltip';
 
 /**
  * Modals

package/src/lib/SSR.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ConfigProviderOverride } from '../components/ConfigProvider/ConfigProviderOverride';
 import { useObjectMemo } from '../hooks/useObjectMemo';
-import { BrowserInfo, computeBrowserInfo } from './browser';
+import { type BrowserInfo, computeBrowserInfo } from './browser';
 import { DOMContext, getDOM } from './dom';
 import { platform as getPlatform } from './platform';
 

package/src/lib/accessibility.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { HasChildren, ValuesOfObject } from '../types';
+import type * as React from 'react';
+import type { HasChildren, ValuesOfObject } from '../types';
 import { getTextFromChildren } from './children';
 
 export const FOCUSABLE_ELEMENTS_LIST: string[] = [

package/src/lib/adaptivity/constants.ts

@@ -1,4 +1,4 @@
-import { ValuesOfObject } from '../../types';
+import type { ValuesOfObject } from '../../types';
 
 /**
  * Public API.

package/src/lib/adaptivity/functions.ts

@@ -2,12 +2,12 @@ import type { Exact } from '../../types';
 import { type PlatformType } from '../platform';
 import { BREAKPOINTS } from './breakpoints';
 import {
-  SizeTypeValues,
+  type SizeTypeValues,
   VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP,
   ViewHeight,
-  ViewHeightType,
+  type ViewHeightType,
   ViewWidth,
-  ViewWidthType,
+  type ViewWidthType,
 } from './constants';
 import type { CSSBreakpointsClassNames, MediaQueries } from './types';
 

package/src/lib/children.ts

@@ -1,7 +1,7 @@
 // copied from react-children-utilities
 // @see https://github.com/fernandopasik/react-children-utilities/tree/main
 
-import * as React from 'react';
+import type * as React from 'react';
 import { Children, isValidElement } from 'react';
 
 export const childToString = (child?: React.ReactNode): string => {

package/src/lib/floating/functions.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type {
   AutoPlacementType,
   FloatingPositionStrategy,

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

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { UseFloatingMiddlewaresBootstrapOptions } from '../useFloatingMiddlewaresBootstrap';
 import type {
   UseFloatingWithInteractionsProps,
   UseFloatingWithInteractionsReturn,
 } from '../useFloatingWithInteractions';
-import { OnPlacementChange } from './common';
+import type { OnPlacementChange } from './common';
 
 /**
  * @private используйте алиасы, если для какого-то компонента нужно экспортировать тип

package/src/lib/floating/usePlacementChangeCallback.ts

@@ -1,6 +1,6 @@
 import { usePrevious } from '../../hooks/usePrevious';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
-import { OnPlacementChange, Placement, PlacementWithAuto } from './types/common';
+import type { OnPlacementChange, Placement, PlacementWithAuto } from './types/common';
 
 export function usePlacementChangeCallback(
   initialPlacement: PlacementWithAuto,

package/src/lib/getNavId.ts

@@ -1,4 +1,4 @@
-import { WarnOnceHandler } from './warnOnce';
+import type { WarnOnceHandler } from './warnOnce';
 
 export interface NavIdProps {
   /** Уникальный идентификатор навигационного элемента (вместо id) */

package/src/lib/isRefObject.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 export const isRefObject = <T, E = Element>(
   refObject: React.RefObject<E> | T,

package/src/lib/layouts/gaps.ts

@@ -1,4 +1,4 @@
-import { LiteralUnion } from '../../types';
+import type { LiteralUnion } from '../../types';
 import styles from '../../styles/gaps.module.css';
 
 type GapPresets = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';

package/src/lib/platform.ts

@@ -1,4 +1,4 @@
-import { BrowserInfo, computeBrowserInfo } from './browser';
+import { type BrowserInfo, computeBrowserInfo } from './browser';
 
 export const Platform = {
   ANDROID: 'android',

package/src/lib/select.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { SelectType } from '../components/Select/Select';
+import type * as React from 'react';
+import type { SelectType } from '../components/Select/Select';
 import { getTextFromChildren } from './children';
 
 export type Option = {

package/src/lib/touch/functions.ts

@@ -6,21 +6,21 @@ export type VKUITouchEventHandler = (e: VKUITouchEvent) => void;
 /*
  * Получает координату по оси абсцисс из touch- или mouse-события
  */
-const coordX = (e: VKUITouchEvent): number => {
-  if (e.clientX != null) {
-    return e.clientX;
+const coordX = (event: MouseEvent | TouchEvent): number => {
+  if ('clientX' in event) {
+    return event.clientX;
   }
-  return e.changedTouches && e.changedTouches[0].clientX;
+  return event.changedTouches && event.changedTouches[0].clientX;
 };
 
 /*
  * Получает координату по оси ординат из touch- или mouse-события
  */
-const coordY = (e: VKUITouchEvent): number => {
-  if (e.clientY != null) {
-    return e.clientY;
+const coordY = (event: MouseEvent | TouchEvent): number => {
+  if ('clientY' in event) {
+    return event.clientY;
   }
-  return e.changedTouches && e.changedTouches[0].clientY;
+  return event.changedTouches && event.changedTouches[0].clientY;
 };
 
 // eslint-disable-next-line no-restricted-globals

package/src/types.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { PlatformType } from './lib/platform';
+import type * as React from 'react';
+import type { PlatformType } from './lib/platform';
 
 export type AnyFunction = (...args: any[]) => any;