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

package/dist/cssm/components/AppRoot/AppRoot.js

@@ -1,145 +1,118 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
-import { useAdaptivity } from "../../hooks/useAdaptivity.js";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker.js";
 import { useObjectMemo } from "../../hooks/useObjectMemo.js";
+import { useSyncHTMLWithBaseVKUIClasses } from "../../hooks/useSyncHTMLWithBaseVKUIClasses.js";
+import { useSyncHTMLWithTokens } from "../../hooks/useSyncHTMLWithTokens.js";
 import { getDocumentBody } from "../../lib/dom.js";
-import { useTokensClassName } from "../../lib/tokens/index.js";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
 import { AppRootContext } from "./AppRootContext.js";
+import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
 import { ElementScrollController, GlobalScrollController } from "./ScrollContext.js";
-import { extractPortalRootByProp, getClassNamesByMode, getParentElement, getUserSelectModeClassName, setSafeAreaInsets } from "./helpers.js";
+import { extractPortalRootByProp } from "./helpers.js";
 import styles from "./AppRoot.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
- */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot: portalRootProp = null, disablePortal = false, disableParentTransformForPositionFixedElements, className, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, ...props })=>{
-    const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();
-    const tokensClassName = useTokensClassName();
-    const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);
-    const isKeyboardInputActiveRef = useKeyboardInputTracker();
+ */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot: portalRootProp, disablePortal = false, disableParentTransformForPositionFixedElements, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, disableSettingVKUIClassesInRuntime, ...props })=>{
     const appRootRef = React.useRef(null);
-    const portalRootRef = React.useRef(null);
-    useIsomorphicLayoutEffect(function setupPortalRoot() {
+    const popoutModalContainerRef = React.useRef(null);
+    const [portalRoot, setPortalRoot] = React.useState(portalRootProp ? extractPortalRootByProp(portalRootProp) : null);
+    useIsomorphicLayoutEffect(function syncPortalRootWithPortalRootProp() {
         const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;
-        if (portalByProp) {
-            portalRootRef.current = portalByProp;
-            return function cleanup() {
-                portalRootRef.current = null;
-            };
+        if (portalRootProp !== undefined) {
+            setPortalRoot(portalByProp);
         }
-        const documentBody = getDocumentBody(appRootRef.current);
-        const portal = documentBody.ownerDocument.createElement('div');
-        documentBody.appendChild(portal);
-        portalRootRef.current = portal;
-        return function cleanup() {
-            documentBody.removeChild(portal);
-            portalRootRef.current = null;
-        };
     }, [
         portalRootProp
     ]);
-    useIsomorphicLayoutEffect(function setupContainers() {
-        if (!appRootRef.current || !portalRootRef.current) {
-            return;
-        }
-        const parentElement = getParentElement(appRootRef.current);
+    useIsomorphicLayoutEffect(function removePortalRootOnUnmount() {
+        // Контейнер PortalRoot создаётся при первом вызове модалки или
+        // поповера использующего AppRootPortal.
+        // Потом он переиспользуется и не удаляется пока
+        // приложение не размонтируется.
+        // И создаётся только если в приложение не был передан
+        // пользовательский контейнер через свойство portalRootProp
+        // Сделано для поддержки SSR, чтобы при старте приложения
+        // никаких новых нод в DOM не создавалось.
         const documentBody = getDocumentBody(appRootRef.current);
-        const documentElement = documentBody.ownerDocument.documentElement;
-        const [baseClassNames, stylesClassNames] = getClassNamesByMode({
-            mode,
-            layout,
-            tokensClassName,
-            sizeX,
-            sizeY
-        });
-        /* eslint-disable no-restricted-properties */ switch(mode){
-            case 'full':
-                {
-                    if (parentElement) {
-                        parentElement.classList.add(...baseClassNames);
-                    }
-                    documentElement.classList.add(...stylesClassNames, 'vkui');
-                    const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, documentElement);
-                    return function cleanup() {
-                        if (parentElement) {
-                            parentElement.classList.remove(...baseClassNames);
-                        }
-                        documentElement.classList.remove(...stylesClassNames, 'vkui');
-                        unsetSafeAreaInsets();
-                    };
-                }
-            case 'embedded':
-                {
-                    if (parentElement) {
-                        parentElement.classList.add(...baseClassNames, ...stylesClassNames);
-                        if (!disableParentTransformForPositionFixedElements) {
-                            parentElement.style.setProperty('transform', 'translate3d(0, 0, 0)');
-                        }
-                        const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, parentElement, portalRootRef.current); // prettier-ignore
-                        return function cleanup() {
-                            parentElement.classList.remove(...baseClassNames, ...stylesClassNames);
-                            if (!disableParentTransformForPositionFixedElements) {
-                                parentElement.style.removeProperty('transform');
-                            }
-                            unsetSafeAreaInsets();
-                        };
-                    }
-                    /* istanbul ignore next: node.parentElement может быть null, но такой кейс в теории невозможен */ return;
-                }
-            /* istanbul ignore next: не покрывается за счёт теста на <AppRoot mode="partial" /> */ case 'partial':
-                {
-                    return;
+        return function cleanup() {
+            if (portalRoot) {
+                const isPortalRootPassedByProps = Boolean(portalRootProp);
+                if (!isPortalRootPassedByProps) {
+                    // удаляем portalRoot из дома только если он
+                    // был создан в AppRootPortal.
+                    // Если он был передан через пропы - удалять нельзя
+                    documentBody.removeChild(portalRoot);
                 }
-        }
-    /* eslint-enable no-restricted-properties */ }, [
-        mode,
-        layout,
-        disableParentTransformForPositionFixedElements,
-        tokensClassName,
-        sizeX,
-        sizeY,
-        safeAreaInsets
+            }
+        };
+    }, [
+        portalRootProp
     ]);
     const ScrollController = React.useMemo(()=>scroll === 'contain' ? ElementScrollController : GlobalScrollController, [
         scroll
     ]);
+    const isKeyboardInputActiveRef = useKeyboardInputTracker();
+    const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);
     const contextValue = React.useMemo(()=>({
             appRoot: appRootRef,
-            portalRoot: portalRootRef,
+            portalRoot,
+            popoutModalRoot: popoutModalContainerRef,
+            setPortalRoot,
+            safeAreaInsets,
             embedded: mode === 'embedded',
             mode,
             disablePortal,
             layout,
             get keyboardInput () {
                 return isKeyboardInputActiveRef.current;
-            }
+            },
+            userSelectMode
         }), [
+        portalRoot,
         disablePortal,
         isKeyboardInputActiveRef,
         layout,
-        mode
+        mode,
+        safeAreaInsets,
+        userSelectMode
     ]);
-    const content = /*#__PURE__*/ _jsx(AppRootContext.Provider, {
+    /*
+   * Вешаем класс токенов на html в режиме full.
+   * Это необходимо, чтобы цвета html элемента и скроллбара соответствовали текущей цветовой схеме:
+   * - фон html элемента виден, если пользователь оверскролит. Тогда возникает анимация bounce-эффекта и виден фон html элемента. Без токенов в черной теме будет выглядывать белый фон.
+   * - цвет системного сколлбара зависит от color-sheme свойства, значение которого задётся токенами и должно быть выставлено именно на html элементе.
+   * В режме SSR пользователи сами могу задать этот класс на html-элементе. главное, чтобы он соответствовал переданным platform и appearence свойствам.
+   */ useSyncHTMLWithTokens({
+        appRootRef,
+        enable: mode === 'full'
+    });
+    /*
+   * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.
+   * В режиме embedded будет выставлять только .vkui__root на контейнере.
+   */ useSyncHTMLWithBaseVKUIClasses({
+        appRootRef,
+        mode,
+        enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime
+    });
+    return mode === 'partial' ? /*#__PURE__*/ _jsx(AppRootContext.Provider, {
         value: contextValue,
         children: /*#__PURE__*/ _jsx(ScrollController, {
             elRef: appRootRef,
             children: children
         })
-    });
-    const { isWebView } = useConfigProvider();
-    const userSelectModeClassName = getUserSelectModeClassName({
-        userSelectMode,
-        isWebView,
-        hasPointer
-    });
-    return mode === 'partial' ? content : /*#__PURE__*/ _jsx("div", {
-        ref: appRootRef,
-        className: classNames(styles.host, userSelectModeClassName, className),
-        ...props,
-        children: content
+    }) : /*#__PURE__*/ _jsx(AppRootContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ _jsx(AppRootStyleContainer, {
+            getRootRef: appRootRef,
+            className: mode === 'embedded' && !disableParentTransformForPositionFixedElements ? styles.transformForPositionFixedElements : undefined,
+            ...props,
+            children: /*#__PURE__*/ _jsx(ScrollController, {
+                elRef: appRootRef,
+                children: children
+            })
+        })
     });
 };
 

package/dist/cssm/components/AppRoot/AppRoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { getDocumentBody } from '../../lib/dom';\nimport { useTokensClassName } from '../../lib/tokens';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport {\n  extractPortalRootByProp,\n  getClassNamesByMode,\n  getParentElement,\n  getUserSelectModeClassName,\n  setSafeAreaInsets,\n} from './helpers';\nimport type {\n  AppRootLayout,\n  AppRootMode,\n  AppRootScroll,\n  AppRootUserSelectMode,\n  SafeAreaInsets,\n} from './types';\nimport styles from './AppRoot.module.css';\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n  /**\n   * Задаёт режим выбора текста (выделения текста) для всего приложения.\n   * По умолчанию, если режим не задан, запрещает выбор текста в приложениях,\n   * запущенных в webview (по значению свойства `isWebView` из [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider)).\n   *\n   * - `enabled-with-pointer` – разрешает выбор текста, если устройство ввода типа `pointer` (например, `мышь`), в остальных случаях запрещает;\n   * - `disabled` – запрещает выбор текста;\n   * - `enabled` – разрешает выбор текста.\n   *\n   * @since 6.2.0\n   */\n  userSelectMode?: AppRootUserSelectMode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  className,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  userSelectMode,\n  ...props\n}: AppRootProps): React.ReactNode => {\n  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const tokensClassName = useTokensClassName();\n\n  const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n  const portalRootRef = React.useRef<HTMLElement | null>(null);\n\n  useIsomorphicLayoutEffect(\n    function setupPortalRoot() {\n      const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;\n\n      if (portalByProp) {\n        portalRootRef.current = portalByProp;\n        return function cleanup() {\n          portalRootRef.current = null;\n        };\n      }\n\n      const documentBody = getDocumentBody(appRootRef.current);\n      const portal = documentBody.ownerDocument.createElement('div');\n      documentBody.appendChild(portal);\n      portalRootRef.current = portal;\n      return function cleanup() {\n        documentBody.removeChild(portal);\n        portalRootRef.current = null;\n      };\n    },\n    [portalRootProp],\n  );\n\n  useIsomorphicLayoutEffect(\n    function setupContainers() {\n      if (!appRootRef.current || !portalRootRef.current) {\n        return;\n      }\n\n      const parentElement = getParentElement(appRootRef.current);\n      const documentBody = getDocumentBody(appRootRef.current);\n      const documentElement = documentBody.ownerDocument.documentElement;\n\n      const [baseClassNames, stylesClassNames] = getClassNamesByMode({\n        mode,\n        layout,\n        tokensClassName,\n        sizeX,\n        sizeY,\n      });\n\n      /* eslint-disable no-restricted-properties */\n      switch (mode) {\n        case 'full': {\n          if (parentElement) {\n            parentElement.classList.add(...baseClassNames);\n          }\n\n          documentElement.classList.add(...stylesClassNames, 'vkui');\n          const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, documentElement);\n\n          return function cleanup() {\n            if (parentElement) {\n              parentElement.classList.remove(...baseClassNames);\n            }\n\n            documentElement.classList.remove(...stylesClassNames, 'vkui');\n            unsetSafeAreaInsets();\n          };\n        }\n        case 'embedded': {\n          if (parentElement) {\n            parentElement.classList.add(...baseClassNames, ...stylesClassNames);\n            if (!disableParentTransformForPositionFixedElements) {\n              parentElement.style.setProperty('transform', 'translate3d(0, 0, 0)');\n            }\n            const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, parentElement, portalRootRef.current); // prettier-ignore\n            return function cleanup() {\n              parentElement.classList.remove(...baseClassNames, ...stylesClassNames);\n              if (!disableParentTransformForPositionFixedElements) {\n                parentElement.style.removeProperty('transform');\n              }\n              unsetSafeAreaInsets();\n            };\n          }\n          /* istanbul ignore next: node.parentElement может быть null, но такой кейс в теории невозможен */\n          return;\n        }\n        /* istanbul ignore next: не покрывается за счёт теста на <AppRoot mode=\"partial\" /> */\n        case 'partial': {\n          return;\n        }\n      }\n      /* eslint-enable no-restricted-properties */\n    },\n    [\n      mode,\n      layout,\n      disableParentTransformForPositionFixedElements,\n      tokensClassName,\n      sizeX,\n      sizeY,\n      safeAreaInsets,\n    ],\n  );\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot: portalRootRef,\n      embedded: mode === 'embedded',\n      mode,\n      disablePortal,\n      layout,\n      get keyboardInput() {\n        return isKeyboardInputActiveRef.current;\n      },\n    }),\n    [disablePortal, isKeyboardInputActiveRef, layout, mode],\n  );\n\n  const content = (\n    <AppRootContext.Provider value={contextValue}>\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  const { isWebView } = useConfigProvider();\n  const userSelectModeClassName = getUserSelectModeClassName({\n    userSelectMode,\n    isWebView,\n    hasPointer,\n  });\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={appRootRef}\n      className={classNames(styles.host, userSelectModeClassName, className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["React","classNames","useAdaptivity","useKeyboardInputTracker","useObjectMemo","getDocumentBody","useTokensClassName","useIsomorphicLayoutEffect","useConfigProvider","AppRootContext","ElementScrollController","GlobalScrollController","extractPortalRootByProp","getClassNamesByMode","getParentElement","getUserSelectModeClassName","setSafeAreaInsets","styles","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","props","hasPointer","sizeX","sizeY","tokensClassName","isKeyboardInputActiveRef","appRootRef","useRef","portalRootRef","setupPortalRoot","portalByProp","current","cleanup","documentBody","portal","ownerDocument","createElement","appendChild","removeChild","setupContainers","parentElement","documentElement","baseClassNames","stylesClassNames","classList","add","unsetSafeAreaInsets","remove","style","setProperty","removeProperty","ScrollController","useMemo","contextValue","appRoot","embedded","keyboardInput","content","Provider","value","elRef","isWebView","userSelectModeClassName","div","ref","host"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';\nimport { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';\nimport { getDocumentBody } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport { extractPortalRootByProp } from './helpers';\nimport type {\n  AppRootLayout,\n  AppRootMode,\n  AppRootScroll,\n  AppRootUserSelectMode,\n  SafeAreaInsets,\n} from './types';\nimport styles from './AppRoot.module.css';\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n  /**\n   * Задаёт режим выбора текста (выделения текста) для всего приложения.\n   * По умолчанию, если режим не задан, запрещает выбор текста в приложениях,\n   * запущенных в webview (по значению свойства `isWebView` из [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider)).\n   *\n   * - `enabled-with-pointer` – разрешает выбор текста, если устройство ввода типа `pointer` (например, `мышь`), в остальных случаях запрещает;\n   * - `disabled` – запрещает выбор текста;\n   * - `enabled` – разрешает выбор текста.\n   *\n   * @since 6.2.0\n   */\n  userSelectMode?: AppRootUserSelectMode;\n  /*\n   * По умолчанию в режиме `mode=\"full\"` VKUI в рантайме выставляет:\n   * - класс .vkui на html элемент\n   * - класс .vkui__root на элемент-контейнер, в который монтируется VKUI\n   * С помощью этой опции такое поведение можно отключить.\n   *\n   * Для корректной работы SSR рекоммендуется выставлять эти классы самостоятельно\n   * и отключить это поводение.\n   */\n  disableSettingVKUIClassesInRuntime?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  userSelectMode,\n  disableSettingVKUIClassesInRuntime,\n  ...props\n}: AppRootProps): React.ReactNode => {\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n  const popoutModalContainerRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(\n    portalRootProp ? extractPortalRootByProp(portalRootProp) : null,\n  );\n\n  useIsomorphicLayoutEffect(\n    function syncPortalRootWithPortalRootProp() {\n      const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;\n      if (portalRootProp !== undefined) {\n        setPortalRoot(portalByProp);\n      }\n    },\n    [portalRootProp],\n  );\n\n  useIsomorphicLayoutEffect(\n    function removePortalRootOnUnmount() {\n      // Контейнер PortalRoot создаётся при первом вызове модалки или\n      // поповера использующего AppRootPortal.\n      // Потом он переиспользуется и не удаляется пока\n      // приложение не размонтируется.\n      // И создаётся только если в приложение не был передан\n      // пользовательский контейнер через свойство portalRootProp\n      // Сделано для поддержки SSR, чтобы при старте приложения\n      // никаких новых нод в DOM не создавалось.\n      const documentBody = getDocumentBody(appRootRef.current);\n      return function cleanup() {\n        if (portalRoot) {\n          const isPortalRootPassedByProps = Boolean(portalRootProp);\n          if (!isPortalRootPassedByProps) {\n            // удаляем portalRoot из дома только если он\n            // был создан в AppRootPortal.\n            // Если он был передан через пропы - удалять нельзя\n            documentBody.removeChild(portalRoot);\n          }\n        }\n      };\n    },\n    [portalRootProp],\n  );\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot,\n      popoutModalRoot: popoutModalContainerRef,\n      setPortalRoot,\n      safeAreaInsets,\n      embedded: mode === 'embedded',\n      mode,\n      disablePortal,\n      layout,\n      get keyboardInput() {\n        return isKeyboardInputActiveRef.current;\n      },\n      userSelectMode,\n    }),\n    [\n      portalRoot,\n      disablePortal,\n      isKeyboardInputActiveRef,\n      layout,\n      mode,\n      safeAreaInsets,\n      userSelectMode,\n    ],\n  );\n\n  /*\n   * Вешаем класс токенов на html в режиме full.\n   * Это необходимо, чтобы цвета html элемента и скроллбара соответствовали текущей цветовой схеме:\n   * - фон html элемента виден, если пользователь оверскролит. Тогда возникает анимация bounce-эффекта и виден фон html элемента. Без токенов в черной теме будет выглядывать белый фон.\n   * - цвет системного сколлбара зависит от color-sheme свойства, значение которого задётся токенами и должно быть выставлено именно на html элементе.\n   * В режме SSR пользователи сами могу задать этот класс на html-элементе. главное, чтобы он соответствовал переданным platform и appearence свойствам.\n   */\n  useSyncHTMLWithTokens({ appRootRef, enable: mode === 'full' });\n  /*\n   * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.\n   * В режиме embedded будет выставлять только .vkui__root на контейнере.\n   */\n  useSyncHTMLWithBaseVKUIClasses({\n    appRootRef,\n    mode,\n    enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime,\n  });\n\n  return mode === 'partial' ? (\n    <AppRootContext.Provider value={contextValue}>\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  ) : (\n    <AppRootContext.Provider value={contextValue}>\n      <AppRootStyleContainer\n        getRootRef={appRootRef}\n        className={\n          mode === 'embedded' && !disableParentTransformForPositionFixedElements\n            ? styles.transformForPositionFixedElements\n            : undefined\n        }\n        {...props}\n      >\n        <ScrollController elRef={appRootRef}>{children}</ScrollController>\n      </AppRootStyleContainer>\n    </AppRootContext.Provider>\n  );\n};\n"],"names":["React","useKeyboardInputTracker","useObjectMemo","useSyncHTMLWithBaseVKUIClasses","useSyncHTMLWithTokens","getDocumentBody","useIsomorphicLayoutEffect","AppRootContext","AppRootStyleContainer","ElementScrollController","GlobalScrollController","extractPortalRootByProp","styles","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","disableParentTransformForPositionFixedElements","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","disableSettingVKUIClassesInRuntime","props","appRootRef","useRef","popoutModalContainerRef","setPortalRoot","useState","syncPortalRootWithPortalRootProp","portalByProp","undefined","removePortalRootOnUnmount","documentBody","current","cleanup","isPortalRootPassedByProps","Boolean","removeChild","ScrollController","useMemo","isKeyboardInputActiveRef","contextValue","appRoot","popoutModalRoot","embedded","keyboardInput","enable","Provider","value","elRef","getRootRef","className","transformForPositionFixedElements"],"mappings":"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"}

package/dist/cssm/components/AppRoot/AppRoot.module.css

@@ -1,41 +1,3 @@
-.host {
-  block-size: 100%;
-  inline-size: 100%;
-}
-
-.userSelectNone {
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-/**
- * Хак для webkit-based браузеров, потому что на версиях iOS <= 14.* исчезает возможность
- * редактировать contenteditable элементы, если выше по дереву задан user-select: none;
- */
-
-.userSelectNone [contenteditable] {
-  -webkit-user-select: text;
-     -moz-user-select: text;
-          user-select: text;
-}
-
-@media (pointer: coarse),(pointer: none) {
-  .pointerNone {
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-
-  .pointerNone [contenteditable] {
-    -webkit-user-select: text;
-       -moz-user-select: text;
-            user-select: text;
-  }
-}
-
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-
-:global(.vkui__root--embedded) .host {
-  overflow: auto;
+.transformForPositionFixedElements {
+  transform: translate3d(0, 0, 0);
 }

package/dist/cssm/components/AppRoot/AppRootContext.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { noop } from "@vkontakte/vkjs";
 /**
  * Вынесен в константу, чтобы можно было в тестах создавать свой контекст и сливать перед этим значения по-умолчанию
  *
@@ -6,7 +7,10 @@ import * as React from "react";
  */ export const DEFAULT_APP_ROOT_CONTEXT_VALUE = {
     appRoot: React.createRef(),
     mode: 'full',
-    portalRoot: React.createRef(),
+    portalRoot: null,
+    popoutModalRoot: React.createRef(),
+    setPortalRoot: noop,
+    safeAreaInsets: undefined,
     embedded: false,
     keyboardInput: false,
     disablePortal: false

package/dist/cssm/components/AppRoot/AppRootContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot: React.RefObject<HTMLElement>;\n  portalRoot: React.RefObject<HTMLElement>;\n  embedded: boolean;\n  mode: 'partial' | 'embedded' | 'full';\n  keyboardInput: boolean;\n  disablePortal: boolean;\n  layout?: 'card' | 'plain';\n}\n\n/**\n * Вынесен в константу, чтобы можно было в тестах создавать свой контекст и сливать перед этим значения по-умолчанию\n *\n * > Note: не смог убрать из покрытия через 'istanbul ignore next'.\n */\nexport const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {\n  appRoot: React.createRef(),\n  mode: 'full',\n  portalRoot: React.createRef(),\n  embedded: false,\n  keyboardInput: false,\n  disablePortal: false,\n};\n\nexport const AppRootContext: React.Context<AppRootContextInterface> =\n  React.createContext<AppRootContextInterface>(DEFAULT_APP_ROOT_CONTEXT_VALUE);\n"],"names":["React","DEFAULT_APP_ROOT_CONTEXT_VALUE","appRoot","createRef","mode","portalRoot","embedded","keyboardInput","disablePortal","AppRootContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAY/B;;;;CAIC,GACD,OAAO,MAAMC,iCAA0D;IACrEC,SAASF,MAAMG,SAAS;IACxBC,MAAM;IACNC,YAAYL,MAAMG,SAAS;IAC3BG,UAAU;IACVC,eAAe;IACfC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,iBACXT,MAAMU,aAAa,CAA0BT,gCAAgC"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { type AppRootUserSelectMode, type SafeAreaInsets } from './types';\n\nexport interface AppRootContextInterface {\n  appRoot: React.RefObject<HTMLElement>;\n  portalRoot: HTMLElement | null;\n  popoutModalRoot: React.MutableRefObject<HTMLDivElement | null>;\n  setPortalRoot: (element: HTMLElement) => void;\n  safeAreaInsets?: SafeAreaInsets;\n  embedded: boolean;\n  mode: 'partial' | 'embedded' | 'full';\n  keyboardInput: boolean;\n  disablePortal: boolean;\n  layout?: 'card' | 'plain';\n  userSelectMode?: AppRootUserSelectMode;\n}\n\n/**\n * Вынесен в константу, чтобы можно было в тестах создавать свой контекст и сливать перед этим значения по-умолчанию\n *\n * > Note: не смог убрать из покрытия через 'istanbul ignore next'.\n */\nexport const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {\n  appRoot: React.createRef(),\n  mode: 'full',\n  portalRoot: null,\n  popoutModalRoot: React.createRef(),\n  setPortalRoot: noop,\n  safeAreaInsets: undefined,\n  embedded: false,\n  keyboardInput: false,\n  disablePortal: false,\n};\n\nexport const AppRootContext: React.Context<AppRootContextInterface> =\n  React.createContext<AppRootContextInterface>(DEFAULT_APP_ROOT_CONTEXT_VALUE);\n"],"names":["React","noop","DEFAULT_APP_ROOT_CONTEXT_VALUE","appRoot","createRef","mode","portalRoot","popoutModalRoot","setPortalRoot","safeAreaInsets","undefined","embedded","keyboardInput","disablePortal","AppRootContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AAiBvC;;;;CAIC,GACD,OAAO,MAAMC,iCAA0D;IACrEC,SAASH,MAAMI,SAAS;IACxBC,MAAM;IACNC,YAAY;IACZC,iBAAiBP,MAAMI,SAAS;IAChCI,eAAeP;IACfQ,gBAAgBC;IAChBC,UAAU;IACVC,eAAe;IACfC,eAAe;AACjB,EAAE;AAEF,OAAO,MAAMC,iBACXd,MAAMe,aAAa,CAA0Bb,gCAAgC"}

package/dist/cssm/components/AppRoot/AppRootPortal.js

@@ -2,42 +2,64 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useColorScheme } from "../../hooks/useColorScheme.js";
-import { useIsClient } from "../../hooks/useIsClient.js";
 import { createPortal } from "../../lib/createPortal.js";
+import { getDocumentBody } from "../../lib/dom.js";
 import { isRefObject } from "../../lib/isRefObject.js";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { ColorSchemeProvider } from "../ColorSchemeProvider/ColorSchemeProvider.js";
 import { AppRootContext } from "./AppRootContext.js";
-export const AppRootPortal = ({ children, usePortal })=>{
-    const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);
+import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
+export const AppRootPortal = ({ children, usePortal, className })=>{
+    const { setPortalRoot, appRoot, mode, disablePortal: disableCreatePortalInGlobalPortalRoot } = React.useContext(AppRootContext);
     const colorScheme = useColorScheme();
-    const isClient = useIsClient();
-    if (!isClient) {
-        return null;
-    }
-    const portalContainer = resolvePortalContainer(usePortal, portalRoot.current);
-    if (!portalContainer || shouldDisablePortal(usePortal, mode, Boolean(disablePortal))) {
-        return /*#__PURE__*/ _jsx(React.Fragment, {
-            children: children
-        });
+    const canUsePortal = shouldUsePortal(usePortal, 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
+    ]);
+    if (canUsePortal && portalContainer) {
+        return createPortal(/*#__PURE__*/ _jsx(ColorSchemeProvider, {
+            value: colorScheme,
+            children: /*#__PURE__*/ _jsx(AppRootStyleContainer, {
+                className: className,
+                children: children
+            })
+        }), portalContainer);
     }
-    return createPortal(/*#__PURE__*/ _jsx(ColorSchemeProvider, {
-        value: colorScheme,
-        children: children
-    }), portalContainer);
+    return children;
 };
-function shouldDisablePortal(usePortal, mode, disablePortal) {
-    if (usePortal !== undefined) {
-        if (typeof usePortal !== 'boolean') {
-            return false;
-        }
-        return disablePortal || usePortal !== true;
+function shouldUsePortal(usePortal, mode, disableCreatePortalInGlobalPortalRoot) {
+    if (usePortal === undefined) {
+        return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';
     }
-    // fallback
-    return disablePortal || mode === 'full';
+    if (typeof usePortal !== 'boolean') {
+        return true;
+    }
+    return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;
 }
-function resolvePortalContainer(usePortal, portalRootFromContext) {
-    if (usePortal === true || !usePortal) {
-        return portalRootFromContext ? portalRootFromContext : null;
+function usePortalContainer(usePortal) {
+    const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);
+    if (typeof usePortal === 'boolean' || usePortal === undefined) {
+        return portalRoot;
+    }
+    if (usePortal === 'SplitLayout') {
+        return popoutModalRoot.current || portalRoot;
     }
     return isRefObject(usePortal) ? usePortal.current : usePortal;
 }

package/dist/cssm/components/AppRoot/AppRootPortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { createPortal } from '../../lib/createPortal';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` будет использовать `portalRoot` из контекста `AppRoot`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;\n}\n\nexport const AppRootPortal = ({ children, usePortal }: AppRootPortalProps): React.ReactNode => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const portalContainer = resolvePortalContainer(usePortal, portalRoot.current);\n  if (!portalContainer || shouldDisablePortal(usePortal, mode, Boolean(disablePortal))) {\n    return <React.Fragment>{children}</React.Fragment>;\n  }\n\n  return createPortal(\n    <ColorSchemeProvider value={colorScheme}>{children}</ColorSchemeProvider>,\n    portalContainer,\n  );\n};\n\nfunction shouldDisablePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disablePortal: boolean,\n) {\n  if (usePortal !== undefined) {\n    if (typeof usePortal !== 'boolean') {\n      return false;\n    }\n    return disablePortal || usePortal !== true;\n  }\n  // fallback\n  return disablePortal || mode === 'full';\n}\n\nfunction resolvePortalContainer<PortalRootFromContext extends HTMLElement | null | undefined>(\n  usePortal: AppRootPortalProps['usePortal'],\n  portalRootFromContext: PortalRootFromContext,\n) {\n  if (usePortal === true || !usePortal) {\n    return portalRootFromContext ? portalRootFromContext : null;\n  }\n\n  return isRefObject(usePortal) ? usePortal.current : usePortal;\n}\n"],"names":["React","useColorScheme","useIsClient","createPortal","isRefObject","ColorSchemeProvider","AppRootContext","AppRootPortal","children","usePortal","portalRoot","mode","disablePortal","useContext","colorScheme","isClient","portalContainer","resolvePortalContainer","current","shouldDisablePortal","Boolean","Fragment","value","undefined","portalRootFromContext"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAUhF,OAAO,MAAMC,gBAAgB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAsB;IACvE,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAE,GAAGZ,MAAMa,UAAU,CAACP;IAC7D,MAAMQ,cAAcb;IAEpB,MAAMc,WAAWb;IACjB,IAAI,CAACa,UAAU;QACb,OAAO;IACT;IAEA,MAAMC,kBAAkBC,uBAAuBR,WAAWC,WAAWQ,OAAO;IAC5E,IAAI,CAACF,mBAAmBG,oBAAoBV,WAAWE,MAAMS,QAAQR,iBAAiB;QACpF,qBAAO,KAACZ,MAAMqB,QAAQ;sBAAEb;;IAC1B;IAEA,OAAOL,2BACL,KAACE;QAAoBiB,OAAOR;kBAAcN;QAC1CQ;AAEJ,EAAE;AAEF,SAASG,oBACPV,SAA0C,EAC1CE,IAAqC,EACrCC,aAAsB;IAEtB,IAAIH,cAAcc,WAAW;QAC3B,IAAI,OAAOd,cAAc,WAAW;YAClC,OAAO;QACT;QACA,OAAOG,iBAAiBH,cAAc;IACxC;IACA,WAAW;IACX,OAAOG,iBAAiBD,SAAS;AACnC;AAEA,SAASM,uBACPR,SAA0C,EAC1Ce,qBAA4C;IAE5C,IAAIf,cAAc,QAAQ,CAACA,WAAW;QACpC,OAAOe,wBAAwBA,wBAAwB;IACzD;IAEA,OAAOpB,YAAYK,aAAaA,UAAUS,OAAO,GAAGT;AACtD"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useColorScheme } from '../../hooks/useColorScheme';\nimport { createPortal } from '../../lib/createPortal';\nimport { getDocumentBody } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` будет использовать `portalRoot` из контекста `AppRoot`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   * - При передаче `SplitLayout` будет использоваться контейнер внутри `SplitLayout`, сразу после контента приложения.\n   *   Если контейнера `SplitLayout` в приложении нет, то будет использован глобальный `portalRoot`, чаще всего\n   *   это последний дочерний элемент `body`.\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null | 'SplitLayout';\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const {\n    setPortalRoot,\n    appRoot,\n    mode,\n    disablePortal: disableCreatePortalInGlobalPortalRoot,\n  } = React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n  const portalContainer = usePortalContainer(usePortal);\n\n  useIsomorphicLayoutEffect(\n    // Создаём контейнер для портала по запросу один раз\n    // и пока приложение не размонтируется.\n    // Удаление созданной ноды происходит в AppRoot\n    function initializePortalRootIfNeeded() {\n      const shouldCreatePortalRoot = canUsePortal && portalContainer === null;\n      if (shouldCreatePortalRoot) {\n        const documentBody = getDocumentBody(appRoot.current);\n        const portal = documentBody.ownerDocument.createElement('div');\n        documentBody.appendChild(portal);\n\n        setPortalRoot(portal);\n      }\n\n      // Note:\n      // Очистка и удаление `portalRoot` делегируется `AppRoot`, т.к. экземпляров `AppRootPortal` может быть несколько и размонтирование одного из них удалит `portalRoot`, что сломает работу других экземпляров.\n    },\n    [canUsePortal, appRoot, portalContainer, setPortalRoot],\n  );\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);\n  if (typeof usePortal === 'boolean' || usePortal === undefined) {\n    return portalRoot;\n  }\n\n  if (usePortal === 'SplitLayout') {\n    return popoutModalRoot.current || portalRoot;\n  }\n\n  return isRefObject(usePortal) ? usePortal.current : usePortal;\n}\n"],"names":["React","useColorScheme","createPortal","getDocumentBody","isRefObject","useIsomorphicLayoutEffect","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","setPortalRoot","appRoot","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","initializePortalRootIfNeeded","shouldCreatePortalRoot","documentBody","current","portal","ownerDocument","createElement","appendChild","value","undefined","portalRoot","popoutModalRoot"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,QAAQ,mBAAgB;AAChD,SAASC,WAAW,QAAQ,2BAAwB;AACpD,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,6BAA0B;AAchE,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EACJC,aAAa,EACbC,OAAO,EACPC,IAAI,EACJC,eAAeC,qCAAqC,EACrD,GAAGjB,MAAMkB,UAAU,CAACX;IACrB,MAAMY,cAAclB;IAEpB,MAAMmB,eAAeC,gBACnBV,WACAI,MACAO,QAAQL;IAEV,MAAMM,kBAAkBC,mBAAmBb;IAE3CN,0BACE,oDAAoD;IACpD,uCAAuC;IACvC,+CAA+C;IAC/C,SAASoB;QACP,MAAMC,yBAAyBN,gBAAgBG,oBAAoB;QACnE,IAAIG,wBAAwB;YAC1B,MAAMC,eAAexB,gBAAgBW,QAAQc,OAAO;YACpD,MAAMC,SAASF,aAAaG,aAAa,CAACC,aAAa,CAAC;YACxDJ,aAAaK,WAAW,CAACH;YAEzBhB,cAAcgB;QAChB;IAEA,QAAQ;IACR,4MAA4M;IAC9M,GACA;QAACT;QAAcN;QAASS;QAAiBV;KAAc;IAGzD,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOrB,2BACL,KAACI;YAAoB2B,OAAOd;sBAC1B,cAAA,KAACX;gBAAsBI,WAAWA;0BAAYF;;YAEhDa;IAEJ;IAEA,OAAOb;AACT,EAAE;AAEF,SAASW,gBACPV,SAA0C,EAC1CI,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIN,cAAcuB,WAAW;QAC3B,OAAOjB,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOJ,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOM,0CAA0C,SAASN,cAAc;AAC1E;AAEA,SAASa,mBAAmBb,SAA0C;IACpE,MAAM,EAAEwB,UAAU,EAAEC,eAAe,EAAE,GAAGpC,MAAMkB,UAAU,CAACX;IACzD,IAAI,OAAOI,cAAc,aAAaA,cAAcuB,WAAW;QAC7D,OAAOC;IACT;IAEA,IAAIxB,cAAc,eAAe;QAC/B,OAAOyB,gBAAgBR,OAAO,IAAIO;IACpC;IAEA,OAAO/B,YAAYO,aAAaA,UAAUiB,OAAO,GAAGjB;AACtD"}

package/dist/cssm/components/AppRoot/AppRootStyleContainer.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivity } from "../../hooks/useAdaptivity.js";
+import { useTokensClassName } from "../../lib/tokens/index.js";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
+import { RootComponent } from "../RootComponent/RootComponent.js";
+import { AppRootContext } from "./AppRootContext.js";
+import { getSafeAreaInsetsAsCssVariables, getUserSelectModeClassName } from "./helpers.js";
+import styles from "./AppRootStyleContainer.module.css";
+const sizeXClassNames = {
+    none: styles.sizeXNone,
+    regular: styles.sizeXRegular
+};
+const sizeYClassNames = {
+    none: styles.sizeYNone,
+    compact: styles.sizeYCompact
+};
+const layoutClassNames = {
+    card: styles.layoutCard,
+    plain: styles.layoutPlain
+};
+export function useAppRootStyles() {
+    const { layout, safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);
+    const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();
+    const { isWebView } = useConfigProvider();
+    const userSelectModeClassName = getUserSelectModeClassName({
+        userSelectMode,
+        isWebView,
+        hasPointer
+    });
+    const tokensClassName = useTokensClassName();
+    return {
+        style: safeAreaInsets ? getSafeAreaInsetsAsCssVariables(safeAreaInsets) : undefined,
+        className: classNames(styles.host, mode === 'embedded' && styles.embedded, sizeX !== 'compact' && sizeXClassNames[sizeX], sizeY !== 'regular' && sizeYClassNames[sizeY], layout && layoutClassNames[layout], userSelectModeClassName, tokensClassName)
+    };
+}
+/**
+ * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:
+ * - точке монтирования приложения – `AppRoot`;
+ * - точке монтирования порталов для модальных окон – `PortalRoot`.
+ *
+ * @private
+ */ export function AppRootStyleContainer({ style, ...props }) {
+    const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();
+    return /*#__PURE__*/ _jsx(RootComponent, {
+        baseClassName: appRootClassName,
+        style: appRootStyle ? {
+            ...appRootStyle,
+            ...style
+        } : style,
+        ...props
+    });
+}
+
+//# sourceMappingURL=AppRootStyleContainer.js.map

package/dist/cssm/components/AppRoot/AppRootStyleContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootStyleContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useTokensClassName } from '../../lib/tokens';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { AppRootContext } from './AppRootContext';\nimport { getSafeAreaInsetsAsCssVariables, getUserSelectModeClassName } from './helpers';\nimport styles from './AppRootStyleContainer.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst layoutClassNames = {\n  card: styles.layoutCard,\n  plain: styles.layoutPlain,\n};\n\nexport function useAppRootStyles() {\n  const { layout, safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);\n  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { isWebView } = useConfigProvider();\n  const userSelectModeClassName = getUserSelectModeClassName({\n    userSelectMode,\n    isWebView,\n    hasPointer,\n  });\n  const tokensClassName = useTokensClassName();\n\n  return {\n    style: safeAreaInsets ? getSafeAreaInsetsAsCssVariables(safeAreaInsets) : undefined,\n    className: classNames(\n      styles.host,\n      mode === 'embedded' && styles.embedded,\n      sizeX !== 'compact' && sizeXClassNames[sizeX],\n      sizeY !== 'regular' && sizeYClassNames[sizeY],\n      layout && layoutClassNames[layout],\n      userSelectModeClassName,\n      tokensClassName,\n    ),\n  };\n}\n\ntype AppRootStyleContainerProps = RootComponentProps<HTMLDivElement>;\n\n/**\n * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:\n * - точке монтирования приложения – `AppRoot`;\n * - точке монтирования порталов для модальных окон – `PortalRoot`.\n *\n * @private\n */\nexport function AppRootStyleContainer({ style, ...props }: AppRootStyleContainerProps) {\n  const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();\n\n  return (\n    <RootComponent\n      baseClassName={appRootClassName}\n      style={appRootStyle ? { ...appRootStyle, ...style } : style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","useAdaptivity","useTokensClassName","useConfigProvider","RootComponent","AppRootContext","getSafeAreaInsetsAsCssVariables","getUserSelectModeClassName","styles","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","sizeYClassNames","sizeYNone","compact","sizeYCompact","layoutClassNames","card","layoutCard","plain","layoutPlain","useAppRootStyles","layout","safeAreaInsets","mode","userSelectMode","useContext","hasPointer","sizeX","sizeY","isWebView","userSelectModeClassName","tokensClassName","style","undefined","className","host","embedded","AppRootStyleContainer","props","appRootStyle","appRootClassName","baseClassName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,4BAAmB;AACtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,+BAA+B,EAAEC,0BAA0B,QAAQ,eAAY;AACxF,OAAOC,YAAY,qCAAqC;AAExD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,kBAAkB;IACtBJ,MAAMF,OAAOO,SAAS;IACtBC,SAASR,OAAOS,YAAY;AAC9B;AAEA,MAAMC,mBAAmB;IACvBC,MAAMX,OAAOY,UAAU;IACvBC,OAAOb,OAAOc,WAAW;AAC3B;AAEA,OAAO,SAASC;IACd,MAAM,EAAEC,MAAM,EAAEC,cAAc,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAG5B,MAAM6B,UAAU,CAACvB;IAC1E,MAAM,EAAEwB,UAAU,EAAEC,QAAQ,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG9B;IACvD,MAAM,EAAE+B,SAAS,EAAE,GAAG7B;IACtB,MAAM8B,0BAA0B1B,2BAA2B;QACzDoB;QACAK;QACAH;IACF;IACA,MAAMK,kBAAkBhC;IAExB,OAAO;QACLiC,OAAOV,iBAAiBnB,gCAAgCmB,kBAAkBW;QAC1EC,WAAWrC,WACTQ,OAAO8B,IAAI,EACXZ,SAAS,cAAclB,OAAO+B,QAAQ,EACtCT,UAAU,aAAarB,eAAe,CAACqB,MAAM,EAC7CC,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CP,UAAUN,gBAAgB,CAACM,OAAO,EAClCS,yBACAC;IAEJ;AACF;AAIA;;;;;;CAMC,GACD,OAAO,SAASM,sBAAsB,EAAEL,KAAK,EAAE,GAAGM,OAAmC;IACnF,MAAM,EAAEN,OAAOO,YAAY,EAAEL,WAAWM,gBAAgB,EAAE,GAAGpB;IAE7D,qBACE,KAACnB;QACCwC,eAAeD;QACfR,OAAOO,eAAe;YAAE,GAAGA,YAAY;YAAE,GAAGP,KAAK;QAAC,IAAIA;QACrD,GAAGM,KAAK;;AAGf"}