@vkontakte/vkui 5.7.2 → 5.8.0

package/dist/cssm/components/Accordion/Accordion.d.ts

@@ -11,6 +11,6 @@ export type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> & H
  * @see https://vkcom.github.io/VKUI/#/Accordion
  */
 export declare const Accordion: {
-    ({ getRootRef, className, ...restProps }: AccordionProps): React.JSX.Element;
+    (props: AccordionProps): React.JSX.Element;
     Summary: ({ className, after, before, ExpandIcon, CollapseIcon, iconPosition, children, ...restProps }: import("./AccordionSummary").AccordionSummaryProps) => React.JSX.Element;
 };

package/dist/cssm/components/Accordion/Accordion.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { RootComponent } from '../RootComponent/RootComponent';
 import { AccordionSummary } from './AccordionSummary';
 import styles from './Accordion.module.css';
 /**
@@ -10,10 +10,10 @@ import styles from './Accordion.module.css';
  *
  * @since 5.3.0
  * @see https://vkcom.github.io/VKUI/#/Accordion
- */ export const Accordion = ({ getRootRef, className, ...restProps })=>/*#__PURE__*/ React.createElement("details", {
-        className: classNames(styles['Accordion'], className),
-        ref: getRootRef,
-        ...restProps
+ */ export const Accordion = (props)=>/*#__PURE__*/ React.createElement(RootComponent, {
+        Component: "details",
+        baseClassName: styles['Accordion'],
+        ...props
     });
 Accordion.Summary = AccordionSummary;
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { AccordionSummary } from './AccordionSummary';\nimport styles from './Accordion.module.css';\n\nexport type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> &\n  HasRootRef<HTMLDetailsElement>;\n\n/**\n * Компонент, позволяет отображать несколько разделов контента в ограниченном\n * пространстве и сворачивать или разворачивать их пользователем.\n *\n * Обертка над details.\n *\n * @since 5.3.0\n * @see https://vkcom.github.io/VKUI/#/Accordion\n */\nexport const Accordion = ({ getRootRef, className, ...restProps }: AccordionProps) => (\n  <details className={classNames(styles['Accordion'], className)} ref={getRootRef} {...restProps} />\n);\n\nAccordion.Summary = AccordionSummary;\n"],"names":["React","classNames","AccordionSummary","styles","Accordion","getRootRef","className","restProps","details","ref","Summary"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAK5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAAC,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGC,WAA2B,iBAC/E,oBAACC;QAAQF,WAAWL,WAAWE,MAAM,CAAC,YAAY,EAAEG;QAAYG,KAAKJ;QAAa,GAAGE,SAAS;OAC9F;AAEFH,UAAUM,OAAO,GAAGR"}
+{"version":3,"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as React from 'react';\nimport { HasRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { AccordionSummary } from './AccordionSummary';\nimport styles from './Accordion.module.css';\n\nexport type AccordionProps = React.DetailsHTMLAttributes<HTMLDetailsElement> &\n  HasRootRef<HTMLDetailsElement>;\n\n/**\n * Компонент, позволяет отображать несколько разделов контента в ограниченном\n * пространстве и сворачивать или разворачивать их пользователем.\n *\n * Обертка над details.\n *\n * @since 5.3.0\n * @see https://vkcom.github.io/VKUI/#/Accordion\n */\nexport const Accordion = (props: AccordionProps) => (\n  <RootComponent Component=\"details\" baseClassName={styles['Accordion']} {...props} />\n);\n\nAccordion.Summary = AccordionSummary;\n"],"names":["React","RootComponent","AccordionSummary","styles","Accordion","props","Component","baseClassName","Summary"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,OAAOC,YAAY,yBAAyB;AAK5C;;;;;;;;CAQC,GACD,OAAO,MAAMC,YAAY,CAACC,sBACxB,oBAACJ;QAAcK,WAAU;QAAUC,eAAeJ,MAAM,CAAC,YAAY;QAAG,GAAGE,KAAK;OAChF;AAEFD,UAAUI,OAAO,GAAGN"}

package/dist/cssm/components/ActionSheet/ActionSheet.d.ts

@@ -1,12 +1,16 @@
 import * as React from 'react';
 import { SharedDropdownProps } from './types';
+type CloseInitiators = 'action-item' | 'cancel-item' | 'other';
+export interface ActionSheetOnCloseOptions {
+    closedBy: CloseInitiators;
+}
 export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'>, React.HTMLAttributes<HTMLDivElement> {
     header?: React.ReactNode;
     text?: React.ReactNode;
     /**
      * Закрыть попап по клику снаружи.
      */
-    onClose: VoidFunction;
+    onClose(options: ActionSheetOnCloseOptions): void;
     /**
      * Только мобильный iOS.
      */
@@ -16,3 +20,4 @@ export interface ActionSheetProps extends Pick<SharedDropdownProps, 'toggleRef'
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
  */
 export declare const ActionSheet: ({ children, className, header, text, style, iosCloseItem, popupDirection, popupOffsetDistance, placement, ...restProps }: ActionSheetProps) => React.JSX.Element;
+export {};

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

@@ -19,11 +19,13 @@ const warn = warnOnce('ActionSheet');
  * @see https://vkcom.github.io/VKUI/#/ActionSheet
  */ export const ActionSheet = ({ children, className, header, text, style, iosCloseItem, popupDirection, popupOffsetDistance, placement, ...restProps })=>{
     const platform = usePlatform();
-    const [closing, setClosing] = React.useState(false);
-    const onClose = ()=>setClosing(true);
+    const [closingBy, setClosingBy] = React.useState(undefined);
+    const onClose = ()=>setClosingBy('other');
     const _action = React.useRef(noop);
     const afterClose = ()=>{
-        restProps.onClose();
+        restProps.onClose({
+            closedBy: closingBy || 'other'
+        });
         _action.current();
         _action.current = noop;
     };
@@ -35,21 +37,21 @@ const warn = warnOnce('ActionSheet');
     }
     const fallbackTransitionFinish = useTimeout(afterClose, timeout);
     React.useEffect(()=>{
-        if (closing) {
+        if (closingBy) {
             fallbackTransitionFinish.set();
         } else {
             fallbackTransitionFinish.clear();
         }
     }, [
-        closing,
+        closingBy,
         fallbackTransitionFinish
     ]);
-    const onItemClick = React.useCallback((action, immediateAction, autoClose)=>(event)=>{
+    const onItemClick = React.useCallback(({ action, immediateAction, autoClose, isCancelItem })=>(event)=>{
             event.persist();
             immediateAction && immediateAction(event);
             if (autoClose) {
                 _action.current = ()=>action && action(event);
-                setClosing(true);
+                setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');
             } else {
                 action && action(event);
             }
@@ -72,7 +74,7 @@ const warn = warnOnce('ActionSheet');
     const actionSheet = /*#__PURE__*/ React.createElement(ActionSheetContext.Provider, {
         value: contextValue
     }, /*#__PURE__*/ React.createElement(DropdownComponent, {
-        closing: closing,
+        closing: Boolean(closingBy),
         timeout: timeout,
         ...dropdownProps,
         onClose: onClose,
@@ -90,7 +92,7 @@ const warn = warnOnce('ActionSheet');
         return actionSheet;
     }
     return /*#__PURE__*/ React.createElement(PopoutWrapper, {
-        closing: closing,
+        closing: Boolean(closingBy),
         alignY: "bottom",
         className: className,
         style: style,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'\n    >,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose: VoidFunction;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection,\n  popupOffsetDistance,\n  placement,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closing, setClosing] = React.useState(false);\n  const onClose = () => setClosing(true);\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose();\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closing) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closing, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    (action, immediateAction, autoClose) => (event) => {\n      event.persist();\n      immediateAction && immediateAction(event);\n      if (autoClose) {\n        _action.current = () => action && action(event);\n        setClosing(true);\n      } else {\n        action && action(event);\n      }\n    },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  if (process.env.NODE_ENV === 'development' && popupDirection) {\n    // TODO [>=6]: popupDirection\n    warn('Свойство \"popupDirection\" будет удалено в v6. Используйте свойство \"placement\"');\n  }\n\n  popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={closing}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(header || text) && (\n          <header className={styles['ActionSheet__header']}>\n            {header && (\n              <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                {header}\n              </Footnote>\n            )}\n            {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n          </header>\n        )}\n        {children}\n        {platform === Platform.IOS &&\n          !isDesktop &&\n          (iosCloseItem ?? <ActionSheetDefaultIosCloseItem />)}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={closing}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","warnOnce","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdown","ActionSheetDropdownDesktop","styles","warn","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","closing","setClosing","useState","onClose","_action","useRef","afterClose","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","event","persist","contextValue","DropdownComponent","process","env","NODE_ENV","undefined","dropdownProps","Object","assign","actionSheet","Provider","value","weight","alignY","onClick","hasMask","fixed"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,kBAAkB,QAA0B,uBAAuB;AAC5E,SAASC,8BAA8B,QAAQ,mCAAmC;AAClF,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,0BAA0B,QAAQ,+BAA+B;AAE1E,OAAOC,YAAY,2BAA2B;AAE9C,MAAMC,OAAOT,SAAS;AAoBtB;;CAEC,GACD,OAAO,MAAMU,cAAc,CAAC,EAC1BC,QAAQ,EACRC,SAAS,EACTC,MAAM,EACNC,IAAI,EACJC,KAAK,EACLC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnBC,SAAS,EACT,GAAGC,WACc;IACjB,MAAMC,WAAWxB;IACjB,MAAM,CAACyB,SAASC,WAAW,GAAG9B,MAAM+B,QAAQ,CAAC;IAC7C,MAAMC,UAAU,IAAMF,WAAW;IACjC,MAAMG,UAAUjC,MAAMkC,MAAM,CAACjC;IAE7B,MAAMkC,aAAa;QACjBR,UAAUK,OAAO;QACjBC,QAAQG,OAAO;QACfH,QAAQG,OAAO,GAAGnC;IACpB;IAEA,MAAM,EAAEoC,SAAS,EAAE,GAAGnC;IAEtBM,cAAc,CAAC6B;IAEf,IAAIC,UAAUV,aAAatB,SAASiC,GAAG,GAAG,MAAM;IAEhD,IAAIF,WAAW;QACbC,UAAU;IACZ;IAEA,MAAME,2BAA2BnC,WAAW8B,YAAYG;IACxDtC,MAAMyC,SAAS,CAAC;QACd,IAAIZ,SAAS;YACXW,yBAAyBE,GAAG;QAC9B,OAAO;YACLF,yBAAyBG,KAAK;QAChC;IACF,GAAG;QAACd;QAASW;KAAyB;IAEtC,MAAMI,cAAc5C,MAAM6C,WAAW,CACnC,CAACC,QAAQC,iBAAiBC,YAAc,CAACC;YACvCA,MAAMC,OAAO;YACbH,mBAAmBA,gBAAgBE;YACnC,IAAID,WAAW;gBACbf,QAAQG,OAAO,GAAG,IAAMU,UAAUA,OAAOG;gBACzCnB,WAAW;YACb,OAAO;gBACLgB,UAAUA,OAAOG;YACnB;QACF,GACA,EAAE;IAEJ,MAAME,eAAehD,cAAc;QAAEyC;QAAaP;IAAU;IAE5D,MAAMe,oBAAoBf,YAAYvB,6BAA6BD;IAEnE,IAAIwC,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiB/B,gBAAgB;QAC5D,6BAA6B;QAC7BR,KAAK;IACP;IAEAQ,iBAAiBA,mBAAmBgC,YAAYhC,iBAAiB;IAEjE,MAAMiC,gBAAgBpB,YAClBqB,OAAOC,MAAM,CAAChC,WAAW;QAAEF;QAAqBD;QAAgBE;IAAU,KAC1EC;IAEJ,MAAMiC,4BACJ,oBAACjD,mBAAmBkD,QAAQ;QAACC,OAAOX;qBAClC,oBAACC;QACCvB,SAASA;QACTS,SAASA;QACR,GAAGmB,aAAa;QACjBzB,SAASA;QACTb,WAAWkB,YAAYlB,YAAYqC;QACnClC,OAAOe,YAAYf,QAAQkC;OAE1B,AAACpC,CAAAA,UAAUC,IAAG,mBACb,oBAACD;QAAOD,WAAWJ,MAAM,CAAC,sBAAsB;OAC7CK,wBACC,oBAACV;QAASqD,QAAO;QAAI5C,WAAWJ,MAAM,CAAC,qBAAqB;OACzDK,SAGJC,sBAAQ,oBAACX;QAASS,WAAWJ,MAAM,CAAC,oBAAoB;OAAGM,QAG/DH,UACAU,aAAatB,SAASiC,GAAG,IACxB,CAACF,aACAd,CAAAA,8BAAgB,oBAACX,qCAAgC;IAK1D,IAAIyB,WAAW;QACb,OAAOuB;IACT;IAEA,qBACE,oBAACnD;QACCoB,SAASA;QACTmC,QAAO;QACP7C,WAAWA;QACXG,OAAOA;QACP2C,SAASjC;QACTkC,SAAAA;QACAC,OAAAA;OAECP;AAGP,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';\nimport { Footnote } from '../Typography/Footnote/Footnote';\nimport { ActionSheetContext, ItemClickHandler } from './ActionSheetContext';\nimport { ActionSheetDefaultIosCloseItem } from './ActionSheetDefaultIosCloseItem';\nimport { ActionSheetDropdown } from './ActionSheetDropdown';\nimport { ActionSheetDropdownDesktop } from './ActionSheetDropdownDesktop';\nimport { SharedDropdownProps } from './types';\nimport styles from './ActionSheet.module.css';\n\nconst warn = warnOnce('ActionSheet');\ntype CloseInitiators = 'action-item' | 'cancel-item' | 'other';\nexport interface ActionSheetOnCloseOptions {\n  closedBy: CloseInitiators;\n}\n\nexport interface ActionSheetProps\n  extends Pick<\n      SharedDropdownProps,\n      'toggleRef' | 'popupDirection' | 'popupOffsetDistance' | 'placement'\n    >,\n    React.HTMLAttributes<HTMLDivElement> {\n  header?: React.ReactNode;\n  text?: React.ReactNode;\n  /**\n   * Закрыть попап по клику снаружи.\n   */\n  onClose(options: ActionSheetOnCloseOptions): void;\n  /**\n   * Только мобильный iOS.\n   */\n  iosCloseItem?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheet\n */\nexport const ActionSheet = ({\n  children,\n  className,\n  header,\n  text,\n  style,\n  iosCloseItem,\n  popupDirection,\n  popupOffsetDistance,\n  placement,\n  ...restProps\n}: ActionSheetProps) => {\n  const platform = usePlatform();\n  const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);\n  const onClose = () => setClosingBy('other');\n  const _action = React.useRef(noop);\n\n  const afterClose = () => {\n    restProps.onClose({ closedBy: closingBy || 'other' });\n    _action.current();\n    _action.current = noop;\n  };\n\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!isDesktop);\n\n  let timeout = platform === Platform.IOS ? 300 : 200;\n\n  if (isDesktop) {\n    timeout = 0;\n  }\n\n  const fallbackTransitionFinish = useTimeout(afterClose, timeout);\n  React.useEffect(() => {\n    if (closingBy) {\n      fallbackTransitionFinish.set();\n    } else {\n      fallbackTransitionFinish.clear();\n    }\n  }, [closingBy, fallbackTransitionFinish]);\n\n  const onItemClick = React.useCallback<ItemClickHandler>(\n    ({ action, immediateAction, autoClose, isCancelItem }) =>\n      (event) => {\n        event.persist();\n        immediateAction && immediateAction(event);\n        if (autoClose) {\n          _action.current = () => action && action(event);\n          setClosingBy(isCancelItem ? 'cancel-item' : 'action-item');\n        } else {\n          action && action(event);\n        }\n      },\n    [],\n  );\n  const contextValue = useObjectMemo({ onItemClick, isDesktop });\n\n  const DropdownComponent = isDesktop ? ActionSheetDropdownDesktop : ActionSheetDropdown;\n\n  if (process.env.NODE_ENV === 'development' && popupDirection) {\n    // TODO [>=6]: popupDirection\n    warn('Свойство \"popupDirection\" будет удалено в v6. Используйте свойство \"placement\"');\n  }\n\n  popupDirection = popupDirection !== undefined ? popupDirection : 'bottom';\n\n  const dropdownProps = isDesktop\n    ? Object.assign(restProps, { popupOffsetDistance, popupDirection, placement })\n    : restProps;\n\n  const actionSheet = (\n    <ActionSheetContext.Provider value={contextValue}>\n      <DropdownComponent\n        closing={Boolean(closingBy)}\n        timeout={timeout}\n        {...dropdownProps}\n        onClose={onClose}\n        className={isDesktop ? className : undefined}\n        style={isDesktop ? style : undefined}\n      >\n        {(header || text) && (\n          <header className={styles['ActionSheet__header']}>\n            {header && (\n              <Footnote weight=\"2\" className={styles['ActionSheet__title']}>\n                {header}\n              </Footnote>\n            )}\n            {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}\n          </header>\n        )}\n        {children}\n        {platform === Platform.IOS &&\n          !isDesktop &&\n          (iosCloseItem ?? <ActionSheetDefaultIosCloseItem />)}\n      </DropdownComponent>\n    </ActionSheetContext.Provider>\n  );\n\n  if (isDesktop) {\n    return actionSheet;\n  }\n\n  return (\n    <PopoutWrapper\n      closing={Boolean(closingBy)}\n      alignY=\"bottom\"\n      className={className}\n      style={style}\n      onClick={onClose}\n      hasMask\n      fixed\n    >\n      {actionSheet}\n    </PopoutWrapper>\n  );\n};\n"],"names":["React","noop","useAdaptivityWithJSMediaQueries","useObjectMemo","usePlatform","useTimeout","Platform","warnOnce","useScrollLock","PopoutWrapper","Footnote","ActionSheetContext","ActionSheetDefaultIosCloseItem","ActionSheetDropdown","ActionSheetDropdownDesktop","styles","warn","ActionSheet","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","closingBy","setClosingBy","useState","undefined","onClose","_action","useRef","afterClose","closedBy","current","isDesktop","timeout","IOS","fallbackTransitionFinish","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","DropdownComponent","process","env","NODE_ENV","dropdownProps","Object","assign","actionSheet","Provider","value","closing","Boolean","weight","alignY","onClick","hasMask","fixed"],"mappings":"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"}

package/dist/cssm/components/ActionSheet/ActionSheetContext.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 export type ActionType<T> = (event: React.MouseEvent<T>) => void;
-export type ItemClickHandler<T extends Element = Element> = (action: ActionType<T> | undefined, immediateAction: ActionType<T> | undefined, autoClose: boolean) => (event: React.MouseEvent) => void;
+export type ItemClickHandler<T extends Element = Element> = (options: {
+    action: ActionType<T> | undefined;
+    immediateAction: ActionType<T> | undefined;
+    autoClose: boolean;
+    isCancelItem: boolean;
+}) => (event: React.MouseEvent) => void;
 export type ActionSheetContextType<T extends Element = Element> = {
     onItemClick?: ItemClickHandler<T>;
     isDesktop?: boolean;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ActionType<T> = (event: React.MouseEvent<T>) => void;\n\nexport type ItemClickHandler<T extends Element = Element> = (\n  action: ActionType<T> | undefined,\n  immediateAction: ActionType<T> | undefined,\n  autoClose: boolean,\n) => (event: React.MouseEvent) => void;\n\nexport type ActionSheetContextType<T extends Element = Element> = {\n  onItemClick?: ItemClickHandler<T>;\n  isDesktop?: boolean;\n};\n\nexport const ActionSheetContext = React.createContext<ActionSheetContextType<any>>({});\n"],"names":["React","ActionSheetContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAe/B,OAAO,MAAMC,qBAAqBD,MAAME,aAAa,CAA8B,CAAC,GAAG"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type ActionType<T> = (event: React.MouseEvent<T>) => void;\n\nexport type ItemClickHandler<T extends Element = Element> = (options: {\n  action: ActionType<T> | undefined;\n  immediateAction: ActionType<T> | undefined;\n  autoClose: boolean;\n  isCancelItem: boolean;\n}) => (event: React.MouseEvent) => void;\n\nexport type ActionSheetContextType<T extends Element = Element> = {\n  onItemClick?: ItemClickHandler<T>;\n  isDesktop?: boolean;\n};\n\nexport const ActionSheetContext = React.createContext<ActionSheetContextType<any>>({});\n"],"names":["React","ActionSheetContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAgB/B,OAAO,MAAMC,qBAAqBD,MAAME,aAAa,CAA8B,CAAC,GAAG"}

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

@@ -4,6 +4,7 @@ export const ActionSheetDefaultIosCloseItem = (props)=>{
     return /*#__PURE__*/ React.createElement(ActionSheetItem, {
         autoClose: true,
         mode: "cancel",
+        isCancelItem: true,
         ...props
     }, "Отмена");
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["React","ActionSheetItem","ActionSheetDefaultIosCloseItem","props","autoClose","mode"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,qBACE,oBAACF;QAAgBG,WAAAA;QAAUC,MAAK;QAAU,GAAGF,KAAK;OAAE;AAIxD,EAAE"}
+{"version":3,"sources":["../../../../src/components/ActionSheet/ActionSheetDefaultIosCloseItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ActionSheetItem, ActionSheetItemProps } from '../ActionSheetItem/ActionSheetItem';\n\nexport const ActionSheetDefaultIosCloseItem = (props: ActionSheetItemProps) => {\n  return (\n    <ActionSheetItem autoClose mode=\"cancel\" isCancelItem {...props}>\n      Отмена\n    </ActionSheetItem>\n  );\n};\n"],"names":["React","ActionSheetItem","ActionSheetDefaultIosCloseItem","props","autoClose","mode","isCancelItem"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,eAAe,QAA8B,qCAAqC;AAE3F,OAAO,MAAMC,iCAAiC,CAACC;IAC7C,qBACE,oBAACF;QAAgBG,WAAAA;QAAUC,MAAK;QAASC,cAAAA;QAAc,GAAGH,KAAK;OAAE;AAIrE,EAAE"}

package/dist/cssm/components/ActionSheetItem/ActionSheetItem.d.ts

@@ -22,9 +22,14 @@ export interface ActionSheetItemProps extends React.HTMLAttributes<HTMLElement>,
      * Иконка для `checked` режима.
      */
     iconChecked?: React.ReactNode;
+    /**
+     * Позволяет отделить ActionItem от CancelItem для определении того,
+     * кто вызвал закрытие ActionSheet. Используется в ActionSheet.onClose()
+     */
+    isCancelItem?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
  */
-declare const ActionSheetItem: ({ children, autoClose, mode, meta, subtitle, before, selectable, value, name, checked, defaultChecked, onChange, onClick, onImmediateClick, multiline, iconChecked: iconCheckedProp, className, ...restProps }: ActionSheetItemProps) => React.JSX.Element;
+declare const ActionSheetItem: ({ children, autoClose, mode, meta, subtitle, before, selectable, value, name, checked, defaultChecked, onChange, onClick, onImmediateClick, multiline, iconChecked: iconCheckedProp, className, isCancelItem, ...restProps }: ActionSheetItemProps) => React.JSX.Element;
 export { ActionSheetItem };

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

@@ -13,7 +13,7 @@ import { Title } from '../Typography/Title/Title';
 import styles from './ActionSheetItem.module.css';
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
- */ const ActionSheetItem = ({ children, autoClose, mode = 'default', meta, subtitle, before, selectable, value, name, checked, defaultChecked, onChange, onClick, onImmediateClick, multiline = false, iconChecked: iconCheckedProp, className, ...restProps })=>{
+ */ const ActionSheetItem = ({ children, autoClose, mode = 'default', meta, subtitle, before, selectable, value, name, checked, defaultChecked, onChange, onClick, onImmediateClick, multiline = false, iconChecked: iconCheckedProp, className, isCancelItem, ...restProps })=>{
     const platform = usePlatform();
     const { onItemClick = ()=>noop, isDesktop } = React.useContext(ActionSheetContext);
     const { sizeY } = useAdaptivityWithJSMediaQueries();
@@ -27,7 +27,12 @@ import styles from './ActionSheetItem.module.css';
     return /*#__PURE__*/ React.createElement(Tappable, {
         Component: Component,
         ...restProps,
-        onClick: selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose)),
+        onClick: selectable ? onClick : onItemClick({
+            action: onClick,
+            immediateAction: onImmediateClick,
+            autoClose: Boolean(autoClose),
+            isCancelItem: Boolean(isCancelItem)
+        }),
         activeMode: platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined,
         className: classNames(styles['ActionSheetItem'], platform === Platform.IOS && styles['ActionSheetItem--ios'], mode === 'cancel' && styles['ActionSheetItem--mode-cancel'], mode === 'destructive' && styles['ActionSheetItem--mode-destructive'], sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'], isRich && styles['ActionSheetItem--rich'], isDesktop && styles['ActionSheetItem--desktop'], selectable && styles['ActionSheetItem--selectable'], className)
     }, before && /*#__PURE__*/ React.createElement("div", {
@@ -54,7 +59,12 @@ import styles from './ActionSheetItem.module.css';
         name: name,
         value: value,
         onChange: onChange,
-        onClick: onItemClick(noop, noop, Boolean(autoClose)),
+        onClick: onItemClick({
+            action: noop,
+            immediateAction: noop,
+            autoClose: Boolean(autoClose),
+            isCancelItem: Boolean(isCancelItem)
+        }),
         defaultChecked: defaultChecked,
         checked: checked,
         disabled: restProps.disabled

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={selectable ? onClick : onItemClick(onClick, onImmediateClick, Boolean(autoClose))}\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        selectable && styles['ActionSheetItem--selectable'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          {platform === Platform.IOS ? (\n            <Title\n              className={styles['ActionSheetItem__children']}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles['ActionSheetItem__children']}>{children}</Text>\n          )}\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick(noop, noop, Boolean(autoClose))}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","Title","styles","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","onItemClick","isDesktop","useContext","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","Boolean","activeMode","undefined","div","weight","level","input","type","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ActionSheetItem/ActionSheetItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon20CheckCircleOn, Icon24CheckCircleOn } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { SizeType } from '../../lib/adaptivity';\nimport { Platform } from '../../lib/platform';\nimport { ActionSheetContext, type ActionSheetContextType } from '../ActionSheet/ActionSheetContext';\nimport { Tappable } from '../Tappable/Tappable';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Text } from '../Typography/Text/Text';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './ActionSheetItem.module.css';\n\nexport interface ActionSheetItemProps\n  extends React.HTMLAttributes<HTMLElement>,\n    React.AnchorHTMLAttributes<HTMLElement>,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'checked' | 'value'> {\n  mode?: 'default' | 'destructive' | 'cancel';\n  before?: React.ReactNode;\n  meta?: React.ReactNode;\n  subtitle?: React.ReactNode;\n  autoClose?: boolean;\n  selectable?: boolean;\n  disabled?: boolean;\n  /**\n   * Все текстовые элементы при необходимости занимают несколько строк\n   */\n  multiline?: boolean;\n  /**\n   * Если autoClose === true, onClick будет вызван после завершения анимации скрытия и после вызова onClose.\n   * Из этого следует, что в объекте события значения полей типа `currentTarget` будут не определены.\n   * Если вам нужен объект события именно на момент клика, используйте `onImmediateClick`.\n   */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onImmediateClick?: React.MouseEventHandler<HTMLElement>;\n  /**\n   * Иконка для `checked` режима.\n   */\n  iconChecked?: React.ReactNode;\n  /**\n   * Позволяет отделить ActionItem от CancelItem для определении того,\n   * кто вызвал закрытие ActionSheet. Используется в ActionSheet.onClose()\n   */\n  isCancelItem?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ActionSheetItem\n */\nconst ActionSheetItem = ({\n  children,\n  autoClose,\n  mode = 'default',\n  meta,\n  subtitle,\n  before,\n  selectable,\n  value,\n  name,\n  checked,\n  defaultChecked,\n  onChange,\n  onClick,\n  onImmediateClick,\n  multiline = false,\n  iconChecked: iconCheckedProp,\n  className,\n  isCancelItem,\n  ...restProps\n}: ActionSheetItemProps) => {\n  const platform = usePlatform();\n  const { onItemClick = () => noop, isDesktop } =\n    React.useContext<ActionSheetContextType<HTMLElement>>(ActionSheetContext);\n  const { sizeY } = useAdaptivityWithJSMediaQueries();\n\n  const iconChecked =\n    iconCheckedProp ||\n    (sizeY === SizeType.COMPACT ? <Icon20CheckCircleOn /> : <Icon24CheckCircleOn />);\n\n  let Component: React.ElementType = restProps.href ? 'a' : 'div';\n\n  if (selectable) {\n    Component = 'label';\n  }\n\n  const isRich = subtitle || meta || selectable;\n  const isCentered = !isRich && !before && platform === Platform.IOS;\n\n  return (\n    <Tappable\n      Component={Component}\n      {...restProps}\n      onClick={\n        selectable\n          ? onClick\n          : onItemClick({\n              action: onClick,\n              immediateAction: onImmediateClick,\n              autoClose: Boolean(autoClose),\n              isCancelItem: Boolean(isCancelItem),\n            })\n      }\n      activeMode={platform === Platform.IOS ? styles['ActionSheetItem--active'] : undefined}\n      className={classNames(\n        styles['ActionSheetItem'],\n        platform === Platform.IOS && styles['ActionSheetItem--ios'],\n        mode === 'cancel' && styles['ActionSheetItem--mode-cancel'],\n        mode === 'destructive' && styles['ActionSheetItem--mode-destructive'],\n        sizeY === SizeType.COMPACT && styles['ActionSheetItem--sizeY-compact'],\n        isRich && styles['ActionSheetItem--rich'],\n        isDesktop && styles['ActionSheetItem--desktop'],\n        selectable && styles['ActionSheetItem--selectable'],\n        className,\n      )}\n    >\n      {before && <div className={styles['ActionSheetItem__before']}>{before}</div>}\n      <div\n        className={classNames(\n          styles['ActionSheetItem__container'],\n          !multiline && styles['ActionSheetItem--ellipsis'],\n        )}\n      >\n        <div\n          className={classNames(\n            styles['ActionSheetItem__content'],\n            isCentered && styles['ActionSheetItem--centered'],\n          )}\n        >\n          {platform === Platform.IOS ? (\n            <Title\n              className={styles['ActionSheetItem__children']}\n              weight={mode === 'cancel' ? '2' : '3'}\n              level={isCentered ? '2' : '3'}\n            >\n              {children}\n            </Title>\n          ) : (\n            <Text className={styles['ActionSheetItem__children']}>{children}</Text>\n          )}\n          {meta && <Text className={styles['ActionSheetItem__meta']}>{meta}</Text>}\n        </div>\n        {subtitle && <Subhead className={styles['ActionSheetItem__subtitle']}>{subtitle}</Subhead>}\n      </div>\n      {selectable && (\n        <div className={styles['ActionSheetItem__after']}>\n          <input\n            type=\"radio\"\n            className={styles['ActionSheetItem__radio']}\n            name={name}\n            value={value}\n            onChange={onChange}\n            onClick={onItemClick({\n              action: noop,\n              immediateAction: noop,\n              autoClose: Boolean(autoClose),\n              isCancelItem: Boolean(isCancelItem),\n            })}\n            defaultChecked={defaultChecked}\n            checked={checked}\n            disabled={restProps.disabled}\n          />\n          <div className={styles['ActionSheetItem__marker']}>{iconChecked}</div>\n        </div>\n      )}\n    </Tappable>\n  );\n};\n\nexport { ActionSheetItem };\n"],"names":["React","Icon20CheckCircleOn","Icon24CheckCircleOn","classNames","noop","useAdaptivityWithJSMediaQueries","usePlatform","SizeType","Platform","ActionSheetContext","Tappable","Subhead","Text","Title","styles","ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","isCancelItem","restProps","platform","onItemClick","isDesktop","useContext","sizeY","COMPACT","Component","href","isRich","isCentered","IOS","action","immediateAction","Boolean","activeMode","undefined","div","weight","level","input","type","disabled"],"mappings":"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"}

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

@@ -2,11 +2,23 @@ import * as React from 'react';
 import { hasMouse as _hasPointer } from '@vkontakte/vkjs';
 import { useBridgeAdaptivity } from '../../hooks/useBridgeAdaptivity';
 import { BREAKPOINTS, SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';
+import { warnOnce } from '../../lib/warnOnce';
 import { AdaptivityContext } from './AdaptivityContext';
+const warn = warnOnce('AdaptivityProvider');
 /**
  * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider
  */ export const AdaptivityProvider = ({ viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, children })=>{
-    const bridge = useBridgeAdaptivity();
+    // TODO [>=6]: удалить использование хука (#5049)
+    /* eslint-disable @typescript-eslint/naming-convention */ const LEGACY_isPerhapsPropsByBridgeTypeAdaptive = viewWidth !== undefined && viewHeight !== undefined;
+    const LEGACY_isPerhapsPropsByBridgeTypeForceMobile = viewWidth !== undefined && sizeX !== undefined && sizeY !== undefined;
+    const LEGACY_disableInternalUseBridgeAdaptivity = LEGACY_isPerhapsPropsByBridgeTypeAdaptive || LEGACY_isPerhapsPropsByBridgeTypeForceMobile;
+    const LEGACY_bridge = useBridgeAdaptivity(LEGACY_disableInternalUseBridgeAdaptivity);
+    /* eslint-enable @typescript-eslint/naming-convention */ if (process.env.NODE_ENVIRONMENT === 'development') {
+        // TODO [>=6]: удалить warn
+        if (!LEGACY_disableInternalUseBridgeAdaptivity) {
+            warn("[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useAdaptivity()` из @vkontakte/vk-bridge-react и результат передайте в компонент (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore
+        }
+    }
     const adaptivity = React.useMemo(()=>calculateAdaptivity({
             viewWidth,
             viewHeight,
@@ -14,22 +26,24 @@ import { AdaptivityContext } from './AdaptivityContext';
             sizeY,
             hasPointer,
             hasHover
-        }, bridge), [
+        }, LEGACY_bridge), [
         viewWidth,
         viewHeight,
         sizeX,
         sizeY,
         hasPointer,
         hasHover,
-        bridge
+        LEGACY_bridge
     ]);
     return /*#__PURE__*/ React.createElement(AdaptivityContext.Provider, {
         value: adaptivity
     }, children);
 };
-function calculateAdaptivity({ viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }, bridge) {
-    if (bridge.type === 'adaptive') {
-        const { viewportWidth, viewportHeight } = bridge;
+function calculateAdaptivity({ viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }, LEGACY_bridge) {
+    // TODO [>=6]: удалить блок кода c использованием LEGACY_bridge (#5049)
+    //  https://github.com/VKCOM/VKUI/blob/v5.5.5/packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.tsx#L46-L92
+    if (LEGACY_bridge.type === 'adaptive') {
+        const { viewportWidth, viewportHeight } = LEGACY_bridge;
         if (viewportWidth >= BREAKPOINTS.DESKTOP) {
             viewWidth = ViewWidth.DESKTOP;
         } else if (viewportWidth >= BREAKPOINTS.TABLET) {
@@ -58,10 +72,10 @@ function calculateAdaptivity({ viewWidth, viewHeight, sizeX, sizeY, hasPointer,
         } else {
             sizeY = SizeType.REGULAR;
         }
-    } else if (bridge.type === 'force_mobile' || bridge.type === 'force_mobile_compact') {
+    } else if (LEGACY_bridge.type === 'force_mobile' || LEGACY_bridge.type === 'force_mobile_compact') {
         viewWidth = ViewWidth.MOBILE;
         sizeX = SizeType.COMPACT;
-        if (bridge.type === 'force_mobile_compact') {
+        if (LEGACY_bridge.type === 'force_mobile_compact') {
             sizeY = SizeType.COMPACT;
         } else {
             sizeY = SizeType.REGULAR;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AdaptivityProvider/AdaptivityProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasMouse as _hasPointer } from '@vkontakte/vkjs';\nimport { BridgeAdaptivity, useBridgeAdaptivity } from '../../hooks/useBridgeAdaptivity';\nimport { BREAKPOINTS, SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';\nimport { HasChildren } from '../../types';\nimport { AdaptivityContext, type AdaptivityProps } from './AdaptivityContext';\n\nexport interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider\n */\nexport const AdaptivityProvider = ({\n  viewWidth,\n  viewHeight,\n  sizeX,\n  sizeY,\n  hasPointer,\n  hasHover,\n  children,\n}: AdaptivityProviderProps) => {\n  const bridge = useBridgeAdaptivity();\n  const adaptivity = React.useMemo(\n    () =>\n      calculateAdaptivity(\n        {\n          viewWidth,\n          viewHeight,\n          sizeX,\n          sizeY,\n          hasPointer,\n          hasHover,\n        },\n        bridge,\n      ),\n    [viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, bridge],\n  );\n\n  return <AdaptivityContext.Provider value={adaptivity}>{children}</AdaptivityContext.Provider>;\n};\n\nfunction calculateAdaptivity(\n  { viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }: AdaptivityProps,\n  bridge: BridgeAdaptivity,\n) {\n  if (bridge.type === 'adaptive') {\n    const { viewportWidth, viewportHeight } = bridge;\n\n    if (viewportWidth >= BREAKPOINTS.DESKTOP) {\n      viewWidth = ViewWidth.DESKTOP;\n    } else if (viewportWidth >= BREAKPOINTS.TABLET) {\n      viewWidth = ViewWidth.TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {\n      viewWidth = ViewWidth.SMALL_TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.MOBILE) {\n      viewWidth = ViewWidth.MOBILE;\n    } else {\n      viewWidth = ViewWidth.SMALL_MOBILE;\n    }\n\n    if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {\n      viewHeight = ViewHeight.MEDIUM;\n    } else if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {\n      viewHeight = ViewHeight.SMALL;\n    } else {\n      viewHeight = ViewHeight.EXTRA_SMALL;\n    }\n\n    if (viewWidth <= ViewWidth.MOBILE) {\n      sizeX = SizeType.COMPACT;\n    } else {\n      sizeX = SizeType.REGULAR;\n    }\n\n    if (\n      (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n      viewHeight <= ViewHeight.EXTRA_SMALL\n    ) {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else if (bridge.type === 'force_mobile' || bridge.type === 'force_mobile_compact') {\n    viewWidth = ViewWidth.MOBILE;\n    sizeX = SizeType.COMPACT;\n\n    if (bridge.type === 'force_mobile_compact') {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else {\n    if (sizeX === undefined && viewWidth !== undefined) {\n      if (viewWidth <= ViewWidth.MOBILE) {\n        sizeX = SizeType.COMPACT;\n      } else {\n        sizeX = SizeType.REGULAR;\n      }\n    }\n    if (sizeY === undefined && viewWidth !== undefined && viewHeight !== undefined) {\n      if (\n        (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n        viewHeight <= ViewHeight.EXTRA_SMALL\n      ) {\n        sizeY = SizeType.COMPACT;\n      } else {\n        sizeY = SizeType.REGULAR;\n      }\n    }\n  }\n\n  return {\n    viewWidth,\n    viewHeight,\n    sizeX,\n    sizeY,\n    hasPointer,\n    hasHover,\n  };\n}\n"],"names":["React","hasMouse","_hasPointer","useBridgeAdaptivity","BREAKPOINTS","SizeType","ViewHeight","ViewWidth","AdaptivityContext","AdaptivityProvider","viewWidth","viewHeight","sizeX","sizeY","hasPointer","hasHover","children","bridge","adaptivity","useMemo","calculateAdaptivity","Provider","value","type","viewportWidth","viewportHeight","DESKTOP","TABLET","SMALL_TABLET","MOBILE","SMALL_MOBILE","MEDIUM_HEIGHT","MEDIUM","MOBILE_LANDSCAPE_HEIGHT","SMALL","EXTRA_SMALL","COMPACT","REGULAR","undefined"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AdaptivityProvider/AdaptivityProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { hasMouse as _hasPointer } from '@vkontakte/vkjs';\nimport { BridgeAdaptivity, useBridgeAdaptivity } from '../../hooks/useBridgeAdaptivity';\nimport { BREAKPOINTS, SizeType, ViewHeight, ViewWidth } from '../../lib/adaptivity';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { AdaptivityContext, type AdaptivityProps } from './AdaptivityContext';\n\nconst warn = warnOnce('AdaptivityProvider');\n\nexport interface AdaptivityProviderProps extends AdaptivityProps, HasChildren {}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AdaptivityProvider\n */\nexport const AdaptivityProvider = ({\n  viewWidth,\n  viewHeight,\n  sizeX,\n  sizeY,\n  hasPointer,\n  hasHover,\n  children,\n}: AdaptivityProviderProps) => {\n  // TODO [>=6]: удалить использование хука (#5049)\n  /* eslint-disable @typescript-eslint/naming-convention */\n  const LEGACY_isPerhapsPropsByBridgeTypeAdaptive =\n    viewWidth !== undefined && viewHeight !== undefined;\n  const LEGACY_isPerhapsPropsByBridgeTypeForceMobile =\n    viewWidth !== undefined && sizeX !== undefined && sizeY !== undefined;\n  const LEGACY_disableInternalUseBridgeAdaptivity =\n    LEGACY_isPerhapsPropsByBridgeTypeAdaptive || LEGACY_isPerhapsPropsByBridgeTypeForceMobile;\n  const LEGACY_bridge = useBridgeAdaptivity(LEGACY_disableInternalUseBridgeAdaptivity);\n  /* eslint-enable @typescript-eslint/naming-convention */\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    // TODO [>=6]: удалить warn\n    if (!LEGACY_disableInternalUseBridgeAdaptivity) {\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useAdaptivity()` из @vkontakte/vk-bridge-react и результат передайте в компонент (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  const adaptivity = React.useMemo(\n    () =>\n      calculateAdaptivity(\n        {\n          viewWidth,\n          viewHeight,\n          sizeX,\n          sizeY,\n          hasPointer,\n          hasHover,\n        },\n        LEGACY_bridge,\n      ),\n    [viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover, LEGACY_bridge],\n  );\n\n  return <AdaptivityContext.Provider value={adaptivity}>{children}</AdaptivityContext.Provider>;\n};\n\nfunction calculateAdaptivity(\n  { viewWidth, viewHeight, sizeX, sizeY, hasPointer, hasHover }: AdaptivityProps,\n  LEGACY_bridge: BridgeAdaptivity, // eslint-disable-line @typescript-eslint/naming-convention\n) {\n  // TODO [>=6]: удалить блок кода c использованием LEGACY_bridge (#5049)\n  //  https://github.com/VKCOM/VKUI/blob/v5.5.5/packages/vkui/src/components/AdaptivityProvider/AdaptivityProvider.tsx#L46-L92\n  if (LEGACY_bridge.type === 'adaptive') {\n    const { viewportWidth, viewportHeight } = LEGACY_bridge;\n\n    if (viewportWidth >= BREAKPOINTS.DESKTOP) {\n      viewWidth = ViewWidth.DESKTOP;\n    } else if (viewportWidth >= BREAKPOINTS.TABLET) {\n      viewWidth = ViewWidth.TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {\n      viewWidth = ViewWidth.SMALL_TABLET;\n    } else if (viewportWidth >= BREAKPOINTS.MOBILE) {\n      viewWidth = ViewWidth.MOBILE;\n    } else {\n      viewWidth = ViewWidth.SMALL_MOBILE;\n    }\n\n    if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {\n      viewHeight = ViewHeight.MEDIUM;\n    } else if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {\n      viewHeight = ViewHeight.SMALL;\n    } else {\n      viewHeight = ViewHeight.EXTRA_SMALL;\n    }\n\n    if (viewWidth <= ViewWidth.MOBILE) {\n      sizeX = SizeType.COMPACT;\n    } else {\n      sizeX = SizeType.REGULAR;\n    }\n\n    if (\n      (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n      viewHeight <= ViewHeight.EXTRA_SMALL\n    ) {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else if (\n    LEGACY_bridge.type === 'force_mobile' ||\n    LEGACY_bridge.type === 'force_mobile_compact'\n  ) {\n    viewWidth = ViewWidth.MOBILE;\n    sizeX = SizeType.COMPACT;\n\n    if (LEGACY_bridge.type === 'force_mobile_compact') {\n      sizeY = SizeType.COMPACT;\n    } else {\n      sizeY = SizeType.REGULAR;\n    }\n  } else {\n    if (sizeX === undefined && viewWidth !== undefined) {\n      if (viewWidth <= ViewWidth.MOBILE) {\n        sizeX = SizeType.COMPACT;\n      } else {\n        sizeX = SizeType.REGULAR;\n      }\n    }\n    if (sizeY === undefined && viewWidth !== undefined && viewHeight !== undefined) {\n      if (\n        (viewWidth >= ViewWidth.SMALL_TABLET && _hasPointer) ||\n        viewHeight <= ViewHeight.EXTRA_SMALL\n      ) {\n        sizeY = SizeType.COMPACT;\n      } else {\n        sizeY = SizeType.REGULAR;\n      }\n    }\n  }\n\n  return {\n    viewWidth,\n    viewHeight,\n    sizeX,\n    sizeY,\n    hasPointer,\n    hasHover,\n  };\n}\n"],"names":["React","hasMouse","_hasPointer","useBridgeAdaptivity","BREAKPOINTS","SizeType","ViewHeight","ViewWidth","warnOnce","AdaptivityContext","warn","AdaptivityProvider","viewWidth","viewHeight","sizeX","sizeY","hasPointer","hasHover","children","LEGACY_isPerhapsPropsByBridgeTypeAdaptive","undefined","LEGACY_isPerhapsPropsByBridgeTypeForceMobile","LEGACY_disableInternalUseBridgeAdaptivity","LEGACY_bridge","process","env","NODE_ENVIRONMENT","adaptivity","useMemo","calculateAdaptivity","Provider","value","type","viewportWidth","viewportHeight","DESKTOP","TABLET","SMALL_TABLET","MOBILE","SMALL_MOBILE","MEDIUM_HEIGHT","MEDIUM","MOBILE_LANDSCAPE_HEIGHT","SMALL","EXTRA_SMALL","COMPACT","REGULAR"],"mappings":"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"}

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

@@ -1,17 +1,34 @@
 import * as React from 'react';
+export type SafeAreaInsets = {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
 export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Режим встраивания */
     mode?: 'partial' | 'embedded' | 'full';
     window?: Window;
     scroll?: 'global' | 'contain';
+    safeAreaInsets?: SafeAreaInsets;
     /**
      * Кастомный root-элемент портала
      */
     portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
-    /** Disable portal for components */
+    /**
+     * Отключает рендер всплывающих компонентов в отдельном контейнере
+     */
     disablePortal?: boolean;
+    /**
+     * По умолчанию, mode="embedded" переносит систему координат элементов с `position: fixed` на
+     * свой контейнер через `transform: translate3d(0, 0, 0)`.
+     *
+     * Это поведение можно отключить с помощью этого параметра.
+     */
+    disableParentTransformForPositionFixedElements?: boolean;
+    layout?: 'card' | 'plain';
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
  */
-export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, className, ...props }: AppRootProps) => React.JSX.Element;
+export declare const AppRoot: ({ children, mode, scroll, portalRoot: portalRootProp, disablePortal, disableParentTransformForPositionFixedElements, className, safeAreaInsets, layout, ...props }: AppRootProps) => React.JSX.Element;

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { IconSettingsProvider } from '@vkontakte/icons';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAppearance } from '../../hooks/useAppearance';
@@ -9,24 +8,47 @@ import { SizeType } from '../../lib/adaptivity';
 import { useDOM } from '../../lib/dom';
 import { isRefObject } from '../../lib/isRefObject';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { warnOnce } from '../../lib/warnOnce';
 import { AppRootContext } from './AppRootContext';
 import { ElementScrollController, GlobalScrollController } from './ScrollContext';
 import styles from './AppRoot.module.css';
+const warn = warnOnce('AppRoot');
 const vkuiSizeXClassNames = {
     none: 'vkui--sizeX-none',
     [SizeType.REGULAR]: 'vkui--sizeX-regular'
 };
+const vkuiLayoutClassNames = {
+    card: 'vkui--layout-card',
+    plain: 'vkui--layout-plain'
+};
+function containerClassNames(layout, sizeX) {
+    const classNames = [];
+    if (layout) {
+        classNames.push(vkuiLayoutClassNames[layout]);
+    }
+    if (sizeX !== SizeType.COMPACT) {
+        classNames.push(vkuiSizeXClassNames[sizeX]);
+    }
+    return classNames;
+}
 const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
 /**
  * @see https://vkcom.github.io/VKUI/#/AppRoot
- */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot: portalRootProp = null, disablePortal, className, ...props })=>{
+ */ export const AppRoot = ({ children, mode = 'full', scroll = 'global', portalRoot: portalRootProp = null, disablePortal, disableParentTransformForPositionFixedElements, className, safeAreaInsets, layout, ...props })=>{
     const isKeyboardInputActive = useKeyboardInputTracker();
     const rootRef = React.useRef(null);
     const [portalRoot, setPortalRoot] = React.useState(null);
     const { document } = useDOM();
-    const insets = useInsets();
+    const deprecatedInsets = useInsets(!safeAreaInsets);
+    const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;
     const appearance = useAppearance();
     const { hasPointer, sizeX = 'none' } = useAdaptivity();
+    if (process.env.NODE_ENVIRONMENT === 'development') {
+        if (!safeAreaInsets) {
+            // TODO [>=6]: удалить warn
+            warn("[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)"); // prettier-ignore
+        }
+    }
     // setup portal
     useIsomorphicLayoutEffect(()=>{
         let portal = null;
@@ -59,11 +81,23 @@ const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
         const classes = [
             'vkui__root'
         ].concat(mode === 'embedded' ? 'vkui__root--embedded' : []);
-        parent?.classList.add(...classes);
+        if (parent) {
+            if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {
+                parent.style.transform = 'translate3d(0, 0, 0)';
+            }
+            parent.classList.add(...classes);
+        }
         return ()=>{
-            parent?.classList.remove(...classes);
+            if (parent) {
+                if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {
+                    parent.style.transform = '';
+                }
+                parent.classList.remove(...classes);
+            }
         };
-    }, []);
+    }, [
+        disableParentTransformForPositionFixedElements
+    ]);
     useIsomorphicLayoutEffect(()=>{
         if (mode === 'full') {
             document.documentElement.classList.add('vkui');
@@ -108,17 +142,18 @@ const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
         if (mode === 'partial') {
             return noop;
         }
-        const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;
+        const classNames = containerClassNames(layout, sizeX);
         const container = mode === 'embedded' ? rootRef.current?.parentElement : document.body;
-        if (className === null || !container) {
+        if (!classNames.length || !container) {
             return noop;
         }
-        container.classList.add(className);
+        container.classList.add(...classNames);
         return ()=>{
-            container.classList.remove(className);
+            container.classList.remove(...classNames);
         };
     }, [
-        sizeX
+        sizeX,
+        layout
     ]);
     useIsomorphicLayoutEffect(()=>{
         if (mode !== 'full' || appearance === undefined) {
@@ -139,13 +174,12 @@ const INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;
             embedded: mode === 'embedded',
             keyboardInput: isKeyboardInputActive,
             mode,
-            disablePortal
+            disablePortal,
+            layout
         }
     }, /*#__PURE__*/ React.createElement(ScrollController, {
         elRef: rootRef
-    }, /*#__PURE__*/ React.createElement(IconSettingsProvider, {
-        classPrefix: "vkui"
-    }, children)));
+    }, children));
     return mode === 'partial' ? content : /*#__PURE__*/ React.createElement("div", {
         ref: rootRef,
         className: classNames(styles['AppRoot'], hasPointer === undefined ? styles['AppRoot--pointer-none'] : !hasPointer && styles['AppRoot--pointer-has-not'], className),