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

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

@@ -5,7 +5,7 @@ import { noop } from "@vkontakte/vkjs";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useCSSKeyframesAnimationController } from "../../lib/animation/index.js";
-import { ModalPopoutPortal } from "../AppRoot/ModalPopoutPortal.js";
+import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
 import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper.js";
 import { Footnote } from "../Typography/Footnote/Footnote.js";
@@ -102,7 +102,7 @@ import styles from "./ActionSheet.module.css";
     if (mode === 'menu') {
         return actionSheet;
     }
-    return /*#__PURE__*/ _jsx(ModalPopoutPortal, {
+    return /*#__PURE__*/ _jsx(AppRootPortal, {
         children: /*#__PURE__*/ _jsx(PopoutWrapper, {
             closing: Boolean(closingBy),
             alignY: "bottom",

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 { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';\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    <ModalPopoutPortal>\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    </ModalPopoutPortal>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","ModalPopoutPortal","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  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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"}

package/dist/cssm/components/ActionSheetItem/ActionSheetItem.js

@@ -15,7 +15,7 @@ import { Radio } from "./subcomponents/Radio/Radio.js";
 import styles from "./ActionSheetItem.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
- */ export const ActionSheetItem = ({ children, autoCloseDisabled = false, mode = 'default', meta, subtitle, before, after, selectable, value, name, checked, defaultChecked, onChange, onClick, onImmediateClick, multiline = false, iconChecked, className, isCancelItem, ...restProps })=>{
+ */ export const ActionSheetItem = ({ children, autoCloseDisabled = false, mode = 'default', meta, subtitle, before, after, selectable, value, name, checked, defaultChecked, onChange, onClick, onImmediateClick, multiline = false, iconChecked, isCancelItem, ...restProps })=>{
     const platform = usePlatform();
     const { onItemClick = ()=>noop, mode: actionSheetMode, onClose: onActionSheetClose } = React.useContext(ActionSheetContext);
     const { sizeY } = useAdaptivityWithJSMediaQueries();
@@ -62,7 +62,7 @@ import styles from "./ActionSheetItem.module.css";
         ...restProps,
         onClick: onItemClickImpl,
         activeMode: platform === 'ios' ? styles.active : undefined,
-        className: classNames(styles.host, platform === 'ios' && styles.ios, mode === 'cancel' && styles.modeCancel, mode === 'destructive' && styles.modeDestructive, sizeY === 'compact' && styles.sizeYCompact, isRich && styles.rich, actionSheetMode === 'menu' && styles.menu, className),
+        baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, mode === 'cancel' && styles.modeCancel, mode === 'destructive' && styles.modeDestructive, sizeY === 'compact' && styles.sizeYCompact, isRich && styles.rich, actionSheetMode === 'menu' && styles.menu),
         onKeyDown: onKeyDown,
         children: [
             before && /*#__PURE__*/ _jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport { isRealClickEvent } from './helpers';\nimport { Radio } from './subcomponents/Radio/Radio';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  /**\n   * По умолчанию клик на опцию вызывает переданную в `ActionSheet` функцию `onClose`, данное свойство\n   * позволяет отключить такое поведение\n   */\n  autoCloseDisabled?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * По умолчанию onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n  /**\n   * Позволяет отделить ActionItem от CancelItem для определении того,\n   * кто вызвал закрытие ActionSheet. Используется в ActionSheet.onClose()\n   */\n  isCancelItem?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nexport const ActionSheetItem = ({\n  children,\n  autoCloseDisabled = false,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  after,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked,\n  className,\n  isCancelItem,\n  ...restProps\n}: ActionSheetItemProps): React.ReactNode => {\n  const platform = usePlatform();\n  const {\n    onItemClick = () => noop,\n    mode: actionSheetMode,\n    onClose: onActionSheetClose,\n  } = React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const Component: React.ElementType | undefined = selectable ? 'label' : undefined;\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === 'ios';\n\n  const onItemClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      onItemClick({\n        action: onClick,\n        immediateAction: onImmediateClick,\n        autoClose: !autoCloseDisabled,\n        isCancelItem: Boolean(isCancelItem),\n      })?.(e);\n    },\n    [autoCloseDisabled, isCancelItem, onClick, onImmediateClick, onItemClick],\n  );\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLElement> = React.useCallback(\n    (event) => {\n      if (pressedKey(event) === Keys.ENTER) {\n        onActionSheetClose?.();\n      }\n    },\n    [onActionSheetClose],\n  );\n\n  const onItemClickImpl: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event) => {\n      if (selectable) {\n        if (isRealClickEvent(event)) {\n          onItemClickHandler(event);\n        }\n      } else {\n        onItemClickHandler(event);\n      }\n    },\n    [onItemClickHandler, selectable],\n  );\n\n  return (\n    <Tappable\n      {...(Component && { Component })}\n      {...restProps}\n      onClick={onItemClickImpl}\n      activeMode={platform === 'ios' ? styles.active : undefined}\n      className={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'cancel' && styles.modeCancel,\n        mode === 'destructive' && styles.modeDestructive,\n        sizeY === 'compact' && styles.sizeYCompact,\n        isRich && styles.rich,\n        actionSheetMode === 'menu' && styles.menu,\n        className,\n      )}\n      onKeyDown={onKeyDown}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <div className={classNames(styles.container, !multiline && styles.ellipsis)}>\n        <div className={classNames(styles.content, isCentered && styles.centered)}>\n          {platform === 'ios' ? (\n            <Title\n              className={styles.children}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles.children}>{children}</Text>\n          )}\n          {meta && <Text className={styles.meta}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles.subtitle}>{subtitle}</Subhead>}\n      </div>\n      {(selectable || after) && (\n        <div className={styles.after}>\n          {after}\n          {selectable && (\n            <Radio\n              name={name}\n              value={value}\n              onChange={onChange}\n              defaultChecked={defaultChecked}\n              checked={checked}\n              disabled={restProps.disabled}\n            >\n              {iconChecked}\n            </Radio>\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","Keys","pressedKey","ActionSheetContext","Tappable","Subhead","Text","Title","isRealClickEvent","Radio","styles","ActionSheetItem","children","autoCloseDisabled","mode","meta","subtitle","before","after","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","className","isCancelItem","restProps","platform","onItemClick","actionSheetMode","onClose","onActionSheetClose","useContext","sizeY","Component","undefined","isRich","isCentered","onItemClickHandler","useCallback","e","action","immediateAction","autoClose","Boolean","onKeyDown","event","ENTER","onItemClickImpl","activeMode","active","host","ios","modeCancel","modeDestructive","sizeYCompact","rich","menu","div","container","ellipsis","content","centered","weight","level","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport { isRealClickEvent } from './helpers';\nimport { Radio } from './subcomponents/Radio/Radio';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  after?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  /**\n   * По умолчанию клик на опцию вызывает переданную в `ActionSheet` функцию `onClose`, данное свойство\n   * позволяет отключить такое поведение\n   */\n  autoCloseDisabled?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * По умолчанию onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n  /**\n   * Позволяет отделить ActionItem от CancelItem для определении того,\n   * кто вызвал закрытие ActionSheet. Используется в ActionSheet.onClose()\n   */\n  isCancelItem?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nexport const ActionSheetItem = ({\n  children,\n  autoCloseDisabled = false,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  after,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked,\n  isCancelItem,\n  ...restProps\n}: ActionSheetItemProps): React.ReactNode => {\n  const platform = usePlatform();\n  const {\n    onItemClick = () => noop,\n    mode: actionSheetMode,\n    onClose: onActionSheetClose,\n  } = React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const Component: React.ElementType | undefined = selectable ? 'label' : undefined;\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === 'ios';\n\n  const onItemClickHandler = React.useCallback(\n    (e: React.MouseEvent) => {\n      onItemClick({\n        action: onClick,\n        immediateAction: onImmediateClick,\n        autoClose: !autoCloseDisabled,\n        isCancelItem: Boolean(isCancelItem),\n      })?.(e);\n    },\n    [autoCloseDisabled, isCancelItem, onClick, onImmediateClick, onItemClick],\n  );\n\n  const onKeyDown: React.KeyboardEventHandler<HTMLElement> = React.useCallback(\n    (event) => {\n      if (pressedKey(event) === Keys.ENTER) {\n        onActionSheetClose?.();\n      }\n    },\n    [onActionSheetClose],\n  );\n\n  const onItemClickImpl: React.MouseEventHandler<HTMLElement> = React.useCallback(\n    (event) => {\n      if (selectable) {\n        if (isRealClickEvent(event)) {\n          onItemClickHandler(event);\n        }\n      } else {\n        onItemClickHandler(event);\n      }\n    },\n    [onItemClickHandler, selectable],\n  );\n\n  return (\n    <Tappable\n      {...(Component && { Component })}\n      {...restProps}\n      onClick={onItemClickImpl}\n      activeMode={platform === 'ios' ? styles.active : undefined}\n      baseClassName={classNames(\n        styles.host,\n        platform === 'ios' && styles.ios,\n        mode === 'cancel' && styles.modeCancel,\n        mode === 'destructive' && styles.modeDestructive,\n        sizeY === 'compact' && styles.sizeYCompact,\n        isRich && styles.rich,\n        actionSheetMode === 'menu' && styles.menu,\n      )}\n      onKeyDown={onKeyDown}\n    >\n      {before && <div className={styles.before}>{before}</div>}\n      <div className={classNames(styles.container, !multiline && styles.ellipsis)}>\n        <div className={classNames(styles.content, isCentered && styles.centered)}>\n          {platform === 'ios' ? (\n            <Title\n              className={styles.children}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles.children}>{children}</Text>\n          )}\n          {meta && <Text className={styles.meta}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles.subtitle}>{subtitle}</Subhead>}\n      </div>\n      {(selectable || after) && (\n        <div className={styles.after}>\n          {after}\n          {selectable && (\n            <Radio\n              name={name}\n              value={value}\n              onChange={onChange}\n              defaultChecked={defaultChecked}\n              checked={checked}\n              disabled={restProps.disabled}\n            >\n              {iconChecked}\n            </Radio>\n          )}\n        </div>\n      )}\n    </Tappable>\n  );\n};\n"],"names":["React","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","Keys","pressedKey","ActionSheetContext","Tappable","Subhead","Text","Title","isRealClickEvent","Radio","styles","ActionSheetItem","children","autoCloseDisabled","mode","meta","subtitle","before","after","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","isCancelItem","restProps","platform","onItemClick","actionSheetMode","onClose","onActionSheetClose","useContext","sizeY","Component","undefined","isRich","isCentered","onItemClickHandler","useCallback","e","action","immediateAction","autoClose","Boolean","onKeyDown","event","ENTER","onItemClickImpl","activeMode","active","baseClassName","host","ios","modeCancel","modeDestructive","sizeYCompact","rich","menu","div","className","container","ellipsis","content","centered","weight","level","disabled"],"mappings":"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"}

package/dist/cssm/components/AdaptivityProvider/AdaptivityContext.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from "react";
 export const AdaptivityContext = /*#__PURE__*/ React.createContext({});
 

package/dist/cssm/components/AdaptivityProvider/AdaptivityContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AdaptivityProvider/AdaptivityContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { SizeTypeValues, ViewHeightType, ViewWidthType } from '../../lib/adaptivity';\n\nexport interface SizeProps {\n  sizeX?: SizeTypeValues;\n  sizeY?: SizeTypeValues;\n}\n\nexport interface AdaptivityProps extends SizeProps {\n  /**\n   * @ignore\n   */\n  viewWidth?: ViewWidthType;\n  /**\n   * @ignore\n   */\n  viewHeight?: ViewHeightType;\n  /**\n   * @ignore\n   */\n  hasPointer?: boolean;\n  /**\n   * @ignore\n   */\n  hasHover?: boolean;\n}\n\nexport const AdaptivityContext: React.Context<AdaptivityProps> =\n  React.createContext<AdaptivityProps>({});\n"],"names":["React","AdaptivityContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AA2B/B,OAAO,MAAMC,kCACXD,MAAME,aAAa,CAAkB,CAAC,GAAG"}
+{"version":3,"sources":["../../../../src/components/AdaptivityProvider/AdaptivityContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SizeTypeValues, ViewHeightType, ViewWidthType } from '../../lib/adaptivity';\n\nexport interface SizeProps {\n  sizeX?: SizeTypeValues;\n  sizeY?: SizeTypeValues;\n}\n\nexport interface AdaptivityProps extends SizeProps {\n  /**\n   * @ignore\n   */\n  viewWidth?: ViewWidthType;\n  /**\n   * @ignore\n   */\n  viewHeight?: ViewHeightType;\n  /**\n   * @ignore\n   */\n  hasPointer?: boolean;\n  /**\n   * @ignore\n   */\n  hasHover?: boolean;\n}\n\nexport const AdaptivityContext: React.Context<AdaptivityProps> =\n  React.createContext<AdaptivityProps>({});\n"],"names":["React","AdaptivityContext","createContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AA2B/B,OAAO,MAAMC,kCACXD,MAAME,aAAa,CAAkB,CAAC,GAAG"}

package/dist/cssm/components/Alert/Alert.js

@@ -7,7 +7,7 @@ import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJS
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { useCSSKeyframesAnimationController } from "../../lib/animation/index.js";
 import { stopPropagation } from "../../lib/utils.js";
-import { ModalPopoutPortal } from "../AppRoot/ModalPopoutPortal.js";
+import { AppRootPortal } from "../AppRoot/AppRootPortal.js";
 import { useScrollLock } from "../AppRoot/ScrollContext.js";
 import { FocusTrap } from "../FocusTrap/FocusTrap.js";
 import { IconButton } from "../IconButton/IconButton.js";
@@ -54,7 +54,7 @@ import styles from "./Alert.module.css";
         close
     ]);
     useScrollLock();
-    return /*#__PURE__*/ _jsx(ModalPopoutPortal, {
+    return /*#__PURE__*/ _jsx(AppRootPortal, {
         usePortal: usePortal,
         children: /*#__PURE__*/ _jsx(PopoutWrapper, {
             className: className,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { stopPropagation } from '../../lib/utils';\nimport type {\n  AlignType,\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n} from '../../types';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport type { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly,\n    HasDataAttribute {\n  title: string;\n  /**\n   * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,\n   * то в аргументы `action` передаётся объект с функцией close,\n   * вызвав которую можно закрыть `action` вручную.\n   */\n  action?: (args?: { close?: VoidFunction }) => void;\n  /**\n   * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство\n   * позволяет отключить такое поведение\n   */\n  autoCloseDisabled?: boolean;\n  mode: AlertActionMode;\n}\n\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    HasRootRef<HTMLDivElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actionsAlign?: AlignType;\n  actions?: AlertActionInterface[];\n  renderAction?: (props: AlertActionProps) => React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  onClose: VoidFunction;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   * Доступно только в `compact`-режиме, не отображается на `iOS`\n   */\n  dismissButtonMode?: 'inside' | 'outside';\n  /**\n   * `data-testid` для кнопки закрытия\n   */\n  dismissButtonTestId?: string;\n  usePortal?: AppRootPortalProps['usePortal'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions,\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  title,\n  description,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  renderAction,\n  actionsAlign,\n  dismissButtonMode = 'outside',\n  dismissButtonTestId,\n  getRootRef,\n  usePortal,\n  ...restProps\n}: AlertProps): React.ReactNode => {\n  const generatedId = React.useId();\n\n  const titleId = `vkui-alert-${generatedId}-title`;\n  const descriptionId = `vkui-alert-${generatedId}-description`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const [closing, setClosing] = React.useState(false);\n  const itemActionCallbackRef = React.useRef(noop);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closing ? 'exit' : 'enter',\n    {\n      onExited() {\n        itemActionCallbackRef.current();\n        itemActionCallbackRef.current = noop;\n        onClose();\n      },\n    },\n  );\n  const isDismissButtonVisible = isDesktop && platform !== 'ios';\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n  }, []);\n\n  const onItemClick = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action: itemAction, autoCloseDisabled = false } = item;\n\n      if (autoCloseDisabled) {\n        itemAction && itemAction({ close });\n      } else {\n        if (itemAction) {\n          itemActionCallbackRef.current = itemAction;\n        }\n        setClosing(true);\n      }\n    },\n    [close],\n  );\n\n  useScrollLock();\n\n  return (\n    <ModalPopoutPortal usePortal={usePortal}>\n      <PopoutWrapper\n        className={className}\n        closing={closing}\n        style={style}\n        onClick={close}\n        getRootRef={getRootRef}\n      >\n        <FocusTrap\n          {...restProps}\n          {...animationHandlers}\n          getRootRef={elementRef}\n          onClick={stopPropagation}\n          onClose={close}\n          autoFocus={animationState === 'entered'}\n          className={classNames(\n            styles.host,\n            platform === 'ios' && styles.ios,\n            platform === 'vkcom' && styles.vkcom,\n            closing ? styles.closing : styles.opening,\n            isDesktop && styles.desktop,\n          )}\n          role=\"alertdialog\"\n          aria-modal\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n        >\n          <div\n            className={classNames(\n              styles.content,\n              dismissButtonMode === 'inside' && styles.contentWithButton,\n            )}\n          >\n            {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}\n            {hasReactNode(description) && (\n              <AlertDescription id={descriptionId}>{description}</AlertDescription>\n            )}\n            {children}\n            {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n              <IconButton\n                label={dismissLabel}\n                className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}\n                onClick={close}\n                hoverMode=\"opacity\"\n                activeMode=\"opacity\"\n                data-testid={dismissButtonTestId}\n              >\n                <Icon20Cancel />\n              </IconButton>\n            )}\n          </div>\n          <AlertActions\n            actions={actions}\n            actionsAlign={actionsAlign}\n            actionsLayout={actionsLayout}\n            renderAction={renderAction}\n            onItemClick={onItemClick}\n          />\n          {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n              {dismissLabel}\n            </ModalDismissButton>\n          )}\n        </FocusTrap>\n      </PopoutWrapper>\n    </ModalPopoutPortal>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","ModalPopoutPortal","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertDescription","AlertTitle","styles","Alert","actions","actionsLayout","children","className","style","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","getRootRef","usePortal","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","closing","setClosing","useState","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","onClick","autoFocus","host","ios","vkcom","opening","desktop","role","aria-modal","aria-labelledby","aria-describedby","div","content","contentWithButton","id","label","dismiss","hoverMode","activeMode","data-testid"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useCSSKeyframesAnimationController } from '../../lib/animation';\nimport { stopPropagation } from '../../lib/utils';\nimport type {\n  AlignType,\n  AnchorHTMLAttributesOnly,\n  HasDataAttribute,\n  HasRootRef,\n} from '../../types';\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport type { ButtonProps } from '../Button/Button';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } from './AlertTypography';\nimport styles from './Alert.module.css';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport interface AlertActionInterface\n  extends Pick<ButtonProps, 'Component'>,\n    AnchorHTMLAttributesOnly,\n    HasDataAttribute {\n  title: string;\n  /**\n   * Обработчик клика на опцию. Если свойство `autoCloseDisabled` включено,\n   * то в аргументы `action` передаётся объект с функцией close,\n   * вызвав которую можно закрыть `action` вручную.\n   */\n  action?: (args?: { close?: VoidFunction }) => void;\n  /**\n   * По умолчанию клик на опцию вызывает переданную в `Alert` функцию `onClose`, данное свойство\n   * позволяет отключить такое поведение\n   */\n  autoCloseDisabled?: boolean;\n  mode: AlertActionMode;\n}\n\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, 'title'>,\n    HasRootRef<HTMLDivElement> {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actionsAlign?: AlignType;\n  actions?: AlertActionInterface[];\n  renderAction?: (props: AlertActionProps) => React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  onClose: VoidFunction;\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   * Доступно только в `compact`-режиме, не отображается на `iOS`\n   */\n  dismissButtonMode?: 'inside' | 'outside';\n  /**\n   * `data-testid` для кнопки закрытия\n   */\n  dismissButtonTestId?: string;\n  usePortal?: AppRootPortalProps['usePortal'];\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  actions,\n  actionsLayout = 'horizontal',\n  children,\n  className,\n  style,\n  title,\n  description,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  renderAction,\n  actionsAlign,\n  dismissButtonMode = 'outside',\n  dismissButtonTestId,\n  getRootRef,\n  usePortal,\n  ...restProps\n}: AlertProps): React.ReactNode => {\n  const generatedId = React.useId();\n\n  const titleId = `vkui-alert-${generatedId}-title`;\n  const descriptionId = `vkui-alert-${generatedId}-description`;\n\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const [closing, setClosing] = React.useState(false);\n  const itemActionCallbackRef = React.useRef(noop);\n  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(\n    closing ? 'exit' : 'enter',\n    {\n      onExited() {\n        itemActionCallbackRef.current();\n        itemActionCallbackRef.current = noop;\n        onClose();\n      },\n    },\n  );\n  const isDismissButtonVisible = isDesktop && platform !== 'ios';\n  const elementRef = React.useRef<HTMLDivElement>(null);\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n  }, []);\n\n  const onItemClick = React.useCallback(\n    (item: AlertActionInterface) => {\n      const { action: itemAction, autoCloseDisabled = false } = item;\n\n      if (autoCloseDisabled) {\n        itemAction && itemAction({ close });\n      } else {\n        if (itemAction) {\n          itemActionCallbackRef.current = itemAction;\n        }\n        setClosing(true);\n      }\n    },\n    [close],\n  );\n\n  useScrollLock();\n\n  return (\n    <AppRootPortal usePortal={usePortal}>\n      <PopoutWrapper\n        className={className}\n        closing={closing}\n        style={style}\n        onClick={close}\n        getRootRef={getRootRef}\n      >\n        <FocusTrap\n          {...restProps}\n          {...animationHandlers}\n          getRootRef={elementRef}\n          onClick={stopPropagation}\n          onClose={close}\n          autoFocus={animationState === 'entered'}\n          className={classNames(\n            styles.host,\n            platform === 'ios' && styles.ios,\n            platform === 'vkcom' && styles.vkcom,\n            closing ? styles.closing : styles.opening,\n            isDesktop && styles.desktop,\n          )}\n          role=\"alertdialog\"\n          aria-modal\n          aria-labelledby={titleId}\n          aria-describedby={descriptionId}\n        >\n          <div\n            className={classNames(\n              styles.content,\n              dismissButtonMode === 'inside' && styles.contentWithButton,\n            )}\n          >\n            {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}\n            {hasReactNode(description) && (\n              <AlertDescription id={descriptionId}>{description}</AlertDescription>\n            )}\n            {children}\n            {isDismissButtonVisible && dismissButtonMode === 'inside' && (\n              <IconButton\n                label={dismissLabel}\n                className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}\n                onClick={close}\n                hoverMode=\"opacity\"\n                activeMode=\"opacity\"\n                data-testid={dismissButtonTestId}\n              >\n                <Icon20Cancel />\n              </IconButton>\n            )}\n          </div>\n          <AlertActions\n            actions={actions}\n            actionsAlign={actionsAlign}\n            actionsLayout={actionsLayout}\n            renderAction={renderAction}\n            onItemClick={onItemClick}\n          />\n          {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n              {dismissLabel}\n            </ModalDismissButton>\n          )}\n        </FocusTrap>\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","AppRootPortal","useScrollLock","FocusTrap","IconButton","ModalDismissButton","PopoutWrapper","AlertActions","AlertDescription","AlertTitle","styles","Alert","actions","actionsLayout","children","className","style","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","getRootRef","usePortal","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","closing","setClosing","useState","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","onClick","autoFocus","host","ios","vkcom","opening","desktop","role","aria-modal","aria-labelledby","aria-describedby","div","content","contentWithButton","id","label","dismiss","hoverMode","activeMode","data-testid"],"mappings":"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"}

package/dist/cssm/components/Alert/AlertAction.js

@@ -9,7 +9,7 @@ import styles from "./Alert.module.css";
 const AlertActionIos = ({ mode, ...restProps })=>{
     return /*#__PURE__*/ _jsx(Tappable, {
         Component: restProps.href ? 'a' : 'button',
-        className: classNames(styles.action, mode === 'destructive' && styles.actionModeDestructive, mode === 'cancel' && styles.actionModeCancel),
+        baseClassName: classNames(styles.action, mode === 'destructive' && styles.actionModeDestructive, mode === 'cancel' && styles.actionModeCancel),
         ...restProps
     });
 };

package/dist/cssm/components/Alert/AlertAction.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/AlertAction.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { AnchorHTMLAttributesOnly } from '../../types';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport type { AlertActionInterface } from './Alert';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionProps\n  extends Pick<AlertActionInterface, 'Component' | 'mode'>,\n    AnchorHTMLAttributesOnly {\n  children: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n}\n\nconst AlertActionIos = ({ mode, ...restProps }: AlertActionProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      className={classNames(\n        styles.action,\n        mode === 'destructive' && styles.actionModeDestructive,\n        mode === 'cancel' && styles.actionModeCancel,\n      )}\n      {...restProps}\n    />\n  );\n};\n\nconst AlertActionBase = ({ mode, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n\n  let buttonMode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === 'vkcom') {\n    buttonMode = mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(styles.button, mode === 'cancel' && styles.buttonModeCancel)}\n      mode={buttonMode}\n      size=\"m\"\n      {...restProps}\n    />\n  );\n};\n\nexport const AlertAction = (props: AlertActionProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return <AlertActionIos {...props} />;\n  }\n\n  return <AlertActionBase {...props} />;\n};\n"],"names":["React","classNames","usePlatform","Button","Tappable","styles","AlertActionIos","mode","restProps","Component","href","className","action","actionModeDestructive","actionModeCancel","AlertActionBase","platform","buttonMode","button","buttonModeCancel","size","AlertAction","props"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,MAAM,QAA0B,sBAAmB;AAC5D,SAASC,QAAQ,QAAQ,0BAAuB;AAEhD,OAAOC,YAAY,qBAAqB;AASxC,MAAMC,iBAAiB,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA6B;IAC9D,qBACE,KAACJ;QACCK,WAAWD,UAAUE,IAAI,GAAG,MAAM;QAClCC,WAAWV,WACTI,OAAOO,MAAM,EACbL,SAAS,iBAAiBF,OAAOQ,qBAAqB,EACtDN,SAAS,YAAYF,OAAOS,gBAAgB;QAE7C,GAAGN,SAAS;;AAGnB;AAEA,MAAMO,kBAAkB,CAAC,EAAER,IAAI,EAAE,GAAGC,WAA6B;IAC/D,MAAMQ,WAAWd;IAEjB,IAAIe,aAAkC;IAEtC,IAAID,aAAa,SAAS;QACxBC,aAAaV,SAAS,WAAW,cAAc;IACjD;IAEA,qBACE,KAACJ;QACCQ,WAAWV,WAAWI,OAAOa,MAAM,EAAEX,SAAS,YAAYF,OAAOc,gBAAgB;QACjFZ,MAAMU;QACNG,MAAK;QACJ,GAAGZ,SAAS;;AAGnB;AAEA,OAAO,MAAMa,cAAc,CAACC;IAC1B,MAAMN,WAAWd;IAEjB,IAAIc,aAAa,OAAO;QACtB,qBAAO,KAACV;YAAgB,GAAGgB,KAAK;;IAClC;IAEA,qBAAO,KAACP;QAAiB,GAAGO,KAAK;;AACnC,EAAE"}
+{"version":3,"sources":["../../../../src/components/Alert/AlertAction.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { AnchorHTMLAttributesOnly } from '../../types';\nimport { Button, type ButtonProps } from '../Button/Button';\nimport { Tappable } from '../Tappable/Tappable';\nimport type { AlertActionInterface } from './Alert';\nimport styles from './Alert.module.css';\n\nexport interface AlertActionProps\n  extends Pick<AlertActionInterface, 'Component' | 'mode'>,\n    AnchorHTMLAttributesOnly {\n  children: string;\n  onClick: React.MouseEventHandler<HTMLElement>;\n}\n\nconst AlertActionIos = ({ mode, ...restProps }: AlertActionProps) => {\n  return (\n    <Tappable\n      Component={restProps.href ? 'a' : 'button'}\n      baseClassName={classNames(\n        styles.action,\n        mode === 'destructive' && styles.actionModeDestructive,\n        mode === 'cancel' && styles.actionModeCancel,\n      )}\n      {...restProps}\n    />\n  );\n};\n\nconst AlertActionBase = ({ mode, ...restProps }: AlertActionProps) => {\n  const platform = usePlatform();\n\n  let buttonMode: ButtonProps['mode'] = 'tertiary';\n\n  if (platform === 'vkcom') {\n    buttonMode = mode === 'cancel' ? 'secondary' : 'primary';\n  }\n\n  return (\n    <Button\n      className={classNames(styles.button, mode === 'cancel' && styles.buttonModeCancel)}\n      mode={buttonMode}\n      size=\"m\"\n      {...restProps}\n    />\n  );\n};\n\nexport const AlertAction = (props: AlertActionProps): React.ReactNode => {\n  const platform = usePlatform();\n\n  if (platform === 'ios') {\n    return <AlertActionIos {...props} />;\n  }\n\n  return <AlertActionBase {...props} />;\n};\n"],"names":["React","classNames","usePlatform","Button","Tappable","styles","AlertActionIos","mode","restProps","Component","href","baseClassName","action","actionModeDestructive","actionModeCancel","AlertActionBase","platform","buttonMode","className","button","buttonModeCancel","size","AlertAction","props"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,MAAM,QAA0B,sBAAmB;AAC5D,SAASC,QAAQ,QAAQ,0BAAuB;AAEhD,OAAOC,YAAY,qBAAqB;AASxC,MAAMC,iBAAiB,CAAC,EAAEC,IAAI,EAAE,GAAGC,WAA6B;IAC9D,qBACE,KAACJ;QACCK,WAAWD,UAAUE,IAAI,GAAG,MAAM;QAClCC,eAAeV,WACbI,OAAOO,MAAM,EACbL,SAAS,iBAAiBF,OAAOQ,qBAAqB,EACtDN,SAAS,YAAYF,OAAOS,gBAAgB;QAE7C,GAAGN,SAAS;;AAGnB;AAEA,MAAMO,kBAAkB,CAAC,EAAER,IAAI,EAAE,GAAGC,WAA6B;IAC/D,MAAMQ,WAAWd;IAEjB,IAAIe,aAAkC;IAEtC,IAAID,aAAa,SAAS;QACxBC,aAAaV,SAAS,WAAW,cAAc;IACjD;IAEA,qBACE,KAACJ;QACCe,WAAWjB,WAAWI,OAAOc,MAAM,EAAEZ,SAAS,YAAYF,OAAOe,gBAAgB;QACjFb,MAAMU;QACNI,MAAK;QACJ,GAAGb,SAAS;;AAGnB;AAEA,OAAO,MAAMc,cAAc,CAACC;IAC1B,MAAMP,WAAWd;IAEjB,IAAIc,aAAa,OAAO;QACtB,qBAAO,KAACV;YAAgB,GAAGiB,KAAK;;IAClC;IAEA,qBAAO,KAACR;QAAiB,GAAGQ,KAAK;;AACnC,EAAE"}

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

@@ -2,64 +2,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker.js";
-import { useObjectMemo } from "../../hooks/useObjectMemo.js";
 import { useSyncHTMLWithBaseVKUIClasses } from "../../hooks/useSyncHTMLWithBaseVKUIClasses.js";
 import { useSyncHTMLWithTokens } from "../../hooks/useSyncHTMLWithTokens.js";
-import { getDocumentBody } from "../../lib/dom.js";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { AppRootContext } from "./AppRootContext.js";
 import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
 import { ElementScrollController, GlobalScrollController } from "./ScrollContext.js";
-import { extractPortalRootByProp } from "./helpers.js";
 import styles from "./AppRoot.module.css";
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
- */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot: portalRootProp, 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, ...props })=>{
     const appRootRef = React.useRef(null);
-    const popoutModalContainerRef = React.useRef(null);
-    const [portalRoot, setPortalRoot] = React.useState(portalRootProp ? extractPortalRootByProp(portalRootProp) : null);
-    useIsomorphicLayoutEffect(function syncPortalRootWithPortalRootProp() {
-        const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;
-        if (portalRootProp !== undefined) {
-            setPortalRoot(portalByProp);
-        }
-    }, [
-        portalRootProp
-    ]);
-    useIsomorphicLayoutEffect(function removePortalRootOnUnmount() {
-        // Контейнер PortalRoot создаётся при первом вызове модалки или
-        // поповера использующего AppRootPortal.
-        // Потом он переиспользуется и не удаляется пока
-        // приложение не размонтируется.
-        // И создаётся только если в приложение не был передан
-        // пользовательский контейнер через свойство portalRootProp
-        // Сделано для поддержки SSR, чтобы при старте приложения
-        // никаких новых нод в DOM не создавалось.
-        const documentBody = getDocumentBody(appRootRef.current);
-        return function cleanup() {
-            if (portalRoot) {
-                const isPortalRootPassedByProps = Boolean(portalRootProp);
-                if (!isPortalRootPassedByProps) {
-                    // удаляем portalRoot из дома только если он
-                    // был создан в AppRootPortal.
-                    // Если он был передан через пропы - удалять нельзя
-                    documentBody.removeChild(portalRoot);
-                }
-            }
-        };
-    }, [
-        portalRootProp
-    ]);
     const ScrollController = React.useMemo(()=>scroll === 'contain' ? ElementScrollController : GlobalScrollController, [
         scroll
     ]);
     const isKeyboardInputActiveRef = useKeyboardInputTracker();
-    const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);
+    const safeAreaInsets = React.useMemo(()=>safeAreaInsetsProp, [
+        safeAreaInsetsProp
+    ]);
     const contextValue = React.useMemo(()=>({
             appRoot: appRootRef,
             portalRoot,
-            popoutModalRoot: popoutModalContainerRef,
-            setPortalRoot,
             safeAreaInsets,
             embedded: mode === 'embedded',
             mode,
@@ -90,7 +52,8 @@ import styles from "./AppRoot.module.css";
     });
     /*
    * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.
-   * В режиме embedded будет выставлять только .vkui__root на контейнере.
+   * В режиме embedded будет выставлять только .vkui__root и .vkui__root--embedded на контейнере.
+   * В режиме partial мы классы не выставляем.
    */ useSyncHTMLWithBaseVKUIClasses({
         appRootRef,
         mode,

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 { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';\nimport { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';\nimport { getDocumentBody } from '../../lib/dom';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport { extractPortalRootByProp } from './helpers';\nimport type {\n  AppRootLayout,\n  AppRootMode,\n  AppRootScroll,\n  AppRootUserSelectMode,\n  SafeAreaInsets,\n} from './types';\nimport styles from './AppRoot.module.css';\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: AppRootMode;\n  /**\n   * - `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.\n   * - `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).\n   *\n   * Полезно при использовании `mode=\"embedded\"`.\n   */\n  scroll?: AppRootScroll;\n  /**\n   * см. документацию [mdn web docs | env#values](https://developer.mozilla.org/en-US/docs/Web/CSS/env#values).\n   */\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  /**\n   * Глобально задаёт тип оформления макета для компонентов\n   * [Panel](https://vkcom.github.io/VKUI/#/Panel) и [Group](https://vkcom.github.io/VKUI/#/Group).\n   */\n  layout?: AppRootLayout;\n  /**\n   * Задаёт режим выбора текста (выделения текста) для всего приложения.\n   * По умолчанию, если режим не задан, запрещает выбор текста в приложениях,\n   * запущенных в webview (по значению свойства `isWebView` из [ConfigProvider](https://vkcom.github.io/VKUI/#/ConfigProvider)).\n   *\n   * - `enabled-with-pointer` – разрешает выбор текста, если устройство ввода типа `pointer` (например, `мышь`), в остальных случаях запрещает;\n   * - `disabled` – запрещает выбор текста;\n   * - `enabled` – разрешает выбор текста.\n   *\n   * @since 6.2.0\n   */\n  userSelectMode?: AppRootUserSelectMode;\n  /*\n   * По умолчанию в режиме `mode=\"full\"` VKUI в рантайме выставляет:\n   * - класс .vkui на html элемент\n   * - класс .vkui__root на элемент-контейнер, в который монтируется VKUI\n   * С помощью этой опции такое поведение можно отключить.\n   *\n   * Для корректной работы SSR рекоммендуется выставлять эти классы самостоятельно\n   * и отключить это поводение.\n   */\n  disableSettingVKUIClassesInRuntime?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp,\n  disablePortal = false,\n  disableParentTransformForPositionFixedElements,\n  safeAreaInsets: safeAreaInsetsProp,\n  layout,\n  userSelectMode,\n  disableSettingVKUIClassesInRuntime,\n  ...props\n}: AppRootProps): React.ReactNode => {\n  const appRootRef = React.useRef<HTMLDivElement | null>(null);\n  const popoutModalContainerRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(\n    portalRootProp ? extractPortalRootByProp(portalRootProp) : null,\n  );\n\n  useIsomorphicLayoutEffect(\n    function syncPortalRootWithPortalRootProp() {\n      const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;\n      if (portalRootProp !== undefined) {\n        setPortalRoot(portalByProp);\n      }\n    },\n    [portalRootProp],\n  );\n\n  useIsomorphicLayoutEffect(\n    function removePortalRootOnUnmount() {\n      // Контейнер PortalRoot создаётся при первом вызове модалки или\n      // поповера использующего AppRootPortal.\n      // Потом он переиспользуется и не удаляется пока\n      // приложение не размонтируется.\n      // И создаётся только если в приложение не был передан\n      // пользовательский контейнер через свойство portalRootProp\n      // Сделано для поддержки SSR, чтобы при старте приложения\n      // никаких новых нод в DOM не создавалось.\n      const documentBody = getDocumentBody(appRootRef.current);\n      return function cleanup() {\n        if (portalRoot) {\n          const isPortalRootPassedByProps = Boolean(portalRootProp);\n          if (!isPortalRootPassedByProps) {\n            // удаляем portalRoot из дома только если он\n            // был создан в AppRootPortal.\n            // Если он был передан через пропы - удалять нельзя\n            documentBody.removeChild(portalRoot);\n          }\n        }\n      };\n    },\n    [portalRootProp],\n  );\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const isKeyboardInputActiveRef = useKeyboardInputTracker();\n  const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);\n  const contextValue = React.useMemo(\n    () => ({\n      appRoot: appRootRef,\n      portalRoot,\n      popoutModalRoot: popoutModalContainerRef,\n      setPortalRoot,\n      safeAreaInsets,\n      embedded: mode === 'embedded',\n      mode,\n      disablePortal,\n      layout,\n      get keyboardInput() {\n        return isKeyboardInputActiveRef.current;\n      },\n      userSelectMode,\n    }),\n    [\n      portalRoot,\n      disablePortal,\n      isKeyboardInputActiveRef,\n      layout,\n      mode,\n      safeAreaInsets,\n      userSelectMode,\n    ],\n  );\n\n  /*\n   * Вешаем класс токенов на html в режиме full.\n   * Это необходимо, чтобы цвета html элемента и скроллбара соответствовали текущей цветовой схеме:\n   * - фон html элемента виден, если пользователь оверскролит. Тогда возникает анимация bounce-эффекта и виден фон html элемента. Без токенов в черной теме будет выглядывать белый фон.\n   * - цвет системного сколлбара зависит от color-sheme свойства, значение которого задётся токенами и должно быть выставлено именно на html элементе.\n   * В режме SSR пользователи сами могу задать этот класс на html-элементе. главное, чтобы он соответствовал переданным platform и appearence свойствам.\n   */\n  useSyncHTMLWithTokens({ appRootRef, enable: mode === 'full' });\n  /*\n   * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.\n   * В режиме embedded будет выставлять только .vkui__root на контейнере.\n   */\n  useSyncHTMLWithBaseVKUIClasses({\n    appRootRef,\n    mode,\n    enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime,\n  });\n\n  return mode === 'partial' ? (\n    <AppRootContext.Provider value={contextValue}>\n      <ScrollController elRef={appRootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  ) : (\n    <AppRootContext.Provider value={contextValue}>\n      <AppRootStyleContainer\n        getRootRef={appRootRef}\n        className={\n          mode === 'embedded' && !disableParentTransformForPositionFixedElements\n            ? styles.transformForPositionFixedElements\n            : undefined\n        }\n        {...props}\n      >\n        <ScrollController elRef={appRootRef}>{children}</ScrollController>\n      </AppRootStyleContainer>\n    </AppRootContext.Provider>\n  );\n};\n"],"names":["React","useKeyboardInputTracker","useObjectMemo","useSyncHTMLWithBaseVKUIClasses","useSyncHTMLWithTokens","getDocumentBody","useIsomorphicLayoutEffect","AppRootContext","AppRootStyleContainer","ElementScrollController","GlobalScrollController","extractPortalRootByProp","styles","AppRoot","children","mode","scroll","portalRoot","portalRootProp","disablePortal","disableParentTransformForPositionFixedElements","safeAreaInsets","safeAreaInsetsProp","layout","userSelectMode","disableSettingVKUIClassesInRuntime","props","appRootRef","useRef","popoutModalContainerRef","setPortalRoot","useState","syncPortalRootWithPortalRootProp","portalByProp","undefined","removePortalRootOnUnmount","documentBody","current","cleanup","isPortalRootPassedByProps","Boolean","removeChild","ScrollController","useMemo","isKeyboardInputActiveRef","contextValue","appRoot","popoutModalRoot","embedded","keyboardInput","enable","Provider","value","elRef","getRootRef","className","transformForPositionFixedElements"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,8BAA8B,QAAQ,gDAA6C;AAC5F,SAASC,qBAAqB,QAAQ,uCAAoC;AAC1E,SAASC,eAAe,QAAQ,mBAAgB;AAChD,SAASC,yBAAyB,QAAQ,yCAAsC;AAChF,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,qBAAqB,QAAQ,6BAA0B;AAChE,SAASC,uBAAuB,EAAEC,sBAAsB,QAAQ,qBAAkB;AAClF,SAASC,uBAAuB,QAAQ,eAAY;AAQpD,OAAOC,YAAY,uBAAuB;AA4D1C;;CAEC,GACD,OAAO,MAAMC,UAAU,CAAC,EACtBC,QAAQ,EACRC,OAAO,MAAM,EACbC,SAAS,QAAQ,EACjBC,YAAYC,cAAc,EAC1BC,gBAAgB,KAAK,EACrBC,8CAA8C,EAC9CC,gBAAgBC,kBAAkB,EAClCC,MAAM,EACNC,cAAc,EACdC,kCAAkC,EAClC,GAAGC,OACU;IACb,MAAMC,aAAa3B,MAAM4B,MAAM,CAAwB;IACvD,MAAMC,0BAA0B7B,MAAM4B,MAAM,CAAwB;IACpE,MAAM,CAACX,YAAYa,cAAc,GAAG9B,MAAM+B,QAAQ,CAChDb,iBAAiBP,wBAAwBO,kBAAkB;IAG7DZ,0BACE,SAAS0B;QACP,MAAMC,eAAef,iBAAiBP,wBAAwBO,kBAAkB;QAChF,IAAIA,mBAAmBgB,WAAW;YAChCJ,cAAcG;QAChB;IACF,GACA;QAACf;KAAe;IAGlBZ,0BACE,SAAS6B;QACP,+DAA+D;QAC/D,wCAAwC;QACxC,gDAAgD;QAChD,gCAAgC;QAChC,sDAAsD;QACtD,2DAA2D;QAC3D,yDAAyD;QACzD,0CAA0C;QAC1C,MAAMC,eAAe/B,gBAAgBsB,WAAWU,OAAO;QACvD,OAAO,SAASC;YACd,IAAIrB,YAAY;gBACd,MAAMsB,4BAA4BC,QAAQtB;gBAC1C,IAAI,CAACqB,2BAA2B;oBAC9B,4CAA4C;oBAC5C,8BAA8B;oBAC9B,mDAAmD;oBACnDH,aAAaK,WAAW,CAACxB;gBAC3B;YACF;QACF;IACF,GACA;QAACC;KAAe;IAGlB,MAAMwB,mBAAmB1C,MAAM2C,OAAO,CACpC,IAAO3B,WAAW,YAAYP,0BAA0BC,wBACxD;QAACM;KAAO;IAGV,MAAM4B,2BAA2B3C;IACjC,MAAMoB,iBAAiBnB,cAAcoB;IACrC,MAAMuB,eAAe7C,MAAM2C,OAAO,CAChC,IAAO,CAAA;YACLG,SAASnB;YACTV;YACA8B,iBAAiBlB;YACjBC;YACAT;YACA2B,UAAUjC,SAAS;YACnBA;YACAI;YACAI;YACA,IAAI0B,iBAAgB;gBAClB,OAAOL,yBAAyBP,OAAO;YACzC;YACAb;QACF,CAAA,GACA;QACEP;QACAE;QACAyB;QACArB;QACAR;QACAM;QACAG;KACD;IAGH;;;;;;GAMC,GACDpB,sBAAsB;QAAEuB;QAAYuB,QAAQnC,SAAS;IAAO;IAC5D;;;GAGC,GACDZ,+BAA+B;QAC7BwB;QACAZ;QACAmC,QAAQnC,SAAS,aAAa,CAACU;IACjC;IAEA,OAAOV,SAAS,0BACd,KAACR,eAAe4C,QAAQ;QAACC,OAAOP;kBAC9B,cAAA,KAACH;YAAiBW,OAAO1B;sBAAab;;uBAGxC,KAACP,eAAe4C,QAAQ;QAACC,OAAOP;kBAC9B,cAAA,KAACrC;YACC8C,YAAY3B;YACZ4B,WACExC,SAAS,cAAc,CAACK,iDACpBR,OAAO4C,iCAAiC,GACxCtB;YAEL,GAAGR,KAAK;sBAET,cAAA,KAACgB;gBAAiBW,OAAO1B;0BAAab;;;;AAI9C,EAAE"}
+{"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"}

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

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

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

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

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

@@ -3,36 +3,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { useColorScheme } from "../../hooks/useColorScheme.js";
 import { createPortal } from "../../lib/createPortal.js";
-import { getDocumentBody } from "../../lib/dom.js";
+import { useDOM } from "../../lib/dom.js";
 import { isRefObject } from "../../lib/isRefObject.js";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
 import { ColorSchemeProvider } from "../ColorSchemeProvider/ColorSchemeProvider.js";
 import { AppRootContext } from "./AppRootContext.js";
 import { AppRootStyleContainer } from "./AppRootStyleContainer.js";
 export const AppRootPortal = ({ children, usePortal, className })=>{
-    const { setPortalRoot, appRoot, mode, disablePortal: disableCreatePortalInGlobalPortalRoot } = React.useContext(AppRootContext);
+    const { mode, disablePortal: disableCreatePortalInGlobalPortalRoot } = React.useContext(AppRootContext);
     const colorScheme = useColorScheme();
     const canUsePortal = shouldUsePortal(usePortal, mode, Boolean(disableCreatePortalInGlobalPortalRoot));
     const portalContainer = usePortalContainer(usePortal);
-    useIsomorphicLayoutEffect(// Создаём контейнер для портала по запросу один раз
-    // и пока приложение не размонтируется.
-    // Удаление созданной ноды происходит в AppRoot
-    function initializePortalRootIfNeeded() {
-        const shouldCreatePortalRoot = canUsePortal && portalContainer === null;
-        if (shouldCreatePortalRoot) {
-            const documentBody = getDocumentBody(appRoot.current);
-            const portal = documentBody.ownerDocument.createElement('div');
-            documentBody.appendChild(portal);
-            setPortalRoot(portal);
-        }
-    // Note:
-    // Очистка и удаление `portalRoot` делегируется `AppRoot`, т.к. экземпляров `AppRootPortal` может быть несколько и размонтирование одного из них удалит `portalRoot`, что сломает работу других экземпляров.
-    }, [
-        canUsePortal,
-        appRoot,
-        portalContainer,
-        setPortalRoot
-    ]);
     if (canUsePortal && portalContainer) {
         return createPortal(/*#__PURE__*/ _jsx(ColorSchemeProvider, {
             value: colorScheme,
@@ -54,14 +34,17 @@ function shouldUsePortal(usePortal, mode, disableCreatePortalInGlobalPortalRoot)
     return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;
 }
 function usePortalContainer(usePortal) {
-    const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);
-    if (typeof usePortal === 'boolean' || usePortal === undefined) {
-        return portalRoot;
+    const { portalRoot: portalRootFromContext } = React.useContext(AppRootContext);
+    const { document } = useDOM();
+    if (usePortal && typeof usePortal !== 'boolean') {
+        return isRefObject(usePortal) ? usePortal.current : usePortal;
     }
-    if (usePortal === 'SplitLayout') {
-        return popoutModalRoot.current || portalRoot;
-    }
-    return isRefObject(usePortal) ? usePortal.current : usePortal;
+    const resolvedPortalFromContext = isRefObject(portalRootFromContext) ? portalRootFromContext.current : portalRootFromContext;
+    // если portalRoot не передали через AppRoot, то мы используем body
+    // мы можем использовать body как портал,
+    // так как все стили передаются вместе с AppRootStyleContainer
+    const portalRoot = resolvedPortalFromContext || document?.body || null;
+    return portalRoot;
 }
 
 //# sourceMappingURL=AppRootPortal.js.map

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 { getDocumentBody } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { HasChildren } from '../../types';\nimport { ColorSchemeProvider } from '../ColorSchemeProvider/ColorSchemeProvider';\nimport { AppRootContext, type AppRootContextInterface } from './AppRootContext';\nimport { AppRootStyleContainer } from './AppRootStyleContainer';\n\nexport interface AppRootPortalProps extends HasChildren {\n  /**\n   * - При передаче `true` будет использовать `portalRoot` из контекста `AppRoot`.\n   * - При передаче элемента будут игнорироваться `portalRoot` и `disablePortal` из контекста `AppRoot`.\n   * - При передаче `SplitLayout` будет использоваться контейнер внутри `SplitLayout`, сразу после контента приложения.\n   *   Если контейнера `SplitLayout` в приложении нет, то будет использован глобальный `portalRoot`, чаще всего\n   *   это последний дочерний элемент `body`.\n   */\n  usePortal?: boolean | HTMLElement | React.RefObject<HTMLElement> | null | 'SplitLayout';\n  className?: string;\n}\n\nexport const AppRootPortal = ({\n  children,\n  usePortal,\n  className,\n}: AppRootPortalProps): React.ReactNode => {\n  const {\n    setPortalRoot,\n    appRoot,\n    mode,\n    disablePortal: disableCreatePortalInGlobalPortalRoot,\n  } = React.useContext(AppRootContext);\n  const colorScheme = useColorScheme();\n\n  const canUsePortal = shouldUsePortal(\n    usePortal,\n    mode,\n    Boolean(disableCreatePortalInGlobalPortalRoot),\n  );\n  const portalContainer = usePortalContainer(usePortal);\n\n  useIsomorphicLayoutEffect(\n    // Создаём контейнер для портала по запросу один раз\n    // и пока приложение не размонтируется.\n    // Удаление созданной ноды происходит в AppRoot\n    function initializePortalRootIfNeeded() {\n      const shouldCreatePortalRoot = canUsePortal && portalContainer === null;\n      if (shouldCreatePortalRoot) {\n        const documentBody = getDocumentBody(appRoot.current);\n        const portal = documentBody.ownerDocument.createElement('div');\n        documentBody.appendChild(portal);\n\n        setPortalRoot(portal);\n      }\n\n      // Note:\n      // Очистка и удаление `portalRoot` делегируется `AppRoot`, т.к. экземпляров `AppRootPortal` может быть несколько и размонтирование одного из них удалит `portalRoot`, что сломает работу других экземпляров.\n    },\n    [canUsePortal, appRoot, portalContainer, setPortalRoot],\n  );\n\n  if (canUsePortal && portalContainer) {\n    return createPortal(\n      <ColorSchemeProvider value={colorScheme}>\n        <AppRootStyleContainer className={className}>{children}</AppRootStyleContainer>\n      </ColorSchemeProvider>,\n      portalContainer,\n    );\n  }\n\n  return children;\n};\n\nfunction shouldUsePortal(\n  usePortal: AppRootPortalProps['usePortal'],\n  mode: AppRootContextInterface['mode'],\n  disableCreatePortalInGlobalPortalRoot: boolean,\n) {\n  if (usePortal === undefined) {\n    return disableCreatePortalInGlobalPortalRoot === false && mode !== 'full';\n  }\n\n  if (typeof usePortal !== 'boolean') {\n    return true;\n  }\n\n  return disableCreatePortalInGlobalPortalRoot === false && usePortal === true;\n}\n\nfunction usePortalContainer(usePortal: AppRootPortalProps['usePortal']): HTMLElement | null {\n  const { portalRoot, popoutModalRoot } = React.useContext(AppRootContext);\n  if (typeof usePortal === 'boolean' || usePortal === undefined) {\n    return portalRoot;\n  }\n\n  if (usePortal === 'SplitLayout') {\n    return popoutModalRoot.current || portalRoot;\n  }\n\n  return isRefObject(usePortal) ? usePortal.current : usePortal;\n}\n"],"names":["React","useColorScheme","createPortal","getDocumentBody","isRefObject","useIsomorphicLayoutEffect","ColorSchemeProvider","AppRootContext","AppRootStyleContainer","AppRootPortal","children","usePortal","className","setPortalRoot","appRoot","mode","disablePortal","disableCreatePortalInGlobalPortalRoot","useContext","colorScheme","canUsePortal","shouldUsePortal","Boolean","portalContainer","usePortalContainer","initializePortalRootIfNeeded","shouldCreatePortalRoot","documentBody","current","portal","ownerDocument","createElement","appendChild","value","undefined","portalRoot","popoutModalRoot"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,YAAY,QAAQ,4BAAyB;AACtD,SAASC,eAAe,QAAQ,mBAAgB;AAChD,SAASC,WAAW,QAAQ,2BAAwB;AACpD,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,cAAc,QAAsC,sBAAmB;AAChF,SAASC,qBAAqB,QAAQ,6BAA0B;AAchE,OAAO,MAAMC,gBAAgB,CAAC,EAC5BC,QAAQ,EACRC,SAAS,EACTC,SAAS,EACU;IACnB,MAAM,EACJC,aAAa,EACbC,OAAO,EACPC,IAAI,EACJC,eAAeC,qCAAqC,EACrD,GAAGjB,MAAMkB,UAAU,CAACX;IACrB,MAAMY,cAAclB;IAEpB,MAAMmB,eAAeC,gBACnBV,WACAI,MACAO,QAAQL;IAEV,MAAMM,kBAAkBC,mBAAmBb;IAE3CN,0BACE,oDAAoD;IACpD,uCAAuC;IACvC,+CAA+C;IAC/C,SAASoB;QACP,MAAMC,yBAAyBN,gBAAgBG,oBAAoB;QACnE,IAAIG,wBAAwB;YAC1B,MAAMC,eAAexB,gBAAgBW,QAAQc,OAAO;YACpD,MAAMC,SAASF,aAAaG,aAAa,CAACC,aAAa,CAAC;YACxDJ,aAAaK,WAAW,CAACH;YAEzBhB,cAAcgB;QAChB;IAEA,QAAQ;IACR,4MAA4M;IAC9M,GACA;QAACT;QAAcN;QAASS;QAAiBV;KAAc;IAGzD,IAAIO,gBAAgBG,iBAAiB;QACnC,OAAOrB,2BACL,KAACI;YAAoB2B,OAAOd;sBAC1B,cAAA,KAACX;gBAAsBI,WAAWA;0BAAYF;;YAEhDa;IAEJ;IAEA,OAAOb;AACT,EAAE;AAEF,SAASW,gBACPV,SAA0C,EAC1CI,IAAqC,EACrCE,qCAA8C;IAE9C,IAAIN,cAAcuB,WAAW;QAC3B,OAAOjB,0CAA0C,SAASF,SAAS;IACrE;IAEA,IAAI,OAAOJ,cAAc,WAAW;QAClC,OAAO;IACT;IAEA,OAAOM,0CAA0C,SAASN,cAAc;AAC1E;AAEA,SAASa,mBAAmBb,SAA0C;IACpE,MAAM,EAAEwB,UAAU,EAAEC,eAAe,EAAE,GAAGpC,MAAMkB,UAAU,CAACX;IACzD,IAAI,OAAOI,cAAc,aAAaA,cAAcuB,WAAW;QAC7D,OAAOC;IACT;IAEA,IAAIxB,cAAc,eAAe;QAC/B,OAAOyB,gBAAgBR,OAAO,IAAIO;IACpC;IAEA,OAAO/B,YAAYO,aAAaA,UAAUiB,OAAO,GAAGjB;AACtD"}
+{"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"}

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

@@ -1,6 +1,5 @@
 import { isRefObject } from "../../lib/isRefObject.js";
 import styles from "./AppRoot.module.css";
-export const getParentElement = (el)=>el ? el.parentElement : null;
 export const extractPortalRootByProp = (portalRootProp)=>isRefObject(portalRootProp) ? portalRootProp.current : portalRootProp;
 export const CUSTOM_PROPERTY_INSET_PREFIX = `--vkui_internal--safe_area_inset_`;
 export function getSafeAreaInsetsAsCssVariables(safeAreaInsets) {

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 getParentElement = (el: HTMLElement | null): HTMLElement | null =>\n  el ? el.parentElement : null;\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","getParentElement","el","parentElement","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,mBAAmB,CAACC,KAC/BA,KAAKA,GAAGC,aAAa,GAAG,KAAK;AAE/B,OAAO,MAAMC,0BAA0B,CACrCC,iBACwBN,YAAYM,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,OAAOnB,OAAOqB,WAAW;gBAC3B;gBAEA,OAAOrB,OAAOsB,cAAc;YAC9B;QACA,KAAK;YACH,OAAOtB,OAAOsB,cAAc;QAC9B,KAAK;YACH,OAAO;QACT;YACE,OAAOL,YAAYjB,OAAOsB,cAAc,GAAG;IAC/C;AACF"}
+{"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"}