@vkontakte/vkui 7.1.3 → 7.2.1

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 { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\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    Pick<UseFocusTrapProps, 'restoreFocus'>,\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          {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n              {dismissLabel}\n            </ModalDismissButton>\n          )}\n          <AlertActions\n            actions={actions}\n            actionsAlign={actionsAlign}\n            actionsLayout={actionsLayout}\n            renderAction={renderAction}\n            onItemClick={onItemClick}\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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"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\nimport { warnOnce } from '../../lib/warnOnce';\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 { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport type { AlertActionProps } from './AlertAction';\nimport { AlertBase } from './AlertBase';\n\ntype AlertActionMode = 'cancel' | 'destructive' | 'default';\n\nexport type { AlertActionProps };\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    Pick<UseFocusTrapProps, 'restoreFocus'>,\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  /**\n   * Передает атрибут `data-testid` для заголовка\n   */\n  titleTestId?: string;\n  /**\n   * Передает атрибут `data-testid` для описания\n   */\n  descriptionTestId?: string;\n  usePortal?: AppRootPortalProps['usePortal'];\n  /**\n   * По умолчанию событие onClick не всплывает\n   */\n  allowClickPropagation?: boolean;\n}\n\nconst warn = warnOnce('Alert');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Alert\n */\nexport const Alert = ({\n  usePortal,\n  style,\n  className,\n  getRootRef,\n  ...restProps\n}: AlertProps): React.ReactNode => {\n  const [closing, setClosing] = React.useState(false);\n\n  const close = React.useCallback(() => {\n    setClosing(true);\n  }, []);\n\n  useScrollLock();\n\n  if (\n    process.env.NODE_ENV === 'development' &&\n    !restProps.title &&\n    !restProps['aria-label'] &&\n    !restProps['aria-labelledby']\n  ) {\n    warn(\n      'Если \"title\" не используется, то необходимо задать либо \"aria-label\", либо \"aria-labelledby\" (см. правило axe aria-dialog-name)',\n    );\n  }\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        strategy=\"fixed\"\n      >\n        <AlertBase {...restProps} closing={closing} setClosing={setClosing} />\n      </PopoutWrapper>\n    </AppRootPortal>\n  );\n};\n"],"names":["React","warnOnce","AppRootPortal","useScrollLock","PopoutWrapper","AlertBase","warn","Alert","usePortal","style","className","getRootRef","restProps","closing","setClosing","useState","close","useCallback","process","env","NODE_ENV","title","onClick","strategy"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,QAAQ,QAAQ,wBAAqB;AAQ9C,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,aAAa,QAAQ,8BAA2B;AAEzD,SAASC,aAAa,QAAQ,oCAAiC;AAE/D,SAASC,SAAS,QAAQ,iBAAc;AAgExC,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,QAAQ,CAAC,EACpBC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,UAAU,EACV,GAAGC,WACQ;IACX,MAAM,CAACC,SAASC,WAAW,GAAGd,MAAMe,QAAQ,CAAC;IAE7C,MAAMC,QAAQhB,MAAMiB,WAAW,CAAC;QAC9BH,WAAW;IACb,GAAG,EAAE;IAELX;IAEA,IACEe,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBACzB,CAACR,UAAUS,KAAK,IAChB,CAACT,SAAS,CAAC,aAAa,IACxB,CAACA,SAAS,CAAC,kBAAkB,EAC7B;QACAN,KACE;IAEJ;IAEA,qBACE,KAACJ;QAAcM,WAAWA;kBACxB,cAAA,KAACJ;YACCM,WAAWA;YACXG,SAASA;YACTJ,OAAOA;YACPa,SAASN;YACTL,YAAYA;YACZY,UAAS;sBAET,cAAA,KAAClB;gBAAW,GAAGO,SAAS;gBAAEC,SAASA;gBAASC,YAAYA;;;;AAIhE,EAAE"}

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

@@ -1,19 +1,17 @@
 .host {
   --vkui_internal--alert_animation_scale_initial: 0.95;
 
-  -webkit-user-select: none;
-
-     -moz-user-select: none;
-
-          user-select: none;
-  color: var(--vkui--color_text_primary);
   position: relative;
   min-inline-size: 280px;
   max-inline-size: 416px;
   margin-block: auto;
   margin-inline: 24px;
-  box-shadow: var(--vkui--elevation4);
+  color: var(--vkui--color_text_primary);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
   border-radius: var(--vkui--size_border_radius_paper--regular);
+  box-shadow: var(--vkui--elevation4);
 }
 
 .desktop {
@@ -33,12 +31,12 @@
 
 .host::before {
   position: absolute;
-  inset-inline-start: 0;
   inset-block-start: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 100%;
-  background-color: var(--vkui--color_background_modal);
   content: '';
+  background-color: var(--vkui--color_background_modal);
   border-radius: inherit;
 }
 
@@ -59,9 +57,9 @@
 }
 
 .actions {
+  position: relative;
   display: flex;
   max-inline-size: 100%;
-  position: relative;
   padding-block: 0 12px;
   padding-inline: 12px;
 }
@@ -96,18 +94,18 @@
 }
 
 .actionsAlignLeft {
-  justify-content: flex-start;
   align-items: flex-start;
+  justify-content: flex-start;
 }
 
 .actionsAlignCenter {
-  justify-content: center;
   align-items: center;
+  justify-content: center;
 }
 
 .actionsAlignRight {
-  justify-content: flex-end;
   align-items: flex-end;
+  justify-content: flex-end;
 }
 
 /**
@@ -143,11 +141,11 @@
 }
 
 .ios .content::after {
-  content: '';
   position: absolute;
   inset-block-end: 0;
-  block-size: 1px;
   inset-inline: 0;
+  block-size: 1px;
+  content: '';
   background: var(--vkui--color_separator_primary_alpha);
   transform-origin: center bottom;
 }
@@ -162,27 +160,27 @@
 }
 
 .ios .action {
-  font-family: var(--vkui--font_family_base);
   position: relative;
-  font-size: 17px;
-  line-height: 44px;
-  color: var(--vkui--color_text_accent);
-  border: 0;
+  display: block;
+  block-size: 44px;
   padding-block: 0;
   padding-inline: 6px;
   margin: 0;
-  block-size: 44px;
-  display: block;
-  text-align: center;
-  text-decoration: none;
   overflow: hidden;
   text-overflow: ellipsis;
+  font-family: var(--vkui--font_family_base);
+  font-size: 17px;
+  line-height: 44px;
+  color: var(--vkui--color_text_accent);
+  text-align: center;
+  text-decoration: none;
+  border: 0;
   border-radius: 0;
 }
 
 .ios .action::after {
-  content: '';
   position: absolute;
+  content: '';
   background: var(--vkui--color_separator_primary_alpha);
 }
 
@@ -213,8 +211,8 @@
 }
 
 .ios .actionsDirectionVertical .action::after {
-  inset-inline-start: 0;
   inset-block-end: 0;
+  inset-inline-start: 0;
   inline-size: 100%;
   block-size: 1px;
   transform-origin: center bottom;
@@ -227,8 +225,8 @@
 .ios .actionsDirectionVertical .action:last-child {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
-  border-end-end-radius: 12px;
   border-end-start-radius: 12px;
+  border-end-end-radius: 12px;
 }
 
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
@@ -266,10 +264,10 @@
  */
 
 .vkcom {
+  inline-size: 400px;
   box-shadow:
     0 0 2px rgba(0, 0, 0, 0.12),
     0 0 96px rgba(0, 0, 0, 0.16);
-  inline-size: 400px;
 }
 
 .vkcom .content {
@@ -292,9 +290,9 @@
 
 .dismiss {
   position: absolute;
-  color: var(--vkui--color_icon_secondary);
   inset-block-start: 8px;
   inset-inline-end: 8px;
+  color: var(--vkui--color_icon_secondary);
 }
 
 @media screen and (prefers-reduced-motion: reduce) {

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

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Icon20Cancel } from "@vkontakte/icons";
+import { classNames, hasReactNode, noop } from "@vkontakte/vkjs";
+import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
+import { usePlatform } from "../../hooks/usePlatform.js";
+import { useCSSKeyframesAnimationController } from "../../lib/animation/index.js";
+import { stopPropagation } from "../../lib/utils.js";
+import { FocusTrap } from "../FocusTrap/FocusTrap.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton.js";
+import { AlertActions } from "./AlertActions.js";
+import { AlertDescription, AlertTitle } from "./AlertTypography.js";
+import styles from "./Alert.module.css";
+export const AlertBase = ({ actions, actionsLayout = 'horizontal', children, title, description, onClose, dismissLabel = 'Закрыть предупреждение', renderAction, actionsAlign, dismissButtonMode = 'outside', dismissButtonTestId, onClick, allowClickPropagation = false, titleTestId, descriptionTestId, closing, setClosing, ...restProps })=>{
+    const generatedId = React.useId();
+    const titleId = `vkui-alert-${generatedId}-title`;
+    const descriptionId = `vkui-alert-${generatedId}-description`;
+    const platform = usePlatform();
+    const { isDesktop } = useAdaptivityWithJSMediaQueries();
+    const itemActionCallbackRef = React.useRef(noop);
+    const [animationState, animationHandlers] = useCSSKeyframesAnimationController(closing ? 'exit' : 'enter', {
+        onExited () {
+            itemActionCallbackRef.current();
+            itemActionCallbackRef.current = noop;
+            onClose();
+        }
+    });
+    const isDismissButtonVisible = isDesktop && platform !== 'ios';
+    const elementRef = React.useRef(null);
+    const close = React.useCallback(()=>{
+        setClosing?.(true);
+    }, [
+        setClosing
+    ]);
+    const onItemClick = React.useCallback((item)=>{
+        const { action: itemAction, autoCloseDisabled = false } = item;
+        if (autoCloseDisabled) {
+            itemAction && itemAction({
+                close
+            });
+        } else {
+            if (itemAction) {
+                itemActionCallbackRef.current = itemAction;
+            }
+            setClosing?.(true);
+        }
+    }, [
+        close,
+        setClosing
+    ]);
+    const handleClick = allowClickPropagation ? onClick : (event)=>{
+        stopPropagation(event);
+        onClick?.(event);
+    };
+    return /*#__PURE__*/ _jsxs(FocusTrap, {
+        ...animationHandlers,
+        onClick: handleClick,
+        getRootRef: elementRef,
+        onClose: close,
+        autoFocus: animationState === 'entered',
+        className: classNames(styles.host, platform === 'ios' && styles.ios, platform === 'vkcom' && styles.vkcom, closing ? styles.closing : styles.opening, isDesktop && styles.desktop),
+        role: "alertdialog",
+        "aria-modal": true,
+        "aria-labelledby": titleId,
+        "aria-describedby": descriptionId,
+        ...restProps,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: classNames(styles.content, dismissButtonMode === 'inside' && styles.contentWithButton),
+                children: [
+                    hasReactNode(title) && /*#__PURE__*/ _jsx(AlertTitle, {
+                        "data-testid": titleTestId,
+                        id: titleId,
+                        children: title
+                    }),
+                    hasReactNode(description) && /*#__PURE__*/ _jsx(AlertDescription, {
+                        "data-testid": descriptionTestId,
+                        id: descriptionId,
+                        children: description
+                    }),
+                    children,
+                    isDismissButtonVisible && dismissButtonMode === 'inside' && /*#__PURE__*/ _jsx(IconButton, {
+                        label: dismissLabel,
+                        className: classNames(styles.dismiss, 'vkuiInternalAlert__dismiss'),
+                        onClick: close,
+                        hoverMode: "opacity",
+                        activeMode: "opacity",
+                        "data-testid": dismissButtonTestId,
+                        children: /*#__PURE__*/ _jsx(Icon20Cancel, {})
+                    })
+                ]
+            }),
+            isDismissButtonVisible && dismissButtonMode === 'outside' && /*#__PURE__*/ _jsx(ModalDismissButton, {
+                onClick: close,
+                "data-testid": dismissButtonTestId,
+                children: dismissLabel
+            }),
+            /*#__PURE__*/ _jsx(AlertActions, {
+                actions: actions,
+                actionsAlign: actionsAlign,
+                actionsLayout: actionsLayout,
+                renderAction: renderAction,
+                onItemClick: onItemClick
+            })
+        ]
+    });
+};
+
+//# sourceMappingURL=AlertBase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/Alert/AlertBase.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 { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { IconButton } from '../IconButton/IconButton';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { type AlertActionInterface, type AlertProps } from './Alert';\nimport { AlertActions } from './AlertActions';\nimport { AlertDescription, AlertTitle } from './AlertTypography';\nimport styles from './Alert.module.css';\n\nexport interface AlertBaseProps\n  extends Omit<AlertProps, 'usePortal' | 'className' | 'style' | 'getRootRef'> {\n  closing?: boolean;\n  setClosing?: (closing: boolean) => void;\n}\n\nexport const AlertBase = ({\n  actions,\n  actionsLayout = 'horizontal',\n  children,\n  title,\n  description,\n  onClose,\n  dismissLabel = 'Закрыть предупреждение',\n  renderAction,\n  actionsAlign,\n  dismissButtonMode = 'outside',\n  dismissButtonTestId,\n  onClick,\n  allowClickPropagation = false,\n  titleTestId,\n  descriptionTestId,\n  closing,\n  setClosing,\n  ...restProps\n}: AlertBaseProps) => {\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  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  }, [setClosing]);\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, setClosing],\n  );\n\n  const handleClick = allowClickPropagation\n    ? onClick\n    : (event: React.MouseEvent<HTMLElement>) => {\n        stopPropagation(event);\n        onClick?.(event);\n      };\n\n  return (\n    <FocusTrap\n      {...animationHandlers}\n      onClick={handleClick}\n      getRootRef={elementRef}\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      {...restProps}\n    >\n      <div\n        className={classNames(\n          styles.content,\n          dismissButtonMode === 'inside' && styles.contentWithButton,\n        )}\n      >\n        {hasReactNode(title) && (\n          <AlertTitle data-testid={titleTestId} id={titleId}>\n            {title}\n          </AlertTitle>\n        )}\n        {hasReactNode(description) && (\n          <AlertDescription data-testid={descriptionTestId} id={descriptionId}>\n            {description}\n          </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      {isDismissButtonVisible && dismissButtonMode === 'outside' && (\n        <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>\n          {dismissLabel}\n        </ModalDismissButton>\n      )}\n      <AlertActions\n        actions={actions}\n        actionsAlign={actionsAlign}\n        actionsLayout={actionsLayout}\n        renderAction={renderAction}\n        onItemClick={onItemClick}\n      />\n    </FocusTrap>\n  );\n};\n"],"names":["React","Icon20Cancel","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","usePlatform","useCSSKeyframesAnimationController","stopPropagation","FocusTrap","IconButton","ModalDismissButton","AlertActions","AlertDescription","AlertTitle","styles","AlertBase","actions","actionsLayout","children","title","description","onClose","dismissLabel","renderAction","actionsAlign","dismissButtonMode","dismissButtonTestId","onClick","allowClickPropagation","titleTestId","descriptionTestId","closing","setClosing","restProps","generatedId","useId","titleId","descriptionId","platform","isDesktop","itemActionCallbackRef","useRef","animationState","animationHandlers","onExited","current","isDismissButtonVisible","elementRef","close","useCallback","onItemClick","item","action","itemAction","autoCloseDisabled","handleClick","event","getRootRef","autoFocus","className","host","ios","vkcom","opening","desktop","role","aria-modal","aria-labelledby","aria-describedby","div","content","contentWithButton","data-testid","id","label","dismiss","hoverMode","activeMode"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/AlertTypography.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasChildren } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\ninterface AlertTypography extends HasChildren {\n  id: string;\n}\nexport const AlertTitle = (props: AlertTypography): React.ReactNode => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case 'ios':\n      return <Title className={styles.title} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles.title} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\nexport const AlertDescription = (props: AlertTypography): React.ReactNode => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case 'vkcom':\n      return <Footnote className={styles.description} {...props} />;\n    case 'ios':\n      return <Caption className={styles.description} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles.description} weight=\"3\" {...props} />;\n  }\n};\n"],"names":["React","usePlatform","Caption","Footnote","Text","Title","styles","AlertTitle","props","platform","className","title","weight","level","AlertDescription","description","Component"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,qBAAqB;AAKxC,OAAO,MAAMC,aAAa,CAACC;IACzB,MAAMC,WAAWR;IAEjB,OAAQQ;QACN,KAAK;YACH,qBAAO,KAACJ;gBAAMK,WAAWJ,OAAOK,KAAK;gBAAEC,QAAO;gBAAIC,OAAM;gBAAK,GAAGL,KAAK;;QACvE;YACE,qBAAO,KAACH;gBAAMK,WAAWJ,OAAOK,KAAK;gBAAEC,QAAO;gBAAIC,OAAM;gBAAK,GAAGL,KAAK;;IACzE;AACF,EAAE;AACF,OAAO,MAAMM,mBAAmB,CAACN;IAC/B,MAAMC,WAAWR;IAEjB,OAAQQ;QACN,KAAK;YACH,qBAAO,KAACN;gBAASO,WAAWJ,OAAOS,WAAW;gBAAG,GAAGP,KAAK;;QAC3D,KAAK;YACH,qBAAO,KAACN;gBAAQQ,WAAWJ,OAAOS,WAAW;gBAAG,GAAGP,KAAK;;QAC1D;YACE,qBAAO,KAACJ;gBAAKY,WAAU;gBAAON,WAAWJ,OAAOS,WAAW;gBAAEH,QAAO;gBAAK,GAAGJ,KAAK;;IACrF;AACF,EAAE"}
+{"version":3,"sources":["../../../../src/components/Alert/AlertTypography.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasChildren } from '../../types';\nimport { Caption } from '../Typography/Caption/Caption';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Alert.module.css';\n\ninterface AlertTypography extends HasChildren {\n  'id': string;\n  'data-testid'?: string;\n}\nexport const AlertTitle = (props: AlertTypography): React.ReactNode => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case 'ios':\n      return <Title className={styles.title} weight=\"1\" level=\"3\" {...props} />;\n    default:\n      return <Title className={styles.title} weight=\"2\" level=\"2\" {...props} />;\n  }\n};\nexport const AlertDescription = (props: AlertTypography): React.ReactNode => {\n  const platform = usePlatform();\n\n  switch (platform) {\n    case 'vkcom':\n      return <Footnote className={styles.description} {...props} />;\n    case 'ios':\n      return <Caption className={styles.description} {...props} />;\n    default:\n      return <Text Component=\"span\" className={styles.description} weight=\"3\" {...props} />;\n  }\n};\n"],"names":["React","usePlatform","Caption","Footnote","Text","Title","styles","AlertTitle","props","platform","className","title","weight","level","AlertDescription","description","Component"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,QAAQ,QAAQ,qCAAkC;AAC3D,SAASC,IAAI,QAAQ,6BAA0B;AAC/C,SAASC,KAAK,QAAQ,+BAA4B;AAClD,OAAOC,YAAY,qBAAqB;AAMxC,OAAO,MAAMC,aAAa,CAACC;IACzB,MAAMC,WAAWR;IAEjB,OAAQQ;QACN,KAAK;YACH,qBAAO,KAACJ;gBAAMK,WAAWJ,OAAOK,KAAK;gBAAEC,QAAO;gBAAIC,OAAM;gBAAK,GAAGL,KAAK;;QACvE;YACE,qBAAO,KAACH;gBAAMK,WAAWJ,OAAOK,KAAK;gBAAEC,QAAO;gBAAIC,OAAM;gBAAK,GAAGL,KAAK;;IACzE;AACF,EAAE;AACF,OAAO,MAAMM,mBAAmB,CAACN;IAC/B,MAAMC,WAAWR;IAEjB,OAAQQ;QACN,KAAK;YACH,qBAAO,KAACN;gBAASO,WAAWJ,OAAOS,WAAW;gBAAG,GAAGP,KAAK;;QAC3D,KAAK;YACH,qBAAO,KAACN;gBAAQQ,WAAWJ,OAAOS,WAAW;gBAAG,GAAGP,KAAK;;QAC1D;YACE,qBAAO,KAACJ;gBAAKY,WAAU;gBAAON,WAAWJ,OAAOS,WAAW;gBAAEH,QAAO;gBAAK,GAAGJ,KAAK;;IACrF;AACF,EAAE"}

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

@@ -1,10 +1,10 @@
 .host {
+  inline-size: 100%;
   /* чтобы можно было ограничить размеры приложения
    * извне с помощью max-height, max-width */
   max-inline-size: inherit;
-  max-block-size: inherit;
-  inline-size: 100%;
   block-size: 100%;
+  max-block-size: inherit;
 }
 
 .layoutCard {

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

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivity } from "../../../hooks/useAdaptivity.js";
-import { useTokensClassName } from "../../../lib/tokens/index.js";
+import { useTokensClassName } from "../../../lib/tokens/useTokenClassName.js";
 import { useConfigProvider } from "../../ConfigProvider/ConfigProviderContext.js";
 import { RootComponent } from "../../RootComponent/RootComponent.js";
 import { AppRootContext } from "../AppRootContext.js";

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

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

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

@@ -15,12 +15,12 @@ const clearDisableScrollStyle = (node)=>{
         overflowX: ''
     });
 };
-const getPageYOffsetWithoutKeyboardHeight = (window)=>{
+const getPageYOffsetWithoutKeyboardHeight = (window, scrollTop)=>{
     // Note: здесь расчёт на то, что `clientHeight` равен `window.innerHeight`.
     //  Это достигается тем, что тегу `html` задали`height: 100%` и у него нет отступов сверху и снизу. Если есть отступы,
     //  то надо задать `box-sizing: border-box`, чтобы они не учитывались.
     const diffOfClientHeightAndViewportHeight = window.document.documentElement.clientHeight - window.innerHeight;
-    return window.pageYOffset - diffOfClientHeightAndViewportHeight;
+    return scrollTop - diffOfClientHeightAndViewportHeight;
 };
 export const ScrollContext = /*#__PURE__*/ React.createContext({
     getScroll: ()=>({
@@ -64,20 +64,85 @@ export const useScroll = ()=>React.useContext(ScrollContext);
         decrementScrollLockCounter
     ];
 }
+export function useManualScroll() {
+    const { scrollTo, getScroll } = React.useContext(ScrollContext);
+    return React.useMemo(()=>({
+            scrollTo,
+            getScroll
+        }), [
+        getScroll,
+        scrollTo
+    ]);
+}
+const _scrollTo = ({ x, y, scrollWidth, clientWidth, scrollHeight, clientHeight, scrollLockEnabled, lockedElement, elementToScroll })=>{
+    // Some iOS versions do not normalize scroll — do it manually.
+    const left = x ? clamp(x, 0, scrollWidth - clientWidth) : 0;
+    const top = y ? clamp(y, 0, scrollHeight - clientHeight) : 0;
+    if (scrollLockEnabled) {
+        Object.assign(lockedElement.style, {
+            left: `-${left}px`,
+            top: `-${top}px`
+        });
+    } else {
+        elementToScroll.scrollTo({
+            left,
+            top
+        });
+    }
+};
+const _getScroll = ({ xOffset, yOffset, element, scrollLockEnabled, customCalcY = (v)=>v })=>{
+    const elementStyles = element.style;
+    const [scrollLeft, scrollTop] = scrollLockEnabled ? [
+        -parseFloat(elementStyles.left || '0'),
+        -parseFloat(elementStyles.top || '0')
+    ] : [
+        xOffset,
+        yOffset
+    ];
+    return {
+        x: scrollLeft,
+        y: customCalcY(scrollTop)
+    };
+};
 export const GlobalScrollController = ({ children })=>{
     const { window, document } = useDOM();
     const beforeScrollLockFnSetRef = React.useRef(new Set());
+    const scrollLockEnabledRef = React.useRef(false);
     const getScroll = React.useCallback((options = {
         compensateKeyboardHeight: true
-    })=>({
-            x: window.pageXOffset,
-            y: options.compensateKeyboardHeight ? getPageYOffsetWithoutKeyboardHeight(window) : window.pageYOffset
-        }), [
+    })=>{
+        if (!window || !document) {
+            return {
+                x: 0,
+                y: 0
+            };
+        }
+        return _getScroll({
+            xOffset: window.pageXOffset,
+            yOffset: window.pageYOffset,
+            element: document.documentElement,
+            scrollLockEnabled: scrollLockEnabledRef.current,
+            customCalcY: (scrollTop)=>options.compensateKeyboardHeight ? getPageYOffsetWithoutKeyboardHeight(window, scrollTop) : scrollTop
+        });
+    }, [
+        document,
         window
     ]);
     const scrollTo = React.useCallback((x = 0, y = 0)=>{
-        // Some iOS versions do not normalize scroll — do it manually.
-        window.scrollTo(x ? clamp(x, 0, document.body.scrollWidth - window.innerWidth) : 0, y ? clamp(y, 0, document.body.scrollHeight - window.innerHeight) : 0);
+        if (!window || !document) {
+            return;
+        }
+        _scrollTo({
+            x,
+            y,
+            scrollWidth: document.body.scrollWidth,
+            clientWidth: window.innerWidth,
+            scrollHeight: document.body.scrollHeight,
+            clientHeight: window.innerHeight,
+            scrollLockEnabled: scrollLockEnabledRef.current,
+            lockedElement: document.documentElement,
+            elementToScroll: window
+        });
     }, [
         document,
         window
@@ -86,37 +151,37 @@ export const GlobalScrollController = ({ children })=>{
         beforeScrollLockFnSetRef.current.forEach((fn)=>{
             fn();
         });
-        const scrollY = window.pageYOffset;
-        const scrollX = window.pageXOffset;
+        const { x: scrollX, y: scrollY } = getScroll({
+            compensateKeyboardHeight: false
+        });
         const overflowY = window.innerWidth > document.documentElement.clientWidth ? 'scroll' : '';
         const overflowX = window.innerHeight > document.documentElement.clientHeight ? 'scroll' : '';
         Object.assign(document.documentElement.style, {
-            overscrollBehavior: 'none'
-        });
-        Object.assign(document.body.style, {
             position: 'fixed',
-            top: `-${scrollY}px`,
-            left: `-${scrollX}px`,
             right: '0',
             overscrollBehavior: 'none',
             overflowY,
             overflowX
         });
+        scrollLockEnabledRef.current = true;
+        scrollTo(scrollX, scrollY);
     }, [
         document,
+        getScroll,
+        scrollTo,
         window
     ]);
     const disableScrollLock = React.useCallback(()=>{
-        const scrollY = document.body.style.top;
-        const scrollX = document.body.style.left;
-        Object.assign(document.documentElement.style, {
-            overscrollBehavior: ''
+        const scrollData = getScroll({
+            compensateKeyboardHeight: false
         });
-        clearDisableScrollStyle(document.body);
-        window.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
+        clearDisableScrollStyle(document.documentElement);
+        scrollLockEnabledRef.current = false;
+        scrollTo(scrollData.x, scrollData.y);
     }, [
         document,
-        window
+        getScroll,
+        scrollTo
     ]);
     const [incrementScrollLockCounter, decrementScrollLockCounter] = useScrollLockController(enableScrollLock, disableScrollLock);
     const scrollController = React.useMemo(()=>({
@@ -138,16 +203,40 @@ export const GlobalScrollController = ({ children })=>{
 };
 export const ElementScrollController = ({ elRef, children })=>{
     const beforeScrollLockFnSetRef = React.useRef(new Set());
-    const getScroll = React.useCallback(()=>({
-            x: elRef.current?.scrollLeft ?? 0,
-            y: elRef.current?.scrollTop ?? 0
-        }), [
+    const scrollLockEnabledRef = React.useRef(false);
+    const getScroll = React.useCallback(()=>{
+        const element = elRef.current;
+        if (!element) {
+            return {
+                x: 0,
+                y: 0
+            };
+        }
+        return _getScroll({
+            xOffset: element.scrollLeft,
+            yOffset: element.scrollTop,
+            element: element,
+            scrollLockEnabled: scrollLockEnabledRef.current
+        });
+    }, [
         elRef
     ]);
     const scrollTo = React.useCallback((x = 0, y = 0)=>{
         const el = elRef.current;
-        // Some iOS versions do not normalize scroll — do it manually.
-        el?.scrollTo(x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0, y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0);
+        if (!el) {
+            return;
+        }
+        _scrollTo({
+            x,
+            y,
+            scrollWidth: el.scrollWidth,
+            clientWidth: el.clientWidth,
+            scrollHeight: el.scrollHeight,
+            clientHeight: el.clientHeight,
+            scrollLockEnabled: scrollLockEnabledRef.current,
+            lockedElement: el,
+            elementToScroll: el
+        });
     }, [
         elRef
     ]);
@@ -159,32 +248,35 @@ export const ElementScrollController = ({ elRef, children })=>{
         beforeScrollLockFnSetRef.current.forEach((fn)=>{
             fn();
         });
-        const scrollY = el.scrollTop;
-        const scrollX = el.scrollLeft;
+        const { x: scrollX, y: scrollY } = getScroll();
         const overflowY = el.scrollWidth > el.clientWidth ? 'scroll' : '';
         const overflowX = el.scrollHeight > el.clientHeight ? 'scroll' : '';
         Object.assign(el.style, {
             position: 'absolute',
-            top: `-${scrollY}px`,
-            left: `-${scrollX}px`,
             right: '0',
             overflowY,
             overflowX
         });
+        scrollLockEnabledRef.current = true;
+        scrollTo(scrollX, scrollY);
     }, [
-        elRef
+        elRef,
+        getScroll,
+        scrollTo
     ]);
     const disableScrollLock = React.useCallback(()=>{
         const el = elRef.current;
         if (!el) {
             return;
         }
-        const scrollY = el.style.top;
-        const scrollX = el.style.left;
+        const scrollData = getScroll();
         clearDisableScrollStyle(el);
-        el.scrollTo(-parseInt(scrollX || '0'), -parseInt(scrollY || '0'));
+        scrollLockEnabledRef.current = false;
+        scrollTo(scrollData.x, scrollData.y);
     }, [
-        elRef
+        elRef,
+        getScroll,
+        scrollTo
     ]);
     const [incrementScrollLockCounter, decrementScrollLockCounter] = useScrollLockController(enableScrollLock, disableScrollLock);
     const scrollController = React.useMemo(()=>({