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

package/package.json

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "version": "7.0.0-dev-efd91c.2",
+  "version": "7.0.0-dev-efd91c.3",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -8,13 +8,15 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./dist/vkui.css": "./dist/vkui.css",
     "./dist/components.css": "./dist/components.css",
     "./dist/cssm": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/cssm/index.js"
+      "import": "./dist/cssm/index.js",
+      "default": "./dist/cssm/index.js"
     },
     "./dist/cssm/styles/themes.css": "./dist/cssm/styles/themes.css",
     "./package.json": "./package.json"
@@ -86,12 +88,12 @@
     "date-fns": "^4.1.0"
   },
   "devDependencies": {
-    "@storybook/react": "8.4.2",
-    "@storybook/react-webpack5": "8.4.2",
+    "@storybook/react": "8.4.5",
+    "@storybook/react-webpack5": "8.4.5",
     "@types/node": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "8.4.4",
+    "storybook": "8.4.5",
     "ts-node": "*"
   },
   "size-limit": [

package/src/components/ActionSheet/ActionSheet.tsx

@@ -5,7 +5,7 @@ import { noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
-import { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { Footnote } from '../Typography/Footnote/Footnote';
@@ -143,7 +143,7 @@ export const ActionSheet = ({
   }
 
   return (
-    <ModalPopoutPortal>
+    <AppRootPortal>
       <PopoutWrapper
         closing={Boolean(closingBy)}
         alignY="bottom"
@@ -154,6 +154,6 @@ export const ActionSheet = ({
       >
         {actionSheet}
       </PopoutWrapper>
-    </ModalPopoutPortal>
+    </AppRootPortal>
   );
 };

package/src/components/ActionSheetItem/ActionSheetItem.tsx

@@ -73,7 +73,6 @@ export const ActionSheetItem = ({
   onImmediateClick,
   multiline = false,
   iconChecked,
-  className,
   isCancelItem,
   ...restProps
 }: ActionSheetItemProps): React.ReactNode => {
@@ -130,7 +129,7 @@ export const ActionSheetItem = ({
       {...restProps}
       onClick={onItemClickImpl}
       activeMode={platform === 'ios' ? styles.active : undefined}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         platform === 'ios' && styles.ios,
         mode === 'cancel' && styles.modeCancel,
@@ -138,7 +137,6 @@ export const ActionSheetItem = ({
         sizeY === 'compact' && styles.sizeYCompact,
         isRich && styles.rich,
         actionSheetMode === 'menu' && styles.menu,
-        className,
       )}
       onKeyDown={onKeyDown}
     >

package/src/components/AdaptivityProvider/AdaptivityContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import type { SizeTypeValues, ViewHeightType, ViewWidthType } from '../../lib/adaptivity';
 

package/src/components/Alert/Alert.tsx

@@ -14,7 +14,7 @@ import type {
   HasRootRef,
 } from '../../types';
 import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
-import { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import type { ButtonProps } from '../Button/Button';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
@@ -140,7 +140,7 @@ export const Alert = ({
   useScrollLock();
 
   return (
-    <ModalPopoutPortal usePortal={usePortal}>
+    <AppRootPortal usePortal={usePortal}>
       <PopoutWrapper
         className={className}
         closing={closing}
@@ -205,6 +205,6 @@ export const Alert = ({
           )}
         </FocusTrap>
       </PopoutWrapper>
-    </ModalPopoutPortal>
+    </AppRootPortal>
   );
 };

package/src/components/Alert/AlertAction.tsx

@@ -20,7 +20,7 @@ const AlertActionIos = ({ mode, ...restProps }: AlertActionProps) => {
   return (
     <Tappable
       Component={restProps.href ? 'a' : 'button'}
-      className={classNames(
+      baseClassName={classNames(
         styles.action,
         mode === 'destructive' && styles.actionModeDestructive,
         mode === 'cancel' && styles.actionModeCancel,

package/src/components/AppRoot/AppRoot.tsx

@@ -2,15 +2,11 @@
 
 import * as React from 'react';
 import { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';
 import { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';
-import { getDocumentBody } from '../../lib/dom';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { AppRootContext } from './AppRootContext';
 import { AppRootStyleContainer } from './AppRootStyleContainer';
 import { ElementScrollController, GlobalScrollController } from './ScrollContext';
-import { extractPortalRootByProp } from './helpers';
 import type {
   AppRootLayout,
   AppRootMode,
@@ -85,7 +81,7 @@ export const AppRoot = ({
   children,
   mode = 'full',
   scroll = 'global',
-  portalRoot: portalRootProp,
+  portalRoot,
   disablePortal = false,
   disableParentTransformForPositionFixedElements,
   safeAreaInsets: safeAreaInsetsProp,
@@ -95,46 +91,6 @@ export const AppRoot = ({
   ...props
 }: AppRootProps): React.ReactNode => {
   const appRootRef = React.useRef<HTMLDivElement | null>(null);
-  const popoutModalContainerRef = React.useRef<HTMLDivElement | null>(null);
-  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(
-    portalRootProp ? extractPortalRootByProp(portalRootProp) : null,
-  );
-
-  useIsomorphicLayoutEffect(
-    function syncPortalRootWithPortalRootProp() {
-      const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;
-      if (portalRootProp !== undefined) {
-        setPortalRoot(portalByProp);
-      }
-    },
-    [portalRootProp],
-  );
-
-  useIsomorphicLayoutEffect(
-    function removePortalRootOnUnmount() {
-      // Контейнер PortalRoot создаётся при первом вызове модалки или
-      // поповера использующего AppRootPortal.
-      // Потом он переиспользуется и не удаляется пока
-      // приложение не размонтируется.
-      // И создаётся только если в приложение не был передан
-      // пользовательский контейнер через свойство portalRootProp
-      // Сделано для поддержки SSR, чтобы при старте приложения
-      // никаких новых нод в DOM не создавалось.
-      const documentBody = getDocumentBody(appRootRef.current);
-      return function cleanup() {
-        if (portalRoot) {
-          const isPortalRootPassedByProps = Boolean(portalRootProp);
-          if (!isPortalRootPassedByProps) {
-            // удаляем portalRoot из дома только если он
-            // был создан в AppRootPortal.
-            // Если он был передан через пропы - удалять нельзя
-            documentBody.removeChild(portalRoot);
-          }
-        }
-      };
-    },
-    [portalRootProp],
-  );
 
   const ScrollController = React.useMemo(
     () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),
@@ -142,13 +98,11 @@ export const AppRoot = ({
   );
 
   const isKeyboardInputActiveRef = useKeyboardInputTracker();
-  const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);
+  const safeAreaInsets = React.useMemo(() => safeAreaInsetsProp, [safeAreaInsetsProp]);
   const contextValue = React.useMemo(
     () => ({
       appRoot: appRootRef,
       portalRoot,
-      popoutModalRoot: popoutModalContainerRef,
-      setPortalRoot,
       safeAreaInsets,
       embedded: mode === 'embedded',
       mode,
@@ -180,7 +134,8 @@ export const AppRoot = ({
   useSyncHTMLWithTokens({ appRootRef, enable: mode === 'full' });
   /*
    * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.
-   * В режиме embedded будет выставлять только .vkui__root на контейнере.
+   * В режиме embedded будет выставлять только .vkui__root и .vkui__root--embedded на контейнере.
+   * В режиме partial мы классы не выставляем.
    */
   useSyncHTMLWithBaseVKUIClasses({
     appRootRef,

package/src/components/AppRoot/AppRootContext.ts

@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { noop } from '@vkontakte/vkjs';
 import { type AppRootUserSelectMode, type SafeAreaInsets } from './types';
 
 export interface AppRootContextInterface {
   appRoot: React.RefObject<HTMLElement>;
-  portalRoot: HTMLElement | null;
-  popoutModalRoot: React.MutableRefObject<HTMLDivElement | null>;
-  setPortalRoot: (element: HTMLElement) => void;
+  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
   safeAreaInsets?: SafeAreaInsets;
   embedded: boolean;
   mode: 'partial' | 'embedded' | 'full';
@@ -25,8 +22,6 @@ export const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {
   appRoot: React.createRef(),
   mode: 'full',
   portalRoot: null,
-  popoutModalRoot: React.createRef(),
-  setPortalRoot: noop,
   safeAreaInsets: undefined,
   embedded: false,
   keyboardInput: false,

package/src/components/AppRoot/AppRootPortal.tsx

@@ -3,9 +3,8 @@
 import * as React from 'react';
 import { useColorScheme } from '../../hooks/useColorScheme';
 import { createPortal } from '../../lib/createPortal';
-import { getDocumentBody } from '../../lib/dom';
+import { useDOM } from '../../lib/dom';
 import { isRefObject } from '../../lib/isRefObject';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { HasChildren } from '../../types';
 import { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';
 import { AppRootContext, type AppRootContextInterface } from './AppRootContext';
@@ -13,13 +12,13 @@ import { AppRootStyleContainer } from './AppRootStyleContainer';
 
 export interface AppRootPortalProps extends HasChildren {
   /**
-   * - При передаче `true` будет использовать `portalRoot` из контекста `AppRoot`.
+   * - При передаче `true` в качестве портала будет использован `portalRoot`
+   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.
    * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.
-   * - При передаче `SplitLayout` будет использоваться контейнер внутри `SplitLayout`, сразу после контента приложения.
-   *   Если контейнера `SplitLayout` в приложении нет, то будет использован глобальный `portalRoot`, чаще всего
-   *   это последний дочерний элемент `body`.
+   *
+   * По умолчанию в качестве портала будет использован `document.body`
    */
-  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null | 'SplitLayout';
+  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;
   className?: string;
 }
 
@@ -28,12 +27,8 @@ export const AppRootPortal = ({
   usePortal,
   className,
 }: AppRootPortalProps): React.ReactNode => {
-  const {
-    setPortalRoot,
-    appRoot,
-    mode,
-    disablePortal: disableCreatePortalInGlobalPortalRoot,
-  } = React.useContext(AppRootContext);
+  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =
+    React.useContext(AppRootContext);
   const colorScheme = useColorScheme();
 
   const canUsePortal = shouldUsePortal(
@@ -41,27 +36,8 @@ export const AppRootPortal = ({
     mode,
     Boolean(disableCreatePortalInGlobalPortalRoot),
   );
-  const portalContainer = usePortalContainer(usePortal);
-
-  useIsomorphicLayoutEffect(
-    // Создаём контейнер для портала по запросу один раз
-    // и пока приложение не размонтируется.
-    // Удаление созданной ноды происходит в AppRoot
-    function initializePortalRootIfNeeded() {
-      const shouldCreatePortalRoot = canUsePortal && portalContainer === null;
-      if (shouldCreatePortalRoot) {
-        const documentBody = getDocumentBody(appRoot.current);
-        const portal = documentBody.ownerDocument.createElement('div');
-        documentBody.appendChild(portal);
-
-        setPortalRoot(portal);
-      }
 
-      // Note:
-      // Очистка и удаление `portalRoot` делегируется `AppRoot`, т.к. экземпляров `AppRootPortal` может быть несколько и размонтирование одного из них удалит `portalRoot`, что сломает работу других экземпляров.
-    },
-    [canUsePortal, appRoot, portalContainer, setPortalRoot],
-  );
+  const portalContainer = usePortalContainer(usePortal);
 
   if (canUsePortal && portalContainer) {
     return createPortal(
@@ -92,14 +68,20 @@ function shouldUsePortal(
 }
 
 function usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {
-  const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);
-  if (typeof usePortal === 'boolean' || usePortal === undefined) {
-    return portalRoot;
-  }
+  const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);
+
+  const { document } = useDOM();
 
-  if (usePortal === 'SplitLayout') {
-    return popoutModalRoot.current || portalRoot;
+  if (usePortal && typeof usePortal !== 'boolean') {
+    return isRefObject(usePortal) ? usePortal.current : usePortal;
   }
 
-  return isRefObject(usePortal) ? usePortal.current : usePortal;
+  const resolvedPortalFromContext = isRefObject(portalRootFromContext)
+    ? portalRootFromContext.current
+    : portalRootFromContext;
+  // если portalRoot не передали через AppRoot, то мы используем body
+  // мы можем использовать body как портал,
+  // так как все стили передаются вместе с AppRootStyleContainer
+  const portalRoot = resolvedPortalFromContext || document?.body || null;
+  return portalRoot;
 }

package/src/components/AppRoot/helpers.ts

@@ -2,9 +2,6 @@ import { isRefObject } from '../../lib/isRefObject';
 import type { AppRootUserSelectMode, SafeAreaInsets } from './types';
 import styles from './AppRoot.module.css';
 
-export const getParentElement = (el: HTMLElement | null): HTMLElement | null =>
-  el ? el.parentElement : null;
-
 export const extractPortalRootByProp = (
   portalRootProp: HTMLElement | React.RefObject<HTMLElement>,
 ): HTMLElement | null => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);

package/src/components/AspectRatio/AspectRatio.tsx

@@ -23,12 +23,7 @@ export interface AspectRatioProps extends Omit<RootComponentProps<HTMLElement>,
  * @since 5.5.0
  * @see https://vkcom.github.io/VKUI/#/AspectRatio
  */
-export function AspectRatio({
-  ratio,
-  mode = 'stretch',
-  style: styleProp,
-  ...props
-}: AspectRatioProps): JSX.Element {
+export function AspectRatio({ ratio, mode = 'stretch', ...props }: AspectRatioProps): JSX.Element {
   const style: React.CSSProperties & CSSCustomProperties = {
     '--vkui_internal--aspect_ratio': String(ratio),
   };
@@ -36,7 +31,7 @@ export function AspectRatio({
   return (
     <RootComponent
       baseClassName={classNames(styles.host, mode === 'stretch' && styles.modeStretch)}
-      style={{ ...styleProp, ...style }}
+      baseStyle={style}
       {...props}
     />
   );

package/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,9 @@
 import { classNames } from '@vkontakte/vkjs';
-import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
+import { ImageBase, type ImageBaseProps } from '../ImageBase/ImageBase';
+import {
+  ImageBaseOverlay,
+  type ImageBaseOverlayProps,
+} from '../ImageBase/ImageBaseOverlay/ImageBaseOverlay';
 import { AvatarBadge, type AvatarBadgeProps } from './AvatarBadge/AvatarBadge';
 import {
   AvatarBadgeWithPreset,
@@ -131,7 +135,7 @@ Avatar.Badge.displayName = 'Avatar.Badge';
 Avatar.BadgeWithPreset = AvatarBadgeWithPreset;
 Avatar.BadgeWithPreset.displayName = 'Avatar.BadgeWithPreset';
 
-Avatar.Overlay = ImageBase.Overlay;
+Avatar.Overlay = ImageBaseOverlay;
 Avatar.Overlay.displayName = 'Avatar.Overlay';
 
 Avatar.getInitialsFontSize = getInitialsFontSize;

package/src/components/Banner/Banner.tsx

@@ -96,7 +96,6 @@ export const Banner = ({
   actions,
   onDismiss,
   dismissLabel = 'Скрыть',
-  className,
   Component,
   ...restProps
 }: BannerProps): React.ReactNode => {
@@ -173,7 +172,6 @@ export const Banner = ({
         mode === 'image' && styles.modeImage,
         size === 'm' && styles.sizeM,
         mode === 'image' && imageTheme === 'dark' && styles.inverted,
-        className,
       )}
       {...restProps}
     >

package/src/components/Button/Button.tsx

@@ -73,7 +73,6 @@ export const Button = ({
   getRootRef,
   loading,
   onClick,
-  className,
   disableSpinnerAnimation,
   rounded,
   disabled,
@@ -92,8 +91,7 @@ export const Button = ({
       disabled={loading || disabled}
       {...restProps}
       onClick={loading ? undefined : onClick}
-      className={classNames(
-        className,
+      baseClassName={classNames(
         styles.host,
         stylesSize[size],
         stylesMode[mode],

package/src/components/CalendarDay/CalendarDay.tsx

@@ -58,7 +58,6 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
     hintedSelectionEnd,
     sameMonth,
     size,
-    className,
     children,
     renderDayContent,
     testId,
@@ -102,7 +101,7 @@ export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
 
     return (
       <Tappable
-        className={classNames(styles.host, size === 's' && styles.sizeS, className)}
+        baseClassName={classNames(styles.host, size === 's' && styles.sizeS)}
         hoverMode={styles.hostHovered}
         activeMode={styles.hostActivated}
         hasActive={false}

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -156,7 +156,7 @@ export const CalendarHeader = ({
       {!prevMonthHidden && (
         <AdaptivityProvider sizeX="regular">
           <Tappable
-            className={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}
+            baseClassName={classNames(styles.navIcon, styles.navIconPrev, prevMonthClassName)}
             onClick={onPrevMonth}
             data-testid={prevMonthButtonTestId}
             {...restPrevMonthProps}
@@ -222,7 +222,7 @@ export const CalendarHeader = ({
       {!nextMonthHidden && (
         <AdaptivityProvider sizeX="regular">
           <Tappable
-            className={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}
+            baseClassName={classNames(styles.navIcon, styles.navIconNext, nextMonthClassName)}
             onClick={onNextMonth}
             data-testid={nextMonthButtonTestId}
             {...restNextMonthProps}

package/src/components/ColorSchemeProvider/ColorSchemeProvider.tsx

@@ -1,3 +1,7 @@
+'use client';
+
+// TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider
+
 import * as React from 'react';
 import { IconAppearanceProvider } from '@vkontakte/icons';
 import type { ColorSchemeType } from '../../lib/colorScheme';

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import type { ColorSchemeType } from '../../lib/colorScheme';
 import { platform, type PlatformType } from '../../lib/platform';

package/src/components/ContentBadge/ContentBadgeContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import type { ContentBadgeSizeType } from './types';
 

package/src/components/Counter/Counter.tsx

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { type HTMLAttributesWithRootRef } from '../../types';
+import { mergeStyle } from '../../helpers/mergeStyle';
+import { type CSSCustomProperties, type HTMLAttributesWithRootRef } from '../../types';
 import { Caption } from '../Typography/Caption/Caption';
 import { Headline } from '../Typography/Headline/Headline';
 import styles from './Counter.module.css';
@@ -73,25 +74,23 @@ export const Counter = ({
     return 'accent';
   }, [appearanceProp, mode]);
 
-  const style = React.useMemo(() => {
-    if (mode === 'inherit' || appearance !== 'custom' || !color) {
-      return styleProp;
-    }
-    switch (mode) {
-      case 'primary':
-        return {
-          ...styleProp,
-          '--vkui_internal--counter_background': color,
-        };
-      case 'contrast':
-      case 'tertiary':
-        return {
-          ...styleProp,
-          '--vkui_internal--counter_foreground': color,
-        };
-    }
-    return styleProp;
-  }, [appearance, color, mode, styleProp]);
+  const style: (React.CSSProperties & CSSCustomProperties<string | undefined>) | undefined =
+    React.useMemo(() => {
+      if (mode === 'inherit' || appearance !== 'custom' || !color) {
+        return undefined;
+      }
+      switch (mode) {
+        case 'primary':
+          return {
+            '--vkui_internal--counter_background': color,
+          };
+        case 'contrast':
+        case 'tertiary':
+          return {
+            '--vkui_internal--counter_foreground': color,
+          };
+      }
+    }, [appearance, color, mode]);
 
   if (React.Children.count(children) === 0) {
     return null;
@@ -103,7 +102,7 @@ export const Counter = ({
   return (
     <CounterTypography
       {...restProps}
-      style={style}
+      style={mergeStyle(style, styleProp)}
       Component="span"
       className={classNames(
         'vkuiInternalCounter',

package/src/components/CustomSelectOption/CustomSelectOption.tsx

@@ -3,8 +3,9 @@
 import * as React from 'react';
 import { Icon16Done } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { mergeStyle } from '../../helpers/mergeStyle';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
-import type { HTMLAttributesWithRootRef } from '../../types';
+import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { Footnote } from '../Typography/Footnote/Footnote';
 import { Paragraph } from '../Typography/Paragraph/Paragraph';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
@@ -74,15 +75,14 @@ export const CustomSelectOption = ({
   ...restProps
 }: CustomSelectOptionProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
-  const style = React.useMemo(
+  const style: (React.CSSProperties & CSSCustomProperties<number>) | undefined = React.useMemo(
     () =>
       hierarchy > 0
         ? {
             '--vkui_internal--custom_select_option_hierarchy_level': hierarchy,
-            ...styleProp,
           }
-        : styleProp,
-    [hierarchy, styleProp],
+        : undefined,
+    [hierarchy],
   );
   const hovered = hoveredProp && !disabled ? true : false;
 
@@ -103,7 +103,7 @@ export const CustomSelectOption = ({
         hierarchy > 0 && styles.hierarchy,
         className,
       )}
-      style={style}
+      style={mergeStyle(style, styleProp)}
     >
       {hasReactNode(before) && <div className={styles.before}>{before}</div>}
       <div className={styles.main}>

package/src/components/Flex/Flex.tsx

@@ -82,7 +82,6 @@ export const Flex: React.FC<FlexProps> & {
   margin = 'none',
   noWrap = false,
   direction = 'row',
-  style: styleProp,
   reverse = false,
   children,
   ...props
@@ -104,7 +103,7 @@ export const Flex: React.FC<FlexProps> & {
         withGaps && styles.withGaps,
         withGaps && getGapsPresets(rowGap, columnGap),
       )}
-      style={withGaps ? { ...getGapsByUser(rowGap, columnGap), ...styleProp } : styleProp}
+      baseStyle={getGapsByUser(rowGap, columnGap)}
     >
       {children}
     </RootComponent>

package/src/components/Flex/FlexItem/FlexItem.tsx

@@ -46,13 +46,12 @@ export const FlexItem = ({
   alignSelf,
   flex,
   flexBasis,
-  style,
   ...rest
 }: FlexItemProps): React.ReactNode => {
   return (
     <RootComponent
       {...rest}
-      style={{ flexBasis, ...style }}
+      baseStyle={{ flexBasis }}
       baseClassName={classNames(
         alignSelf && alignSelfClassNames[alignSelf],
         flex && flexClassNames[flex],