@vkontakte/vkui 7.0.0-dev-efd91c.2 → 7.0.0-dev-efd91c.3

package/src/components/FloatingArrow/DefaultIcon.tsx

@@ -1,6 +1,15 @@
 import * as React from 'react';
 
+export const DEFAULT_ARROW_WIDTH = 20;
+export const DEFAULT_ARROW_HEIGHT = 8;
+export const DEFAULT_ARROW_PADDING = 10;
+
+const PLATFORM_HEIGHT = 1;
+const ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
+
 /**
+ * Стрелка для всплывающих окон.
+ *
  * Примечание 1.
  *
  * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа
@@ -12,15 +21,9 @@ import * as React from 'react';
  * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.
  *
  * https://github.com/VKCOM/VKUI/issues/2123
+ *
+ * @since 7.0.0
  */
-
-export const DEFAULT_ARROW_WIDTH = 20;
-export const DEFAULT_ARROW_HEIGHT = 8;
-export const DEFAULT_ARROW_PADDING = 10;
-
-const PLATFORM_HEIGHT = 1;
-const ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
-
 export const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>): React.ReactNode => {
   return (
     <svg

package/src/components/FloatingArrow/FloatingArrow.module.css

@@ -6,7 +6,7 @@
   content: '';
   display: block;
 
-  /* см. Примечание 1 в FloatingArrow.tsx. */
+  /* см. "Примечание" в DefaultIcon.tsx. */
   transform: translateY(1px);
 }
 

package/src/components/FloatingArrow/FloatingArrow.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import type { Placement } from '../../lib/floating';
 import type { HasDataAttribute, HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { DefaultIcon } from './DefaultIcon';
 import styles from './FloatingArrow.module.css';
 
@@ -10,7 +11,7 @@ export type Coords = {
   y?: number;
 };
 
-const placementClassNames = {
+export const placementClassNames = {
   right: styles.placementRight,
   bottom: styles.placementBottom,
   left: styles.placementLeft,
@@ -35,7 +36,9 @@ export interface FloatingArrowProps
 }
 
 /**
- * @private
+ * Иконка-стрелка для всплывающих окон.
+ *
+ * @since 7.0.0
  */
 export const FloatingArrow = ({
   offset,
@@ -44,7 +47,6 @@ export const FloatingArrow = ({
   iconStyle,
   iconClassName,
   placement = 'bottom',
-  getRootRef,
   Icon = DefaultIcon,
   ...restProps
 }: FloatingArrowProps): React.ReactNode => {
@@ -56,14 +58,13 @@ export const FloatingArrow = ({
   );
 
   return (
-    <div
-      ref={getRootRef}
-      style={arrowStyles}
-      className={classNames(styles.host, arrowPlacement && placementClassNames[arrowPlacement])}
+    <RootComponent
+      baseStyle={arrowStyles}
+      baseClassName={classNames(styles.host, arrowPlacement && placementClassNames[arrowPlacement])}
       {...restProps}
     >
       <Icon className={classNames(styles.in, iconClassName)} style={iconStyle} />
-    </div>
+    </RootComponent>
   );
 };
 

package/src/components/HorizontalCell/HorizontalCell.module.css

@@ -34,13 +34,13 @@
 }
 
 .sized {
-  --vkui_internal--side_cell_width: calc(
-    var(--vkui_internal--cell_width) + var(--vkui_internal--side_cell_gap)
-  );
-
   max-inline-size: var(--vkui_internal--cell_width);
 }
 
+.customSize .body {
+  inline-size: var(--vkui_internal--cell_width);
+}
+
 .sizeS {
   --vkui_internal--side_cell_gap: calc(
     var(--vkui--size_base_padding_horizontal--regular) - var(--vkui--spacing_size_m)
@@ -48,6 +48,10 @@
   --vkui_internal--cell_width: 72px;
 }
 
+.noPadding {
+  --vkui_internal--side_cell_gap: 0px;
+}
+
 .image {
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_s);
@@ -59,6 +63,14 @@
   text-align: start;
 }
 
+.textAlignCenter {
+  text-align: center;
+}
+
+.textAlignEnd {
+  text-align: end;
+}
+
 .sizeS .image {
   padding-block: 4px;
   padding-inline: var(--vkui--spacing_size_m);
@@ -67,7 +79,6 @@
 .sizeS .content {
   padding-block: 2px 8px;
   padding-inline: 4px;
-  text-align: center;
 }
 
 .sizeM {
@@ -94,7 +105,13 @@
 
 .sized:first-child,
 .sized:last-child {
-  max-inline-size: var(--vkui_internal--side_cell_width);
+  max-inline-size: calc(var(--vkui_internal--cell_width) + var(--vkui_internal--side_cell_gap));
+}
+
+.sized:first-child:last-child {
+  max-inline-size: calc(
+    var(--vkui_internal--cell_width) + (2 * (var(--vkui_internal--side_cell_gap)))
+  );
 }
 
 .sized:first-child .body,

package/src/components/HorizontalCell/HorizontalCell.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import type { HasRef, HasRootRef, HTMLAttributesWithRootRef, LiteralUnion } from '../../types';
+import { mergeStyle } from '../../helpers/mergeStyle';
+import type {
+  CSSCustomProperties,
+  HasRef,
+  HasRootRef,
+  HTMLAttributesWithRootRef,
+  LiteralUnion,
+} from '../../types';
 import { Avatar } from '../Avatar/Avatar';
 import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import { Caption } from '../Typography/Caption/Caption';
@@ -18,6 +25,11 @@ const stylesSize = {
   auto: styles.sizeAuto,
 };
 
+const textAlignClassNames = {
+  center: styles.textAlignCenter,
+  end: styles.textAlignEnd,
+};
+
 type HorizontalCellSizes = 's' | 'm' | 'l' | 'xl' | 'auto';
 
 interface CellTypographyProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
@@ -56,6 +68,16 @@ export interface HorizontalCellProps
    * Дополнительная строка текста под `children` и `subtitle`.
    */
   extraSubtitle?: React.ReactNode;
+  /**
+   * Задает выравнивание типографики. По умолчанию `center` для `size=s`, иначе `start`
+   */
+  textAlign?: 'start' | 'center' | 'end';
+  /**
+   * Отключает формирование отступов у крайних элементов
+   *
+   * Актуально для использования в многострочных списках
+   */
+  noPadding?: boolean;
 }
 
 /**
@@ -71,28 +93,38 @@ export const HorizontalCell = ({
   getRootRef,
   getRef,
   extraSubtitle,
+  textAlign = size === 's' ? 'center' : 'start',
+  noPadding = false,
   ...restProps
 }: HorizontalCellProps): React.ReactNode => {
   const hasTypography =
     hasReactNode(title) || hasReactNode(subtitle) || hasReactNode(extraSubtitle);
+
+  const customProperties: CSSCustomProperties | undefined =
+    typeof size === 'number' ? { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` } : undefined;
+
   return (
     <div
       ref={getRootRef}
-      style={{
-        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_CELL_WIDTH]: `${size}px` }),
-        ...style,
-      }}
+      style={mergeStyle(customProperties, style)}
       className={classNames(
         styles.host,
         typeof size === 'string' && stylesSize[size],
         size !== 'auto' && styles.sized,
+        typeof size === 'number' && styles.customSize,
+        noPadding && styles.noPadding,
         className,
       )}
     >
       <Tappable className={styles.body} getRootRef={getRef} {...restProps}>
         {hasReactNode(children) && <div className={styles.image}>{children}</div>}
         {hasTypography && (
-          <div className={styles.content}>
+          <div
+            className={classNames(
+              styles.content,
+              textAlign !== 'start' && textAlignClassNames[textAlign],
+            )}
+          >
             {hasReactNode(title) && <CellTypography size={size}>{title}</CellTypography>}
             {hasReactNode(subtitle) && <Footnote className={styles.subtitle}>{subtitle}</Footnote>}
             {hasReactNode(extraSubtitle) && (

package/src/components/IconButton/IconButton.tsx

@@ -26,12 +26,7 @@ const warn = warnOnce('IconButton');
 /**
  * @see https://vkcom.github.io/VKUI/#/IconButton
  */
-export const IconButton = ({
-  label,
-  children,
-  className,
-  ...restProps
-}: IconButtonProps): React.ReactNode => {
+export const IconButton = ({ label, children, ...restProps }: IconButtonProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeY = 'none' } = useAdaptivity();
 
@@ -53,11 +48,10 @@ export const IconButton = ({
       activeMode="background"
       Component={restProps.href ? 'a' : 'button'}
       {...restProps}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         platform === 'ios' && styles.ios,
-        className,
       )}
     >
       {label && <VisuallyHidden>{label}</VisuallyHidden>}

package/src/components/Image/Image.tsx

@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { mergeStyle } from '../../helpers/mergeStyle';
+import { type CSSCustomProperties } from '../../types';
 import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
 import { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';
 import styles from './Image.module.css';
@@ -118,7 +120,7 @@ export const Image: React.FC<ImageProps> & {
   objectFit = 'cover',
   ...restProps
 }: ImageProps) => {
-  const borderStyles = React.useMemo(
+  const borderStyles: CSSCustomProperties<string | undefined> = React.useMemo(
     () => ({
       '--vkui_internal--Image_border_radius': getBorderRadiusBySizeInPx(size, borderRadius),
       '--vkui_internal--Image_border_start_start_radius': getBorderRadiusBySizeInPx(
@@ -153,7 +155,7 @@ export const Image: React.FC<ImageProps> & {
       {...restProps}
       objectFit={objectFit}
       size={size}
-      style={{ ...borderStyles, ...style }}
+      style={mergeStyle(borderStyles, style)}
       className={classNames(
         className,
         styles.host,

package/src/components/ImageBase/ImageBase.tsx

@@ -142,7 +142,6 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   height: heightImg,
   widthSize,
   heightSize,
-  style,
   noBorder = false,
   fallbackIcon: fallbackIconProp,
   children,
@@ -209,7 +208,7 @@ export const ImageBase: React.FC<ImageBaseProps> & {
   return (
     <ImageBaseContext.Provider value={{ size }}>
       <Clickable
-        style={{ width, height, ...style }}
+        baseStyle={{ width, height }}
         baseClassName={classNames(
           styles.host,
           loaded && styles.loaded,

package/src/components/Link/Link.tsx

@@ -31,7 +31,6 @@ export const Link = ({
   noUnderline,
   hasVisited,
   children,
-  className,
   ...restProps
 }: LinkProps): React.ReactNode => {
   const before = beforeProp ? <span className={styles.before}>{beforeProp}</span> : null;
@@ -41,11 +40,10 @@ export const Link = ({
     <Tappable
       Component={restProps.href ? 'a' : 'button'}
       {...restProps}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         hasVisited && styles.hasVisited,
         noUnderline ? undefined : styles.withUnderline,
-        className,
       )}
       hasHover={false}
       activeMode="opacity"

package/src/components/List/List.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
 import { DATA_DRAGGABLE_PLACEHOLDER_REACT_PROP } from '../../hooks/useDraggableWithDomApi';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -15,20 +14,13 @@ export type ListProps = HTMLAttributesWithRootRef<HTMLDivElement> & {
 /**
  * @see https://vkcom.github.io/VKUI/#/List
  */
-export const List = ({
-  children,
-  gap = 0,
-  className,
-  style,
-  ...restProps
-}: ListProps): React.ReactNode => {
+export const List = ({ children, gap = 0, ...restProps }: ListProps): React.ReactNode => {
   return (
     <RootComponent
       role="list"
-      className={classNames(styles.host, className)}
-      style={{
+      baseClassName={styles.host}
+      baseStyle={{
         gridGap: gap,
-        ...style,
       }}
       {...restProps}
     >

package/src/components/MiniInfoCell/MiniInfoCell.tsx

@@ -67,14 +67,12 @@ export const MiniInfoCell = ({
   mode = 'base',
   textWrap = 'nowrap',
   chevron = false,
-  className,
   ...restProps
 }: MiniInfoCellProps): React.ReactNode => {
   const cellClasses = classNames(
     styles.host,
     stylesTextWrap[textWrap],
     mode !== 'base' && stylesMode[mode],
-    className,
   );
 
   const cellContent = (
@@ -91,7 +89,7 @@ export const MiniInfoCell = ({
   );
 
   return restProps.onClick ? (
-    <Tappable Component="div" role="button" {...restProps} className={cellClasses}>
+    <Tappable Component="div" role="button" {...restProps} baseClassName={cellClasses}>
       {cellContent}
     </Tappable>
   ) : (

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -96,7 +96,6 @@ export const ModalCardBase = ({
   actions,
   onClose,
   dismissLabel = 'Скрыть',
-  style,
   size: sizeProp,
   modalDismissButtonTestId,
   dismissButtonMode = 'outside',
@@ -123,9 +122,8 @@ export const ModalCardBase = ({
         isDesktop && styles.desktop,
         withSafeZone && styles.withSafeZone,
       )}
-      style={{
+      baseStyle={{
         maxWidth: size,
-        ...style,
       }}
     >
       <div className={styles.container}>

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Icon20Cancel } from '@vkontakte/icons';
-import { classNames } from '@vkontakte/vkjs';
 import { Tappable, type TappableProps } from '../Tappable/Tappable';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './ModalDismissButton.module.css';
@@ -12,12 +11,11 @@ export type ModalDismissButtonProps = Omit<TappableProps, 'mode' | 'onClose'>;
  */
 export const ModalDismissButton = ({
   children = 'Закрыть',
-  className,
   ...restProps
 }: ModalDismissButtonProps): React.ReactNode => {
   return (
     <Tappable
-      className={classNames(styles.host, className)}
+      baseClassName={styles.host}
       {...restProps}
       activeMode={styles.active}
       hoverMode={styles.hover}

package/src/components/ModalOverlay/ModalOverlay.module.css

@@ -18,6 +18,7 @@
 
 .hostPositionFixed {
   position: fixed;
+  z-index: var(--vkui--z_index_modal);
 }
 
 .hostStateEnter {

package/src/components/ModalRoot/ModalRoot.tsx

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { warnOnce } from '../../lib/warnOnce';
-import { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { ModalOverlay } from '../ModalOverlay/ModalOverlay';
 import { ModalRootContext, ModalRootOverlayContext } from './ModalRootContext';
 import type { ModalRootProps } from './types';
@@ -61,13 +61,17 @@ export const ModalRoot = ({
   );
   const modalOverlayRef = React.useRef<HTMLDivElement>(null);
   return (
-    <ModalPopoutPortal usePortal={usePortal}>
+    <AppRootPortal usePortal={usePortal}>
       <ModalRootContext.Provider value={contextValue}>
         <ModalRootOverlayContext.Provider value={modalOverlayRef}>
-          <ModalOverlay visible={typeof activeModal === 'string'} getRootRef={modalOverlayRef} />
+          <ModalOverlay
+            position="fixed"
+            visible={typeof activeModal === 'string'}
+            getRootRef={modalOverlayRef}
+          />
           {children}
         </ModalRootOverlayContext.Provider>
       </ModalRootContext.Provider>
-    </ModalPopoutPortal>
+    </AppRootPortal>
   );
 };

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, type RefObject } from 'react';
 import { noop } from '@vkontakte/vkjs';
 import type { ModalRootContextInterface } from './types';

package/src/components/ModalRoot/types.ts

@@ -1,4 +1,5 @@
 /** TODO [>=8] Удалить deprecated типы */
+
 import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
 
 /**

package/src/components/NavIdContext/NavIdContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 
 export const NavViewIdContext: React.Context<string | undefined> = React.createContext<

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { hasReactNode } from '@vkontakte/vkjs';
+import { mergeStyle } from '../../helpers/mergeStyle';
 import { useExternRef } from '../../hooks/useExternRef';
 import { usePatchChildren } from '../../hooks/usePatchChildren';
 import { createPortal } from '../../lib/createPortal';
@@ -137,17 +138,13 @@ export const OnboardingTooltip = ({
       floatingDataY,
     );
 
-    if (styleProp) {
-      Object.assign(floatingStyle, styleProp);
-    }
-
     tooltip = createPortal(
       <>
         <TooltipBase
           {...restProps}
           id={tooltipId}
           getRootRef={tooltipRef}
-          style={floatingStyle}
+          style={mergeStyle(floatingStyle, styleProp)}
           maxWidth={maxWidth}
           arrowProps={
             disableArrow

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -49,7 +49,6 @@ export const PanelHeaderButton = ({
   children,
   primary = false,
   label,
-  className,
   ...restProps
 }: PanelHeaderButtonProps): React.ReactNode => {
   const isPrimitive = isPrimitiveReactNode(children);
@@ -95,14 +94,13 @@ export const PanelHeaderButton = ({
       hoverMode={hoverMode}
       activeEffectDelay={200}
       activeMode={activeMode}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         platformClassNames.hasOwnProperty(platform)
           ? platformClassNames[platform]
           : platformClassNames.android,
         onlyPrimitive && styles.primitive,
         !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,
-        className,
       )}
     >
       {isPrimitive ? <ButtonTypography primary={primary}>{children}</ButtonTypography> : children}

package/src/components/Popper/Popper.tsx

@@ -112,7 +112,6 @@ export const Popper = ({
   getRootRef,
   children,
   usePortal = true,
-  style: styleProp,
   onPlacementChange,
   ...restProps
 }: PopperProps): React.ReactNode => {
@@ -165,16 +164,13 @@ export const Popper = ({
       {...restProps}
       baseClassName={styles.host}
       getRootRef={handleRootRef}
-      style={{
-        ...convertFloatingDataToReactCSSProperties(
-          floatingPositionStrategy,
-          floatingDataX,
-          floatingDataY,
-          sameWidth ? null : undefined,
-          middlewareData,
-        ),
-        ...styleProp,
-      }}
+      baseStyle={convertFloatingDataToReactCSSProperties(
+        floatingPositionStrategy,
+        floatingDataX,
+        floatingDataY,
+        sameWidth ? null : undefined,
+        middlewareData,
+      )}
     >
       {arrow && (
         <FloatingArrow

package/src/components/Progress/Progress.tsx

@@ -42,7 +42,6 @@ export const Progress = ({
   value = 0,
   appearance = 'accent',
   height,
-  style,
   ...restProps
 }: ProgressProps): React.ReactNode => {
   const progress = clamp(value, PROGRESS_MIN_VALUE, PROGRESS_MAX_VALUE);
@@ -53,12 +52,12 @@ export const Progress = ({
     <RootComponent
       aria-valuenow={value}
       title={title}
-      style={{ ...styleHeight, ...style }}
       {...restProps}
       role="progressbar"
       aria-valuemin={PROGRESS_MIN_VALUE}
       aria-valuemax={PROGRESS_MAX_VALUE}
       baseClassName={classNames(styles.host, stylesAppearance[appearance])}
+      baseStyle={styleHeight}
     >
       <div className={styles.in} style={{ width: `${progress}%` }} />
     </RootComponent>

package/src/components/RichCell/RichCell.tsx

@@ -89,7 +89,6 @@ export const RichCell: React.FC<RichCellProps> & {
   bottom,
   actions,
   multiline,
-  className,
   afterAlign = 'start',
   ...restProps
 }: RichCellProps) => {
@@ -110,11 +109,10 @@ export const RichCell: React.FC<RichCellProps> & {
   return (
     <Tappable
       {...restProps}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         !multiline && styles.textEllipsis,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
-        className,
       )}
     >
       {before && <div className={styles.before}>{before}</div>}

package/src/components/RootComponent/RootComponent.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { mergeStyle } from '../../helpers/mergeStyle';
 import type { HasComponent, HasRootRef } from '../../types';
 import styles from './RootComponent.module.css';
 
@@ -8,6 +9,7 @@ export interface RootComponentProps<T>
     HasRootRef<T>,
     HasComponent {
   baseClassName?: string | false;
+  baseStyle?: React.CSSProperties;
 }
 
 /**
@@ -17,6 +19,8 @@ export const RootComponent = <T,>({
   Component = 'div',
   baseClassName,
   className,
+  baseStyle,
+  style,
   getRootRef,
   ...restProps
 }: RootComponentProps<T>): React.ReactNode => (
@@ -28,6 +32,7 @@ export const RootComponent = <T,>({
       styles.host,
       restProps.hidden === true && styles.hidden,
     )}
+    style={mergeStyle(baseStyle, style)}
     {...restProps}
   />
 );