@vkontakte/vkui 6.0.0-beta.1 → 6.0.0-beta.2

package/README.md

@@ -37,13 +37,13 @@ yarn add @vkontakte/vkui
 pnpm add @vkontakte/vkui
 ```
 
-> _Обратите внимание_: мы поддерживаем [react](https://www.npmjs.com/package/react) и [react-dom](https://www.npmjs.com/package/react-dom) `^17.0.0` и `^18.1.0`
+> _Обратите внимание_: мы поддерживаем [react](https://www.npmjs.com/package/react) и [react-dom](https://www.npmjs.com/package/react-dom) версии `^18.2.0`
 
 ## Hello World
 
 ```jsx static
 import * as React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import {
   AdaptivityProvider,
   ConfigProvider,
@@ -79,28 +79,20 @@ const Example = () => {
   );
 };
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(
   <ConfigProvider>
     <AdaptivityProvider>
       <Example />
     </AdaptivityProvider>
   </ConfigProvider>,
-  document.getElementById('root'),
 );
 ```
 
 ## Браузеры
 
-На данный момент мы поддерживаем WebView следующих операционных систем:
-
-- Android >= 5
-- iOS >= 9
-
-Иными словами, мы поддерживаем браузеры следующих версий:
-
-- Safari для iOS >= 9
-- Android Browser >= 5 (Chrome 36)
-- Chrome для Android, начиная с Android 5.0 (Chrome 36)
+С подробным списком можно ознакомиться в файле [.browserslistrc](https://github.com/VKCOM/VKUI/blob/master/.browserslistrc)
 
 ## Тестирование
 

package/dist/cjs/components/AppRoot/AppRoot.d.ts

@@ -1,15 +1,18 @@
 import * as React from 'react';
-export type SafeAreaInsets = {
-    top?: number;
-    right?: number;
-    bottom?: number;
-    left?: number;
-};
+import type { AppRootLayout, AppRootMode, AppRootScroll, SafeAreaInsets } from './types';
 export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Режим встраивания */
-    mode?: 'partial' | 'embedded' | 'full';
-    window?: Window;
-    scroll?: 'global' | 'contain';
+    mode?: AppRootMode;
+    /**
+     * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.
+     * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).
+     *
+     * Полезно при использовании `mode="embedded"`.
+     */
+    scroll?: AppRootScroll;
+    /**
+     * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).
+     */
     safeAreaInsets?: SafeAreaInsets;
     /**
      * Кастомный root-элемент портала
@@ -26,10 +29,14 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
      * Это поведение можно отключить с помощью этого параметра.
      */
     disableParentTransformForPositionFixedElements?: boolean;
-    layout?: 'card' | 'plain';
+    /**
+     * Глобально задаёт тип оформления макета для компонентов
+     * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).
+     */
+    layout?: AppRootLayout;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
-export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, disableParentTransformForPositionFixedElements, className, safeAreaInsets, layout, ...props }: AppRootProps) => React.JSX.Element;
+export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, disableParentTransformForPositionFixedElements, className, safeAreaInsets: safeAreaInsetsProp, layout, ...props }: AppRootProps) => React.JSX.Element;
 //# sourceMappingURL=AppRoot.d.ts.map

package/dist/cjs/components/AppRoot/AppRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AA4CF,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,8CAA8C,CAAC,EAAE,OAAO,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,uKAWjB,YAAY,sBAyKd,CAAC"}
+{"version":3,"file":"AppRoot.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzF,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,wBAAwB;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC/D;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;OAKG;IACH,8CAA8C,CAAC,EAAE,OAAO,CAAC;IACzD;;;OAGG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,2LAWjB,YAAY,sBAoJd,CAAC"}

package/dist/cjs/components/AppRoot/AppRoot.js

@@ -16,39 +16,15 @@ const _vkjs = require("@vkontakte/vkjs");
 const _useAdaptivity = require("../../hooks/useAdaptivity");
 const _useAppearance = require("../../hooks/useAppearance");
 const _useKeyboardInputTracker = require("../../hooks/useKeyboardInputTracker");
+const _useObjectMemo = require("../../hooks/useObjectMemo");
+const _usePlatform = require("../../hooks/usePlatform");
 const _dom = require("../../lib/dom");
-const _isRefObject = require("../../lib/isRefObject");
 const _useIsomorphicLayoutEffect = require("../../lib/useIsomorphicLayoutEffect");
 const _AppRootContext = require("./AppRootContext");
 const _ScrollContext = require("./ScrollContext");
-const vkuiSizeXClassNames = {
-    none: 'vkui--sizeX-none',
-    ['regular']: 'vkui--sizeX-regular'
-};
-const vkuiSizeYClassNames = {
-    none: 'vkui--sizeY-none',
-    ['compact']: 'vkui--sizeY-compact'
-};
-const vkuiLayoutClassNames = {
-    card: 'vkui--layout-card',
-    plain: 'vkui--layout-plain'
-};
-function containerClassNames(layout, sizeX, sizeY) {
-    const classNames = [];
-    if (layout) {
-        classNames.push(vkuiLayoutClassNames[layout]);
-    }
-    if (sizeX !== 'compact') {
-        classNames.push(vkuiSizeXClassNames[sizeX]);
-    }
-    if (sizeY !== 'regular') {
-        classNames.push(vkuiSizeYClassNames[sizeY]);
-    }
-    return classNames;
-}
-const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
+const _helpers = require("./helpers");
 const AppRoot = (_param)=>{
-    var { children, mode = 'full', scroll = 'global', portalRoot: portalRootProp = null, disablePortal, disableParentTransformForPositionFixedElements, className, safeAreaInsets, layout } = _param, props = _object_without_properties._(_param, [
+    var { children, mode = 'full', scroll = 'global', portalRoot: portalRootProp = null, disablePortal = false, disableParentTransformForPositionFixedElements, className, safeAreaInsets: safeAreaInsetsProp, layout } = _param, props = _object_without_properties._(_param, [
         "children",
         "mode",
         "scroll",
@@ -59,142 +35,103 @@ const AppRoot = (_param)=>{
         "safeAreaInsets",
         "layout"
     ]);
-    const isKeyboardInputActiveRef = (0, _useKeyboardInputTracker.useKeyboardInputTracker)();
-    const rootRef = _react.useRef(null);
-    const [portalRoot, setPortalRoot] = _react.useState(null);
-    const { document } = (0, _dom.useDOM)();
-    const appearance = (0, _useAppearance.useAppearance)();
     const { hasPointer, sizeX = 'none', sizeY = 'none' } = (0, _useAdaptivity.useAdaptivity)();
-    // setup portal
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        let portal = null;
-        if (portalRootProp) {
-            if ((0, _isRefObject.isRefObject)(portalRootProp)) {
-                portal = portalRootProp.current;
-            } else {
-                portal = portalRootProp;
-            }
-        }
-        if (!portal) {
-            portal = document.createElement('div');
-            document.body.appendChild(portal);
+    const platform = (0, _usePlatform.usePlatform)();
+    const appearance = (0, _useAppearance.useAppearance)();
+    const safeAreaInsets = (0, _useObjectMemo.useObjectMemo)(safeAreaInsetsProp);
+    const isKeyboardInputActiveRef = (0, _useKeyboardInputTracker.useKeyboardInputTracker)();
+    const appRootRef = _react.useRef(null);
+    const portalRootRef = _react.useRef(null);
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function setupPortalRoot() {
+        const portalByProp = portalRootProp ? (0, _helpers.extractPortalRootByProp)(portalRootProp) : null;
+        if (portalByProp) {
+            portalRootRef.current = portalByProp;
+            return function cleanup() {
+                portalRootRef.current = null;
+            };
         }
-        setPortalRoot(portal);
-        return ()=>{
-            if (!portalRootProp) {
-                var _portal_parentElement;
-                portal === null || portal === void 0 ? void 0 : (_portal_parentElement = portal.parentElement) === null || _portal_parentElement === void 0 ? void 0 : _portal_parentElement.removeChild(portal);
-            }
+        const documentBody = (0, _dom.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
     ]);
-    // setup root classes
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        var _rootRef_current;
-        if (mode === 'partial') {
-            return _vkjs.noop;
-        }
-        const parent = (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.parentElement;
-        const classes = [
-            'vkui__root'
-        ].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);
-        if (parent) {
-            if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {
-                parent.style.transform = 'translate3d(0, 0, 0)';
-            }
-            parent.classList.add(...classes);
-        }
-        return ()=>{
-            if (parent) {
-                if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {
-                    parent.style.transform = '';
-                }
-                parent.classList.remove(...classes);
-            }
-        };
-    }, [
-        disableParentTransformForPositionFixedElements
-    ]);
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        if (mode === 'full') {
-            document.documentElement.classList.add('vkui');
-            return ()=>{
-                document.documentElement.classList.remove('vkui');
-            };
-        }
-        return undefined;
-    }, [
-        document,
-        mode
-    ]);
-    // setup insets
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        var _rootRef_current;
-        if (mode === 'partial' || !((_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.parentElement) || !safeAreaInsets) {
+    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function setupContainers() {
+        if (!appRootRef.current || !portalRootRef.current) {
             return;
         }
-        const parent = rootRef.current.parentElement;
-        let key;
-        for(key in safeAreaInsets){
-            if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {
-                const inset = safeAreaInsets[key];
-                parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);
-                portalRoot && portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);
-            }
-        }
-        return ()=>{
-            if (!safeAreaInsets) {
-                return;
-            }
-            let key;
-            for(key in safeAreaInsets){
-                if (safeAreaInsets.hasOwnProperty(key)) {
-                    parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);
-                    portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);
+        const parentElement = (0, _helpers.getParentElement)(appRootRef.current);
+        const documentBody = (0, _dom.getDocumentBody)(appRootRef.current);
+        const documentElement = documentBody.ownerDocument.documentElement;
+        const [baseClassNames, stylesClassNames] = (0, _helpers.getClassNamesByMode)({
+            mode,
+            layout,
+            platform,
+            appearance,
+            sizeX,
+            sizeY
+        });
+        /* eslint-disable no-restricted-properties */ switch(mode){
+            case 'full':
+                {
+                    if (parentElement) {
+                        parentElement.classList.add(...baseClassNames);
+                    }
+                    documentElement.classList.add(...stylesClassNames, 'vkui');
+                    const unsetSafeAreaInsets = (0, _helpers.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 = (0, _helpers.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;
                 }
-            }
-        };
-    }, [
-        safeAreaInsets,
-        portalRoot
-    ]);
-    // adaptivity handler
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        var _rootRef_current;
-        if (mode === 'partial') {
-            return _vkjs.noop;
-        }
-        const classNames = containerClassNames(layout, sizeX, sizeY);
-        const container = mode === 'embedded' ? (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.parentElement : document.body;
-        if (!classNames.length || !container) {
-            return _vkjs.noop;
         }
-        container.classList.add(...classNames);
-        return ()=>{
-            container.classList.remove(...classNames);
-        };
-    }, [
+    /* eslint-enable no-restricted-properties */ }, [
+        mode,
+        layout,
+        disableParentTransformForPositionFixedElements,
+        platform,
+        appearance,
         sizeX,
         sizeY,
-        layout
-    ]);
-    (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(()=>{
-        if (mode !== 'full' || appearance === undefined) {
-            return _vkjs.noop;
-        }
-        document.documentElement.style.setProperty('color-scheme', appearance);
-        return ()=>document.documentElement.style.removeProperty('color-scheme');
-    }, [
-        appearance
+        safeAreaInsets
     ]);
     const ScrollController = _react.useMemo(()=>scroll === 'contain' ? _ScrollContext.ElementScrollController : _ScrollContext.GlobalScrollController, [
         scroll
     ]);
     const content = /*#__PURE__*/ _react.createElement(_AppRootContext.AppRootContext.Provider, {
         value: {
-            appRoot: rootRef,
-            portalRoot,
+            appRoot: appRootRef,
+            portalRoot: portalRootRef,
             embedded: mode === 'embedded',
             mode,
             disablePortal,
@@ -204,10 +141,10 @@ const AppRoot = (_param)=>{
             }
         }
     }, /*#__PURE__*/ _react.createElement(ScrollController, {
-        elRef: rootRef
+        elRef: appRootRef
     }, children));
     return mode === 'partial' ? content : /*#__PURE__*/ _react.createElement("div", _object_spread._({
-        ref: rootRef,
+        ref: appRootRef,
         className: (0, _vkjs.classNames)("vkuiAppRoot", hasPointer === undefined ? "vkuiAppRoot--pointer-none" : !hasPointer && "vkuiAppRoot--pointer-has-not", className)
     }, props), content);
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeTypeValues } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  ['regular']: 'vkui--sizeX-regular',\n};\n\nconst vkuiSizeYClassNames = {\n  none: 'vkui--sizeY-none',\n  ['compact']: 'vkui--sizeY-compact',\n};\n\nconst vkuiLayoutClassNames = {\n  card: 'vkui--layout-card',\n  plain: 'vkui--layout-plain',\n};\n\nfunction containerClassNames(\n  layout: AppRootProps['layout'],\n  sizeX: SizeTypeValues | 'none',\n  sizeY: SizeTypeValues | 'none',\n): string[] {\n  const classNames: string[] = [];\n\n  if (layout) {\n    classNames.push(vkuiLayoutClassNames[layout]);\n  }\n\n  if (sizeX !== 'compact') {\n    classNames.push(vkuiSizeXClassNames[sizeX]);\n  }\n\n  if (sizeY !== 'regular') {\n    classNames.push(vkuiSizeYClassNames[sizeY]);\n  }\n\n  return classNames;\n}\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\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  layout?: 'card' | 'plain';\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,\n  disableParentTransformForPositionFixedElements,\n  className,\n  safeAreaInsets,\n  layout,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current?.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    if (parent) {\n      if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n        parent.style.transform = 'translate3d(0, 0, 0)';\n      }\n      parent.classList.add(...classes);\n    }\n\n    return () => {\n      if (parent) {\n        if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n          parent.style.transform = '';\n        }\n        parent.classList.remove(...classes);\n      }\n    };\n  }, [disableParentTransformForPositionFixedElements]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement || !safeAreaInsets) {\n      return;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in safeAreaInsets) {\n      if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n        const inset = safeAreaInsets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      if (!safeAreaInsets) {\n        return;\n      }\n      let key: keyof SafeAreaInsets;\n      for (key in safeAreaInsets) {\n        if (safeAreaInsets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [safeAreaInsets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const classNames = containerClassNames(layout, sizeX, sizeY);\n\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (!classNames.length || !container) {\n      return noop;\n    }\n\n    container.classList.add(...classNames);\n    return () => {\n      container.classList.remove(...classNames);\n    };\n  }, [sizeX, sizeY, layout]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        mode,\n        disablePortal,\n        layout,\n        get keyboardInput() {\n          return isKeyboardInputActiveRef.current;\n        },\n      }}\n    >\n      <ScrollController elRef={rootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","vkuiSizeXClassNames","none","vkuiSizeYClassNames","vkuiLayoutClassNames","card","plain","containerClassNames","layout","sizeX","sizeY","classNames","push","INSET_CUSTOM_PROPERTY_PREFIX","children","mode","scroll","portalRoot","portalRootProp","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","props","isKeyboardInputActiveRef","useKeyboardInputTracker","rootRef","React","useRef","setPortalRoot","useState","document","useDOM","appearance","useAppearance","hasPointer","useAdaptivity","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","noop","parent","classes","concat","style","transform","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","setProperty","removeProperty","container","length","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getDocumentBody } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport {\n  extractPortalRootByProp,\n  getClassNamesByMode,\n  getParentElement,\n  setSafeAreaInsets,\n} from './helpers';\nimport type { AppRootLayout, AppRootMode, AppRootScroll, SafeAreaInsets } 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 * @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  ...props\n}: AppRootProps) => {\n  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const platform = usePlatform();\n  const appearance = useAppearance();\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        platform,\n        appearance,\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      platform,\n      appearance,\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 content = (\n    <AppRootContext.Provider\n      value={{\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    >\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={appRootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","safeAreaInsetsProp","layout","props","hasPointer","sizeX","sizeY","useAdaptivity","platform","usePlatform","appearance","useAppearance","useObjectMemo","isKeyboardInputActiveRef","useKeyboardInputTracker","appRootRef","React","useRef","portalRootRef","useIsomorphicLayoutEffect","setupPortalRoot","portalByProp","extractPortalRootByProp","current","cleanup","documentBody","getDocumentBody","portal","ownerDocument","createElement","appendChild","removeChild","setupContainers","parentElement","getParentElement","documentElement","baseClassNames","stylesClassNames","getClassNamesByMode","classList","add","unsetSafeAreaInsets","setSafeAreaInsets","remove","style","setProperty","removeProperty","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref","classNames","undefined"],"mappings":"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"}

package/dist/cjs/components/AppRoot/AppRootContext.d.ts

@@ -1,12 +1,18 @@
 import * as React from 'react';
 export interface AppRootContextInterface {
-    appRoot?: React.RefObject<HTMLDivElement>;
-    portalRoot?: HTMLElement | null;
-    embedded?: boolean;
-    mode?: 'partial' | 'embedded' | 'full';
-    keyboardInput?: boolean;
-    disablePortal?: boolean;
+    appRoot: React.RefObject<HTMLElement>;
+    portalRoot: React.RefObject<HTMLElement>;
+    embedded: boolean;
+    mode: 'partial' | 'embedded' | 'full';
+    keyboardInput: boolean;
+    disablePortal: boolean;
     layout?: 'card' | 'plain';
 }
+/**
+ * Вынесен в константу, чтобы можно было в тестах создавать свой контекст и сливать перед этим значения по-умолчанию
+ *
+ * > Note: не смог убрать из покрытия через 'istanbul ignore next'.
+ */
+export declare const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface;
 export declare const AppRootContext: React.Context<AppRootContextInterface>;
 //# sourceMappingURL=AppRootContext.d.ts.map

package/dist/cjs/components/AppRoot/AppRootContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppRootContext.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAuB;IACtC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,wCAEzB,CAAC"}
+{"version":3,"file":"AppRootContext.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,uBAAuB;IACtC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACtC,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACtC,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAED;;;;GAIG;AACH,eAAO,MAAM,8BAA8B,EAAE,uBAO5C,CAAC;AAEF,eAAO,MAAM,cAAc,wCAE1B,CAAC"}

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

@@ -2,16 +2,30 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "AppRootContext", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    AppRootContext: function() {
         return AppRootContext;
+    },
+    DEFAULT_APP_ROOT_CONTEXT_VALUE: function() {
+        return DEFAULT_APP_ROOT_CONTEXT_VALUE;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const AppRootContext = _react.createContext({
-    portalRoot: null
-});
+const DEFAULT_APP_ROOT_CONTEXT_VALUE = {
+    appRoot: _react.createRef(),
+    mode: 'full',
+    portalRoot: _react.createRef(),
+    embedded: false,
+    keyboardInput: false,
+    disablePortal: false
+};
+const AppRootContext = _react.createContext(DEFAULT_APP_ROOT_CONTEXT_VALUE);
 
 //# sourceMappingURL=AppRootContext.js.map

package/dist/cjs/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<HTMLDivElement>;\n  portalRoot?: HTMLElement | null;\n  embedded?: boolean;\n  mode?: 'partial' | 'embedded' | 'full';\n  keyboardInput?: boolean;\n  disablePortal?: boolean;\n  layout?: 'card' | 'plain';\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"names":["AppRootContext","React","createContext","portalRoot"],"mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;AAYhB,MAAMA,iBAAiBC,OAAMC,aAAa,CAA0B;IACzEC,YAAY;AACd"}
+{"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.createContext<AppRootContextInterface>(\n  DEFAULT_APP_ROOT_CONTEXT_VALUE,\n);\n"],"names":["AppRootContext","DEFAULT_APP_ROOT_CONTEXT_VALUE","appRoot","React","createRef","mode","portalRoot","embedded","keyboardInput","disablePortal","createContext"],"mappings":";;;;;;;;;;;IA0BaA,cAAc;eAAdA;;IATAC,8BAA8B;eAA9BA;;;;iEAjBU;AAiBhB,MAAMA,iCAA0D;IACrEC,SAASC,OAAMC,SAAS;IACxBC,MAAM;IACNC,YAAYH,OAAMC,SAAS;IAC3BG,UAAU;IACVC,eAAe;IACfC,eAAe;AACjB;AAEO,MAAMT,iBAAiBG,OAAMO,aAAa,CAC/CT"}

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

@@ -23,7 +23,7 @@ const AppRootPortal = ({ children, usePortal })=>{
     if (!isClient) {
         return null;
     }
-    const portalContainer = resolvePortalContainer(usePortal, portalRoot);
+    const portalContainer = resolvePortalContainer(usePortal, portalRoot.current);
     if (!portalContainer || shouldDisablePortal(usePortal, mode, Boolean(disablePortal))) {
         return children;
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { createPortal } from '../../lib/createPortal';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { HasChildren } from '../../types';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\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) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\n\n  const isClient = useIsClient();\n  if (!isClient) {\n    return null;\n  }\n\n  const portalContainer = resolvePortalContainer(usePortal, portalRoot);\n  if (!portalContainer || shouldDisablePortal(usePortal, mode, Boolean(disablePortal))) {\n    return children;\n  }\n\n  return createPortal(\n    <AppearanceProvider value={appearance}>{children}</AppearanceProvider>,\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":["AppRootPortal","children","usePortal","portalRoot","mode","disablePortal","React","useContext","AppRootContext","appearance","useAppearance","isClient","useIsClient","portalContainer","resolvePortalContainer","shouldDisablePortal","Boolean","createPortal","AppearanceProvider","value","undefined","portalRootFromContext","isRefObject","current"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;iEAjBU;+BACO;6BACF;8BACC;6BACD;oCAEO;gCAC0B;AAUtD,MAAMA,gBAAgB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAsB;IACvE,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAE,GAAGC,OAAMC,UAAU,CAACC,8BAAc;IAC3E,MAAMC,aAAaC,IAAAA,4BAAa;IAEhC,MAAMC,WAAWC,IAAAA,wBAAW;IAC5B,IAAI,CAACD,UAAU;QACb,OAAO;IACT;IAEA,MAAME,kBAAkBC,uBAAuBZ,WAAWC;IAC1D,IAAI,CAACU,mBAAmBE,oBAAoBb,WAAWE,MAAMY,QAAQX,iBAAiB;QACpF,OAAOJ;IACT;IAEA,OAAOgB,IAAAA,0BAAY,gBACjB,qBAACC,sCAAkB;QAACC,OAAOV;OAAaR,WACxCY;AAEJ;AAEA,SAASE,oBACPb,SAA0C,EAC1CE,IAAqC,EACrCC,aAAsB;IAEtB,IAAIH,cAAckB,WAAW;QAC3B,IAAI,OAAOlB,cAAc,WAAW;YAClC,OAAO;QACT;QACA,OAAOG,iBAAiBH,cAAc;IACxC;IACA,WAAW;IACX,OAAOG,iBAAiBD,SAAS;AACnC;AAEA,SAASU,uBACPZ,SAA0C,EAC1CmB,qBAA4C;IAE5C,IAAInB,cAAc,QAAQ,CAACA,WAAW;QACpC,OAAOmB,wBAAwBA,wBAAwB;IACzD;IAEA,OAAOC,IAAAA,wBAAW,EAACpB,aAAaA,UAAUqB,OAAO,GAAGrB;AACtD"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootPortal.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useIsClient } from '../../hooks/useIsClient';\nimport { createPortal } from '../../lib/createPortal';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { HasChildren } from '../../types';\nimport { AppearanceProvider } from '../AppearanceProvider/AppearanceProvider';\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) => {\n  const { portalRoot, mode, disablePortal } = React.useContext(AppRootContext);\n  const appearance = useAppearance();\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 children;\n  }\n\n  return createPortal(\n    <AppearanceProvider value={appearance}>{children}</AppearanceProvider>,\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":["AppRootPortal","children","usePortal","portalRoot","mode","disablePortal","React","useContext","AppRootContext","appearance","useAppearance","isClient","useIsClient","portalContainer","resolvePortalContainer","current","shouldDisablePortal","Boolean","createPortal","AppearanceProvider","value","undefined","portalRootFromContext","isRefObject"],"mappings":";;;;+BAiBaA;;;eAAAA;;;;iEAjBU;+BACO;6BACF;8BACC;6BACD;oCAEO;gCAC0B;AAUtD,MAAMA,gBAAgB,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAsB;IACvE,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,aAAa,EAAE,GAAGC,OAAMC,UAAU,CAACC,8BAAc;IAC3E,MAAMC,aAAaC,IAAAA,4BAAa;IAEhC,MAAMC,WAAWC,IAAAA,wBAAW;IAC5B,IAAI,CAACD,UAAU;QACb,OAAO;IACT;IAEA,MAAME,kBAAkBC,uBAAuBZ,WAAWC,WAAWY,OAAO;IAC5E,IAAI,CAACF,mBAAmBG,oBAAoBd,WAAWE,MAAMa,QAAQZ,iBAAiB;QACpF,OAAOJ;IACT;IAEA,OAAOiB,IAAAA,0BAAY,gBACjB,qBAACC,sCAAkB;QAACC,OAAOX;OAAaR,WACxCY;AAEJ;AAEA,SAASG,oBACPd,SAA0C,EAC1CE,IAAqC,EACrCC,aAAsB;IAEtB,IAAIH,cAAcmB,WAAW;QAC3B,IAAI,OAAOnB,cAAc,WAAW;YAClC,OAAO;QACT;QACA,OAAOG,iBAAiBH,cAAc;IACxC;IACA,WAAW;IACX,OAAOG,iBAAiBD,SAAS;AACnC;AAEA,SAASU,uBACPZ,SAA0C,EAC1CoB,qBAA4C;IAE5C,IAAIpB,cAAc,QAAQ,CAACA,WAAW;QACpC,OAAOoB,wBAAwBA,wBAAwB;IACzD;IAEA,OAAOC,IAAAA,wBAAW,EAACrB,aAAaA,UAAUa,OAAO,GAAGb;AACtD"}

package/dist/cjs/components/AppRoot/helpers.d.ts

@@ -0,0 +1,18 @@
+import type { SizeTypeValues } from '../../lib/adaptivity';
+import type { AppearanceType } from '../../lib/appearance';
+import type { AppRootLayout, AppRootMode, SafeAreaInsets } from './types';
+type ContainerClassNamesProps = {
+    mode: AppRootMode;
+    layout?: AppRootLayout;
+    platform: string;
+    appearance: AppearanceType;
+    sizeX: SizeTypeValues | 'none';
+    sizeY: SizeTypeValues | 'none';
+};
+export declare function getClassNamesByMode({ mode, layout, platform, appearance, sizeX, sizeY, }: ContainerClassNamesProps): [string[], string[]];
+export declare const getParentElement: (el: HTMLElement | null) => HTMLElement | null;
+export declare const extractPortalRootByProp: (portalRootProp: HTMLElement | React.RefObject<HTMLElement>) => HTMLElement | null;
+export declare const CUSTOM_PROPERTY_INSET_PREFIX = "--vkui_internal--safe_area_inset_";
+export declare const setSafeAreaInsets: (safeAreaInsets: SafeAreaInsets | undefined, rootContainer: HTMLElement, portalContainer?: HTMLElement) => () => void;
+export {};
+//# sourceMappingURL=helpers.d.ts.map

package/dist/cjs/components/AppRoot/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/components/AppRoot/helpers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,KAAK,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE1E,KAAK,wBAAwB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;IAClB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,cAAc,CAAC;IAC3B,KAAK,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,KAAK,EAAE,cAAc,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,UAAU,EACV,KAAK,EACL,KAAK,GACN,EAAE,wBAAwB,GAAG,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,CAAC,CA0BjD;AAED,eAAO,MAAM,gBAAgB,OAAQ,WAAW,GAAG,IAAI,uBAAmC,CAAC;AAE3F,eAAO,MAAM,uBAAuB,mBAClB,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,uBACgB,CAAC;AAE7E,eAAO,MAAM,4BAA4B,sCAAsC,CAAC;AAEhF,eAAO,MAAM,iBAAiB,mBACZ,cAAc,GAAG,SAAS,iBAC3B,WAAW,oBACR,WAAW,eA4B9B,CAAC"}