@vkontakte/vkui 4.19.0 → 4.22.0

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

@@ -17,6 +17,7 @@ import { useTimeout } from "../../hooks/useTimeout";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { warnOnce } from "../../lib/warnOnce";
+import { noop } from '@vkontakte/vkjs';
 import "./ActionSheet.css";
 var warn = warnOnce('ActionSheet');
 export var ActionSheet = function ActionSheet(_ref) {
@@ -39,15 +40,11 @@ export var ActionSheet = function ActionSheet(_ref) {
     return setClosing(true);
   };
 
-  var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      _closeAction = _React$useState4[0],
-      setCloseAction = _React$useState4[1];
+  var closeAction = React.useRef(noop);
 
   var afterClose = function afterClose() {
     restProps.onClose();
-    _closeAction && _closeAction();
-    setCloseAction(undefined);
+    closeAction.current();
   };
 
   if (process.env.NODE_ENV === 'development' && !restProps.onClose) {
@@ -60,7 +57,8 @@ export var ActionSheet = function ActionSheet(_ref) {
       hasMouse = _useAdaptivity.hasMouse;
 
   var isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);
-  var fallbackTransitionFinish = useTimeout(afterClose, platform === IOS ? 300 : 200);
+  var timeout = platform === IOS ? 300 : 200;
+  var fallbackTransitionFinish = useTimeout(afterClose, timeout);
   React.useEffect(function () {
     if (closing) {
       if (isDesktop) {
@@ -77,9 +75,10 @@ export var ActionSheet = function ActionSheet(_ref) {
       event.persist();
 
       if (autoclose) {
-        setCloseAction(function () {
+        closeAction.current = function () {
           return action && action(event);
-        });
+        };
+
         setClosing(true);
       } else {
         action && action(event);
@@ -103,9 +102,10 @@ export var ActionSheet = function ActionSheet(_ref) {
     value: contextValue
   }, createScopedElement(DropdownComponent, _extends({
     closing: closing,
-    onClose: onClose,
-    onTransitionEnd: closing && !isDesktop ? afterClose : null
-  }, restProps), (hasReactNode(header) || hasReactNode(text)) && createScopedElement("header", {
+    timeout: timeout
+  }, restProps, {
+    onClose: onClose
+  }), (hasReactNode(header) || hasReactNode(text)) && createScopedElement("header", {
     vkuiClass: "ActionSheet__header"
   }, hasReactNode(header) && createScopedElement(Caption, {
     level: "1",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":["React","PopoutWrapper","ViewWidth","ViewHeight","IOS","ActionSheetDropdownDesktop","ActionSheetDropdown","hasReactNode","ActionSheetContext","Caption","usePlatform","useTimeout","useAdaptivity","useObjectMemo","warnOnce","warn","ActionSheet","children","className","header","text","style","iosCloseItem","restProps","platform","useState","closing","setClosing","onClose","_closeAction","setCloseAction","afterClose","undefined","process","env","NODE_ENV","viewWidth","viewHeight","hasMouse","isDesktop","SMALL_TABLET","MEDIUM","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","autoclose","event","persist","contextValue","DropdownComponent","defaultProps","popupDirection"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ViewWidth, ViewHeight } from '../../hoc/withAdaptivity';\nimport { IOS } from '../../lib/platform';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { hasReactNode } from '../../lib/utils';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport Caption from '../Typography/Caption/Caption';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SharedDropdownProps, PopupDirection, ToggleRef } from './types';\nimport './ActionSheet.css';\n\nexport interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи. В v5 будет обязательным.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   * В v5 будет обязательным.\n   */\n  toggleRef?: ToggleRef;\n  /**\n   * Направление на десктопе\n   */\n  popupDirection?: PopupDirection;\n  /**\n   * Только iOS. В v5 будет обязательным.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\nconst warn = warnOnce('ActionSheet');\n\nexport const ActionSheet: React.FC<ActionSheetProps> = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n\n  const [_closeAction, setCloseAction] = React.useState<VoidFunction>();\n  const afterClose = () => {\n    restProps.onClose();\n    _closeAction && _closeAction();\n    setCloseAction(undefined);\n  };\n\n  if (process.env.NODE_ENV === 'development' && !restProps.onClose) {\n    warn('can\\'t close on outer click without onClose');\n  }\n\n  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  const fallbackTransitionFinish = useTimeout(afterClose, platform === IOS ? 300 : 200);\n  React.useEffect(() => {\n    if (closing) {\n      if (isDesktop) {\n        afterClose();\n      } else {\n        fallbackTransitionFinish.set();\n      }\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>((action, autoclose) => (event) => {\n    event.persist();\n\n    if (autoclose) {\n      setCloseAction(() => action && action(event));\n      setClosing(true);\n    } else {\n      action && action(event);\n    }\n  }, []);\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop\n    ? ActionSheetDropdownDesktop\n    : ActionSheetDropdown;\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={!isDesktop ? onClose : null}\n      hasMask={!isDesktop}\n      fixed={!isDesktop}\n    >\n      <ActionSheetContext.Provider value={contextValue}>\n        <DropdownComponent\n          closing={closing}\n          onClose={onClose}\n          onTransitionEnd={closing && !isDesktop ? afterClose : null}\n          {...restProps as Omit<SharedDropdownProps, 'closing'>}\n        >\n          {(hasReactNode(header) || hasReactNode(text)) &&\n            <header vkuiClass=\"ActionSheet__header\">\n              {hasReactNode(header) &&\n                <Caption level=\"1\" weight={platform === IOS ? 'semibold' : 'medium'} vkuiClass=\"ActionSheet__title\">\n                  {header}\n                </Caption>\n              }\n              {hasReactNode(text) && <Caption level=\"1\" weight=\"regular\" vkuiClass=\"ActionSheet__text\">{text}</Caption>}\n            </header>\n          }\n          {children}\n          {platform === IOS && !isDesktop && iosCloseItem}\n        </DropdownComponent>\n      </ActionSheetContext.Provider>\n    </PopoutWrapper>\n  );\n};\n\nActionSheet.defaultProps = {\n  popupDirection: 'bottom',\n};\n"],"file":"ActionSheet.js"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"names":["React","PopoutWrapper","ViewWidth","ViewHeight","IOS","ActionSheetDropdownDesktop","ActionSheetDropdown","hasReactNode","ActionSheetContext","Caption","usePlatform","useTimeout","useAdaptivity","useObjectMemo","warnOnce","noop","warn","ActionSheet","children","className","header","text","style","iosCloseItem","restProps","platform","useState","closing","setClosing","onClose","closeAction","useRef","afterClose","current","process","env","NODE_ENV","viewWidth","viewHeight","hasMouse","isDesktop","SMALL_TABLET","MEDIUM","timeout","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","autoclose","event","persist","contextValue","DropdownComponent","defaultProps","popupDirection"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { ViewWidth, ViewHeight } from '../../hoc/withAdaptivity';\nimport { IOS } from '../../lib/platform';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { hasReactNode } from '../../lib/utils';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport Caption from '../Typography/Caption/Caption';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { SharedDropdownProps, PopupDirection, ToggleRef } from './types';\nimport { noop } from '@vkontakte/vkjs';\nimport './ActionSheet.css';\n\nexport interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи. В v5 будет обязательным.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Элемент, рядом с которым вылезает попап на десктопе.\n   * Лучше передавать RefObject c current.\n   * В v5 будет обязательным.\n   */\n  toggleRef?: ToggleRef;\n  /**\n   * Направление на десктопе\n   */\n  popupDirection?: PopupDirection;\n  /**\n   * Только iOS. В v5 будет обязательным.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\nconst warn = warnOnce('ActionSheet');\n\nexport const ActionSheet: React.FC<ActionSheetProps> = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n\n  const closeAction = React.useRef<VoidFunction>(noop);\n  const afterClose = () => {\n    restProps.onClose();\n    closeAction.current();\n  };\n\n  if (process.env.NODE_ENV === 'development' && !restProps.onClose) {\n    warn('can\\'t close on outer click without onClose');\n  }\n\n  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET && (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  const timeout = platform === IOS ? 300 : 200;\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closing) {\n      if (isDesktop) {\n        afterClose();\n      } else {\n        fallbackTransitionFinish.set();\n      }\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>((action, autoclose) => (event) => {\n    event.persist();\n\n    if (autoclose) {\n      closeAction.current = () => action && action(event);\n      setClosing(true);\n    } else {\n      action && action(event);\n    }\n  }, []);\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop\n    ? ActionSheetDropdownDesktop\n    : ActionSheetDropdown;\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={!isDesktop ? onClose : null}\n      hasMask={!isDesktop}\n      fixed={!isDesktop}\n    >\n      <ActionSheetContext.Provider value={contextValue}>\n        <DropdownComponent\n          closing={closing}\n          timeout={timeout}\n          {...restProps as Omit<SharedDropdownProps, 'closing'>}\n          onClose={onClose}\n        >\n          {(hasReactNode(header) || hasReactNode(text)) &&\n            <header vkuiClass=\"ActionSheet__header\">\n              {hasReactNode(header) &&\n                <Caption level=\"1\" weight={platform === IOS ? 'semibold' : 'medium'} vkuiClass=\"ActionSheet__title\">\n                  {header}\n                </Caption>\n              }\n              {hasReactNode(text) && <Caption level=\"1\" weight=\"regular\" vkuiClass=\"ActionSheet__text\">{text}</Caption>}\n            </header>\n          }\n          {children}\n          {platform === IOS && !isDesktop && iosCloseItem}\n        </DropdownComponent>\n      </ActionSheetContext.Provider>\n    </PopoutWrapper>\n  );\n};\n\nActionSheet.defaultProps = {\n  popupDirection: 'bottom',\n};\n"],"file":"ActionSheet.js"}

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

@@ -5,6 +5,7 @@ import { createScopedElement } from "../../lib/jsxRuntime";
 import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
 import "./ActionSheet.css";
 
 var stopPropagation = function stopPropagation(e) {
@@ -20,7 +21,7 @@ export var ActionSheetDropdown = function ActionSheetDropdown(_ref) {
 
   var platform = usePlatform();
   var baseClaseName = getClassName('ActionSheet', platform);
-  return createScopedElement("div", _extends({}, restProps, {
+  return createScopedElement(FocusTrap, _extends({}, restProps, {
     onClick: stopPropagation,
     vkuiClass: classNames(baseClaseName, {
       'ActionSheet--closing': closing

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdown.tsx"],"names":["getClassName","classNames","usePlatform","stopPropagation","e","ActionSheetDropdown","children","closing","toggleRef","popupDirection","restProps","platform","baseClaseName"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AAEA;;AAEA,IAAMC,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD;AAAA,SAAOA,CAAC,CAACD,eAAF,EAAP;AAAA,CAAjD;;AAEA,OAAO,IAAME,mBAAkD,GAAG,SAArDA,mBAAqD,OAO5D;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,cAEI,QAFJA,cAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGT,WAAW,EAA5B;AACA,MAAMU,aAAa,GAAGZ,YAAY,CAAC,aAAD,EAAgBW,QAAhB,CAAlC;AAEA,SACE,wCACMD,SADN;AAEE,IAAA,OAAO,EAAEP,eAFX;AAGE,IAAA,SAAS,EAAEF,UAAU,CAACW,aAAD,EAAgB;AACnC,8BAAwBL;AADW,KAAhB;AAHvB,MAOGD,QAPH,CADF;AAWD,CAtBM","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SharedDropdownProps } from './types';\nimport './ActionSheet.css';\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  popupDirection,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const baseClaseName = getClassName('ActionSheet', platform);\n\n  return (\n    <div\n      {...restProps}\n      onClick={stopPropagation}\n      vkuiClass={classNames(baseClaseName, {\n        'ActionSheet--closing': closing,\n      })}\n    >\n      {children}\n    </div>\n  );\n};\n"],"file":"ActionSheetDropdown.js"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdown.tsx"],"names":["getClassName","classNames","usePlatform","FocusTrap","stopPropagation","e","ActionSheetDropdown","children","closing","toggleRef","popupDirection","restProps","platform","baseClaseName"],"mappings":";;;;AACA,SAASA,YAAT;AACA,SAASC,UAAT;AACA,SAASC,WAAT;AAEA,SAASC,SAAT;AACA;;AAEA,IAAMC,eAAwC,GAAG,SAA3CA,eAA2C,CAACC,CAAD;AAAA,SAAOA,CAAC,CAACD,eAAF,EAAP;AAAA,CAAjD;;AAEA,OAAO,IAAME,mBAAkD,GAAG,SAArDA,mBAAqD,OAO5D;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAHJC,SAGI,QAHJA,SAGI;AAAA,MAFJC,cAEI,QAFJA,cAEI;AAAA,MADDC,SACC;;AACJ,MAAMC,QAAQ,GAAGV,WAAW,EAA5B;AACA,MAAMW,aAAa,GAAGb,YAAY,CAAC,aAAD,EAAgBY,QAAhB,CAAlC;AAEA,SACE,oBAAC,SAAD,eACMD,SADN;AAEE,IAAA,OAAO,EAAEP,eAFX;AAGE,IAAA,SAAS,EAAEH,UAAU,CAACY,aAAD,EAAgB;AACnC,8BAAwBL;AADW,KAAhB;AAHvB,MAOGD,QAPH,CADF;AAWD,CAtBM","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SharedDropdownProps } from './types';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport './ActionSheet.css';\n\nconst stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();\n\nexport const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({\n  children,\n  closing,\n  // these 2 props are only omitted - ActionSheetDesktop compat\n  toggleRef,\n  popupDirection,\n  ...restProps\n}) => {\n  const platform = usePlatform();\n  const baseClaseName = getClassName('ActionSheet', platform);\n\n  return (\n    <FocusTrap\n      {...restProps}\n      onClick={stopPropagation}\n      vkuiClass={classNames(baseClaseName, {\n        'ActionSheet--closing': closing,\n      })}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"file":"ActionSheetDropdown.js"}

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

@@ -12,6 +12,7 @@ import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { warnOnce } from "../../lib/warnOnce";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useEventListener } from "../../hooks/useEventListener";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
 import "./ActionSheet.css";
 var warn = warnOnce('ActionSheet');
 
@@ -79,11 +80,14 @@ export var ActionSheetDropdownDesktop = function ActionSheetDropdownDesktop(_ref
       bodyClickListener.add(document.body);
     });
   }, []);
-  return createScopedElement("div", _extends({}, restProps, {
-    ref: elementRef,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
+  var onClick = React.useCallback(function (e) {
+    return e.stopPropagation();
+  }, []);
+  return createScopedElement(FocusTrap, _extends({
+    onClose: onClose
+  }, restProps, {
+    getRootRef: elementRef,
+    onClick: onClick,
     style: dropdownStyles,
     vkuiClass: classNames(getClassName('ActionSheet', platform), 'ActionSheet--desktop', {
       'ActionSheet--closing': closing

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownDesktop.tsx"],"names":["React","getClassName","classNames","useDOM","usePlatform","useAdaptivity","warnOnce","useIsomorphicLayoutEffect","useEventListener","warn","getEl","ref","current","ActionSheetDropdownDesktop","children","toggleRef","closing","popupDirection","onClose","restProps","window","document","platform","sizeY","elementRef","useRef","useState","left","top","opacity","pointerEvents","dropdownStyles","setDropdownStyles","toggleEl","process","env","NODE_ENV","toggleRect","getBoundingClientRect","elementRect","isTop","width","pageXOffset","pageYOffset","height","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { useDOM } from '../../lib/dom';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { SharedDropdownProps } from './types';\nimport './ActionSheet.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref as Element | null | undefined;\n}\n\nexport const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({\n  children,\n  toggleRef,\n  closing,\n  popupDirection,\n  onClose,\n  ...restProps\n}) => {\n  const { window, document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>();\n\n  const [dropdownStyles, setDropdownStyles] = React.useState<React.CSSProperties>({\n    left: 0,\n    top: 0,\n    opacity: 0,\n    pointerEvents: 'none',\n  });\n  useIsomorphicLayoutEffect(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      if (process.env.NODE_ENV === 'development') {\n        warn('toggleRef not passed');\n      }\n      return;\n    }\n\n    const toggleRect = toggleEl.getBoundingClientRect();\n    const elementRect = elementRef.current.getBoundingClientRect();\n    const isTop = popupDirection === 'top' || typeof popupDirection === 'function' && popupDirection(elementRef) === 'top';\n\n    setDropdownStyles({\n      left: toggleRect.left + toggleRect.width - elementRect.width + window.pageXOffset,\n      top: toggleRect.top + window.pageYOffset + (isTop ? -elementRect.height : toggleRect.height),\n    });\n  }, [toggleRef]);\n\n  const bodyClickListener = useEventListener('click', (e) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document.body);\n    });\n  }, []);\n\n  return (\n    <div\n      {...restProps}\n      ref={elementRef}\n      onClick={(e) => e.stopPropagation()}\n      style={dropdownStyles}\n      vkuiClass={classNames(getClassName('ActionSheet', platform), 'ActionSheet--desktop', {\n        'ActionSheet--closing': closing,\n      }, `ActionSheet--sizeY-${sizeY}`)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"file":"ActionSheetDropdownDesktop.js"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDropdownDesktop.tsx"],"names":["React","getClassName","classNames","useDOM","usePlatform","useAdaptivity","warnOnce","useIsomorphicLayoutEffect","useEventListener","FocusTrap","warn","getEl","ref","current","ActionSheetDropdownDesktop","children","toggleRef","closing","popupDirection","onClose","restProps","window","document","platform","sizeY","elementRef","useRef","useState","left","top","opacity","pointerEvents","dropdownStyles","setDropdownStyles","toggleEl","process","env","NODE_ENV","toggleRect","getBoundingClientRect","elementRect","isTop","width","pageXOffset","pageYOffset","height","bodyClickListener","e","dropdownElement","contains","target","useEffect","setTimeout","add","body","onClick","useCallback","stopPropagation"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { useDOM } from '../../lib/dom';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { SharedDropdownProps } from './types';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport './ActionSheet.css';\n\nconst warn = warnOnce('ActionSheet');\nfunction getEl(ref: SharedDropdownProps['toggleRef']): Element | null | undefined {\n  return ref && 'current' in ref ? ref.current : ref as Element | null | undefined;\n}\n\nexport const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({\n  children,\n  toggleRef,\n  closing,\n  popupDirection,\n  onClose,\n  ...restProps\n}) => {\n  const { window, document } = useDOM();\n  const platform = usePlatform();\n  const { sizeY } = useAdaptivity();\n  const elementRef = React.useRef<HTMLDivElement>();\n\n  const [dropdownStyles, setDropdownStyles] = React.useState<React.CSSProperties>({\n    left: 0,\n    top: 0,\n    opacity: 0,\n    pointerEvents: 'none',\n  });\n  useIsomorphicLayoutEffect(() => {\n    const toggleEl = getEl(toggleRef);\n    if (!toggleEl) {\n      if (process.env.NODE_ENV === 'development') {\n        warn('toggleRef not passed');\n      }\n      return;\n    }\n\n    const toggleRect = toggleEl.getBoundingClientRect();\n    const elementRect = elementRef.current.getBoundingClientRect();\n    const isTop = popupDirection === 'top' || typeof popupDirection === 'function' && popupDirection(elementRef) === 'top';\n\n    setDropdownStyles({\n      left: toggleRect.left + toggleRect.width - elementRect.width + window.pageXOffset,\n      top: toggleRect.top + window.pageYOffset + (isTop ? -elementRect.height : toggleRect.height),\n    });\n  }, [toggleRef]);\n\n  const bodyClickListener = useEventListener('click', (e: MouseEvent) => {\n    const dropdownElement = elementRef?.current;\n    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {\n      onClose();\n    }\n  });\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      bodyClickListener.add(document.body);\n    });\n  }, []);\n\n  const onClick = React.useCallback((e) => e.stopPropagation(), []);\n\n  return (\n    <FocusTrap\n      onClose={onClose}\n      {...restProps}\n      getRootRef={elementRef}\n      onClick={onClick}\n      style={dropdownStyles}\n      vkuiClass={classNames(getClassName('ActionSheet', platform), 'ActionSheet--desktop', {\n        'ActionSheet--closing': closing,\n      }, `ActionSheet--sizeY-${sizeY}`)}\n    >\n      {children}\n    </FocusTrap>\n  );\n};\n"],"file":"ActionSheetDropdownDesktop.js"}

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

@@ -23,6 +23,7 @@ import Headline from "../Typography/Headline/Headline";
 import Title from "../Typography/Title/Title";
 import Caption from "../Typography/Caption/Caption";
 import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
 import "./Alert.css";
 
 var Alert = /*#__PURE__*/function (_React$Component) {
@@ -125,6 +126,11 @@ var Alert = /*#__PURE__*/function (_React$Component) {
   }
 
   _createClass(Alert, [{
+    key: "timeout",
+    get: function get() {
+      return this.props.platform === ANDROID || this.props.platform === VKCOM ? 200 : 300;
+    }
+  }, {
     key: "waitTransitionFinish",
     value: function waitTransitionFinish(eventHandler) {
       if (transitionEvent.supported) {
@@ -132,7 +138,7 @@ var Alert = /*#__PURE__*/function (_React$Component) {
         this.element.current.addEventListener(transitionEvent.name, eventHandler);
       } else {
         clearTimeout(this.transitionFinishTimeout);
-        this.transitionFinishTimeout = setTimeout(eventHandler.bind(this), this.props.platform === ANDROID || this.props.platform === VKCOM ? 200 : 300);
+        this.transitionFinishTimeout = setTimeout(eventHandler.bind(this), this.timeout);
       }
     }
   }, {
@@ -209,9 +215,11 @@ var Alert = /*#__PURE__*/function (_React$Component) {
         closing: closing,
         style: style,
         onClick: this.onClose
-      }, createScopedElement("div", _extends({}, restProps, {
-        ref: this.element,
+      }, createScopedElement(FocusTrap, _extends({}, restProps, {
+        getRootRef: this.element,
         onClick: this.stopPropagation,
+        onClose: this.onClose,
+        timeout: this.timeout,
         vkuiClass: classNames(getClassName('Alert', platform), {
           'Alert--v': resolvedActionsLayout === 'vertical',
           'Alert--h': resolvedActionsLayout === 'horizontal',

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["React","Tappable","PopoutWrapper","getClassName","classNames","transitionEvent","ANDROID","VKCOM","IOS","withPlatform","withAdaptivity","ViewWidth","Button","hasReactNode","Headline","Title","Caption","ModalDismissButton","Alert","props","item","action","autoclose","setState","closing","waitTransitionFinish","e","propertyName","onClose","stopPropagation","i","platform","Component","href","mode","onItemClick","target","title","viewWidth","DESKTOP","element","createRef","state","eventHandler","supported","current","removeEventListener","name","addEventListener","clearTimeout","transitionFinishTimeout","setTimeout","bind","header","text","actions","actionsLayout","children","className","style","restProps","resolvedActionsLayout","canShowCloseButton","SMALL_TABLET","isDesktop","renderHeader","renderText","map","renderAction"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Tappable from '../Tappable/Tappable';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { ANDROID, VKCOM, IOS } from '../../lib/platform';\nimport { HasPlatform } from '../../types';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { withAdaptivity, AdaptivityProps, ViewWidth } from '../../hoc/withAdaptivity';\nimport Button, { ButtonProps } from '../Button/Button';\nimport { hasReactNode } from '../../lib/utils';\nimport Headline from '../Typography/Headline/Headline';\nimport Title from '../Typography/Title/Title';\nimport Caption from '../Typography/Caption/Caption';\nimport ModalDismissButton from '../ModalDismissButton/ModalDismissButton';\nimport './Alert.css';\n\nexport type AlertActionInterface = AlertProps['actions'][0] & React.AnchorHTMLAttributes<HTMLElement>;\n\nexport interface AlertAction extends Pick<ButtonProps, 'Component' | 'href'> {\n  title: string;\n  action?: VoidFunction;\n  autoclose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, AdaptivityProps {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertAction[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose?: VoidFunction;\n}\n\nexport interface AlertState {\n  closing: boolean;\n}\n\ntype TransitionEndHandler = (e?: TransitionEvent) => void;\n\ntype ItemClickHander = (item: AlertActionInterface) => () => void;\n\nclass Alert extends React.Component<AlertProps, AlertState> {\n  constructor(props: AlertProps) {\n    super(props);\n    this.element = React.createRef();\n    this.state = {\n      closing: false,\n    };\n  }\n\n  element: React.RefObject<HTMLDivElement>;\n\n  private transitionFinishTimeout: ReturnType<typeof setTimeout>;\n\n  static defaultProps: AlertProps = {\n    actionsLayout: 'horizontal',\n    actions: [],\n  };\n\n  onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {\n    const { action, autoclose } = item;\n\n    if (autoclose) {\n      this.setState({ closing: true });\n      this.waitTransitionFinish((e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          autoclose && this.props.onClose();\n          action && action();\n        }\n      });\n    } else {\n      action && action();\n    }\n  };\n\n  onClose: VoidFunction = () => {\n    this.setState({ closing: true });\n    this.waitTransitionFinish((e?: TransitionEvent) => {\n      if (!e || e.propertyName === 'opacity') {\n        this.props.onClose();\n      }\n    });\n  };\n\n  stopPropagation: React.MouseEventHandler = (e: React.SyntheticEvent) => {\n    e.stopPropagation();\n  };\n\n  waitTransitionFinish(eventHandler: TransitionEndHandler) {\n    if (transitionEvent.supported) {\n      this.element.current.removeEventListener(transitionEvent.name, eventHandler);\n      this.element.current.addEventListener(transitionEvent.name, eventHandler);\n    } else {\n      clearTimeout(this.transitionFinishTimeout);\n      this.transitionFinishTimeout = setTimeout(eventHandler.bind(this), this.props.platform === ANDROID || this.props.platform === VKCOM ? 200 : 300);\n    }\n  }\n\n  renderHeader(header: React.ReactNode) {\n    switch (this.props.platform) {\n      case VKCOM:\n        return <Headline vkuiClass=\"Alert__header\" weight=\"medium\">{header}</Headline>;\n      case IOS:\n        return <Title vkuiClass=\"Alert__header\" weight=\"semibold\" level=\"3\">{header}</Title>;\n      case ANDROID:\n        return <Title vkuiClass=\"Alert__header\" weight=\"medium\" level=\"2\">{header}</Title>;\n    }\n  }\n\n  renderText(text: React.ReactNode) {\n    switch (this.props.platform) {\n      case VKCOM:\n        return <Caption vkuiClass=\"Alert__text\" level=\"1\" weight=\"regular\">{text}</Caption>;\n      case IOS:\n        return <Caption vkuiClass=\"Alert__text\" level=\"2\" weight=\"regular\">{text}</Caption>;\n      case ANDROID:\n        return <Headline vkuiClass=\"Alert__text\" weight=\"regular\">{text}</Headline>;\n    }\n  }\n\n  renderAction = (action: AlertActionInterface, i: number) => {\n    const { platform } = this.props;\n\n    if (platform === IOS) {\n      const { Component = 'button' } = action;\n      return (\n        <Tappable\n          Component={action.href ? 'a' : Component}\n          vkuiClass={classNames('Alert__action', `Alert__action--${action.mode}`)}\n          onClick={this.onItemClick(action)}\n          href={action.href}\n          key={`alert-action-${i}`}\n          target={action.target}\n        >\n          {action.title}\n        </Tappable>\n      );\n    }\n\n    let mode: ButtonProps['mode'] = action.mode === 'cancel' ? 'secondary' : 'primary';\n\n    if (platform === ANDROID) {\n      mode = 'tertiary';\n\n      if (this.props.viewWidth === ViewWidth.DESKTOP && action.mode === 'destructive') {\n        mode = 'destructive';\n      }\n    }\n\n    return (\n      <Button\n        vkuiClass={classNames('Alert__button', `Alert__button--${action.mode}`)}\n        mode={mode}\n        size=\"m\"\n        onClick={this.onItemClick(action)}\n        Component={action.Component}\n        href={action.href}\n        key={`alert-action-${i}`}\n        target={action.target}\n      >\n        {action.title}\n      </Button>\n    );\n  };\n\n  render() {\n    const { actions, actionsLayout, children, className, style, platform, viewWidth, text, header, ...restProps } = this.props;\n    const { closing } = this.state;\n\n    const resolvedActionsLayout: AlertProps['actionsLayout'] = platform === VKCOM ? 'horizontal' : actionsLayout;\n    const canShowCloseButton = platform === VKCOM || platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET;\n    const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n\n    return (\n      <PopoutWrapper\n        className={className}\n        closing={closing}\n        style={style}\n        onClick={this.onClose}\n      >\n        <div\n          {...restProps}\n          ref={this.element}\n          onClick={this.stopPropagation}\n          vkuiClass={classNames(getClassName('Alert', platform), {\n            'Alert--v': resolvedActionsLayout === 'vertical',\n            'Alert--h': resolvedActionsLayout === 'horizontal',\n            'Alert--closing': closing,\n            'Alert--desktop': isDesktop,\n          })}\n        >\n          {canShowCloseButton && <ModalDismissButton onClick={this.onClose} />}\n          <div vkuiClass=\"Alert__content\">\n            {hasReactNode(header) && this.renderHeader(header)}\n            {hasReactNode(text) && this.renderText(text)}\n            {children}\n          </div>\n          <footer vkuiClass=\"Alert__actions\">\n            {actions.map(this.renderAction)}\n          </footer>\n        </div>\n      </PopoutWrapper>\n    );\n  }\n}\n\nexport default withPlatform(withAdaptivity(Alert, {\n  viewWidth: true,\n}));\n"],"file":"Alert.js"}
+{"version":3,"sources":["../../../../src/components/Alert/Alert.tsx"],"names":["React","Tappable","PopoutWrapper","getClassName","classNames","transitionEvent","ANDROID","VKCOM","IOS","withPlatform","withAdaptivity","ViewWidth","Button","hasReactNode","Headline","Title","Caption","ModalDismissButton","FocusTrap","Alert","props","item","action","autoclose","setState","closing","waitTransitionFinish","e","propertyName","onClose","stopPropagation","i","platform","Component","href","mode","onItemClick","target","title","viewWidth","DESKTOP","element","createRef","state","eventHandler","supported","current","removeEventListener","name","addEventListener","clearTimeout","transitionFinishTimeout","setTimeout","bind","timeout","header","text","actions","actionsLayout","children","className","style","restProps","resolvedActionsLayout","canShowCloseButton","SMALL_TABLET","isDesktop","renderHeader","renderText","map","renderAction"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport Tappable from '../Tappable/Tappable';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { ANDROID, VKCOM, IOS } from '../../lib/platform';\nimport { HasPlatform } from '../../types';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { withAdaptivity, AdaptivityProps, ViewWidth } from '../../hoc/withAdaptivity';\nimport Button, { ButtonProps } from '../Button/Button';\nimport { hasReactNode } from '../../lib/utils';\nimport Headline from '../Typography/Headline/Headline';\nimport Title from '../Typography/Title/Title';\nimport Caption from '../Typography/Caption/Caption';\nimport ModalDismissButton from '../ModalDismissButton/ModalDismissButton';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport './Alert.css';\n\nexport type AlertActionInterface = AlertProps['actions'][0] & React.AnchorHTMLAttributes<HTMLElement>;\n\nexport interface AlertAction extends Pick<ButtonProps, 'Component' | 'href'> {\n  title: string;\n  action?: VoidFunction;\n  autoclose?: boolean;\n  mode: 'cancel' | 'destructive' | 'default';\n}\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, AdaptivityProps {\n  actionsLayout?: 'vertical' | 'horizontal';\n  actions?: AlertAction[];\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  onClose?: VoidFunction;\n}\n\nexport interface AlertState {\n  closing: boolean;\n}\n\ntype TransitionEndHandler = (e?: TransitionEvent) => void;\n\ntype ItemClickHander = (item: AlertActionInterface) => () => void;\n\nclass Alert extends React.Component<AlertProps, AlertState> {\n  constructor(props: AlertProps) {\n    super(props);\n    this.element = React.createRef();\n    this.state = {\n      closing: false,\n    };\n  }\n\n  element: React.RefObject<HTMLDivElement>;\n\n  private transitionFinishTimeout: ReturnType<typeof setTimeout>;\n\n  static defaultProps: AlertProps = {\n    actionsLayout: 'horizontal',\n    actions: [],\n  };\n\n  private get timeout(): number {\n    return this.props.platform === ANDROID || this.props.platform === VKCOM ? 200 : 300;\n  }\n\n  onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {\n    const { action, autoclose } = item;\n\n    if (autoclose) {\n      this.setState({ closing: true });\n      this.waitTransitionFinish((e?: TransitionEvent) => {\n        if (!e || e.propertyName === 'opacity') {\n          autoclose && this.props.onClose();\n          action && action();\n        }\n      });\n    } else {\n      action && action();\n    }\n  };\n\n  onClose: VoidFunction = () => {\n    this.setState({ closing: true });\n    this.waitTransitionFinish((e?: TransitionEvent) => {\n      if (!e || e.propertyName === 'opacity') {\n        this.props.onClose();\n      }\n    });\n  };\n\n  stopPropagation: React.MouseEventHandler = (e: React.SyntheticEvent) => {\n    e.stopPropagation();\n  };\n\n  waitTransitionFinish(eventHandler: TransitionEndHandler) {\n    if (transitionEvent.supported) {\n      this.element.current.removeEventListener(transitionEvent.name, eventHandler);\n      this.element.current.addEventListener(transitionEvent.name, eventHandler);\n    } else {\n      clearTimeout(this.transitionFinishTimeout);\n      this.transitionFinishTimeout = setTimeout(eventHandler.bind(this), this.timeout);\n    }\n  }\n\n  renderHeader(header: React.ReactNode) {\n    switch (this.props.platform) {\n      case VKCOM:\n        return <Headline vkuiClass=\"Alert__header\" weight=\"medium\">{header}</Headline>;\n      case IOS:\n        return <Title vkuiClass=\"Alert__header\" weight=\"semibold\" level=\"3\">{header}</Title>;\n      case ANDROID:\n        return <Title vkuiClass=\"Alert__header\" weight=\"medium\" level=\"2\">{header}</Title>;\n    }\n  }\n\n  renderText(text: React.ReactNode) {\n    switch (this.props.platform) {\n      case VKCOM:\n        return <Caption vkuiClass=\"Alert__text\" level=\"1\" weight=\"regular\">{text}</Caption>;\n      case IOS:\n        return <Caption vkuiClass=\"Alert__text\" level=\"2\" weight=\"regular\">{text}</Caption>;\n      case ANDROID:\n        return <Headline vkuiClass=\"Alert__text\" weight=\"regular\">{text}</Headline>;\n    }\n  }\n\n  renderAction = (action: AlertActionInterface, i: number) => {\n    const { platform } = this.props;\n\n    if (platform === IOS) {\n      const { Component = 'button' } = action;\n      return (\n        <Tappable\n          Component={action.href ? 'a' : Component}\n          vkuiClass={classNames('Alert__action', `Alert__action--${action.mode}`)}\n          onClick={this.onItemClick(action)}\n          href={action.href}\n          key={`alert-action-${i}`}\n          target={action.target}\n        >\n          {action.title}\n        </Tappable>\n      );\n    }\n\n    let mode: ButtonProps['mode'] = action.mode === 'cancel' ? 'secondary' : 'primary';\n\n    if (platform === ANDROID) {\n      mode = 'tertiary';\n\n      if (this.props.viewWidth === ViewWidth.DESKTOP && action.mode === 'destructive') {\n        mode = 'destructive';\n      }\n    }\n\n    return (\n      <Button\n        vkuiClass={classNames('Alert__button', `Alert__button--${action.mode}`)}\n        mode={mode}\n        size=\"m\"\n        onClick={this.onItemClick(action)}\n        Component={action.Component}\n        href={action.href}\n        key={`alert-action-${i}`}\n        target={action.target}\n      >\n        {action.title}\n      </Button>\n    );\n  };\n\n  render() {\n    const { actions, actionsLayout, children, className, style, platform, viewWidth, text, header, ...restProps } = this.props;\n    const { closing } = this.state;\n\n    const resolvedActionsLayout: AlertProps['actionsLayout'] = platform === VKCOM ? 'horizontal' : actionsLayout;\n    const canShowCloseButton = platform === VKCOM || platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET;\n    const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;\n\n    return (\n      <PopoutWrapper\n        className={className}\n        closing={closing}\n        style={style}\n        onClick={this.onClose}\n      >\n        <FocusTrap\n          {...restProps}\n          getRootRef={this.element}\n          onClick={this.stopPropagation}\n          onClose={this.onClose}\n          timeout={this.timeout}\n          vkuiClass={classNames(getClassName('Alert', platform), {\n            'Alert--v': resolvedActionsLayout === 'vertical',\n            'Alert--h': resolvedActionsLayout === 'horizontal',\n            'Alert--closing': closing,\n            'Alert--desktop': isDesktop,\n          })}\n        >\n          {canShowCloseButton && <ModalDismissButton onClick={this.onClose} />}\n          <div vkuiClass=\"Alert__content\">\n            {hasReactNode(header) && this.renderHeader(header)}\n            {hasReactNode(text) && this.renderText(text)}\n            {children}\n          </div>\n          <footer vkuiClass=\"Alert__actions\">\n            {actions.map(this.renderAction)}\n          </footer>\n        </FocusTrap>\n      </PopoutWrapper>\n    );\n  }\n}\n\nexport default withPlatform(withAdaptivity(Alert, {\n  viewWidth: true,\n}));\n"],"file":"Alert.js"}

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

@@ -151,7 +151,8 @@ export var AppRoot = withAdaptivity(function (_ref) {
     value: {
       appRoot: rootRef,
       portalRoot: portalRoot,
-      embedded: mode === 'embedded'
+      embedded: mode === 'embedded',
+      keyboardInput: isKeyboardInputActive
     }
   }, createScopedElement(ScrollContext.Provider, {
     value: scrollController

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"names":["React","useDOM","classNames","AppRootContext","withAdaptivity","SizeType","useIsomorphicLayoutEffect","classScopingMode","IconSettingsProvider","elementScrollController","globalScrollController","ScrollContext","noop","warnOnce","useKeyboardInputTracker","useInsets","warn","AppRoot","children","_mode","mode","_embedded","embedded","sizeX","hasMouse","noLegacyClasses","scroll","props","isKeyboardInputActive","rootRef","useRef","useState","portalRoot","setPortalRoot","window","document","insets","initialized","current","documentElement","classList","add","noConflict","process","env","NODE_ENV","portal","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","remove","key","hasOwnProperty","inset","style","setProperty","removeProperty","REGULAR","container","scrollController","useMemo","content","appRoot"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,MAAT;AACA,SAASC,UAAT;AACA,SAASC,cAAT;AACA,SAASC,cAAT,EAAyBC,QAAzB;AACA,SAASC,yBAAT;AACA,SAASC,gBAAT;AACA,SAASC,oBAAT,QAAqC,kBAArC;AACA,SAASC,uBAAT,EAAkCC,sBAAlC,EAA0DC,aAA1D;AACA,SAASC,IAAT;AACA,SAASC,QAAT;AACA,SAASC,uBAAT;AACA,SAASC,SAAT;AAEA,uB,CAEA;;AACA;;AAaA,IAAMC,IAAI,GAAGH,QAAQ,CAAC,SAAD,CAArB;AACA,OAAO,IAAMI,OAA+B,GAAGb,cAAc,CAAC,gBAG1C;AAAA,MAFlBc,QAEkB,QAFlBA,QAEkB;AAAA,MAFFC,KAEE,QAFRC,IAEQ;AAAA,MAFeC,SAEf,QAFKC,QAEL;AAAA,MAF0BC,KAE1B,QAF0BA,KAE1B;AAAA,MAFiCC,QAEjC,QAFiCA,QAEjC;AAAA,kCAF2CC,eAE3C;AAAA,MAF2CA,eAE3C,qCAF6D,KAE7D;AAAA,yBAFoEC,MAEpE;AAAA,MAFoEA,MAEpE,4BAF6E,QAE7E;AAAA,MADfC,KACe;;AAClB;AACA,MAAMP,IAAI,GAAGD,KAAK,KAAKE,SAAS,GAAG,UAAH,GAAgB,MAA9B,CAAlB;AACA,MAAMO,qBAAqB,GAAGd,uBAAuB,EAArD;AACA,MAAMe,OAAO,GAAG7B,KAAK,CAAC8B,MAAN,EAAhB;;AACA,wBAAoC9B,KAAK,CAAC+B,QAAN,CAA+B,IAA/B,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,gBAA6BhC,MAAM,EAAnC;AAAA,MAAQiC,MAAR,WAAQA,MAAR;AAAA,MAAgBC,QAAhB,WAAgBA,QAAhB;;AACA,MAAMC,MAAM,GAAGrB,SAAS,EAAxB;AAEA,MAAMsB,WAAW,GAAGrC,KAAK,CAAC8B,MAAN,CAAa,KAAb,CAApB;;AACA,MAAI,CAACO,WAAW,CAACC,OAAjB,EAA0B;AACxB,QAAIJ,MAAM,IAAId,IAAI,KAAK,MAAvB,EAA+B;AAC7Be,MAAAA,QAAQ,CAACI,eAAT,CAAyBC,SAAzB,CAAmCC,GAAnC,CAAuC,MAAvC;AACD;;AACDlC,IAAAA,gBAAgB,CAACmC,UAAjB,GAA8BjB,eAA9B;AACAY,IAAAA,WAAW,CAACC,OAAZ,GAAsB,IAAtB;AACD;;AAED,MAAIK,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,aAA7B,EAA4C;AAC1C,QAAInB,MAAM,KAAK,QAAX,IAAuBN,IAAI,KAAK,UAApC,EAAgD;AAC9CJ,MAAAA,IAAI,CAAC,8CAAD,CAAJ;AACD;;AACD,QAAIG,KAAK,IAAIE,SAAb,EAAwB;AACtBL,MAAAA,IAAI,kBAAUI,IAAV,2BAAJ;AACD;AACF,GAzBiB,CA2BlB;;;AACAd,EAAAA,yBAAyB,CAAC,YAAM;AAC9B,QAAIc,IAAI,KAAK,MAAb,EAAqB;AACnB,aAAOR,IAAP;AACD;;AAED,QAAMkC,MAAM,GAAGX,QAAQ,CAACY,aAAT,CAAuB,KAAvB,CAAf;AACAD,IAAAA,MAAM,CAACN,SAAP,CAAiBC,GAAjB,CAAqB,mBAArB;AACAN,IAAAA,QAAQ,CAACa,IAAT,CAAcC,WAAd,CAA0BH,MAA1B;AACAb,IAAAA,aAAa,CAACa,MAAD,CAAb;AACA,WAAO;AAAA,aAAMA,MAAM,CAACI,aAAP,CAAqBC,WAArB,CAAiCL,MAAjC,CAAN;AAAA,KAAP;AACD,GAVwB,EAUtB,EAVsB,CAAzB,CA5BkB,CAwClB;;AACAxC,EAAAA,yBAAyB,CAAC,YAAM;AAAA;;AAC9B,QAAIc,IAAI,KAAK,SAAb,EAAwB;AACtB,aAAOR,IAAP;AACD;;AAED,QAAMwC,MAAM,GAAGvB,OAAO,CAACS,OAAR,CAAgBY,aAA/B;AACA,QAAMG,OAAO,GAAG,CAAC,YAAD,EAAeC,MAAf,CAAsBlC,IAAI,KAAK,UAAT,GAAsB,sBAAtB,GAA+C,EAArE,CAAhB;;AACA,yBAAAgC,MAAM,CAACZ,SAAP,EAAiBC,GAAjB,6CAAwBY,OAAxB;;AAEA,WAAO,YAAM;AAAA;;AACX,4BAAAD,MAAM,CAACZ,SAAP,EAAiBe,MAAjB,8CAA2BF,OAA3B;;AACA,UAAIjC,IAAI,KAAK,MAAb,EAAqB;AACnBe,QAAAA,QAAQ,CAACI,eAAT,CAAyBC,SAAzB,CAAmCe,MAAnC,CAA0C,MAA1C;AACD;AACF,KALD;AAMD,GAfwB,EAetB,EAfsB,CAAzB,CAzCkB,CA0DlB;;AACAjD,EAAAA,yBAAyB,CAAC,YAAM;AAC9B,QAAIc,IAAI,KAAK,SAAb,EAAwB;AACtB,aAAOR,IAAP;AACD;;AAED,QAAMwC,MAAM,GAAGvB,OAAO,CAACS,OAAR,CAAgBY,aAA/B;;AAEA,SAAK,IAAMM,GAAX,IAAkBpB,MAAlB,EAA0B;AACxB,UAAIA,MAAM,CAACqB,cAAP,CAAsBD,GAAtB,KAA8B,OAAOpB,MAAM,CAACoB,GAAD,CAAb,KAAuC,QAAzE,EAAmF;AACjF,YAAME,KAAK,GAAGtB,MAAM,CAACoB,GAAD,CAApB;AACAJ,QAAAA,MAAM,CAACO,KAAP,CAAaC,WAAb,6BAA8CJ,GAA9C,aAAwDE,KAAxD;AACA1B,QAAAA,UAAU,IAAIA,UAAU,CAAC2B,KAAX,CAAiBC,WAAjB,6BAAkDJ,GAAlD,aAA4DE,KAA5D,QAAd;AACD;AACF;;AAED,WAAO,YAAM;AACX,WAAK,IAAMF,IAAX,IAAkBpB,MAAlB,EAA0B;AACxB,YAAIA,MAAM,CAACqB,cAAP,CAAsBD,IAAtB,CAAJ,EAAgC;AAC9BJ,UAAAA,MAAM,CAACO,KAAP,CAAaE,cAAb,6BAAiDL,IAAjD;AACAxB,UAAAA,UAAU,IAAIA,UAAU,CAAC2B,KAAX,CAAiBE,cAAjB,6BAAqDL,IAArD,EAAd;AACD;AACF;AACF,KAPD;AAQD,GAvBwB,EAuBtB,CAACpB,MAAD,EAASJ,UAAT,CAvBsB,CAAzB,CA3DkB,CAoFlB;;AACA1B,EAAAA,yBAAyB,CAAC,YAAM;AAC9B,QAAIc,IAAI,KAAK,SAAT,IAAsBG,KAAK,KAAKlB,QAAQ,CAACyD,OAA7C,EAAsD;AACpD,aAAOlD,IAAP;AACD;;AACD,QAAMmD,SAAS,GAAG3C,IAAI,KAAK,UAAT,GAAsBS,OAAO,CAACS,OAAR,CAAgBY,aAAtC,GAAsDf,QAAQ,CAACa,IAAjF;AACAe,IAAAA,SAAS,CAACvB,SAAV,CAAoBC,GAApB,CAAwB,qBAAxB;AACA,WAAO;AAAA,aAAMsB,SAAS,CAACvB,SAAV,CAAoBe,MAApB,CAA2B,qBAA3B,CAAN;AAAA,KAAP;AACD,GAPwB,EAOtB,CAAChC,KAAD,CAPsB,CAAzB;AASA,MAAMyC,gBAAgB,GAAGhE,KAAK,CAACiE,OAAN,CACvB;AAAA,WAAMvC,MAAM,KAAK,SAAX,GAAuBjB,uBAAuB,CAACoB,OAAD,CAA9C,GAA0DnB,sBAAsB,CAACwB,MAAD,EAASC,QAAT,CAAtF;AAAA,GADuB,EAEvB,CAACT,MAAD,CAFuB,CAAzB;AAIA,MAAMwC,OAAO,GACX,oBAAC,cAAD,CAAgB,QAAhB;AAAyB,IAAA,KAAK,EAAE;AAC9BC,MAAAA,OAAO,EAAEtC,OADqB;AAE9BG,MAAAA,UAAU,EAAEA,UAFkB;AAG9BV,MAAAA,QAAQ,EAAEF,IAAI,KAAK;AAHW;AAAhC,KAKE,oBAAC,aAAD,CAAe,QAAf;AAAwB,IAAA,KAAK,EAAE4C;AAA/B,KACE,oBAAC,oBAAD;AAAsB,IAAA,WAAW,EAAC,MAAlC;AAAyC,IAAA,aAAa,EAAE,CAACvC;AAAzD,KACGP,QADH,CADF,CALF,CADF;AAcA,SAAOE,IAAI,KAAK,SAAT,GAAqB8C,OAArB,GACL;AAAK,IAAA,GAAG,EAAErC,OAAV;AAAmB,IAAA,SAAS,EAAE3B,UAAU,CAAC,SAAD,EAAY;AAClD,2BAAqB,CAACsB,QAD4B;AAElD,iCAA2BI;AAFuB,KAAZ;AAAxC,KAGQD,KAHR,GAIGuC,OAJH,CADF;AAQD,CA3H4D,EA2H1D;AACD3C,EAAAA,KAAK,EAAE,IADN;AAEDC,EAAAA,QAAQ,EAAE;AAFT,CA3H0D,CAAtD;AAgIP,eAAeP,OAAf","sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '../../lib/classNames';\nimport { AppRootContext } from './AppRootContext';\nimport { withAdaptivity, SizeType, AdaptivityProps } from '../../hoc/withAdaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { classScopingMode } from '../../lib/classScopingMode';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { elementScrollController, globalScrollController, ScrollContext, ScrollContextInterface } from './ScrollContext';\nimport { noop } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useInsets } from '../../hooks/useInsets';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport './AppRoot.css';\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement>, Pick<AdaptivityProps, 'sizeX' | 'hasMouse'> {\n  /** @deprecated Use mode=\"embedded\" */\n  embedded?: boolean;\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  /** Убирает классы без префикса (.Button) */\n  noLegacyClasses?: boolean;\n  scroll?: 'global' | 'contain';\n}\n\nconst warn = warnOnce('AppRoot');\nexport const AppRoot: React.FC<AppRootProps> = withAdaptivity(({\n  children, mode: _mode, embedded: _embedded, sizeX, hasMouse, noLegacyClasses = false, scroll = 'global',\n  ...props\n}: AppRootProps) => {\n  // normalize mode\n  const mode = _mode || (_embedded ? 'embedded' : 'full');\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement>();\n  const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement>(null);\n  const { window, document } = useDOM();\n  const insets = useInsets();\n\n  const initialized = React.useRef(false);\n  if (!initialized.current) {\n    if (window && mode === 'full') {\n      document.documentElement.classList.add('vkui');\n    }\n    classScopingMode.noConflict = noLegacyClasses;\n    initialized.current = true;\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    if (scroll !== 'global' && mode !== 'embedded') {\n      warn('Scroll modes only supported in embedded mode');\n    }\n    if (_mode && _embedded) {\n      warn(`mode=\"${mode}\" overrides embedded`);\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      return noop;\n    }\n\n    const portal = document.createElement('div');\n    portal.classList.add('vkui__portal-root');\n    document.body.appendChild(portal);\n    setPortalRoot(portal);\n    return () => portal.parentElement.removeChild(portal);\n  }, []);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent.classList.add(...classes);\n\n    return () => {\n      parent.classList.remove(...classes);\n      if (mode === 'full') {\n        document.documentElement.classList.remove('vkui');\n      }\n    };\n  }, []);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    for (const key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key as keyof Insets] === 'number') {\n        const inset = insets[key as keyof Insets];\n        parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);\n        portalRoot && portalRoot.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);\n      }\n    }\n\n    return () => {\n      for (const key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(`--safe-area-inset-${key}`);\n          portalRoot && portalRoot.style.removeProperty(`--safe-area-inset-${key}`);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || sizeX !== SizeType.REGULAR) {\n      return noop;\n    }\n    const container = mode === 'embedded' ? rootRef.current.parentElement : document.body;\n    container.classList.add('vkui--sizeX-regular');\n    return () => container.classList.remove('vkui--sizeX-regular');\n  }, [sizeX]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => scroll === 'contain' ? elementScrollController(rootRef) : globalScrollController(window, document),\n    [scroll]);\n\n  const content = (\n    <AppRootContext.Provider value={{\n      appRoot: rootRef,\n      portalRoot: portalRoot,\n      embedded: mode === 'embedded',\n    }}>\n      <ScrollContext.Provider value={scrollController}>\n        <IconSettingsProvider classPrefix=\"vkui\" globalClasses={!noLegacyClasses}>\n          {children}\n        </IconSettingsProvider>\n      </ScrollContext.Provider>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? content : (\n    <div ref={rootRef} vkuiClass={classNames('AppRoot', {\n      'AppRoot--no-mouse': !hasMouse,\n      'AppRoot--keyboard-input': isKeyboardInputActive,\n    })} {...props}>\n      {content}\n    </div>\n  );\n}, {\n  sizeX: true,\n  hasMouse: true,\n});\n\nexport default AppRoot;\n"],"file":"AppRoot.js"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"names":["React","useDOM","classNames","AppRootContext","withAdaptivity","SizeType","useIsomorphicLayoutEffect","classScopingMode","IconSettingsProvider","elementScrollController","globalScrollController","ScrollContext","noop","warnOnce","useKeyboardInputTracker","useInsets","warn","AppRoot","children","_mode","mode","_embedded","embedded","sizeX","hasMouse","noLegacyClasses","scroll","props","isKeyboardInputActive","rootRef","useRef","useState","portalRoot","setPortalRoot","window","document","insets","initialized","current","documentElement","classList","add","noConflict","process","env","NODE_ENV","portal","createElement","body","appendChild","parentElement","removeChild","parent","classes","concat","remove","key","hasOwnProperty","inset","style","setProperty","removeProperty","REGULAR","container","scrollController","useMemo","content","appRoot","keyboardInput"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '../../lib/classNames';\nimport { AppRootContext } from './AppRootContext';\nimport { withAdaptivity, SizeType, AdaptivityProps } from '../../hoc/withAdaptivity';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { classScopingMode } from '../../lib/classScopingMode';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { elementScrollController, globalScrollController, ScrollContext, ScrollContextInterface } from './ScrollContext';\nimport { noop } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { useInsets } from '../../hooks/useInsets';\nimport { Insets } from '@vkontakte/vk-bridge';\nimport './AppRoot.css';\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement>, Pick<AdaptivityProps, 'sizeX' | 'hasMouse'> {\n  /** @deprecated Use mode=\"embedded\" */\n  embedded?: boolean;\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  /** Убирает классы без префикса (.Button) */\n  noLegacyClasses?: boolean;\n  scroll?: 'global' | 'contain';\n}\n\nconst warn = warnOnce('AppRoot');\nexport const AppRoot: React.FC<AppRootProps> = withAdaptivity(({\n  children, mode: _mode, embedded: _embedded, sizeX, hasMouse, noLegacyClasses = false, scroll = 'global',\n  ...props\n}: AppRootProps) => {\n  // normalize mode\n  const mode = _mode || (_embedded ? 'embedded' : 'full');\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement>();\n  const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement>(null);\n  const { window, document } = useDOM();\n  const insets = useInsets();\n\n  const initialized = React.useRef(false);\n  if (!initialized.current) {\n    if (window && mode === 'full') {\n      document.documentElement.classList.add('vkui');\n    }\n    classScopingMode.noConflict = noLegacyClasses;\n    initialized.current = true;\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    if (scroll !== 'global' && mode !== 'embedded') {\n      warn('Scroll modes only supported in embedded mode');\n    }\n    if (_mode && _embedded) {\n      warn(`mode=\"${mode}\" overrides embedded`);\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      return noop;\n    }\n\n    const portal = document.createElement('div');\n    portal.classList.add('vkui__portal-root');\n    document.body.appendChild(portal);\n    setPortalRoot(portal);\n    return () => portal.parentElement.removeChild(portal);\n  }, []);\n\n  // setup root classes\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n    const classes = ['vkui__root'].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);\n    parent.classList.add(...classes);\n\n    return () => {\n      parent.classList.remove(...classes);\n      if (mode === 'full') {\n        document.documentElement.classList.remove('vkui');\n      }\n    };\n  }, []);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    for (const key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key as keyof Insets] === 'number') {\n        const inset = insets[key as keyof Insets];\n        parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);\n        portalRoot && portalRoot.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);\n      }\n    }\n\n    return () => {\n      for (const key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(`--safe-area-inset-${key}`);\n          portalRoot && portalRoot.style.removeProperty(`--safe-area-inset-${key}`);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || sizeX !== SizeType.REGULAR) {\n      return noop;\n    }\n    const container = mode === 'embedded' ? rootRef.current.parentElement : document.body;\n    container.classList.add('vkui--sizeX-regular');\n    return () => container.classList.remove('vkui--sizeX-regular');\n  }, [sizeX]);\n\n  const scrollController = React.useMemo<ScrollContextInterface>(\n    () => scroll === 'contain' ? elementScrollController(rootRef) : globalScrollController(window, document),\n    [scroll]);\n\n  const content = (\n    <AppRootContext.Provider value={{\n      appRoot: rootRef,\n      portalRoot: portalRoot,\n      embedded: mode === 'embedded',\n      keyboardInput: isKeyboardInputActive,\n    }}>\n      <ScrollContext.Provider value={scrollController}>\n        <IconSettingsProvider classPrefix=\"vkui\" globalClasses={!noLegacyClasses}>\n          {children}\n        </IconSettingsProvider>\n      </ScrollContext.Provider>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? content : (\n    <div ref={rootRef} vkuiClass={classNames('AppRoot', {\n      'AppRoot--no-mouse': !hasMouse,\n      'AppRoot--keyboard-input': isKeyboardInputActive,\n    })} {...props}>\n      {content}\n    </div>\n  );\n}, {\n  sizeX: true,\n  hasMouse: true,\n});\n\nexport default AppRoot;\n"],"file":"AppRoot.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAQA,OAAO,IAAMC,cAAc,gBAAGD,KAAK,CAACE,aAAN,CAA6C;AACzEC,EAAAA,UAAU,EAAE;AAD6D,CAA7C,CAAvB","sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLDivElement;\n  embedded?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"file":"AppRootContext.js"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRootContext.ts"],"names":["React","AppRootContext","createContext","portalRoot"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AASA,OAAO,IAAMC,cAAc,gBAAGD,KAAK,CAACE,aAAN,CAA6C;AACzEC,EAAAA,UAAU,EAAE;AAD6D,CAA7C,CAAvB","sourcesContent":["import * as React from 'react';\n\nexport interface AppRootContextInterface {\n  appRoot?: React.RefObject<HTMLDivElement>;\n  portalRoot?: HTMLDivElement;\n  embedded?: boolean;\n  keyboardInput?: boolean;\n}\n\nexport const AppRootContext = React.createContext<AppRootContextInterface>({\n  portalRoot: null,\n});\n"],"file":"AppRootContext.js"}

package/dist/cssm/components/Avatar/Avatar.js

@@ -105,10 +105,12 @@ var Avatar = function Avatar(_ref) {
   }, children));
 };
 
+export var AVATAR_DEFAULT_SIZE = 48;
+export var AVATAR_DEFAULT_SHADOW = true;
 Avatar.defaultProps = {
-  size: 48,
+  size: AVATAR_DEFAULT_SIZE,
   mode: 'default',
-  shadow: true
+  shadow: AVATAR_DEFAULT_SHADOW
 };
 export default Avatar;
 //# sourceMappingURL=Avatar.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":["React","getClassName","classNames","usePlatform","Avatar","alt","crossOrigin","decoding","height","loading","referrerPolicy","sizes","src","srcSet","useMap","width","getRef","size","shadow","mode","className","children","getRootRef","style","ariaLabel","restProps","platform","useState","failedImage","setFailedImage","onImageError","onImageLoad","borderRadius","hasSrc","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport './Avatar.css';\n\nexport interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {\n  /**\n   * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24\n   */\n  size?: number;\n  mode?: 'default' | 'image' | 'app';\n  shadow?: boolean;\n}\n\nconst Avatar: React.FC<AvatarProps> = ({\n  alt,\n  crossOrigin,\n  decoding,\n  height,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  width,\n  getRef,\n  size,\n  shadow,\n  mode,\n  className,\n  children,\n  getRootRef,\n  style,\n  'aria-label': ariaLabel,\n  ...restProps\n}: AvatarProps) => {\n  const platform = usePlatform();\n  const [failedImage, setFailedImage] = React.useState(false);\n\n  const onImageError = () => {\n    setFailedImage(true);\n  };\n\n  const onImageLoad = () => {\n    setFailedImage(false);\n  };\n\n  let borderRadius: string | number = '50%';\n\n  switch (mode) {\n    case 'image':\n      size < 64 && (borderRadius = 4);\n      size >= 64 && size < 96 && (borderRadius = 6);\n      size >= 96 && (borderRadius = 8);\n      break;\n    case 'app':\n      size <= 40 && (borderRadius = 8);\n      size > 40 && size < 56 && (borderRadius = 10);\n      size >= 56 && size < 64 && (borderRadius = 12);\n      size >= 64 && size < 84 && (borderRadius = 16);\n      size >= 84 && (borderRadius = 18);\n      break;\n    default:\n      break;\n  }\n\n  const hasSrc = src || srcSet;\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(getClassName('Avatar', platform), `Avatar--type-${mode}`, `Avatar--sz-${size}`, {\n        'Avatar--shadow': shadow,\n        'Avatar--failed': failedImage,\n      })}\n      className={className}\n      ref={getRootRef}\n      role={hasSrc ? 'img' : 'presentation'}\n      aria-label={alt || ariaLabel}\n      style={{ ...style, width: size, height: size, borderRadius }}\n    >\n      {hasSrc &&\n        <img\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          height={height}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          sizes={sizes}\n          src={src}\n          srcSet={srcSet}\n          useMap={useMap}\n          width={width}\n          ref={getRef}\n          onError={onImageError}\n          onLoad={onImageLoad}\n          vkuiClass=\"Avatar__img\"\n          alt=\"\"\n        />\n      }\n      {children && <div vkuiClass=\"Avatar__children\">{children}</div>}\n    </div>\n  );\n};\n\nAvatar.defaultProps = {\n  size: 48,\n  mode: 'default',\n  shadow: true,\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}
+{"version":3,"sources":["../../../../src/components/Avatar/Avatar.tsx"],"names":["React","getClassName","classNames","usePlatform","Avatar","alt","crossOrigin","decoding","height","loading","referrerPolicy","sizes","src","srcSet","useMap","width","getRef","size","shadow","mode","className","children","getRootRef","style","ariaLabel","restProps","platform","useState","failedImage","setFailedImage","onImageError","onImageLoad","borderRadius","hasSrc","AVATAR_DEFAULT_SIZE","AVATAR_DEFAULT_SHADOW","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { HasRef, HasRootRef } from '../../types';\nimport './Avatar.css';\n\nexport interface AvatarProps extends React.ImgHTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement>, HasRef<HTMLImageElement> {\n  /**\n   * Рекомендуемый сет значений: 96 | 88 | 80 | 72 | 64 | 56 | 48 | 44 | 40 | 36 | 32 | 28 | 24\n   */\n  size?: number;\n  mode?: 'default' | 'image' | 'app';\n  shadow?: boolean;\n}\n\nconst Avatar: React.FC<AvatarProps> = ({\n  alt,\n  crossOrigin,\n  decoding,\n  height,\n  loading,\n  referrerPolicy,\n  sizes,\n  src,\n  srcSet,\n  useMap,\n  width,\n  getRef,\n  size,\n  shadow,\n  mode,\n  className,\n  children,\n  getRootRef,\n  style,\n  'aria-label': ariaLabel,\n  ...restProps\n}: AvatarProps) => {\n  const platform = usePlatform();\n  const [failedImage, setFailedImage] = React.useState(false);\n\n  const onImageError = () => {\n    setFailedImage(true);\n  };\n\n  const onImageLoad = () => {\n    setFailedImage(false);\n  };\n\n  let borderRadius: string | number = '50%';\n\n  switch (mode) {\n    case 'image':\n      size < 64 && (borderRadius = 4);\n      size >= 64 && size < 96 && (borderRadius = 6);\n      size >= 96 && (borderRadius = 8);\n      break;\n    case 'app':\n      size <= 40 && (borderRadius = 8);\n      size > 40 && size < 56 && (borderRadius = 10);\n      size >= 56 && size < 64 && (borderRadius = 12);\n      size >= 64 && size < 84 && (borderRadius = 16);\n      size >= 84 && (borderRadius = 18);\n      break;\n    default:\n      break;\n  }\n\n  const hasSrc = src || srcSet;\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(getClassName('Avatar', platform), `Avatar--type-${mode}`, `Avatar--sz-${size}`, {\n        'Avatar--shadow': shadow,\n        'Avatar--failed': failedImage,\n      })}\n      className={className}\n      ref={getRootRef}\n      role={hasSrc ? 'img' : 'presentation'}\n      aria-label={alt || ariaLabel}\n      style={{ ...style, width: size, height: size, borderRadius }}\n    >\n      {hasSrc &&\n        <img\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          height={height}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          sizes={sizes}\n          src={src}\n          srcSet={srcSet}\n          useMap={useMap}\n          width={width}\n          ref={getRef}\n          onError={onImageError}\n          onLoad={onImageLoad}\n          vkuiClass=\"Avatar__img\"\n          alt=\"\"\n        />\n      }\n      {children && <div vkuiClass=\"Avatar__children\">{children}</div>}\n    </div>\n  );\n};\n\nexport const AVATAR_DEFAULT_SIZE = 48;\nexport const AVATAR_DEFAULT_SHADOW = true;\n\nAvatar.defaultProps = {\n  size: AVATAR_DEFAULT_SIZE,\n  mode: 'default',\n  shadow: AVATAR_DEFAULT_SHADOW,\n};\n\nexport default Avatar;\n"],"file":"Avatar.js"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["React","getClassName","classNames","usePlatform","ANDROID","IOS","VKCOM","hasReactNode","Icon24Chevron","Icon24DismissSubstract","Icon24DismissDark","Icon24Cancel","Tappable","IconButton","Headline","Subhead","Text","Title","BannerHeader","size","restProps","BannerSubheader","Banner","props","platform","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","Children","count","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { hasReactNode } from '../../lib/utils';\nimport { Icon24Chevron, Icon24DismissSubstract, Icon24DismissDark, Icon24Cancel } from '@vkontakte/icons';\nimport Tappable from '../Tappable/Tappable';\nimport IconButton from '../IconButton/IconButton';\nimport Headline from '../Typography/Headline/Headline';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport Text from '../Typography/Text/Text';\nimport Title from '../Typography/Title/Title';\nimport './Banner.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки, отображаемые в баннере.\n   *\n   * - В режиме `tint` или в `image` со светлым фоном рекомендуется использовать только `<Button mode=\"primary\" />` или `<Button mode=\"tertiary\" hasHover={false} />`.\n   * - В режиме `image` с тёмным фоном – `<Button mode=\"overlay_primary\" />`.\n   */\n  actions?: React.ReactNode;\n}\n\ninterface BannerTypographyProps extends Pick<BannerProps, 'size'> {\n  Component?: React.ElementType;\n}\n\nconst BannerHeader: React.FC<BannerTypographyProps> = ({ size, ...restProps }: BannerTypographyProps) => {\n  return size === 'm'\n    ? <Title level=\"2\" weight=\"medium\" {...restProps} />\n    : <Headline weight=\"medium\" {...restProps} />;\n};\n\nconst BannerSubheader: React.FC<BannerTypographyProps> = ({ size, ...restProps }: BannerTypographyProps) => {\n  return size === 'm'\n    ? <Text weight=\"regular\" {...restProps} />\n    : <Subhead weight=\"regular\" {...restProps} />;\n};\n\nconst Banner: React.FC<BannerProps> = (props: BannerProps) => {\n  const platform = usePlatform();\n  const {\n    mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions,\n    onDismiss, dismissLabel,\n    ...restProps\n  } = props;\n\n  return (\n    <section\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName('Banner', platform),\n        `Banner--md-${mode}`,\n        `Banner--sz-${size}`,\n        {\n          'Banner--inverted': mode === 'image' && imageTheme === 'dark',\n        },\n      )}\n    >\n      <Tappable\n        vkuiClass=\"Banner__in\"\n        activeMode={platform === IOS ? 'opacity' : 'background'}\n        disabled={asideMode !== 'expand'}\n        role={asideMode === 'expand' ? 'button' : null}\n      >\n        {mode === 'image' && background &&\n          <div aria-hidden=\"true\" vkuiClass=\"Banner__bg\">\n            {background}\n          </div>\n        }\n\n        {before && <div vkuiClass=\"Banner__before\">{before}</div>}\n\n        <div vkuiClass=\"Banner__content\">\n          {hasReactNode(header) && (\n            <BannerHeader size={size} Component=\"span\" vkuiClass=\"Banner__header\">{header}</BannerHeader>\n          )}\n          {hasReactNode(subheader) && (\n            <BannerSubheader Component=\"span\" size={size} vkuiClass=\"Banner__subheader\">{subheader}</BannerSubheader>\n          )}\n          {hasReactNode(text) && <Text weight=\"regular\" vkuiClass=\"Banner__text\">{text}</Text>}\n          {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n            <div vkuiClass=\"Banner__actions\">{actions}</div>\n          )}\n        </div>\n\n        {!!asideMode && (\n          <div vkuiClass=\"Banner__aside\">\n            {asideMode === 'expand' && <Icon24Chevron />}\n\n            {asideMode === 'dismiss' && (\n              <IconButton\n                aria-label={dismissLabel}\n                vkuiClass=\"Banner__dismiss\"\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {(platform === ANDROID || platform === VKCOM) && <Icon24Cancel />}\n                {platform === IOS && (mode === 'image' ? <Icon24DismissDark /> : <Icon24DismissSubstract />)}\n              </IconButton>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </section>\n  );\n};\n\nBanner.defaultProps = {\n  dismissLabel: 'Скрыть',\n  mode: 'tint',\n  size: 's',\n  imageTheme: 'dark',\n};\n\nexport default Banner;\n"],"file":"Banner.js"}
+{"version":3,"sources":["../../../../src/components/Banner/Banner.tsx"],"names":["React","getClassName","classNames","usePlatform","ANDROID","IOS","VKCOM","hasReactNode","Icon24Chevron","Icon24DismissSubstract","Icon24DismissDark","Icon24Cancel","Tappable","IconButton","Headline","Subhead","Text","Title","BannerHeader","size","restProps","BannerSubheader","Banner","props","platform","mode","imageTheme","before","asideMode","header","subheader","text","children","background","actions","onDismiss","dismissLabel","Children","count","defaultProps"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { HasComponent } from '../../types';\nimport { getClassName } from '../../helpers/getClassName';\nimport { classNames } from '../../lib/classNames';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { ANDROID, IOS, VKCOM } from '../../lib/platform';\nimport { hasReactNode } from '../../lib/utils';\nimport { Icon24Chevron, Icon24DismissSubstract, Icon24DismissDark, Icon24Cancel } from '@vkontakte/icons';\nimport Tappable from '../Tappable/Tappable';\nimport IconButton from '../IconButton/IconButton';\nimport Headline from '../Typography/Headline/Headline';\nimport Subhead from '../Typography/Subhead/Subhead';\nimport Text from '../Typography/Text/Text';\nimport Title from '../Typography/Title/Title';\nimport './Banner.css';\n\nexport interface BannerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Тип баннера.\n   */\n  mode?: 'tint' | 'image';\n  size?: 's' | 'm';\n  /**\n   * Тип действия в правой части баннера.\n   *\n   * - `dismiss` – отображается иконка крестика, при клике на неё сработает свойство `onDismiss`.\n   * - `expand` – отображается иконка шеврона, которая подразумевает, что при клике на баннер можно куда-то перейти.\n   */\n  asideMode?: 'dismiss' | 'expand';\n  /**\n   * Срабатывает при клике на иконку крестика при `asideMode=\"dismiss\"`.\n   */\n  onDismiss?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * `aria-label` для кнопки при `asideMode=\"dismiss\". Необходим, чтобы кнопка была доступной.\n   */\n  dismissLabel?: string;\n  /**\n   * Содержимое, отображаемое в левой части баннера.\n   */\n  before?: React.ReactNode;\n  /**\n   * Заголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  header?: React.ReactNode;\n  /**\n   * Подзаголовок. <br />\n   * При использовании этого свойства рекомендуется не указывать `text`.\n   */\n  subheader?: React.ReactNode;\n  /**\n   * Текст баннера. <br />\n   * Это свойство следует использовать без указания `header` и `subheader`.\n   */\n  text?: React.ReactNode;\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * - `light` – в качестве фона используется светлое изображение, цвет текста в баннере будет тёмным.\n   * - `dark` – в качестве фона используется тёмное изображение, цвет текста будет светлым.\n   */\n  imageTheme?: 'light' | 'dark';\n  /**\n   * При использовании `mode=\"image\"`.\n   *\n   * Элемент, который нужно стилизовать цветом и/или фоном. Этот элемент будет растянут на 100% ширины и высоты баннера.\n   */\n  background?: React.ReactNode;\n  /**\n   * Кнопки, отображаемые в баннере.\n   *\n   * - В режиме `tint` или в `image` со светлым фоном рекомендуется использовать только `<Button mode=\"primary\" />` или `<Button mode=\"tertiary\" hasHover={false} />`.\n   * - В режиме `image` с тёмным фоном – `<Button mode=\"overlay_primary\" />`.\n   */\n  actions?: React.ReactNode;\n}\n\ntype BannerTypographyProps = Pick<BannerProps, 'size'> & HasComponent;\n\nconst BannerHeader: React.FC<BannerTypographyProps> = ({ size, ...restProps }) => {\n  return size === 'm'\n    ? <Title level=\"2\" weight=\"medium\" {...restProps} />\n    : <Headline weight=\"medium\" {...restProps} />;\n};\n\nconst BannerSubheader: React.FC<BannerTypographyProps> = ({ size, ...restProps }) => {\n  return size === 'm'\n    ? <Text weight=\"regular\" {...restProps} />\n    : <Subhead weight=\"regular\" {...restProps} />;\n};\n\nconst Banner: React.FC<BannerProps> = (props: BannerProps) => {\n  const platform = usePlatform();\n  const {\n    mode, imageTheme, size, before, asideMode, header, subheader, text, children, background, actions,\n    onDismiss, dismissLabel,\n    ...restProps\n  } = props;\n\n  return (\n    <section\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName('Banner', platform),\n        `Banner--md-${mode}`,\n        `Banner--sz-${size}`,\n        {\n          'Banner--inverted': mode === 'image' && imageTheme === 'dark',\n        },\n      )}\n    >\n      <Tappable\n        vkuiClass=\"Banner__in\"\n        activeMode={platform === IOS ? 'opacity' : 'background'}\n        disabled={asideMode !== 'expand'}\n        role={asideMode === 'expand' ? 'button' : null}\n      >\n        {mode === 'image' && background &&\n          <div aria-hidden=\"true\" vkuiClass=\"Banner__bg\">\n            {background}\n          </div>\n        }\n\n        {before && <div vkuiClass=\"Banner__before\">{before}</div>}\n\n        <div vkuiClass=\"Banner__content\">\n          {hasReactNode(header) && (\n            <BannerHeader size={size} Component=\"span\" vkuiClass=\"Banner__header\">{header}</BannerHeader>\n          )}\n          {hasReactNode(subheader) && (\n            <BannerSubheader Component=\"span\" size={size} vkuiClass=\"Banner__subheader\">{subheader}</BannerSubheader>\n          )}\n          {hasReactNode(text) && <Text weight=\"regular\" vkuiClass=\"Banner__text\">{text}</Text>}\n          {hasReactNode(actions) && React.Children.count(actions) > 0 && (\n            <div vkuiClass=\"Banner__actions\">{actions}</div>\n          )}\n        </div>\n\n        {!!asideMode && (\n          <div vkuiClass=\"Banner__aside\">\n            {asideMode === 'expand' && <Icon24Chevron />}\n\n            {asideMode === 'dismiss' && (\n              <IconButton\n                aria-label={dismissLabel}\n                vkuiClass=\"Banner__dismiss\"\n                onClick={onDismiss}\n                hoverMode=\"opacity\"\n                hasActive={false}\n              >\n                {(platform === ANDROID || platform === VKCOM) && <Icon24Cancel />}\n                {platform === IOS && (mode === 'image' ? <Icon24DismissDark /> : <Icon24DismissSubstract />)}\n              </IconButton>\n            )}\n          </div>\n        )}\n      </Tappable>\n    </section>\n  );\n};\n\nBanner.defaultProps = {\n  dismissLabel: 'Скрыть',\n  mode: 'tint',\n  size: 's',\n  imageTheme: 'dark',\n};\n\nexport default Banner;\n"],"file":"Banner.js"}

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

@@ -1 +1 @@
-.vkuiButton{position:relative;display:inline-block;box-sizing:border-box;text-decoration:none;border:0;min-height:30px;margin:0;padding:1px 16px;-webkit-user-select:none;user-select:none;border-radius:8px;max-width:100%}.vkuiButton--stretched{display:block;width:100%;flex-grow:1;flex-basis:0}.vkuiButton__in{display:flex;align-items:center;justify-content:center;width:100%;height:100%;text-align:center}.vkuiButton--aln-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--aln-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:.4}.vkuiButton--lvl-primary[disabled],.vkuiButton--lvl-secondary[disabled],.vkuiButton--lvl-tertiary[disabled],.vkuiButton--lvl-outline[disabled]{opacity:.64}.vkuiButton__before:not(:last-child){margin-left:-4px;margin-right:6px}.vkuiButton__after:not(:first-child){margin-left:6px}.vkuiButton__content{padding-top:4px;padding-bottom:6px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vkuiButton__content--caps{padding-top:7px;padding-bottom:7px}.vkuiButton__spinner{position:absolute;left:0;top:0;right:0;bottom:0}.vkuiButton__spinner+.vkuiButton__in{visibility:hidden}.vkuiButton--lvl-primary{background-color:#2d81e0;background-color:var(--button_primary_background);color:#fff;color:var(--button_primary_foreground)}.vkuiButton--lvl-secondary{background-color:rgba(0,28,61,.05);background-color:var(--button_secondary_background);color:#2688eb;color:var(--button_secondary_foreground)}.vkuiButton--lvl-tertiary{background-color:transparent;background-color:var(--button_tertiary_background);color:#2d81e0;color:var(--button_tertiary_foreground)}.vkuiButton--lvl-commerce{background-color:#4bb34b;background-color:var(--button_commerce_background);color:#fff;color:var(--button_commerce_foreground)}.vkuiButton--lvl-outline{background-color:transparent;box-shadow:inset 0 0 0 1px #2688eb;box-shadow:inset 0 0 0 1px var(--button_outline_border);color:#2688eb;color:var(--button_outline_foreground)}.vkuiButton--lvl-destructive{background-color:#e64646;background-color:var(--destructive);color:#fff;color:var(--white)}.vkuiButton--lvl-overlay_primary{background-color:#fff;background-color:var(--media_overlay_button_background);color:#2c2d2e;color:var(--media_overlay_button_foreground)}.vkuiButton--lvl-overlay_secondary{background-color:rgba(255,255,255,.2);color:#fff;color:var(--white)}.vkuiButton--lvl-overlay_outline{background-color:transparent;box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--white);color:#fff;color:var(--white)}.vkuiButton--sz-m{min-height:36px}.vkuiButton--sz-m .vkuiButton__content{padding-top:5px;padding-bottom:7px}.vkuiButton--sz-l{min-height:44px;padding-left:20px;padding-right:20px}.vkuiButton--sz-l .vkuiButton__before:not(:last-child){margin-right:8px}.vkuiButton--sz-l .vkuiButton__after:not(:first-child){margin-left:8px}.vkuiButton--sz-l .vkuiButton__content{padding-top:10px;padding-bottom:12px}.vkuiButton--sz-l .vkuiButton__in{justify-content:center}.vkuiButton--ios{border-radius:10px}.vkuiButton--ios.vkuiButton--sz-l .vkuiButton__content{padding-top:9px;padding-bottom:11px}.vkuiButton--vkcom{border-radius:4px}.vkuiButton--vkcom.vkuiButton--lvl-secondary .vkuiIcon,.vkuiButton--vkcom.vkuiButton--lvl-tertiary .vkuiIcon,.vkuiButton--vkcom.vkuiButton--lvl-outline .vkuiIcon{opacity:.72}.vkuiButton--sizeY-compact{min-height:26px}.vkuiButton--sizeY-compact .vkuiButton__content{padding-top:3px;padding-bottom:5px}.vkuiButton--sizeY-compact .vkuiButton__content--caps{padding-top:5px;padding-bottom:5px}.vkuiButton--sizeY-compact.vkuiButton--sz-m{min-height:32px}.vkuiButton--sizeY-compact.vkuiButton--sz-m .vkuiButton__content{padding-top:4px;padding-bottom:6px}.vkuiButton--sizeY-compact.vkuiButton--sz-l{min-height:36px}.vkuiButton--sizeY-compact.vkuiButton--sz-l .vkuiButton__content{padding-top:6px;padding-bottom:8px}.vkuiBanner__actions>.vkuiButton{margin-top:12px;margin-right:16px;margin-bottom:6px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary{margin:4px 16px 2px -16px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary:first-child{margin-top:4px}.vkuiBanner__actions>.vkuiButton:not(.vkuiButton--lvl-tertiary)+.vkuiButton:not(.vkuiButton--lvl-tertiary){margin-top:0}.vkuiBanner__actions>.vkuiButton:not(.vkuiButton--lvl-tertiary)+.vkuiButton--lvl-tertiary{margin-top:2px;margin-left:-16px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary+.vkuiButton--lvl-tertiary{margin-top:2px}.vkuiModalCardBase__actions .vkuiButton{flex:1;margin-left:6px;margin-right:6px}.vkuiModalCardBase__actions--v .vkuiButton{margin-left:0;margin-right:0}.vkuiModalCardBase__actions--v .vkuiButton+.vkuiButton{margin-top:12px}.vkuiRichCell__actions .vkuiButton+.vkuiButton{margin-left:8px}
+.vkuiButton{position:relative;display:inline-block;box-sizing:border-box;text-decoration:none;border:0;min-height:28px;margin:0;padding:0;-webkit-user-select:none;user-select:none;border-radius:8px;max-width:100%}.vkuiButton--stretched{display:block;width:100%;flex-grow:1;flex-basis:0}.vkuiButton__in{display:flex;align-items:center;justify-content:center;width:100%;min-height:inherit;padding:1px 16px;text-align:center;box-sizing:border-box}.vkuiButton--aln-left .vkuiButton__in{justify-content:flex-start;text-align:left}.vkuiButton--aln-right .vkuiButton__in{justify-content:flex-end;text-align:right}.vkuiButton[disabled]{opacity:.4}.vkuiButton--lvl-primary[disabled],.vkuiButton--lvl-secondary[disabled],.vkuiButton--lvl-tertiary[disabled],.vkuiButton--lvl-outline[disabled]{opacity:.64}.vkuiButton__before:not(:last-child){margin-left:-4px;margin-right:6px}.vkuiButton__after:not(:first-child){margin-left:6px}.vkuiButton__content{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.vkuiButton__content--caps{-webkit-transform:translateY(0);transform:translateY(0)}.vkuiButton__spinner{position:absolute;left:0;top:0;right:0;bottom:0}.vkuiButton__spinner+.vkuiButton__in{visibility:hidden}.vkuiButton--lvl-primary{background-color:#2d81e0;background-color:var(--button_primary_background);color:#fff;color:var(--button_primary_foreground)}.vkuiButton--lvl-secondary{background-color:rgba(0,28,61,.05);background-color:var(--button_secondary_background);color:#2688eb;color:var(--button_secondary_foreground)}.vkuiButton--lvl-tertiary{background-color:transparent;background-color:var(--button_tertiary_background);color:#2d81e0;color:var(--button_tertiary_foreground)}.vkuiButton--lvl-commerce{background-color:#4bb34b;background-color:var(--button_commerce_background);color:#fff;color:var(--button_commerce_foreground)}.vkuiButton--lvl-outline{background-color:transparent;box-shadow:inset 0 0 0 1px #2688eb;box-shadow:inset 0 0 0 1px var(--button_outline_border);color:#2688eb;color:var(--button_outline_foreground)}.vkuiButton--lvl-destructive{background-color:#e64646;background-color:var(--destructive);color:#fff;color:var(--white)}.vkuiButton--lvl-overlay_primary{background-color:#fff;background-color:var(--media_overlay_button_background);color:#2c2d2e;color:var(--media_overlay_button_foreground)}.vkuiButton--lvl-overlay_secondary{background-color:rgba(255,255,255,.2);color:#fff;color:var(--white)}.vkuiButton--lvl-overlay_outline{background-color:transparent;box-shadow:inset 0 0 0 1px #fff;box-shadow:inset 0 0 0 1px var(--white);color:#fff;color:var(--white)}.vkuiButton--sz-l .vkuiButton__before:not(:last-child){margin-right:8px}.vkuiButton--sz-l .vkuiButton__after:not(:first-child){margin-left:8px}.vkuiButton--sz-l .vkuiButton__in{justify-content:center;padding-left:20px;padding-right:20px}.vkuiButton:not(.vkuiButton--sz-s) .vkuiButton__content{-webkit-transform:translateY(-1px);transform:translateY(-1px)}.vkuiButton--ios{min-height:26px;border-radius:10px}.vkuiButton--vkcom{min-height:26px;border-radius:4px}.vkuiButton--vkcom.vkuiButton--lvl-secondary .vkuiIcon,.vkuiButton--vkcom.vkuiButton--lvl-tertiary .vkuiIcon,.vkuiButton--vkcom.vkuiButton--lvl-outline .vkuiIcon{opacity:.72}.vkuiButton--sz-m{min-height:32px}.vkuiButton--sz-l{min-height:36px}.vkuiButton--sizeY-regular{min-height:30px}.vkuiButton--sizeY-regular.vkuiButton--sz-m{min-height:36px}.vkuiButton--sizeY-regular.vkuiButton--sz-l{min-height:44px}.vkuiBanner__actions>.vkuiButton{margin-top:12px;margin-right:16px;margin-bottom:6px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary{margin:4px 16px 2px -16px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary:first-child{margin-top:4px}.vkuiBanner__actions>.vkuiButton:not(.vkuiButton--lvl-tertiary)+.vkuiButton:not(.vkuiButton--lvl-tertiary){margin-top:0}.vkuiBanner__actions>.vkuiButton:not(.vkuiButton--lvl-tertiary)+.vkuiButton--lvl-tertiary{margin-top:2px;margin-left:-16px}.vkuiBanner__actions>.vkuiButton--lvl-tertiary+.vkuiButton--lvl-tertiary{margin-top:2px}.vkuiModalCardBase__actions .vkuiButton{flex:1;margin-left:6px;margin-right:6px}.vkuiModalCardBase__actions--v .vkuiButton{margin-left:0;margin-right:0}.vkuiModalCardBase__actions--v .vkuiButton+.vkuiButton{margin-top:12px}.vkuiRichCell__actions .vkuiButton+.vkuiButton{margin-left:8px}