@vkontakte/vkui 6.2.1 → 6.3.0

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -83,7 +83,7 @@ export const SubnavigationButton = ({
   children,
   className,
   ...restProps
-}: SubnavigationButtonProps) => {
+}: SubnavigationButtonProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
   return (

package/src/components/Switch/Switch.tsx

@@ -33,7 +33,7 @@ export const Switch = ({
   onFocus: onFocusProp,
   onClick,
   ...restProps
-}: SwitchProps) => {
+}: SwitchProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeY = 'none' } = useAdaptivity();
   const { focusVisible, onBlur, onFocus } = useFocusVisible();

package/src/components/Tabbar/Tabbar.tsx

@@ -35,7 +35,7 @@ const getItemsLayoutClassName = (
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabbar
  */
-export const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps) => {
+export const Tabbar = ({ plain = false, mode, ...restProps }: TabbarProps): React.ReactNode => {
   const platform = usePlatform();
 
   return (

package/src/components/TabbarItem/TabbarItem.tsx

@@ -37,7 +37,7 @@ export const TabbarItem = ({
   Component = href ? 'a' : 'button',
   disabled,
   ...restProps
-}: TabbarItemProps) => {
+}: TabbarItemProps): React.ReactNode => {
   const platform = usePlatform();
 
   if (process.env.NODE_ENV === 'development') {

package/src/components/Tabs/Tabs.tsx

@@ -39,13 +39,14 @@ export interface TabsContextProps {
   scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;
 }
 
-export const TabsModeContext = React.createContext<TabsContextProps>({
-  mode: 'default',
-  withGaps: false,
-  layoutFillMode: 'auto',
-  withScrollToSelectedTab: false,
-  scrollBehaviorToSelectedTab: 'nearest',
-});
+export const TabsModeContext: React.Context<TabsContextProps> =
+  React.createContext<TabsContextProps>({
+    mode: 'default',
+    withGaps: false,
+    layoutFillMode: 'auto',
+    withScrollToSelectedTab: false,
+    scrollBehaviorToSelectedTab: 'nearest',
+  });
 
 /**
  * @see https://vkcom.github.io/VKUI/#/Tabs
@@ -58,7 +59,7 @@ export const Tabs = ({
   scrollBehaviorToSelectedTab = 'nearest',
   layoutFillMode = 'auto',
   ...restProps
-}: TabsProps) => {
+}: TabsProps): React.ReactNode => {
   const platform = usePlatform();
   const { document } = useDOM();
 

package/src/components/TabsItem/TabsItem.module.css

@@ -77,7 +77,7 @@
 }
 
 .TabsItem--hover.TabsItem--mode-accent {
-  background-color: var(--vkui--color_background_secondary);
+  background-color: var(--vkui--color_background_contrast_themed--hover);
 }
 
 .TabsItem--mode-accent::before {

package/src/components/TabsItem/TabsItem.tsx

@@ -90,7 +90,7 @@ export const TabsItem = ({
   hasActive = false,
   focusVisibleMode = 'inside',
   ...restProps
-}: TabsItemProps) => {
+}: TabsItemProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const {
     mode,

package/src/components/Tappable/Ripple.tsx

@@ -8,7 +8,10 @@ import styles from './Tappable.module.css';
  * Возможно нужен Ripple эффект. Данный хук нужен для отказа
  * от двойного ререндера.
  */
-export const useMaybeNeedRipple = (activeMode: string, hasPointer: boolean | undefined) => {
+export const useMaybeNeedRipple = (
+  activeMode: string,
+  hasPointer: boolean | undefined,
+): boolean => {
   const platform = usePlatform();
 
   return platform === 'android' && !hasPointer && activeMode === 'background';
@@ -27,7 +30,14 @@ const WAVE_LIVE = 225;
 /**
  * Хук для создания Ripple эффектов
  */
-export const useRipple = (needRipple: boolean, hasPointerContext: boolean | undefined) => {
+export const useRipple = (
+  needRipple: boolean,
+  hasPointerContext: boolean | undefined,
+): {
+  clicks: Wave[];
+  onPointerDown: React.PointerEventHandler<HTMLSpanElement>;
+  onPointerCancel: React.PointerEventHandler<HTMLSpanElement>;
+} => {
   const [clicks, setClicks] = React.useState<Wave[]>([]);
 
   /**
@@ -93,7 +103,7 @@ export interface RippleProps {
   clicks: Wave[];
 }
 
-export const Ripple = ({ needRipple = true, clicks }: RippleProps) => {
+export const Ripple = ({ needRipple = true, clicks }: RippleProps): React.ReactNode => {
   return (
     <span
       aria-hidden

package/src/components/Tappable/Tappable.tsx

@@ -40,7 +40,7 @@ export const Tappable = ({
   onPointerDown,
   onPointerCancel,
   ...restProps
-}: TappableProps) => {
+}: TappableProps): React.ReactNode => {
   const isClickable = checkClickable(restProps);
 
   const { sizeX = 'none', hasPointer } = useAdaptivity();

package/src/components/Tappable/state.tsx

@@ -30,7 +30,7 @@ const stylesHovered: Record<string, string> = {
 /**
  * Определяем класс наведения
  */
-export function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE) {
+export function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE): string {
   const presetClass = stylesHovered[hoverMode] as string | undefined;
 
   return presetClass !== undefined ? presetClass : hoverMode;
@@ -45,7 +45,7 @@ const stylesActivated: Record<string, string> = {
 /**
  * Определяем класс наведения
  */
-export function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE) {
+export function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE): string {
   const presetClass = stylesActivated[activeMode] as string | undefined;
 
   return presetClass !== undefined ? presetClass : activeMode;

package/src/components/Textarea/Textarea.tsx

@@ -20,7 +20,7 @@ export interface TextareaProps
     HasRootRef<HTMLElement>,
     Pick<React.CSSProperties, 'maxHeight'>,
     HasAlign,
-    Pick<FormFieldProps, 'status' | 'mode'> {
+    FormFieldProps {
   grow?: boolean;
   onResize?: (el: HTMLTextAreaElement) => void;
   defaultValue?: string;
@@ -42,8 +42,12 @@ export const Textarea = ({
   onChange,
   align,
   mode,
+  after,
+  before,
+  afterAlign,
+  beforeAlign,
   ...restProps
-}: TextareaProps) => {
+}: TextareaProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
   const [refResizeTextarea, resize] = useResizeTextarea(onResize, grow);
@@ -65,6 +69,10 @@ export const Textarea = ({
       disabled={restProps.disabled}
       status={status}
       mode={mode}
+      after={after}
+      before={before}
+      afterAlign={afterAlign}
+      beforeAlign={beforeAlign}
     >
       <UnstyledTextField
         {...restProps}

package/src/components/Textarea/useResizeTextarea.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 export function useResizeTextarea(
   onResize: ((el: HTMLTextAreaElement) => void) | undefined,
   grow = true,
-) {
+): readonly [React.RefObject<HTMLTextAreaElement>, () => void] {
   const elementRef = React.useRef<HTMLTextAreaElement>(null);
   const currentScrollHeight = React.useRef<number>();
 
@@ -31,5 +31,5 @@ export function useResizeTextarea(
     resizeElement(el);
   }, [elementRef, resizeElement]);
 
-  return [elementRef, resize] as const;
+  return [elementRef, resize];
 }

package/src/components/ToolButton/ToolButton.tsx

@@ -59,7 +59,7 @@ export const ToolButton = ({
   IconRegular,
   rounded,
   ...restProps
-}: ToolButtonProps) => {
+}: ToolButtonProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
   const hasChildren = hasReactNode(children);
 

package/src/components/Tooltip/Tooltip.tsx

@@ -98,7 +98,7 @@ export const Tooltip = ({
   zIndex = 'var(--vkui--z_index_popout)',
   onPlacementChange,
   ...popperProps
-}: TooltipProps) => {
+}: TooltipProps): React.ReactNode => {
   const generatedId = React.useId();
   const tooltipId = idProp || generatedId;
 

package/src/components/TooltipBase/TooltipBase.tsx

@@ -75,7 +75,7 @@ export const TooltipBase = ({
   maxWidth = TOOLTIP_MAX_WIDTH,
   className,
   ...restProps
-}: TooltipBaseProps) => {
+}: TooltipBaseProps): React.ReactNode => {
   return (
     <RootComponent
       {...restProps}

package/src/components/Touch/Touch.tsx

@@ -83,7 +83,7 @@ export const Touch = ({
   noSlideClick = false,
   stopPropagation = false,
   ...restProps
-}: TouchProps) => {
+}: TouchProps): React.ReactNode => {
   const { document } = useDOM();
   const events = React.useMemo(getSupportedEvents, []);
   const didSlide = React.useRef(false);

package/src/components/Typography/Caption/Caption.tsx

@@ -25,7 +25,7 @@ export const Caption = ({
   normalize = true,
   inline = false,
   ...restProps
-}: CaptionProps) => {
+}: CaptionProps): React.ReactNode => {
   return (
     <Typography
       Component={Component}

package/src/components/Typography/DisplayTitle/DisplayTitle.tsx

@@ -25,7 +25,7 @@ export const DisplayTitle = ({
   normalize = true,
   inline = false,
   ...restProps
-}: DisplayTitleProps) => {
+}: DisplayTitleProps): React.ReactNode => {
   return (
     <Typography
       Component={Component}

package/src/components/Typography/EllipsisText/EllipsisText.module.css

@@ -12,3 +12,11 @@
   flex: 0 0 auto;
   max-inline-size: inherit;
 }
+
+.EllipsisText__content--multiline {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -ms-box-orient: vertical;
+  -moz-box-orient: vertical;
+  white-space: normal;
+}

package/src/components/Typography/EllipsisText/EllipsisText.tsx

@@ -1,4 +1,6 @@
+import { useRef } from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 import { HasRootRef } from '../../../types';
 import { RootComponentProps } from '../../RootComponent/RootComponent';
 import styles from './EllipsisText.module.css';
@@ -13,6 +15,13 @@ export interface EllipsisTextProps
    * другими словами, когда ширина не ограничена.
    */
   maxWidth?: number;
+  /**
+   * Максимальное количество видимых строк
+   *
+   * > При `maxLines > 1` используется свойство line-clamp, которое поддерживается не всеми версиями браузеров. Используйте с осторожностью
+   * > @see [line-clamp](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp)
+   */
+  maxLines?: number;
 }
 
 /** Компонент ограничивает текстовый контент убирая его в многоточие.
@@ -25,13 +34,31 @@ const EllipsisText = ({
   getRootRef,
   children,
   maxWidth,
+  maxLines = 1,
   ...restProps
-}: EllipsisTextProps) => (
-  <span ref={getRootRef} className={classNames(styles['EllipsisText'], className)} {...restProps}>
-    <span style={{ maxWidth }} className={styles['EllipsisText__content']}>
-      {children}
+}: EllipsisTextProps): React.ReactNode => {
+  const contentRef = useRef<HTMLSpanElement | null>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    if (contentRef && contentRef.current) {
+      contentRef.current.style.setProperty('-webkit-line-clamp', maxLines > 1 ? `${maxLines}` : '');
+    }
+  }, [contentRef, maxLines]);
+
+  return (
+    <span ref={getRootRef} className={classNames(styles['EllipsisText'], className)} {...restProps}>
+      <span
+        style={{ maxWidth }}
+        ref={contentRef}
+        className={classNames(
+          styles['EllipsisText__content'],
+          maxLines > 1 && styles['EllipsisText__content--multiline'],
+        )}
+      >
+        {children}
+      </span>
     </span>
-  </span>
-);
+  );
+};
 
 export { EllipsisText };

package/src/components/Typography/Footnote/Footnote.tsx

@@ -16,7 +16,7 @@ export const Footnote = ({
   normalize = true,
   inline = false,
   ...restProps
-}: FootnoteProps) => (
+}: FootnoteProps): React.ReactNode => (
   <Typography
     Component={Component}
     normalize={normalize}

package/src/components/Typography/Headline/Headline.tsx

@@ -30,7 +30,7 @@ export const Headline = ({
   normalize = true,
   inline = false,
   ...restProps
-}: HeadlineProps) => {
+}: HeadlineProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
   return (

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -15,7 +15,7 @@ export const Paragraph = ({
   normalize = false,
   inline = false,
   ...restProps
-}: ParagraphProps) => {
+}: ParagraphProps): React.ReactNode => {
   return (
     <Typography
       Component={Component}

package/src/components/Typography/Subhead/Subhead.tsx

@@ -21,7 +21,7 @@ export const Subhead = ({
   normalize = true,
   inline = false,
   ...restProps
-}: SubheadProps) => {
+}: SubheadProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
   return (

package/src/components/Typography/Text/Text.tsx

@@ -21,7 +21,7 @@ export const Text = ({
   normalize = true,
   inline = false,
   ...restProps
-}: TextProps) => {
+}: TextProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
 
   return (

package/src/components/Typography/Title/Title.tsx

@@ -24,7 +24,7 @@ export const Title = ({
   normalize = true,
   inline = false,
   ...restProps
-}: TitleProps) => {
+}: TitleProps): React.ReactNode => {
   return (
     <Typography
       Component={Component}

package/src/components/Typography/Typography.tsx

@@ -38,7 +38,7 @@ export const Typography = ({
   normalize,
   inline,
   ...restProps
-}: TypographyProps) => (
+}: TypographyProps): React.ReactNode => (
   <RootComponent
     Component={Component}
     baseClassName={classNames(

package/src/components/UnstyledTextField/UnstyledTextField.tsx

@@ -46,7 +46,7 @@ export const UnstyledTextField = ({
   noPadding = false,
   className,
   ...restProps
-}: UnstyledTextFieldProps) => (
+}: UnstyledTextFieldProps): React.ReactNode => (
   <Text
     Component={as}
     normalize={false}

package/src/components/UsersStack/UsersStack.module.css

@@ -45,7 +45,11 @@
   block-size: 32px;
 }
 
-.UsersStack__photo + .UsersStack__photo {
+.UsersStack__photoWrapper {
+  display: flex;
+}
+
+.UsersStack__photoWrapper:not(:first-child) {
   margin-inline-start: -2px;
 }
 

package/src/components/UsersStack/UsersStack.tsx

@@ -18,11 +18,21 @@ const stylesDirection = {
   'column': styles['UsersStack--direction-column'],
 };
 
+export type UsersStackRenderWrapperProps = {
+  children: React.ReactElement;
+  ['data-src']: string;
+};
+
+export type UsersStackPhoto = {
+  src: string;
+  renderWrapper?: (props: UsersStackRenderWrapperProps) => React.ReactElement;
+};
+
 export interface UsersStackProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
-   * Массив ссылок на фотографии
+   * Массив ссылок на фотографии либо массив структур типа `UsersStackPhoto`:
    */
-  photos?: string[];
+  photos?: string[] | UsersStackPhoto[];
   /**
    * Размер аватарок
    */
@@ -124,7 +134,7 @@ export const UsersStack = ({
   children,
   direction = 'row',
   ...restProps
-}: UsersStackProps) => {
+}: UsersStackProps): React.ReactNode => {
   const cmpId = React.useId();
 
   const canShowOthers = count > 0 && count < 100 && size !== 's';
@@ -140,12 +150,15 @@ export const UsersStack = ({
     const hrefID = `#${id}`;
     const maskID = `UsersStackMask${cmpId}${i}`;
 
-    return (
+    const isPhotoType = typeof photo === 'object';
+    const photoSrc = isPhotoType ? photo.src : photo;
+
+    let photoElement = (
       <svg
         xmlns="http://www.w3.org/2000/svg"
         className={styles['UsersStack__photo']}
-        key={i}
         aria-hidden
+        display="block"
       >
         <defs>
           <PathElement id={id} direction={direction} photoSize={photoSize} />
@@ -155,21 +168,35 @@ export const UsersStack = ({
         </clipPath>
         <g clipPath={`url(#${maskID})`}>
           <use href={hrefID} className={styles['UsersStack__fill']} />
-          <image href={photo} width={photoSize} height={photoSize} />
+          <image href={photoSrc} width={photoSize} height={photoSize} />
           <use href={hrefID} fill="none" stroke="rgba(0, 0, 0, 0.08)" />
         </g>
       </svg>
     );
+    if (isPhotoType && photo.renderWrapper) {
+      photoElement = photo.renderWrapper({
+        'children': photoElement,
+        'data-src': photoSrc,
+      });
+    }
+
+    return (
+      <div className={styles['UsersStack__photoWrapper']} key={i}>
+        {photoElement}
+      </div>
+    );
   });
 
   const othersElement = canShowOthers ? (
-    <CounterTypography
-      caps
-      weight="1"
-      className={classNames(styles['UsersStack__photo'], styles['UsersStack__photo--others'])}
-    >
-      +{count}
-    </CounterTypography>
+    <div className={styles['UsersStack__photoWrapper']}>
+      <CounterTypography
+        caps
+        weight="1"
+        className={classNames(styles['UsersStack__photo'], styles['UsersStack__photo--others'])}
+      >
+        +{count}
+      </CounterTypography>
+    </div>
   ) : null;
 
   return (

package/src/components/View/View.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { classNames, noop } from '@vkontakte/vkjs';
+import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
 import { usePrevious } from '../../hooks/usePrevious';
 import { blurActiveElement, canUseDOM, useDOM } from '../../lib/dom';
 import { getNavId, NavIdProps } from '../../lib/getNavId';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../lib/warnOnce';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { useScroll } from '../AppRoot/ScrollContext';
@@ -14,6 +13,7 @@ import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionCont
 import { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';
 import { useSplitCol } from '../SplitCol/SplitColContext';
 import { Touch, TouchEvent } from '../Touch/Touch';
+import { useLayoutEffectCall } from './useLayoutEffectCall';
 import {
   getSwipeBackPredicates,
   hasHorizontalScrollableElementWithScrolledToLeft,
@@ -69,10 +69,10 @@ export const View = ({
   children,
   className,
   ...restProps
-}: ViewProps) => {
+}: ViewProps): React.ReactNode => {
   const id = getNavId({ nav, id: restProps.id });
   const scrolls = React.useRef(scrollsCache[id as string] || {});
-  const afterTransition = React.useRef(noop);
+  const layoutEffectCall = useLayoutEffectCall();
 
   React.useEffect(() => () => {
     if (id) {
@@ -143,7 +143,7 @@ export const View = ({
       setAnimated(false);
       setIsBack(isBackTransition);
 
-      afterTransition.current = () => {
+      layoutEffectCall(() => {
         scroll?.scrollTo(0, isBackTransition ? scrolls.current[activePanelProp] : 0);
         onTransition &&
           onTransition({
@@ -151,16 +151,11 @@ export const View = ({
             from: prevPanel,
             to: activePanelProp,
           });
-      };
+      });
     },
-    [activePanelProp, onTransition, scroll],
+    [activePanelProp, layoutEffectCall, onTransition, scroll],
   );
 
-  useIsomorphicLayoutEffect(() => {
-    afterTransition.current();
-    afterTransition.current = noop;
-  }, [afterTransition.current]);
-
   const onAnimationEnd = React.useCallback(() => {
     if (prevPanel !== null) {
       flushTransition(prevPanel, Boolean(isBack));
@@ -350,7 +345,7 @@ export const View = ({
         .find((id) => id === prevActivePanel || id === activePanelProp);
 
       const isBackTransition = firstLayerId === activePanelProp;
-      scrolls.current[prevActivePanel] = scroll?.getScroll().y;
+      scrolls.current[prevActivePanel] = scroll?.getScroll({ compensateKeyboardHeight: false }).y;
 
       if (disableAnimation) {
         flushTransition(prevActivePanel, isBackTransition);
@@ -384,7 +379,7 @@ export const View = ({
       setVisiblePanels([nextPanel]);
       setIsBack(true);
 
-      afterTransition.current = () => {
+      layoutEffectCall(() => {
         if (nextPanel !== null) {
           scroll?.scrollTo(0, scrolls.current[nextPanel]);
         }
@@ -394,7 +389,7 @@ export const View = ({
             from: prevPanel,
             to: nextPanel,
           });
-      };
+      });
     }
 
     // Началась анимация завершения свайпа назад.
@@ -426,6 +421,7 @@ export const View = ({
     scroll,
     swipeBackNextPanel,
     swipeBackResult,
+    layoutEffectCall,
   ]);
 
   React.useEffect(

package/src/components/View/ViewInfinite.tsx

@@ -178,7 +178,10 @@ class ViewInfiniteComponent extends React.Component<
       const prevScrolls = this.scrolls[prevProps.activePanel] || [];
       const scrolls = {
         ...this.scrolls,
-        [prevProps.activePanel]: [...prevScrolls, this.props.scroll?.getScroll().y],
+        [prevProps.activePanel]: [
+          ...prevScrolls,
+          this.props.scroll?.getScroll({ compensateKeyboardHeight: false }).y,
+        ],
       };
       this.scrolls = scrolls;
 
@@ -669,7 +672,7 @@ class ViewInfiniteComponent extends React.Component<
   }
 }
 
-export const ViewInfinite = withContext(
+export const ViewInfinite: React.FC<ViewInfiniteProps> = withContext(
   withContext(
     withContext(
       withPlatform(withDOM<ViewInfiniteProps>(ViewInfiniteComponent)),