@vkontakte/vkui 7.0.0-dev-efd91c.4 → 7.0.0

package/dist/cssm/components/ActionSheet/ActionSheet.js

@@ -99,11 +99,9 @@ import styles from "./ActionSheet.module.css";
             ]
         })
     });
-    if (mode === 'menu') {
-        return actionSheet;
-    }
     return /*#__PURE__*/ _jsx(AppRootPortal, {
         children: /*#__PURE__*/ _jsx(PopoutWrapper, {
+            noBackground: mode === 'menu',
             closing: Boolean(closingBy),
             alignY: "bottom",
             className: className,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, type ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'\n    >,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: (options: ActionSheetOnCloseOptions) => void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  title,\n  description,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  onClose,\n  ...restProps\n}: ActionSheetProps): React.ReactNode => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onCloseWithOther = React.useCallback(() => setClosingBy('other'), []);\n  const actionCallbackRef = React.useRef(noop);\n\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closingBy !== undefined ? 'exit' : 'enter',\n    {\n      onExited() {\n        onClose({ closedBy: closingBy || 'other' });\n        actionCallbackRef.current();\n        actionCallbackRef.current = noop;\n      },\n    },\n  );\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          if (action) {\n            actionCallbackRef.current = () => action(event);\n          }\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = React.useMemo(\n    () => ({ onItemClick, mode, onClose: onCloseWithOther }),\n    [mode, onCloseWithOther, onItemClick],\n  );\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        autoFocus={animationState === 'entered'}\n        {...dropdownProps}\n        {...animationHandlers}\n        onClose={onCloseWithOther}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles.contentWrapper}>\n          {(title || description) && (\n            <div className={styles.header}>\n              {title && (\n                <Footnote weight=\"2\" className={styles.title}>\n                  {title}\n                </Footnote>\n              )}\n              {description && <Footnote className={styles.description}>{description}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles.closeItemWrapperIos}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (mode === 'menu') {\n    return actionSheet;\n  }\n\n  return (\n    <AppRootPortal>\n      <PopoutWrapper\n        closing={Boolean(closingBy)}\n        alignY=\"bottom\"\n        className={className}\n        style={style}\n        onClick={onCloseWithOther}\n        fixed\n      >\n        {actionSheet}\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","AppRootPortal","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdownMenu","ActionSheetDropdownSheet","styles","ActionSheet","children","className","title","description","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","onClose","restProps","platform","closingBy","setClosingBy","useState","undefined","onCloseWithOther","useCallback","actionCallbackRef","useRef","animationState","animationHandlers","onExited","closedBy","current","isDesktop","onItemClick","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","useMemo","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","role","aria-modal","autoFocus","div","contentWrapper","header","weight","closeItemWrapperIos","alignY","onClick","fixed"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, type ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdownMenu } from './ActionSheetDropdownMenu';\nimport { ActionSheetDropdownSheet } from './ActionSheetDropdownSheet';\nimport type { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupOffsetDistance' | 'placement' | 'autoFocus'\n    >,\n    Omit<React.HTMLAttributes<HTMLDivElement>, 'autoFocus' | 'title'> {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: (options: ActionSheetOnCloseOptions) => void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n  mode?: 'sheet' | 'menu';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  title,\n  description,\n  style,\n  iosCloseItem,\n  popupOffsetDistance,\n  placement,\n  mode: modeProp,\n  onClose,\n  ...restProps\n}: ActionSheetProps): React.ReactNode => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onCloseWithOther = React.useCallback(() => setClosingBy('other'), []);\n  const actionCallbackRef = React.useRef(noop);\n\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closingBy !== undefined ? 'exit' : 'enter',\n    {\n      onExited() {\n        onClose({ closedBy: closingBy || 'other' });\n        actionCallbackRef.current();\n        actionCallbackRef.current = noop;\n      },\n    },\n  );\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const mode = modeProp ?? (isDesktop ? 'menu' : 'sheet');\n\n  useScrollLock(mode === 'sheet');\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          if (action) {\n            actionCallbackRef.current = () => action(event);\n          }\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = React.useMemo(\n    () => ({ onItemClick, mode, onClose: onCloseWithOther }),\n    [mode, onCloseWithOther, onItemClick],\n  );\n\n  const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;\n\n  const dropdownProps =\n    mode === 'menu' ? Object.assign(restProps, { popupOffsetDistance, placement }) : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        autoFocus={animationState === 'entered'}\n        {...dropdownProps}\n        {...animationHandlers}\n        onClose={onCloseWithOther}\n        className={mode === 'menu' ? className : undefined}\n        style={mode === 'menu' ? style : undefined}\n      >\n        <div className={styles.contentWrapper}>\n          {(title || description) && (\n            <div className={styles.header}>\n              {title && (\n                <Footnote weight=\"2\" className={styles.title}>\n                  {title}\n                </Footnote>\n              )}\n              {description && <Footnote className={styles.description}>{description}</Footnote>}\n            </div>\n          )}\n          {children}\n        </div>\n        {platform === 'ios' && mode === 'sheet' && (\n          <div className={styles.closeItemWrapperIos}>\n            {iosCloseItem ?? <ActionSheetDefaultIosCloseItem />}\n          </div>\n        )}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  return (\n    <AppRootPortal>\n      <PopoutWrapper\n        noBackground={mode === 'menu'}\n        closing={Boolean(closingBy)}\n        alignY=\"bottom\"\n        className={className}\n        style={style}\n        onClick={onCloseWithOther}\n        fixed\n      >\n        {actionSheet}\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","AppRootPortal","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdownMenu","ActionSheetDropdownSheet","styles","ActionSheet","children","className","title","description","style","iosCloseItem","popupOffsetDistance","placement","mode","modeProp","onClose","restProps","platform","closingBy","setClosingBy","useState","undefined","onCloseWithOther","useCallback","actionCallbackRef","useRef","animationState","animationHandlers","onExited","closedBy","current","isDesktop","onItemClick","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","useMemo","DropdownComponent","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","role","aria-modal","autoFocus","div","contentWrapper","header","weight","closeItemWrapperIos","noBackground","alignY","onClick","fixed"],"mappings":"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"}

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

@@ -1,24 +1,25 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker.js";
 import { useSyncHTMLWithBaseVKUIClasses } from "../../hooks/useSyncHTMLWithBaseVKUIClasses.js";
 import { useSyncHTMLWithTokens } from "../../hooks/useSyncHTMLWithTokens.js";
 import { AppRootContext } from "./AppRootContext.js";
-import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
+import { AppRootStyleContainer } from "./AppRootStyleContainer/AppRootStyleContainer.js";
 import { ElementScrollController, GlobalScrollController } from "./ScrollContext.js";
+import { useSafeAreaInsetsMemo } from "./helpers.js";
 import styles from "./AppRoot.module.css";
+const layoutClassNames = {
+    card: styles.layoutCard,
+    plain: styles.layoutPlain
+};
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
- */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot, disablePortal = false, disableParentTransformForPositionFixedElements, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, disableSettingVKUIClassesInRuntime, ...props })=>{
+ */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot, disablePortal = false, disableParentTransformForPositionFixedElements, safeAreaInsets: safeAreaInsetsProp, layout, userSelectMode, disableSettingVKUIClassesInRuntime, className, ...props })=>{
     const appRootRef = React.useRef(null);
-    const ScrollController = React.useMemo(()=>scroll === 'contain' ? ElementScrollController : GlobalScrollController, [
-        scroll
-    ]);
     const isKeyboardInputActiveRef = useKeyboardInputTracker();
-    const safeAreaInsets = React.useMemo(()=>safeAreaInsetsProp, [
-        safeAreaInsetsProp
-    ]);
+    const safeAreaInsets = useSafeAreaInsetsMemo(safeAreaInsetsProp);
     const contextValue = React.useMemo(()=>({
             appRoot: appRootRef,
             portalRoot,
@@ -57,8 +58,12 @@ import styles from "./AppRoot.module.css";
    */ useSyncHTMLWithBaseVKUIClasses({
         appRootRef,
         mode,
+        layout,
         enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime
     });
+    const ScrollController = React.useMemo(()=>scroll === 'contain' ? ElementScrollController : GlobalScrollController, [
+        scroll
+    ]);
     return mode === 'partial' ? /*#__PURE__*/ _jsx(AppRootContext.Provider, {
         value: contextValue,
         children: /*#__PURE__*/ _jsx(ScrollController, {
@@ -69,7 +74,7 @@ import styles from "./AppRoot.module.css";
         value: contextValue,
         children: /*#__PURE__*/ _jsx(AppRootStyleContainer, {
             getRootRef: appRootRef,
-            className: mode === 'embedded' && !disableParentTransformForPositionFixedElements ? styles.transformForPositionFixedElements : undefined,
+            className: classNames(className, styles.host, layout && layoutClassNames[layout], mode === 'embedded' && !disableParentTransformForPositionFixedElements ? styles.transformForPositionFixedElements : undefined),
             ...props,
             children: /*#__PURE__*/ _jsx(ScrollController, {
                 elRef: appRootRef,

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 { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';\nimport { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\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,\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\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const safeAreaInsets = React.useMemo(() => safeAreaInsetsProp, [safeAreaInsetsProp]);\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot,\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 и .vkui__root--embedded на контейнере.\n   * В режиме partial мы классы не выставляем.\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","useSyncHTMLWithBaseVKUIClasses","useSyncHTMLWithTokens","AppRootContext","AppRootStyleContainer","ElementScrollController","GlobalScrollController","styles","AppRoot","children","mode","scroll","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","disableSettingVKUIClassesInRuntime","props","appRootRef","useRef","ScrollController","useMemo","isKeyboardInputActiveRef","contextValue","appRoot","embedded","keyboardInput","current","enable","Provider","value","elRef","getRootRef","className","transformForPositionFixedElements","undefined"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,8BAA8B,QAAQ,gDAA6C;AAC5F,SAASC,qBAAqB,QAAQ,uCAAoC;AAC1E,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,uBAAuB,EAAEC,sBAAsB,QAAQ,qBAAkB;AAQlF,OAAOC,YAAY,uBAAuB;AA4D1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,QAAQ,EACRC,OAAO,MAAM,EACbC,SAAS,QAAQ,EACjBC,UAAU,EACVC,gBAAgB,KAAK,EACrBC,8CAA8C,EAC9CC,gBAAgBC,kBAAkB,EAClCC,MAAM,EACNC,cAAc,EACdC,kCAAkC,EAClC,GAAGC,OACU;IACb,MAAMC,aAAatB,MAAMuB,MAAM,CAAwB;IAEvD,MAAMC,mBAAmBxB,MAAMyB,OAAO,CACpC,IAAOb,WAAW,YAAYN,0BAA0BC,wBACxD;QAACK;KAAO;IAGV,MAAMc,2BAA2BzB;IACjC,MAAMe,iBAAiBhB,MAAMyB,OAAO,CAAC,IAAMR,oBAAoB;QAACA;KAAmB;IACnF,MAAMU,eAAe3B,MAAMyB,OAAO,CAChC,IAAO,CAAA;YACLG,SAASN;YACTT;YACAG;YACAa,UAAUlB,SAAS;YACnBA;YACAG;YACAI;YACA,IAAIY,iBAAgB;gBAClB,OAAOJ,yBAAyBK,OAAO;YACzC;YACAZ;QACF,CAAA,GACA;QACEN;QACAC;QACAY;QACAR;QACAP;QACAK;QACAG;KACD;IAGH;;;;;;GAMC,GACDhB,sBAAsB;QAAEmB;QAAYU,QAAQrB,SAAS;IAAO;IAC5D;;;;GAIC,GACDT,+BAA+B;QAC7BoB;QACAX;QACAqB,QAAQrB,SAAS,aAAa,CAACS;IACjC;IAEA,OAAOT,SAAS,0BACd,KAACP,eAAe6B,QAAQ;QAACC,OAAOP;kBAC9B,cAAA,KAACH;YAAiBW,OAAOb;sBAAaZ;;uBAGxC,KAACN,eAAe6B,QAAQ;QAACC,OAAOP;kBAC9B,cAAA,KAACtB;YACC+B,YAAYd;YACZe,WACE1B,SAAS,cAAc,CAACI,iDACpBP,OAAO8B,iCAAiC,GACxCC;YAEL,GAAGlB,KAAK;sBAET,cAAA,KAACG;gBAAiBW,OAAOb;0BAAaZ;;;;AAI9C,EAAE"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';\nimport { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport { useSafeAreaInsetsMemo } from './helpers';\nimport type {\n  AppRootLayout,\n  AppRootMode,\n  AppRootScroll,\n  AppRootUserSelectMode,\n  SafeAreaInsets,\n} from './types';\nimport styles from './AppRoot.module.css';\n\nconst layoutClassNames = {\n  card: styles.layoutCard,\n  plain: styles.layoutPlain,\n};\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,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  userSelectMode,\n  disableSettingVKUIClassesInRuntime,\n  className,\n  ...props\n}: AppRootProps): React.ReactNode => {\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const safeAreaInsets = useSafeAreaInsetsMemo(safeAreaInsetsProp);\n\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot,\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 и .vkui__root--embedded на контейнере.\n   * В режиме partial мы классы не выставляем.\n   */\n  useSyncHTMLWithBaseVKUIClasses({\n    appRootRef,\n    mode,\n    layout,\n    enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime,\n  });\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\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={classNames(\n          className,\n          styles.host,\n          layout && layoutClassNames[layout],\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","classNames","useKeyboardInputTracker","useSyncHTMLWithBaseVKUIClasses","useSyncHTMLWithTokens","AppRootContext","AppRootStyleContainer","ElementScrollController","GlobalScrollController","useSafeAreaInsetsMemo","styles","layoutClassNames","card","layoutCard","plain","layoutPlain","AppRoot","children","mode","scroll","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","disableSettingVKUIClassesInRuntime","className","props","appRootRef","useRef","isKeyboardInputActiveRef","contextValue","useMemo","appRoot","embedded","keyboardInput","current","enable","ScrollController","Provider","value","elRef","getRootRef","host","transformForPositionFixedElements","undefined"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,8BAA8B,QAAQ,gDAA6C;AAC5F,SAASC,qBAAqB,QAAQ,uCAAoC;AAC1E,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,qBAAqB,QAAQ,mDAAgD;AACtF,SAASC,uBAAuB,EAAEC,sBAAsB,QAAQ,qBAAkB;AAClF,SAASC,qBAAqB,QAAQ,eAAY;AAQlD,OAAOC,YAAY,uBAAuB;AAE1C,MAAMC,mBAAmB;IACvBC,MAAMF,OAAOG,UAAU;IACvBC,OAAOJ,OAAOK,WAAW;AAC3B;AA4DA;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,QAAQ,EACRC,OAAO,MAAM,EACbC,SAAS,QAAQ,EACjBC,UAAU,EACVC,gBAAgB,KAAK,EACrBC,8CAA8C,EAC9CC,gBAAgBC,kBAAkB,EAClCC,MAAM,EACNC,cAAc,EACdC,kCAAkC,EAClCC,SAAS,EACT,GAAGC,OACU;IACb,MAAMC,aAAa9B,MAAM+B,MAAM,CAAwB;IAEvD,MAAMC,2BAA2B9B;IACjC,MAAMqB,iBAAiBd,sBAAsBe;IAE7C,MAAMS,eAAejC,MAAMkC,OAAO,CAChC,IAAO,CAAA;YACLC,SAASL;YACTV;YACAG;YACAa,UAAUlB,SAAS;YACnBA;YACAG;YACAI;YACA,IAAIY,iBAAgB;gBAClB,OAAOL,yBAAyBM,OAAO;YACzC;YACAZ;QACF,CAAA,GACA;QACEN;QACAC;QACAW;QACAP;QACAP;QACAK;QACAG;KACD;IAGH;;;;;;GAMC,GACDtB,sBAAsB;QAAE0B;QAAYS,QAAQrB,SAAS;IAAO;IAC5D;;;;GAIC,GACDf,+BAA+B;QAC7B2B;QACAZ;QACAO;QACAc,QAAQrB,SAAS,aAAa,CAACS;IACjC;IAEA,MAAMa,mBAAmBxC,MAAMkC,OAAO,CACpC,IAAOf,WAAW,YAAYZ,0BAA0BC,wBACxD;QAACW;KAAO;IAGV,OAAOD,SAAS,0BACd,KAACb,eAAeoC,QAAQ;QAACC,OAAOT;kBAC9B,cAAA,KAACO;YAAiBG,OAAOb;sBAAab;;uBAGxC,KAACZ,eAAeoC,QAAQ;QAACC,OAAOT;kBAC9B,cAAA,KAAC3B;YACCsC,YAAYd;YACZF,WAAW3B,WACT2B,WACAlB,OAAOmC,IAAI,EACXpB,UAAUd,gBAAgB,CAACc,OAAO,EAClCP,SAAS,cAAc,CAACI,iDACpBZ,OAAOoC,iCAAiC,GACxCC;YAEL,GAAGlB,KAAK;sBAET,cAAA,KAACW;gBAAiBG,OAAOb;0BAAab;;;;AAI9C,EAAE"}

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

@@ -1,3 +1,20 @@
+.host {
+  /* чтобы можно было ограничить размеры приложения
+   * извне с помощью max-height, max-width */
+  max-inline-size: inherit;
+  max-block-size: inherit;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.layoutCard {
+  background: var(--vkui--color_background);
+}
+
+.layoutPlain {
+  background: var(--vkui--color_background_content);
+}
+
 .transformForPositionFixedElements {
   transform: translate3d(0, 0, 0);
 }

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

@@ -7,7 +7,7 @@ import { useDOM } from "../../lib/dom.js";
 import { isRefObject } from "../../lib/isRefObject.js";
 import { ColorSchemeProvider } from "../ColorSchemeProvider/ColorSchemeProvider.js";
 import { AppRootContext } from "./AppRootContext.js";
-import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
+import { AppRootStyleContainer } from "./AppRootStyleContainer/AppRootStyleContainer.js";
 export const AppRootPortal = ({ children, usePortal, className })=>{
     const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } = React.useContext(AppRootContext);
     const colorScheme = useColorScheme();

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 { createPortal } from '../../lib/createPortal';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\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`\n   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   *\n   * По умолчанию в качестве портала будет использован `document.body`\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\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: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,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,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,6BAA6BF,UAAUG,QAAQ;IAClE,OAAOL;AACT"}
+{"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 { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer/AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` в качестве портала будет использован `portalRoot`\n   * из контекста `AppRoot` если он передан в `AppRoot`, иначе `document.body`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   *\n   * По умолчанию в качестве портала будет использован `document.body`\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null;\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } =\n    React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n\n  const portalContainer = usePortalContainer(usePortal);\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: portalRootFromContext } = React.useContext(AppRootContext);\n\n  const { document } = useDOM();\n\n  if (usePortal && typeof usePortal !== 'boolean') {\n    return isRefObject(usePortal) ? usePortal.current : usePortal;\n  }\n\n  const resolvedPortalFromContext = isRefObject(portalRootFromContext)\n    ? portalRootFromContext.current\n    : portalRootFromContext;\n  // если portalRoot не передали через AppRoot, то мы используем body\n  // мы можем использовать body как портал,\n  // так как все стили передаются вместе с AppRootStyleContainer\n  const portalRoot = resolvedPortalFromContext || document?.body || null;\n  return portalRoot;\n}\n"],"names":["React","useColorScheme","createPortal","useDOM","isRefObject","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","value","undefined","portalRoot","portalRootFromContext","document","current","resolvedPortalFromContext","body"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,MAAM,QAAQ,mBAAgB;AACvC,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,mDAAgD;AActF,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EAAEC,IAAI,EAAEC,eAAeC,qCAAqC,EAAE,GAClEd,MAAMe,UAAU,CAACT;IACnB,MAAMU,cAAcf;IAEpB,MAAMgB,eAAeC,gBACnBR,WACAE,MACAO,QAAQL;IAGV,MAAMM,kBAAkBC,mBAAmBX;IAE3C,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOlB,2BACL,KAACG;YAAoBiB,OAAON;sBAC1B,cAAA,KAACT;gBAAsBI,WAAWA;0BAAYF;;YAEhDW;IAEJ;IAEA,OAAOX;AACT,EAAE;AAEF,SAASS,gBACPR,SAA0C,EAC1CE,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIJ,cAAca,WAAW;QAC3B,OAAOT,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOF,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOI,0CAA0C,SAASJ,cAAc;AAC1E;AAEA,SAASW,mBAAmBX,SAA0C;IACpE,MAAM,EAAEc,YAAYC,qBAAqB,EAAE,GAAGzB,MAAMe,UAAU,CAACT;IAE/D,MAAM,EAAEoB,QAAQ,EAAE,GAAGvB;IAErB,IAAIO,aAAa,OAAOA,cAAc,WAAW;QAC/C,OAAON,YAAYM,aAAaA,UAAUiB,OAAO,GAAGjB;IACtD;IAEA,MAAMkB,4BAA4BxB,YAAYqB,yBAC1CA,sBAAsBE,OAAO,GAC7BF;IACJ,mEAAmE;IACnE,yCAAyC;IACzC,8DAA8D;IAC9D,MAAMD,aAAaI,6BAA6BF,UAAUG,QAAQ;IAClE,OAAOL;AACT"}

package/dist/cssm/components/AppRoot/{AppRootStyleContainer.js → AppRootStyleContainer/AppRootStyleContainer.js}

@@ -2,28 +2,20 @@
 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 { 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 { safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);
+    const { hasPointer, sizeY = 'none' } = useAdaptivity();
     const { isWebView } = useConfigProvider();
     const userSelectModeClassName = getUserSelectModeClassName({
         userSelectMode,
@@ -33,23 +25,20 @@ export function useAppRootStyles() {
     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)
+        className: classNames(styles.host, mode === 'embedded' && styles.embedded, sizeY !== 'regular' && sizeYClassNames[sizeY], userSelectModeClassName, tokensClassName)
     };
 }
 /**
  * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:
  * - точке монтирования приложения – `AppRoot`;
- * - точке монтирования порталов для модальных окон – `PortalRoot`.
+ * - точке монтирования порталов для модальных окон – `AppRootPortal`.
  *
  * @private
- */ export function AppRootStyleContainer({ style, ...props }) {
+ */ export function AppRootStyleContainer(props) {
     const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();
     return /*#__PURE__*/ _jsx(RootComponent, {
         baseClassName: appRootClassName,
-        style: appRootStyle ? {
-            ...appRootStyle,
-            ...style
-        } : style,
+        baseStyle: appRootStyle,
         ...props
     });
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/AppRoot/AppRootStyleContainer/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 sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nexport function useAppRootStyles() {\n  const { safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);\n  const { hasPointer, 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      sizeY !== 'regular' && sizeYClassNames[sizeY],\n      userSelectModeClassName,\n      tokensClassName,\n    ),\n  };\n}\n\ntype AppRootStyleContainerProps = RootComponentProps<HTMLDivElement>;\n\n/**\n * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:\n * - точке монтирования приложения – `AppRoot`;\n * - точке монтирования порталов для модальных окон – `AppRootPortal`.\n *\n * @private\n */\nexport function AppRootStyleContainer(props: AppRootStyleContainerProps) {\n  const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();\n\n  return <RootComponent baseClassName={appRootClassName} baseStyle={appRootStyle} {...props} />;\n}\n"],"names":["React","classNames","useAdaptivity","useTokensClassName","useConfigProvider","RootComponent","AppRootContext","getSafeAreaInsetsAsCssVariables","getUserSelectModeClassName","styles","sizeYClassNames","none","sizeYNone","compact","sizeYCompact","useAppRootStyles","safeAreaInsets","mode","userSelectMode","useContext","hasPointer","sizeY","isWebView","userSelectModeClassName","tokensClassName","style","undefined","className","host","embedded","AppRootStyleContainer","props","appRootStyle","appRootClassName","baseClassName","baseStyle"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,kCAA+B;AAC7D,SAASC,kBAAkB,QAAQ,+BAAsB;AACzD,SAASC,iBAAiB,QAAQ,gDAA6C;AAC/E,SAASC,aAAa,QAAiC,uCAAoC;AAC3F,SAASC,cAAc,QAAQ,uBAAoB;AACnD,SAASC,+BAA+B,EAAEC,0BAA0B,QAAQ,gBAAa;AACzF,OAAOC,YAAY,qCAAqC;AAExD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGlB,MAAMmB,UAAU,CAACb;IAClE,MAAM,EAAEc,UAAU,EAAEC,QAAQ,MAAM,EAAE,GAAGnB;IACvC,MAAM,EAAEoB,SAAS,EAAE,GAAGlB;IACtB,MAAMmB,0BAA0Bf,2BAA2B;QACzDU;QACAI;QACAF;IACF;IACA,MAAMI,kBAAkBrB;IAExB,OAAO;QACLsB,OAAOT,iBAAiBT,gCAAgCS,kBAAkBU;QAC1EC,WAAW1B,WACTQ,OAAOmB,IAAI,EACXX,SAAS,cAAcR,OAAOoB,QAAQ,EACtCR,UAAU,aAAaX,eAAe,CAACW,MAAM,EAC7CE,yBACAC;IAEJ;AACF;AAIA;;;;;;CAMC,GACD,OAAO,SAASM,sBAAsBC,KAAiC;IACrE,MAAM,EAAEN,OAAOO,YAAY,EAAEL,WAAWM,gBAAgB,EAAE,GAAGlB;IAE7D,qBAAO,KAACV;QAAc6B,eAAeD;QAAkBE,WAAWH;QAAe,GAAGD,KAAK;;AAC3F"}

package/dist/cssm/components/AppRoot/{AppRootStyleContainer.module.css → AppRootStyleContainer/AppRootStyleContainer.module.css}

@@ -1,10 +1,11 @@
+/*
+ * Стили, которые переиспользуются в AppRoot и при использовании порталов.
+ *
+ * Желательно не помещать сюда стили отвечающие за геометрию и фон,
+ * чтобы не влиять на поведение модалок и других плавающих элементов.
+ * Такие стили лучше помещать сразу в AppRoot.
+ */
 .host {
-  /* чтобы можно было ограничить размеры приложения
-   * извне с помощью max-height, max-width */
-  max-inline-size: inherit;
-  max-block-size: inherit;
-  inline-size: 100%;
-  block-size: 100%;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
           text-size-adjust: 100%;
@@ -12,52 +13,28 @@
   color: var(--vkui--color_text_primary);
   color-scheme: var(--vkui--colors_scheme);
 }
-
-.sizeXRegular {
-  background: var(--vkui--color_background);
-}
-
-@media (min-width: 768px) {
-  .sizeXNone {
-    background: var(--vkui--color_background);
-  }
-}
-
-.layoutCard {
-  background: var(--vkui--color_background);
-}
-
-.layoutPlain {
-  background: var(--vkui--color_background_content);
-}
-
 .sizeYCompact {
   --vkui_internal--panel_header_height: var(--vkui--size_panel_header_height--compact);
 }
-
 @media (pointer: fine) and (min-width: 768px),(max-height: 414.9px) {
   .sizeYNone {
     --vkui_internal--panel_header_height: var(--vkui--size_panel_header_height--compact);
   }
 }
-
 .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;
@@ -71,7 +48,6 @@
             user-select: text;
   }
 }
-
 .embedded {
   /* Раньше в этом режиме на родителе (app__root--embeded)
    * лежал стиль overflow-x: hidden

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

@@ -1,7 +1,23 @@
+import * as React from "react";
 import { isRefObject } from "../../lib/isRefObject.js";
-import styles from "./AppRoot.module.css";
+import styles from "./AppRootStyleContainer/AppRootStyleContainer.module.css";
 export const extractPortalRootByProp = (portalRootProp)=>isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;
 export const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;
+export function useSafeAreaInsetsMemo(safeAreaInsetsProp) {
+    const { top, right, bottom, left } = safeAreaInsetsProp ?? {};
+    const safeAreaInsets = React.useMemo(()=>({
+            top,
+            right,
+            bottom,
+            left
+        }), [
+        top,
+        right,
+        bottom,
+        left
+    ]);
+    return safeAreaInsets;
+}
 export function getSafeAreaInsetsAsCssVariables(safeAreaInsets) {
     if (!safeAreaInsets) {
         return {};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/helpers.ts"],"sourcesContent":["import { isRefObject } from '../../lib/isRefObject';\nimport type { AppRootUserSelectMode, SafeAreaInsets } from './types';\nimport styles from './AppRoot.module.css';\n\nexport const extractPortalRootByProp = (\n  portalRootProp: HTMLElement | React.RefObject<HTMLElement>,\n): HTMLElement | null => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);\n\nexport const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;\n\nexport function getSafeAreaInsetsAsCssVariables(\n  safeAreaInsets: SafeAreaInsets | undefined,\n): Record<string, string> {\n  if (!safeAreaInsets) {\n    return {};\n  }\n\n  const cssVariables: Record<string, string> = {};\n\n  for (const key in safeAreaInsets) {\n    if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n      const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n      const propertyValue = safeAreaInsets[key];\n\n      cssVariables[propertyKey] = `${propertyValue}px`;\n    }\n  }\n\n  return cssVariables;\n}\n\nexport function getUserSelectModeClassName({\n  userSelectMode,\n  isWebView,\n  hasPointer,\n}: {\n  userSelectMode: AppRootUserSelectMode | undefined;\n  isWebView: boolean;\n  hasPointer: boolean | undefined;\n}): string | null {\n  switch (userSelectMode) {\n    case 'enabled-with-pointer': {\n      if (hasPointer) {\n        return null;\n      }\n\n      const enableByHasPointerMediaQuery = hasPointer === undefined;\n      if (enableByHasPointerMediaQuery) {\n        return styles.pointerNone;\n      }\n\n      return styles.userSelectNone;\n    }\n    case 'disabled':\n      return styles.userSelectNone;\n    case 'enabled':\n      return null;\n    default:\n      return isWebView ? styles.userSelectNone : null;\n  }\n}\n"],"names":["isRefObject","styles","extractPortalRootByProp","portalRootProp","current","CUSTOM_PROPERTY_INSET_PREFIX","getSafeAreaInsetsAsCssVariables","safeAreaInsets","cssVariables","key","hasOwnProperty","propertyKey","propertyValue","getUserSelectModeClassName","userSelectMode","isWebView","hasPointer","enableByHasPointerMediaQuery","undefined","pointerNone","userSelectNone"],"mappings":"AAAA,SAASA,WAAW,QAAQ,2BAAwB;AAEpD,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,0BAA0B,CACrCC,iBACwBH,YAAYG,kBAAkBA,eAAeC,OAAO,GAAGD,eAAgB;AAEjG,OAAO,MAAME,+BAA+B,CAAC,iCAAiC,CAAC,CAAC;AAEhF,OAAO,SAASC,gCACdC,cAA0C;IAE1C,IAAI,CAACA,gBAAgB;QACnB,OAAO,CAAC;IACV;IAEA,MAAMC,eAAuC,CAAC;IAE9C,IAAK,MAAMC,OAAOF,eAAgB;QAChC,IAAIA,eAAeG,cAAc,CAACD,QAAQ,OAAOF,cAAc,CAACE,IAAI,KAAK,UAAU;YACjF,MAAME,cAAc,GAAGN,+BAA+BI,KAAK;YAC3D,MAAMG,gBAAgBL,cAAc,CAACE,IAAI;YAEzCD,YAAY,CAACG,YAAY,GAAG,GAAGC,cAAc,EAAE,CAAC;QAClD;IACF;IAEA,OAAOJ;AACT;AAEA,OAAO,SAASK,2BAA2B,EACzCC,cAAc,EACdC,SAAS,EACTC,UAAU,EAKX;IACC,OAAQF;QACN,KAAK;YAAwB;gBAC3B,IAAIE,YAAY;oBACd,OAAO;gBACT;gBAEA,MAAMC,+BAA+BD,eAAeE;gBACpD,IAAID,8BAA8B;oBAChC,OAAOhB,OAAOkB,WAAW;gBAC3B;gBAEA,OAAOlB,OAAOmB,cAAc;YAC9B;QACA,KAAK;YACH,OAAOnB,OAAOmB,cAAc;QAC9B,KAAK;YACH,OAAO;QACT;YACE,OAAOL,YAAYd,OAAOmB,cAAc,GAAG;IAC/C;AACF"}
+{"version":3,"sources":["../../../../src/components/AppRoot/helpers.ts"],"sourcesContent":["import * as React from 'react';\nimport { isRefObject } from '../../lib/isRefObject';\nimport type { AppRootUserSelectMode, SafeAreaInsets } from './types';\nimport styles from './AppRootStyleContainer/AppRootStyleContainer.module.css';\n\nexport const extractPortalRootByProp = (\n  portalRootProp: HTMLElement | React.RefObject<HTMLElement>,\n): HTMLElement | null => (isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp);\n\nexport const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;\n\nexport function useSafeAreaInsetsMemo(safeAreaInsetsProp: SafeAreaInsets | undefined) {\n  const { top, right, bottom, left } = safeAreaInsetsProp ?? {};\n  const safeAreaInsets = React.useMemo(\n    () => ({\n      top,\n      right,\n      bottom,\n      left,\n    }),\n    [top, right, bottom, left],\n  );\n\n  return safeAreaInsets;\n}\n\nexport function getSafeAreaInsetsAsCssVariables(\n  safeAreaInsets: SafeAreaInsets | undefined,\n): Record<string, string> {\n  if (!safeAreaInsets) {\n    return {};\n  }\n\n  const cssVariables: Record<string, string> = {};\n\n  for (const key in safeAreaInsets) {\n    if (safeAreaInsets.hasOwnProperty(key) && typeof safeAreaInsets[key] === 'number') {\n      const propertyKey = `${CUSTOM_PROPERTY_INSET_PREFIX}${key}`;\n      const propertyValue = safeAreaInsets[key];\n\n      cssVariables[propertyKey] = `${propertyValue}px`;\n    }\n  }\n\n  return cssVariables;\n}\n\nexport function getUserSelectModeClassName({\n  userSelectMode,\n  isWebView,\n  hasPointer,\n}: {\n  userSelectMode: AppRootUserSelectMode | undefined;\n  isWebView: boolean;\n  hasPointer: boolean | undefined;\n}): string | null {\n  switch (userSelectMode) {\n    case 'enabled-with-pointer': {\n      if (hasPointer) {\n        return null;\n      }\n\n      const enableByHasPointerMediaQuery = hasPointer === undefined;\n      if (enableByHasPointerMediaQuery) {\n        return styles.pointerNone;\n      }\n\n      return styles.userSelectNone;\n    }\n    case 'disabled':\n      return styles.userSelectNone;\n    case 'enabled':\n      return null;\n    default:\n      return isWebView ? styles.userSelectNone : null;\n  }\n}\n"],"names":["React","isRefObject","styles","extractPortalRootByProp","portalRootProp","current","CUSTOM_PROPERTY_INSET_PREFIX","useSafeAreaInsetsMemo","safeAreaInsetsProp","top","right","bottom","left","safeAreaInsets","useMemo","getSafeAreaInsetsAsCssVariables","cssVariables","key","hasOwnProperty","propertyKey","propertyValue","getUserSelectModeClassName","userSelectMode","isWebView","hasPointer","enableByHasPointerMediaQuery","undefined","pointerNone","userSelectNone"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,2BAAwB;AAEpD,OAAOC,YAAY,2DAA2D;AAE9E,OAAO,MAAMC,0BAA0B,CACrCC,iBACwBH,YAAYG,kBAAkBA,eAAeC,OAAO,GAAGD,eAAgB;AAEjG,OAAO,MAAME,+BAA+B,CAAC,iCAAiC,CAAC,CAAC;AAEhF,OAAO,SAASC,sBAAsBC,kBAA8C;IAClF,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGJ,sBAAsB,CAAC;IAC5D,MAAMK,iBAAiBb,MAAMc,OAAO,CAClC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAKC;QAAOC;QAAQC;KAAK;IAG5B,OAAOC;AACT;AAEA,OAAO,SAASE,gCACdF,cAA0C;IAE1C,IAAI,CAACA,gBAAgB;QACnB,OAAO,CAAC;IACV;IAEA,MAAMG,eAAuC,CAAC;IAE9C,IAAK,MAAMC,OAAOJ,eAAgB;QAChC,IAAIA,eAAeK,cAAc,CAACD,QAAQ,OAAOJ,cAAc,CAACI,IAAI,KAAK,UAAU;YACjF,MAAME,cAAc,GAAGb,+BAA+BW,KAAK;YAC3D,MAAMG,gBAAgBP,cAAc,CAACI,IAAI;YAEzCD,YAAY,CAACG,YAAY,GAAG,GAAGC,cAAc,EAAE,CAAC;QAClD;IACF;IAEA,OAAOJ;AACT;AAEA,OAAO,SAASK,2BAA2B,EACzCC,cAAc,EACdC,SAAS,EACTC,UAAU,EAKX;IACC,OAAQF;QACN,KAAK;YAAwB;gBAC3B,IAAIE,YAAY;oBACd,OAAO;gBACT;gBAEA,MAAMC,+BAA+BD,eAAeE;gBACpD,IAAID,8BAA8B;oBAChC,OAAOvB,OAAOyB,WAAW;gBAC3B;gBAEA,OAAOzB,OAAO0B,cAAc;YAC9B;QACA,KAAK;YACH,OAAO1B,OAAO0B,cAAc;QAC9B,KAAK;YACH,OAAO;QACT;YACE,OAAOL,YAAYrB,OAAO0B,cAAc,GAAG;IAC/C;AACF"}

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

@@ -309,27 +309,27 @@
   Buttons text colors
 */
 
-.host.appearanceAccent {
+.appearanceAccent {
   color: var(--vkui--color_text_accent_themed);
 }
 
-.host.appearancePositive {
+.appearancePositive {
   color: var(--vkui--color_text_positive);
 }
 
-.host.appearanceNegative {
+.appearanceNegative {
   color: var(--vkui--color_text_negative);
 }
 
-.host.appearanceNeutral {
+.appearanceNeutral {
   color: var(--vkui--color_text_primary);
 }
 
-.host.modePrimary.appearanceNeutral {
+.modePrimary.appearanceNeutral {
   color: var(--vkui--color_text_contrast_themed);
 }
 
-.host.appearanceAccentInvariable {
+.appearanceAccentInvariable {
   color: var(--vkui--color_text_accent);
 }
 

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

@@ -80,7 +80,7 @@
  * SplitCol
  */
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalGroup--mode-card) :global(.vkuiInternalCardScroll--size-l) .host,
 :global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
@@ -91,8 +91,10 @@
           margin-inline-end: 16px;
 }
 
+/* stylelint-enable selector-pseudo-class-disallowed-list */
+
 @media (min-width: 768px) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+  /* stylelint-disable selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-auto)
     :global(.vkuiInternalCardScroll--size-l)
     .host {
@@ -100,9 +102,10 @@
     -webkit-margin-end: 16px;
             margin-inline-end: 16px;
   }
+  /* stylelint-enable selector-pseudo-class-disallowed-list */
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+/* stylelint-disable selector-pseudo-class-disallowed-list */
 
 :global(.vkuiInternalGroup--mode-card) :global(.vkuiInternalCardScroll--size-l) .host:last-of-type,
 :global(.vkuiInternalSplitCol--viewWidth-tabletPlus):global(.vkuiInternalSplitCol--spaced-auto)
@@ -112,8 +115,11 @@
           margin-inline-end: 0;
 }
 
+/* stylelint-enable selector-pseudo-class-disallowed-list */
+
+/* stylelint-disable selector-pseudo-class-disallowed-list */
+
 @media (min-width: 768px) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalSplitCol--viewWidth-none):global(.vkuiInternalSplitCol--spaced-auto)
     :global(.vkuiInternalCardScroll--size-l)
     .host:last-of-type {
@@ -123,7 +129,6 @@
 }
 
 @media (min-width: 768px) {
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalGroup--mode-none)
     :global(.vkuiInternalCardScroll--size-l)
     .host:last-of-type {
@@ -131,7 +136,6 @@
             margin-inline-end: 0;
   }
 
-  /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
   :global(.vkuiInternalGroup--mode-none) :global(.vkuiInternalCardScroll--size-l) .host {
     inline-size: calc(100% - 32px);
     -webkit-margin-end: 16px;
@@ -139,6 +143,8 @@
   }
 }
 
+/* stylelint-enable selector-pseudo-class-disallowed-list */
+
 /**
  * CMP:
  * CardGrid

package/dist/cssm/components/Clickable/Clickable.js

@@ -1,67 +1,14 @@
-'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { classNames, noop } from "@vkontakte/vkjs";
-import { useFocusVisible } from "../../hooks/useFocusVisible.js";
-import { useFocusVisibleClassName } from "../../hooks/useFocusVisibleClassName.js";
-import { mergeCalls } from "../../lib/mergeCalls.js";
-import { clickByKeyboardHandler } from "../../lib/utils.js";
+import { classNames } from "@vkontakte/vkjs";
 import { RootComponent } from "../RootComponent/RootComponent.js";
-import { ClickableLockStateContext, DEFAULT_ACTIVE_EFFECT_DELAY, useState } from "./useState.js";
+import { RealClickable } from "./RealClickable.js";
 import styles from "./Clickable.module.css";
 /**
  * Некликабельный компонент. Отключаем возможность нажимать на компонент.
  */ const NonClickable = ({ href, onClick, onClickCapture, activeClassName, hoverClassName, hasActive, hasHover, hovered, unlockParentHover, activated, activeEffectDelay, ...restProps })=>/*#__PURE__*/ _jsx(RootComponent, {
         ...restProps
     });
-/**
- * Кликабельный компонент. Добавляем кучу обвесов
- */ const RealClickable = ({ baseClassName, children, focusVisibleMode = 'inside', activeClassName, hoverClassName, activeEffectDelay = DEFAULT_ACTIVE_EFFECT_DELAY, hasHover = true, hasActive = true, hovered, activated, hasHoverWithChildren, unlockParentHover, onPointerEnter, onPointerLeave, onPointerDown, onPointerCancel, onPointerUp, onBlur, onFocus, onKeyDown, ...restProps })=>{
-    const { focusVisible, ...focusEvents } = useFocusVisible();
-    const focusVisibleClassNames = useFocusVisibleClassName({
-        focusVisible,
-        mode: focusVisibleMode
-    });
-    const { stateClassName, setLockHoverBubblingImmediate, setLockActiveBubblingImmediate, ...stateEvents } = useState({
-        activeClassName,
-        hoverClassName,
-        activeEffectDelay,
-        hasHover,
-        hasActive,
-        hovered,
-        activated,
-        unlockParentHover
-    });
-    const handlers = mergeCalls(focusEvents, stateEvents, {
-        onKeyDown: clickByKeyboardHandler
-    }, {
-        onPointerEnter,
-        onPointerLeave,
-        onPointerDown,
-        onPointerCancel,
-        onPointerUp,
-        onBlur,
-        onFocus,
-        onKeyDown
-    });
-    const lockStateContextValue = React.useMemo(()=>({
-            lockHoverStateBubbling: hasHoverWithChildren ? noop : setLockHoverBubblingImmediate,
-            lockActiveStateBubbling: setLockActiveBubblingImmediate
-        }), [
-        setLockHoverBubblingImmediate,
-        setLockActiveBubblingImmediate,
-        hasHoverWithChildren
-    ]);
-    return /*#__PURE__*/ _jsx(RootComponent, {
-        baseClassName: classNames(baseClassName, styles.realClickable, focusVisibleClassNames, stateClassName),
-        ...handlers,
-        ...restProps,
-        children: /*#__PURE__*/ _jsx(ClickableLockStateContext.Provider, {
-            value: lockStateContextValue,
-            children: children
-        })
-    });
-};
 /**
  * Проверяем, является ли компонент кликабельным
  */ export function checkClickable(props) {