@vkontakte/vkui 7.0.1 → 7.1.0

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.module.css

@@ -0,0 +1,134 @@
+.host {
+  position: absolute;
+  z-index: var(--vkui_internal--z_index_image_base_positioned_element);
+  transition: opacity 0.3s ease-in-out;
+
+  --vkui_internal--FloatElement_horizontal_indent: 0;
+  --vkui_internal--FloatElement_vertical_indent: 0;
+}
+
+.inlineIndent2xs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xs);
+}
+
+.inlineIndentXs {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xs);
+}
+
+.inlineIndentS {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_s);
+}
+
+.inlineIndentM {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_m);
+}
+
+.inlineIndentL {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_l);
+}
+
+.inlineIndentXl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_xl);
+}
+
+.inlineIndent2xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_2xl);
+}
+
+.inlineIndent3xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_3xl);
+}
+
+.inlineIndent4xl {
+  --vkui_internal--FloatElement_horizontal_indent: var(--vkui--spacing_size_4xl);
+}
+
+.blockIndent2xs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xs);
+}
+
+.blockIndentXs {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xs);
+}
+
+.blockIndentS {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_s);
+}
+
+.blockIndentM {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_m);
+}
+
+.blockIndentL {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_l);
+}
+
+.blockIndentXl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_xl);
+}
+
+.blockIndent2xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_2xl);
+}
+
+.blockIndent3xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_3xl);
+}
+
+.blockIndent4xl {
+  --vkui_internal--FloatElement_vertical_indent: var(--vkui--spacing_size_4xl);
+}
+
+.hidden {
+  opacity: 0;
+}
+
+.placementTopStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementTop {
+  inset-inline-start: 50%;
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.placementTopEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementBottomStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+}
+
+.placementBottom {
+  inset-inline-start: 50%;
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  transform: translateX(-50%);
+}
+
+.placementBottomEnd {
+  inset-block-end: var(--vkui_internal--FloatElement_vertical_indent);
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+}
+
+.placementMiddleStart {
+  inset-inline-start: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}
+
+.placementMiddle {
+  inset-inline-start: 50%;
+  inset-block-start: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.placementMiddleEnd {
+  inset-inline-end: var(--vkui_internal--FloatElement_horizontal_indent);
+  inset-block-start: 50%;
+  transform: translateY(-50%);
+}

package/src/components/ImageBase/ImageBaseFloatElement/ImageBaseFloatElement.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
+import { type HTMLAttributesWithRootRef } from '../../../types';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { ImageBaseContext } from '../context';
+import { mutableRemoveElement, resolveIndent } from './helpers';
+import styles from './ImageBaseFloatElement.module.css';
+
+export type FloatElementPlacement =
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'bottom-start'
+  | 'bottom'
+  | 'bottom-end'
+  | 'middle-start'
+  | 'middle'
+  | 'middle-end';
+
+export type FloatElementIndentation =
+  | '2xs'
+  | 'xs'
+  | 's'
+  | 'm'
+  | 'l'
+  | 'xl'
+  | '2xl'
+  | '3xl'
+  | '4xl'
+  | number
+  | string;
+
+const positionPlacementClassNames = {
+  'top-start': styles.placementTopStart,
+  'top': styles.placementTop,
+  'top-end': styles.placementTopEnd,
+  'bottom-start': styles.placementBottomStart,
+  'bottom': styles.placementBottom,
+  'bottom-end': styles.placementBottomEnd,
+  'middle-start': styles.placementMiddleStart,
+  'middle': styles.placementMiddle,
+  'middle-end': styles.placementMiddleEnd,
+};
+
+const inlineIndentClassNames = {
+  '2xs': styles.inlineIndent2xs,
+  'xs': styles.inlineIndentXs,
+  's': styles.inlineIndentS,
+  'm': styles.inlineIndentM,
+  'l': styles.inlineIndentL,
+  'xl': styles.inlineIndentXl,
+  '2xl': styles.inlineIndent2xl,
+  '3xl': styles.inlineIndent3xl,
+  '4xl': styles.inlineIndent4xl,
+};
+
+const blockIndentClassNames = {
+  '2xs': styles.blockIndent2xs,
+  'xs': styles.blockIndentXs,
+  's': styles.blockIndentS,
+  'm': styles.blockIndentM,
+  'l': styles.blockIndentL,
+  'xl': styles.blockIndentXl,
+  '2xl': styles.blockIndent2xl,
+  '3xl': styles.blockIndent3xl,
+  '4xl': styles.blockIndent4xl,
+};
+
+export interface ImageBaseFloatElementProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Позиция компонента относительно родителя
+   */
+  placement: FloatElementPlacement;
+  /**
+   * Отступ компонента от края контейнера по горизонтали
+   */
+  inlineIndent?: FloatElementIndentation;
+  /**
+   * Отступ компонента от края контейнера по вертикали
+   */
+  blockIndent?: FloatElementIndentation;
+  /**
+   * Режим отображения компонента:
+   *
+   * - `"always"`: Всегда
+   * - `"on-hover"`: При наведении на картинку
+   */
+  visibility?: 'always' | 'on-hover';
+}
+
+export const ImageBaseFloatElement = ({
+  placement,
+  visibility = 'always',
+  style,
+  className,
+  inlineIndent,
+  blockIndent,
+  ...restProps
+}: ImageBaseFloatElementProps) => {
+  const [hidden, setHidden] = React.useState(visibility !== 'always');
+  const { onMouseOverHandlers, onMouseOutHandlers } = React.useContext(ImageBaseContext);
+
+  useIsomorphicLayoutEffect(
+    function resetHidden() {
+      setHidden(visibility === 'on-hover');
+    },
+    [visibility],
+  );
+
+  useIsomorphicLayoutEffect(
+    function addMouseHandlers() {
+      if (visibility === 'on-hover') {
+        const onMouseOver = () => setHidden(false);
+        const onMouseOut = () => setHidden(true);
+
+        onMouseOverHandlers.push(onMouseOver);
+        onMouseOutHandlers.push(onMouseOut);
+
+        return () => {
+          mutableRemoveElement(onMouseOverHandlers, onMouseOver);
+          mutableRemoveElement(onMouseOutHandlers, onMouseOut);
+        };
+      }
+      return;
+    },
+    [visibility],
+  );
+
+  const [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName] =
+    React.useMemo(() => {
+      const [inlineIndentStyle, inlineIndentClassName] = resolveIndent(
+        inlineIndent,
+        '--vkui_internal--FloatElement_horizontal_indent',
+        inlineIndentClassNames,
+      );
+      const [blockIndentStyle, blockIndentClassName] = resolveIndent(
+        blockIndent,
+        '--vkui_internal--FloatElement_vertical_indent',
+        blockIndentClassNames,
+      );
+
+      return [inlineIndentStyle, blockIndentStyle, inlineIndentClassName, blockIndentClassName];
+    }, [inlineIndent, blockIndent]);
+
+  return (
+    <RootComponent
+      {...restProps}
+      style={{
+        ...style,
+        ...inlineIndentStyle,
+        ...blockIndentStyle,
+      }}
+      className={classNames(
+        styles.host,
+        hidden && styles.hidden,
+        positionPlacementClassNames[placement],
+        inlineIndentClassName,
+        blockIndentClassName,
+        className,
+      )}
+    />
+  );
+};
+
+ImageBaseFloatElement.displayName = 'ImageBaseFloatElement';

package/src/components/ImageBase/ImageBaseFloatElement/helpers.ts

@@ -0,0 +1,44 @@
+import { type FloatElementIndentation } from './ImageBaseFloatElement';
+
+function isIndentSizeConstant(indent: FloatElementIndentation) {
+  return (
+    indent === '2xs' ||
+    indent === 'xs' ||
+    indent === 's' ||
+    indent === 'm' ||
+    indent === 'l' ||
+    indent === 'xl' ||
+    indent === '2xl' ||
+    indent === '3xl' ||
+    indent === '4xl'
+  );
+}
+
+function calculateIndent(indent: FloatElementIndentation) {
+  if (isIndentSizeConstant(indent)) {
+    return;
+  }
+  return typeof indent === 'string' ? indent : `${indent}px`;
+}
+
+export const resolveIndent = (
+  indent: FloatElementIndentation | undefined,
+  cssProperty: string,
+  classNames: Record<string, string>,
+): [React.CSSProperties | undefined, string | undefined] => {
+  if (!indent) {
+    return [undefined, undefined];
+  }
+
+  const calculatedIndent = calculateIndent(indent);
+
+  if (calculatedIndent) {
+    return [{ [cssProperty]: calculatedIndent }, undefined];
+  }
+
+  return [undefined, classNames[indent]];
+};
+
+export const mutableRemoveElement = <T>(arr: T[], element: T) => {
+  arr.splice(arr.indexOf(element), 1);
+};

package/src/components/ImageBase/ImageBaseOverlay/hooks.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useFocusWithin } from '../../../hooks/useFocusWithin';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 
-export function useNonInteractiveOverlayProps(rootRef: React.MutableRefObject<HTMLElement | null>) {
+export function useNonInteractiveOverlayProps(rootRef: React.RefObject<HTMLElement | null>) {
   const focusWithin = useFocusWithin(rootRef);
   const [nonInteractiveFocusShown, setNonInteractiveFocusShown] = React.useState(false);
 

package/src/components/ImageBase/context.ts

@@ -4,4 +4,6 @@ import type { ImageBaseContextProps } from './types';
 export const ImageBaseContext: React.Context<ImageBaseContextProps> =
   React.createContext<ImageBaseContextProps>({
     size: 0,
+    onMouseOverHandlers: [],
+    onMouseOutHandlers: [],
   });

package/src/components/ImageBase/types.ts

@@ -10,4 +10,6 @@ export type ImageBaseExpectedIconProps = {
 
 export interface ImageBaseContextProps {
   size: ImageBaseSize | number;
+  onMouseOverHandlers: VoidFunction[];
+  onMouseOutHandlers: VoidFunction[];
 }

package/src/components/ImageBase/validators.ts

@@ -1,3 +1,4 @@
+import type * as React from 'react';
 import { warnOnce } from '../../lib/warnOnce';
 import {
   getBadgeIconSizeByImageBaseSize,
@@ -32,15 +33,15 @@ function parseIconSizeByWidthProp(width: unknown): number | null {
   return size > 0 ? size : null;
 }
 
-function getElementDisplayName(element: JSX.Element): string | null {
+function getElementDisplayName(element: React.JSX.Element): string | null {
   return element.type.displayName ?? null;
 }
 
-function getElementWidthProp(element: JSX.Element): number | string | null {
+function getElementWidthProp(element: React.JSX.Element): number | string | null {
   return element.props.width ?? null;
 }
 
-function getIconSizeByElement(element: JSX.Element): number | null {
+function getIconSizeByElement(element: React.JSX.Element): number | null {
   const sizeByDisplayName = parseIconSizeByDisplayName(getElementDisplayName(element));
   const sizeByWidth = parseIconSizeByWidthProp(getElementWidthProp(element));
   return sizeByWidth ? sizeByWidth : sizeByDisplayName;
@@ -48,7 +49,7 @@ function getIconSizeByElement(element: JSX.Element): number | null {
 
 interface IconProp {
   name: string;
-  value: JSX.Element;
+  value: React.JSX.Element;
 }
 
 interface SelectorFn {

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -62,7 +62,7 @@ export interface ModalCardBaseProps
   size?: number;
 
   /**
-   * `data-testid` для кнопки закрытия
+   * Передает атрибут `data-testid` для кнопки закрытия
    */
   modalDismissButtonTestId?: string;
   /**

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -10,7 +10,9 @@ import type { ModalRootContextInterface } from './types';
  *
  * @private
  */
-export const ModalRootOverlayContext = createContext<RefObject<HTMLDivElement>>({ current: null });
+export const ModalRootOverlayContext = createContext<RefObject<HTMLDivElement | null>>({
+  current: null,
+});
 
 export const ModalRootContext = createContext<ModalRootContextInterface>({
   updateModalHeight: noop,

package/src/components/Pagination/Pagination.tsx

@@ -91,6 +91,18 @@ export interface PaginationProps extends Omit<HTMLAttributesWithRootRef<HTMLElem
    * > Note: `CustomPaginationNavigationButton` наследует API [Button](https://vkcom.github.io/VKUI/#/Button).
    */
   renderNavigationButton?: (props: CustomPaginationNavigationButton) => React.ReactNode;
+  /**
+   * Передает атрибут `data-testid` для кнопок страниц
+   */
+  pageButtonTestId?: (day: PaginationPageType, active: boolean) => string;
+  /**
+   * Передает атрибут `data-testid` для кнопки `prev`
+   */
+  prevButtonTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки `next`
+   */
+  nextButtonTestId?: string;
 }
 
 /**
@@ -112,6 +124,9 @@ export const Pagination = ({
   nextButtonLabel = 'Перейти на следующую страницу',
   onChange,
   renderPageButton,
+  pageButtonTestId,
+  prevButtonTestId,
+  nextButtonTestId,
   renderNavigationButton,
   ...resetProps
 }: PaginationProps): React.ReactNode => {
@@ -156,17 +171,18 @@ export const Pagination = ({
 
   const renderPages = React.useCallback(
     (page: PaginationPageType) => {
+      const isCurrent = page === currentPage;
+      const dataTestId = pageButtonTestId?.(page, isCurrent);
+
       switch (page) {
         case 'start-ellipsis':
         case 'end-ellipsis':
           return (
             <li key={page}>
-              <PaginationPageEllipsis disabled={disabled} />
+              <PaginationPageEllipsis disabled={disabled} data-testid={dataTestId} />
             </li>
           );
         default: {
-          const isCurrent = page === currentPage;
-
           return (
             <li key={page}>
               <PaginationPageButton
@@ -176,6 +192,7 @@ export const Pagination = ({
                 disabled={disabled}
                 sizeY={sizeY}
                 renderPageButton={renderPageButton}
+                data-testid={dataTestId}
               >
                 {page}
               </PaginationPageButton>
@@ -184,7 +201,7 @@ export const Pagination = ({
         }
       }
     },
-    [currentPage, disabled, getPageLabel, handleClick, renderPageButton, sizeY],
+    [currentPage, disabled, getPageLabel, handleClick, renderPageButton, sizeY, pageButtonTestId],
   );
 
   return (
@@ -201,6 +218,7 @@ export const Pagination = ({
             disabled={isFirstPage || disabled}
             onClick={handlePrevClick}
             data-page={prevPage}
+            data-testid={prevButtonTestId}
             renderNavigationButton={renderNavigationButton}
           />
         </li>
@@ -215,6 +233,7 @@ export const Pagination = ({
             disabled={isLastPage || disabled}
             onClick={handleNextClick}
             data-page={nextPage}
+            data-testid={nextButtonTestId}
             renderNavigationButton={renderNavigationButton}
           />
         </li>

package/src/components/Pagination/PaginationNavigationButton/PaginationNavigationButton.tsx

@@ -11,6 +11,7 @@ export interface PaginationNavigationButtonOpts {
   'disabled'?: boolean;
   'onClick': (event: React.MouseEvent<HTMLElement>) => void;
   'data-page': number | undefined;
+  'data-testid': string | undefined;
 }
 
 export interface PaginationNavigationButtonProps extends PaginationNavigationButtonOpts {
@@ -22,7 +23,7 @@ export interface PaginationNavigationButtonProps extends PaginationNavigationBut
  */
 const getButtonPropsFromPaginationNavigationButton = (
   opts: PaginationNavigationButtonOpts,
-): ButtonProps & { 'data-page': number | undefined } => {
+): ButtonProps & { 'data-page': number | undefined; 'data-testid': string | undefined } => {
   const icon: React.ReactElement | null =
     opts.style !== 'caption' ? (
       <>
@@ -50,7 +51,8 @@ const getButtonPropsFromPaginationNavigationButton = (
     'onClick': opts.onClick,
     'children': caption,
     'data-page': opts['data-page'],
-  } satisfies ButtonProps & { 'data-page': number | undefined };
+    'data-testid': opts['data-testid'],
+  } satisfies ButtonProps & { 'data-page': number | undefined; 'data-testid': string | undefined };
 };
 
 /**