@vkontakte/vkui 5.8.0-beta.0 → 5.8.0

package/README.md

@@ -22,19 +22,19 @@ VKUI — это библиотека адаптивных React-компонен
 **npm:**
 
 ```sh
-npm i @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge
+npm i @vkontakte/vkui @vkontakte/vk-bridge
 ```
 
 **yarn:**
 
 ```sh
-yarn add @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge
+yarn add @vkontakte/vkui @vkontakte/vk-bridge
 ```
 
 **pnpm:**
 
 ```sh
-pnpm add @vkontakte/vkui @vkontakte/icons @vkontakte/vk-bridge
+pnpm add @vkontakte/vkui @vkontakte/vk-bridge
 ```
 
 > _Обратите внимание_: мы поддерживаем [react](https://www.npmjs.com/package/react) и [react-dom](https://www.npmjs.com/package/react-dom) `^17.0.0` и `^18.1.0`

package/dist/cjs/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/cjs/components/Accordion/Accordion.js

@@ -10,19 +10,14 @@ Object.defineProperty(exports, "Accordion", {
 });
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _object_spread = require("@swc/helpers/_/_object_spread");
-var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _vkjs = require("@vkontakte/vkjs");
+var _RootComponent = require("../RootComponent/RootComponent");
 var _AccordionSummary = require("./AccordionSummary");
-var Accordion = function(_param) /*#__PURE__*/ {
-    var getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties._(_param, [
-        "getRootRef",
-        "className"
-    ]);
-    return _react.createElement("details", _object_spread._({
-        className: (0, _vkjs.classNames)("vkuiAccordion", className),
-        ref: getRootRef
-    }, restProps));
+var Accordion = function(props) {
+    return /*#__PURE__*/ _react.createElement(_RootComponent.RootComponent, _object_spread._({
+        Component: "details",
+        baseClassName: "vkuiAccordion"
+    }, props));
 };
 Accordion.Summary = _AccordionSummary.AccordionSummary;
 

package/dist/cjs/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":["Accordion","getRootRef","className","restProps","details","classNames","ref","Summary","AccordionSummary"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;;+DAlBU;oBACI;gCAEM;AAe1B,IAAMA,YAAY;QAAGC,oBAAAA,YAAYC,mBAAAA,WAAcC;QAA1BF;QAAYC;;WACtC,qBAACE;QAAQF,WAAWG,IAAAA,gBAAU,mBAAsBH;QAAYI,KAAKL;OAAgBE;AAAY;AAGnGH,UAAUO,OAAO,GAAGC,kCAAgB"}
+{"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":["Accordion","props","RootComponent","Component","baseClassName","Summary","AccordionSummary"],"mappings":";;;;+BAkBaA;;;eAAAA;;;;;+DAlBU;6BAEO;gCACG;AAe1B,IAAMA,YAAY,SAACC;yBACxB,qBAACC,4BAAa;QAACC,WAAU;QAAUC,aAAa;OAA2BH;;AAG7ED,UAAUK,OAAO,GAAGC,kCAAgB"}

package/dist/cjs/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/cjs/components/ActionSheet/ActionSheet.js

@@ -42,13 +42,15 @@ var ActionSheet = function(_param) {
         "placement"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var _React_useState = _sliced_to_array._(_react.useState(false), 2), closing = _React_useState[0], setClosing = _React_useState[1];
+    var _React_useState = _sliced_to_array._(_react.useState(undefined), 2), closingBy = _React_useState[0], setClosingBy = _React_useState[1];
     var onClose = function() {
-        return setClosing(true);
+        return setClosingBy("other");
     };
     var _action = _react.useRef(_vkjs.noop);
     var afterClose = function() {
-        restProps.onClose();
+        restProps.onClose({
+            closedBy: closingBy || "other"
+        });
         _action.current();
         _action.current = _vkjs.noop;
     };
@@ -60,16 +62,17 @@ var ActionSheet = function(_param) {
     }
     var fallbackTransitionFinish = (0, _useTimeout.useTimeout)(afterClose, timeout);
     _react.useEffect(function() {
-        if (closing) {
+        if (closingBy) {
             fallbackTransitionFinish.set();
         } else {
             fallbackTransitionFinish.clear();
         }
     }, [
-        closing,
+        closingBy,
         fallbackTransitionFinish
     ]);
-    var onItemClick = _react.useCallback(function(action, immediateAction, autoClose) {
+    var onItemClick = _react.useCallback(function(param) {
+        var action = param.action, immediateAction = param.immediateAction, autoClose = param.autoClose, isCancelItem = param.isCancelItem;
         return function(event) {
             event.persist();
             immediateAction && immediateAction(event);
@@ -77,7 +80,7 @@ var ActionSheet = function(_param) {
                 _action.current = function() {
                     return action && action(event);
                 };
-                setClosing(true);
+                setClosingBy(isCancelItem ? "cancel-item" : "action-item");
             } else {
                 action && action(event);
             }
@@ -101,7 +104,7 @@ var ActionSheet = function(_param) {
     var actionSheet = /*#__PURE__*/ _react.createElement(_ActionSheetContext.ActionSheetContext.Provider, {
         value: contextValue
     }, /*#__PURE__*/ _react.createElement(DropdownComponent, _object_spread_props._(_object_spread._({
-        closing: closing,
+        closing: Boolean(closingBy),
         timeout: timeout
     }, dropdownProps), {
         onClose: onClose,
@@ -119,7 +122,7 @@ var ActionSheet = function(_param) {
         return actionSheet;
     }
     return /*#__PURE__*/ _react.createElement(_PopoutWrapper.PopoutWrapper, {
-        closing: closing,
+        closing: Boolean(closingBy),
         alignY: "bottom",
         className: className,
         style: style,

package/dist/cjs/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":["ActionSheet","warn","warnOnce","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","usePlatform","React","useState","closing","setClosing","onClose","_action","useRef","noop","afterClose","current","isDesktop","useAdaptivityWithJSMediaQueries","useScrollLock","timeout","Platform","IOS","fallbackTransitionFinish","useTimeout","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","event","persist","contextValue","useObjectMemo","DropdownComponent","ActionSheetDropdownDesktop","ActionSheetDropdown","process","env","NODE_ENV","undefined","dropdownProps","Object","assign","actionSheet","ActionSheetContext","Provider","value","Footnote","weight","ActionSheetDefaultIosCloseItem","PopoutWrapper","alignY","onClick","hasMask","fixed"],"mappings":"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"}
+{"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":["ActionSheet","warn","warnOnce","children","className","header","text","style","iosCloseItem","popupDirection","popupOffsetDistance","placement","restProps","platform","usePlatform","React","useState","undefined","closingBy","setClosingBy","onClose","_action","useRef","noop","afterClose","closedBy","current","isDesktop","useAdaptivityWithJSMediaQueries","useScrollLock","timeout","Platform","IOS","fallbackTransitionFinish","useTimeout","useEffect","set","clear","onItemClick","useCallback","action","immediateAction","autoClose","isCancelItem","event","persist","contextValue","useObjectMemo","DropdownComponent","ActionSheetDropdownDesktop","ActionSheetDropdown","process","env","NODE_ENV","dropdownProps","Object","assign","actionSheet","ActionSheetContext","Provider","value","closing","Boolean","Footnote","weight","ActionSheetDefaultIosCloseItem","PopoutWrapper","alignY","onClick","hasMask","fixed"],"mappings":"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"}

package/dist/cjs/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/cjs/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":["ActionSheetContext","React","createContext"],"mappings":";;;;+BAeaA;;;eAAAA;;;;+DAfU;AAehB,IAAMA,qBAAqBC,OAAMC,aAAa,CAA8B,CAAC"}
+{"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":["ActionSheetContext","React","createContext"],"mappings":";;;;+BAgBaA;;;eAAAA;;;;+DAhBU;AAgBhB,IAAMA,qBAAqBC,OAAMC,aAAa,CAA8B,CAAC"}

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

@@ -15,7 +15,8 @@ var _ActionSheetItem = require("../ActionSheetItem/ActionSheetItem");
 var ActionSheetDefaultIosCloseItem = function(props) {
     return /*#__PURE__*/ _react.createElement(_ActionSheetItem.ActionSheetItem, _object_spread._({
         autoClose: true,
-        mode: "cancel"
+        mode: "cancel",
+        isCancelItem: true
     }, props), "Отмена");
 };
 

package/dist/cjs/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":["ActionSheetDefaultIosCloseItem","props","ActionSheetItem","autoClose","mode"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;+DAHU;+BAC+B;AAE/C,IAAMA,iCAAiC,SAACC;IAC7C,qBACE,qBAACC,gCAAe;QAACC,WAAAA;QAAUC,MAAK;OAAaH,QAAO;AAIxD"}
+{"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":["ActionSheetDefaultIosCloseItem","props","ActionSheetItem","autoClose","mode","isCancelItem"],"mappings":";;;;+BAGaA;;;eAAAA;;;;;+DAHU;+BAC+B;AAE/C,IAAMA,iCAAiC,SAACC;IAC7C,qBACE,qBAACC,gCAAe;QAACC,WAAAA;QAAUC,MAAK;QAASC,cAAAA;OAAiBJ,QAAO;AAIrE"}

package/dist/cjs/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/cjs/components/ActionSheetItem/ActionSheetItem.js

@@ -27,7 +27,7 @@ var _Title = require("../Typography/Title/Title");
 /**
  * @see https://vkcom.github.io/VKUI/#/ActionSheetItem
  */ var ActionSheetItem = function(_param) {
-    var children = _param.children, autoClose = _param.autoClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, meta = _param.meta, subtitle = _param.subtitle, before = _param.before, selectable = _param.selectable, value = _param.value, name = _param.name, checked = _param.checked, defaultChecked = _param.defaultChecked, onChange = _param.onChange, onClick = _param.onClick, onImmediateClick = _param.onImmediateClick, _param_multiline = _param.multiline, multiline = _param_multiline === void 0 ? false : _param_multiline, iconCheckedProp = _param.iconChecked, className = _param.className, restProps = _object_without_properties._(_param, [
+    var children = _param.children, autoClose = _param.autoClose, _param_mode = _param.mode, mode = _param_mode === void 0 ? "default" : _param_mode, meta = _param.meta, subtitle = _param.subtitle, before = _param.before, selectable = _param.selectable, value = _param.value, name = _param.name, checked = _param.checked, defaultChecked = _param.defaultChecked, onChange = _param.onChange, onClick = _param.onClick, onImmediateClick = _param.onImmediateClick, _param_multiline = _param.multiline, multiline = _param_multiline === void 0 ? false : _param_multiline, iconCheckedProp = _param.iconChecked, className = _param.className, isCancelItem = _param.isCancelItem, restProps = _object_without_properties._(_param, [
         "children",
         "autoClose",
         "mode",
@@ -44,7 +44,8 @@ var _Title = require("../Typography/Title/Title");
         "onImmediateClick",
         "multiline",
         "iconChecked",
-        "className"
+        "className",
+        "isCancelItem"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
     var _React_useContext = _react.useContext(_ActionSheetContext.ActionSheetContext), _React_useContext_onItemClick = _React_useContext.onItemClick, onItemClick = _React_useContext_onItemClick === void 0 ? function() {
@@ -61,7 +62,12 @@ var _Title = require("../Typography/Title/Title");
     return /*#__PURE__*/ _react.createElement(_Tappable.Tappable, _object_spread_props._(_object_spread._({
         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.Platform.IOS ? "vkuiActionSheetItem--active" : undefined,
         className: (0, _vkjs.classNames)("vkuiActionSheetItem", platform === _platform.Platform.IOS && "vkuiActionSheetItem--ios", mode === "cancel" && "vkuiActionSheetItem--mode-cancel", mode === "destructive" && "vkuiActionSheetItem--mode-destructive", sizeY === _adaptivity.SizeType.COMPACT && "vkuiActionSheetItem--sizeY-compact", isRich && "vkuiActionSheetItem--rich", isDesktop && "vkuiActionSheetItem--desktop", selectable && "vkuiActionSheetItem--selectable", className)
     }), before && /*#__PURE__*/ _react.createElement("div", {
@@ -88,7 +94,12 @@ var _Title = require("../Typography/Title/Title");
         name: name,
         value: value,
         onChange: onChange,
-        onClick: onItemClick(_vkjs.noop, _vkjs.noop, Boolean(autoClose)),
+        onClick: onItemClick({
+            action: _vkjs.noop,
+            immediateAction: _vkjs.noop,
+            autoClose: Boolean(autoClose),
+            isCancelItem: Boolean(isCancelItem)
+        }),
         defaultChecked: defaultChecked,
         checked: checked,
         disabled: restProps.disabled

package/dist/cjs/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":["ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","restProps","platform","usePlatform","React","useContext","ActionSheetContext","onItemClick","noop","isDesktop","sizeY","useAdaptivityWithJSMediaQueries","SizeType","COMPACT","Icon20CheckCircleOn","Icon24CheckCircleOn","Component","href","isRich","isCentered","Platform","IOS","Tappable","Boolean","activeMode","undefined","classNames","div","Title","weight","level","Text","Subhead","input","type","disabled"],"mappings":";;;;+BAqJSA;;;eAAAA;;;;;;;+DArJc;qBACkC;oBACxB;+CACe;2BACpB;0BACH;wBACA;kCACuC;wBACvC;uBACD;oBACH;qBACC;AA+BtB;;CAEC,GACD,IAAMA,kBAAkB;QACtBC,kBAAAA,UACAC,mBAAAA,gCACAC,MAAAA,gCAAO,yBACPC,cAAAA,MACAC,kBAAAA,UACAC,gBAAAA,QACAC,oBAAAA,YACAC,eAAAA,OACAC,cAAAA,MACAC,iBAAAA,SACAC,wBAAAA,gBACAC,kBAAAA,UACAC,iBAAAA,SACAC,0BAAAA,4CACAC,WAAAA,0CAAY,0BACZC,AAAaC,yBAAbD,aACAE,mBAAAA,WACGC;QAjBHlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IACEC,oBAAAA,OAAMC,UAAU,CAAsCC,sCAAkB,mCAAxEF,kBADMG,aAAAA,yDAAc;eAAMC,UAAI;uCAAEC,YAChCL,kBADgCK;IAElC,IAAM,AAAEC,QAAUC,IAAAA,gEAA+B,IAAzCD;IAER,IAAMZ,cACJC,mBACCW,CAAAA,UAAUE,oBAAQ,CAACC,OAAO,iBAAG,qBAACC,0BAAmB,wBAAM,qBAACC,0BAAmB,OAAE;IAEhF,IAAIC,YAA+Bf,UAAUgB,IAAI,GAAG,MAAM;IAE1D,IAAI5B,YAAY;QACd2B,YAAY;IACd;IAEA,IAAME,SAAS/B,YAAYD,QAAQG;IACnC,IAAM8B,aAAa,CAACD,UAAU,CAAC9B,UAAUc,aAAakB,kBAAQ,CAACC,GAAG;IAElE,qBACE,qBAACC,kBAAQ;QACPN,WAAWA;OACPf;QACJN,SAASN,aAAaM,UAAUY,YAAYZ,SAASC,kBAAkB2B,QAAQvC;QAC/EwC,YAAYtB,aAAakB,kBAAQ,CAACC,GAAG,mCAAuCI;QAC5EzB,WAAW0B,IAAAA,gBAAU,yBAEnBxB,aAAakB,kBAAQ,CAACC,GAAG,gCACzBpC,SAAS,gDACTA,SAAS,0DACTyB,UAAUE,oBAAQ,CAACC,OAAO,0CAC1BK,uCACAT,6CACApB,iDACAW;QAGDZ,wBAAU,qBAACuC;QAAI3B,SAAS;OAAsCZ,uBAC/D,qBAACuC;QACC3B,WAAW0B,IAAAA,gBAAU,oCAEnB,CAAC7B;qBAGH,qBAAC8B;QACC3B,WAAW0B,IAAAA,gBAAU,kCAEnBP;OAGDjB,aAAakB,kBAAQ,CAACC,GAAG,iBACxB,qBAACO,YAAK;QACJ5B,SAAS;QACT6B,QAAQ5C,SAAS,WAAW,MAAM;QAClC6C,OAAOX,aAAa,MAAM;OAEzBpC,0BAGH,qBAACgD,UAAI;QAAC/B,SAAS;OAAwCjB,WAExDG,sBAAQ,qBAAC6C,UAAI;QAAC/B,SAAS;OAAoCd,QAE7DC,0BAAY,qBAAC6C,gBAAO;QAAChC,SAAS;OAAwCb,YAExEE,4BACC,qBAACsC;QAAI3B,SAAS;qBACZ,qBAACiC;QACCC,MAAK;QACLlC,SAAS;QACTT,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASY,YAAYC,UAAI,EAAEA,UAAI,EAAEe,QAAQvC;QACzCS,gBAAgBA;QAChBD,SAASA;QACT2C,UAAUlC,UAAUkC,QAAQ;sBAE9B,qBAACR;QAAI3B,SAAS;OAAsCF;AAK9D"}
+{"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":["ActionSheetItem","children","autoClose","mode","meta","subtitle","before","selectable","value","name","checked","defaultChecked","onChange","onClick","onImmediateClick","multiline","iconChecked","iconCheckedProp","className","isCancelItem","restProps","platform","usePlatform","React","useContext","ActionSheetContext","onItemClick","noop","isDesktop","sizeY","useAdaptivityWithJSMediaQueries","SizeType","COMPACT","Icon20CheckCircleOn","Icon24CheckCircleOn","Component","href","isRich","isCentered","Platform","IOS","Tappable","action","immediateAction","Boolean","activeMode","undefined","classNames","div","Title","weight","level","Text","Subhead","input","type","disabled"],"mappings":";;;;+BAyKSA;;;eAAAA;;;;;;;+DAzKc;qBACkC;oBACxB;+CACe;2BACpB;0BACH;wBACA;kCACuC;wBACvC;uBACD;oBACH;qBACC;AAoCtB;;CAEC,GACD,IAAMA,kBAAkB;QACtBC,kBAAAA,UACAC,mBAAAA,gCACAC,MAAAA,gCAAO,yBACPC,cAAAA,MACAC,kBAAAA,UACAC,gBAAAA,QACAC,oBAAAA,YACAC,eAAAA,OACAC,cAAAA,MACAC,iBAAAA,SACAC,wBAAAA,gBACAC,kBAAAA,UACAC,iBAAAA,SACAC,0BAAAA,4CACAC,WAAAA,0CAAY,0BACZC,AAAaC,yBAAbD,aACAE,mBAAAA,WACAC,sBAAAA,cACGC;QAlBHnB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;;IAGA,IAAME,WAAWC,IAAAA,wBAAW;IAC5B,IACEC,oBAAAA,OAAMC,UAAU,CAAsCC,sCAAkB,mCAAxEF,kBADMG,aAAAA,yDAAc;eAAMC,UAAI;uCAAEC,YAChCL,kBADgCK;IAElC,IAAM,AAAEC,QAAUC,IAAAA,gEAA+B,IAAzCD;IAER,IAAMb,cACJC,mBACCY,CAAAA,UAAUE,oBAAQ,CAACC,OAAO,iBAAG,qBAACC,0BAAmB,wBAAM,qBAACC,0BAAmB,OAAE;IAEhF,IAAIC,YAA+Bf,UAAUgB,IAAI,GAAG,MAAM;IAE1D,IAAI7B,YAAY;QACd4B,YAAY;IACd;IAEA,IAAME,SAAShC,YAAYD,QAAQG;IACnC,IAAM+B,aAAa,CAACD,UAAU,CAAC/B,UAAUe,aAAakB,kBAAQ,CAACC,GAAG;IAElE,qBACE,qBAACC,kBAAQ;QACPN,WAAWA;OACPf;QACJP,SACEN,aACIM,UACAa,YAAY;YACVgB,QAAQ7B;YACR8B,iBAAiB7B;YACjBZ,WAAW0C,QAAQ1C;YACnBiB,cAAcyB,QAAQzB;QACxB;QAEN0B,YAAYxB,aAAakB,kBAAQ,CAACC,GAAG,mCAAuCM;QAC5E5B,WAAW6B,IAAAA,gBAAU,yBAEnB1B,aAAakB,kBAAQ,CAACC,GAAG,gCACzBrC,SAAS,gDACTA,SAAS,0DACT0B,UAAUE,oBAAQ,CAACC,OAAO,0CAC1BK,uCACAT,6CACArB,iDACAW;QAGDZ,wBAAU,qBAAC0C;QAAI9B,SAAS;OAAsCZ,uBAC/D,qBAAC0C;QACC9B,WAAW6B,IAAAA,gBAAU,oCAEnB,CAAChC;qBAGH,qBAACiC;QACC9B,WAAW6B,IAAAA,gBAAU,kCAEnBT;OAGDjB,aAAakB,kBAAQ,CAACC,GAAG,iBACxB,qBAACS,YAAK;QACJ/B,SAAS;QACTgC,QAAQ/C,SAAS,WAAW,MAAM;QAClCgD,OAAOb,aAAa,MAAM;OAEzBrC,0BAGH,qBAACmD,UAAI;QAAClC,SAAS;OAAwCjB,WAExDG,sBAAQ,qBAACgD,UAAI;QAAClC,SAAS;OAAoCd,QAE7DC,0BAAY,qBAACgD,gBAAO;QAACnC,SAAS;OAAwCb,YAExEE,4BACC,qBAACyC;QAAI9B,SAAS;qBACZ,qBAACoC;QACCC,MAAK;QACLrC,SAAS;QACTT,MAAMA;QACND,OAAOA;QACPI,UAAUA;QACVC,SAASa,YAAY;YACnBgB,QAAQf,UAAI;YACZgB,iBAAiBhB,UAAI;YACrBzB,WAAW0C,QAAQ1C;YACnBiB,cAAcyB,QAAQzB;QACxB;QACAR,gBAAgBA;QAChBD,SAASA;QACT8C,UAAUpC,UAAUoC,QAAQ;sBAE9B,qBAACR;QAAI9B,SAAS;OAAsCF;AAK9D"}

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

@@ -15,10 +15,20 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
      * Кастомный 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, safeAreaInsets, ...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/cjs/components/AppRoot/AppRoot.js

@@ -15,7 +15,6 @@ var _object_without_properties = require("@swc/helpers/_/_object_without_propert
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _icons = require("@vkontakte/icons");
 var _vkjs = require("@vkontakte/vkjs");
 var _useAdaptivity = require("../../hooks/useAdaptivity");
 var _useAppearance = require("../../hooks/useAppearance");
@@ -32,16 +31,32 @@ var warn = (0, _warnOnce.warnOnce)("AppRoot");
 var vkuiSizeXClassNames = _define_property._({
     none: "vkui--sizeX-none"
 }, _adaptivity.SizeType.REGULAR, "vkui--sizeX-regular");
+var vkuiLayoutClassNames = {
+    card: "vkui--layout-card",
+    plain: "vkui--layout-plain"
+};
+function containerClassNames(layout, sizeX) {
+    var classNames = [];
+    if (layout) {
+        classNames.push(vkuiLayoutClassNames[layout]);
+    }
+    if (sizeX !== _adaptivity.SizeType.COMPACT) {
+        classNames.push(vkuiSizeXClassNames[sizeX]);
+    }
+    return classNames;
+}
 var INSET_CUSTOM_PROPERTY_PREFIX = "--vkui_internal--safe_area_inset_";
 var AppRoot = function(_param) {
-    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "full" : _param_mode, _param_scroll = _param.scroll, scroll = _param_scroll === void 0 ? "global" : _param_scroll, tmp = _param.portalRoot, portalRootProp = tmp === void 0 ? null : tmp, disablePortal = _param.disablePortal, className = _param.className, safeAreaInsets = _param.safeAreaInsets, props = _object_without_properties._(_param, [
+    var children = _param.children, _param_mode = _param.mode, mode = _param_mode === void 0 ? "full" : _param_mode, _param_scroll = _param.scroll, scroll = _param_scroll === void 0 ? "global" : _param_scroll, tmp = _param.portalRoot, portalRootProp = tmp === void 0 ? null : tmp, disablePortal = _param.disablePortal, disableParentTransformForPositionFixedElements = _param.disableParentTransformForPositionFixedElements, className = _param.className, safeAreaInsets = _param.safeAreaInsets, layout = _param.layout, props = _object_without_properties._(_param, [
         "children",
         "mode",
         "scroll",
         "portalRoot",
         "disablePortal",
+        "disableParentTransformForPositionFixedElements",
         "className",
-        "safeAreaInsets"
+        "safeAreaInsets",
+        "layout"
     ]);
     var isKeyboardInputActive = (0, _useKeyboardInputTracker.useKeyboardInputTracker)();
     var rootRef = _react.useRef(null);
@@ -83,8 +98,7 @@ var AppRoot = function(_param) {
     ]);
     // setup root classes
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
-        var _parent_classList;
-        var _rootRef_current, _parent;
+        var _rootRef_current;
         if (mode === "partial") {
             return _vkjs.noop;
         }
@@ -92,13 +106,25 @@ var AppRoot = function(_param) {
         var classes = [
             "vkui__root"
         ].concat(mode === "embedded" ? "vkui__root--embedded" : []);
-        (_parent = parent) === null || _parent === void 0 ? void 0 : (_parent_classList = _parent.classList).add.apply(_parent_classList, _to_consumable_array._(classes));
-        return function() {
+        if (parent) {
             var _parent_classList;
-            var _parent;
-            (_parent = parent) === null || _parent === void 0 ? void 0 : (_parent_classList = _parent.classList).remove.apply(_parent_classList, _to_consumable_array._(classes));
+            if (mode === "embedded" && !disableParentTransformForPositionFixedElements) {
+                parent.style.transform = "translate3d(0, 0, 0)";
+            }
+            (_parent_classList = parent.classList).add.apply(_parent_classList, _to_consumable_array._(classes));
+        }
+        return function() {
+            if (parent) {
+                var _parent_classList;
+                if (mode === "embedded" && !disableParentTransformForPositionFixedElements) {
+                    parent.style.transform = "";
+                }
+                (_parent_classList = parent.classList).remove.apply(_parent_classList, _to_consumable_array._(classes));
+            }
         };
-    }, []);
+    }, [
+        disableParentTransformForPositionFixedElements
+    ]);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
         if (mode === "full") {
             document.documentElement.classList.add("vkui");
@@ -141,21 +167,24 @@ var AppRoot = function(_param) {
     ]);
     // adaptivity handler
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
+        var _container_classList;
         var _rootRef_current;
         if (mode === "partial") {
             return _vkjs.noop;
         }
-        var className = sizeX !== _adaptivity.SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;
+        var _$classNames = containerClassNames(layout, sizeX);
         var container = mode === "embedded" ? (_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.parentElement : document.body;
-        if (className === null || !container) {
+        if (!_$classNames.length || !container) {
             return _vkjs.noop;
         }
-        container.classList.add(className);
+        (_container_classList = container.classList).add.apply(_container_classList, _to_consumable_array._(_$classNames));
         return function() {
-            container.classList.remove(className);
+            var _container_classList;
+            (_container_classList = container.classList).remove.apply(_container_classList, _to_consumable_array._(_$classNames));
         };
     }, [
-        sizeX
+        sizeX,
+        layout
     ]);
     (0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function() {
         if (mode !== "full" || appearance === undefined) {
@@ -180,13 +209,12 @@ var AppRoot = function(_param) {
             embedded: mode === "embedded",
             keyboardInput: isKeyboardInputActive,
             mode: mode,
-            disablePortal: disablePortal
+            disablePortal: disablePortal,
+            layout: layout
         }
     }, /*#__PURE__*/ _react.createElement(ScrollController, {
         elRef: rootRef
-    }, /*#__PURE__*/ _react.createElement(_icons.IconSettingsProvider, {
-        classPrefix: "vkui"
-    }, children)));
+    }, children));
     return mode === "partial" ? content : /*#__PURE__*/ _react.createElement("div", _object_spread._({
         ref: rootRef,
         className: (0, _vkjs.classNames)("vkuiAppRoot", hasPointer === undefined ? "vkuiAppRoot--pointer-none" : !hasPointer && "vkuiAppRoot--pointer-has-not", className)

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconSettingsProvider } from '@vkontakte/icons';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst warn = warnOnce('AppRoot');\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /** Disable portal for components */\n  disablePortal?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  className,\n  safeAreaInsets,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const deprecatedInsets = useInsets(!safeAreaInsets);\n  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    if (!safeAreaInsets) {\n      // TODO [>=6]: удалить warn\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\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    };\n  }, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof SafeAreaInsets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n    const className = sizeX !== SizeType.COMPACT ? vkuiSizeXClassNames[sizeX] : null;\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (className === null || !container) {\n      return noop;\n    }\n\n    container.classList.add(className);\n    return () => {\n      container.classList.remove(className);\n    };\n  }, [sizeX]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n      }}\n    >\n      <ScrollController elRef={rootRef}>\n        <IconSettingsProvider classPrefix=\"vkui\">{children}</IconSettingsProvider>\n      </ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","warn","warnOnce","vkuiSizeXClassNames","none","SizeType","REGULAR","INSET_CUSTOM_PROPERTY_PREFIX","children","mode","scroll","portalRootProp","portalRoot","disablePortal","className","safeAreaInsets","props","isKeyboardInputActive","useKeyboardInputTracker","rootRef","React","useRef","useState","setPortalRoot","document","useDOM","deprecatedInsets","useInsets","insets","appearance","useAppearance","useAdaptivity","hasPointer","sizeX","process","env","NODE_ENVIRONMENT","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","parent","noop","classes","concat","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","style","setProperty","removeProperty","COMPACT","container","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","IconSettingsProvider","classPrefix","div","ref","classNames"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/AppRoot/AppRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { useInsets } from '../../hooks/useInsets';\nimport { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';\nimport { SizeType } from '../../lib/adaptivity';\nimport { useDOM } from '../../lib/dom';\nimport { isRefObject } from '../../lib/isRefObject';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { AppRootContext } from './AppRootContext';\nimport { ElementScrollController, GlobalScrollController } from './ScrollContext';\nimport styles from './AppRoot.module.css';\n\nconst warn = warnOnce('AppRoot');\n\nexport type SafeAreaInsets = {\n  top?: number;\n  right?: number;\n  bottom?: number;\n  left?: number;\n};\n\nconst vkuiSizeXClassNames = {\n  none: 'vkui--sizeX-none',\n  [SizeType.REGULAR]: 'vkui--sizeX-regular',\n};\n\nconst vkuiLayoutClassNames = {\n  card: 'vkui--layout-card',\n  plain: 'vkui--layout-plain',\n};\n\nfunction containerClassNames(layout: AppRootProps['layout'], sizeX: SizeType | 'none'): string[] {\n  const classNames: string[] = [];\n\n  if (layout) {\n    classNames.push(vkuiLayoutClassNames[layout]);\n  }\n\n  if (sizeX !== SizeType.COMPACT) {\n    classNames.push(vkuiSizeXClassNames[sizeX]);\n  }\n\n  return classNames;\n}\n\nconst INSET_CUSTOM_PROPERTY_PREFIX = `--vkui_internal--safe_area_inset_`;\n\n// Используйте classList, но будьте осторожны\n/* eslint-disable no-restricted-properties */\n\nexport interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Режим встраивания */\n  mode?: 'partial' | 'embedded' | 'full';\n  window?: Window;\n  scroll?: 'global' | 'contain';\n  safeAreaInsets?: SafeAreaInsets;\n  /**\n   * Кастомный root-элемент портала\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Отключает рендер всплывающих компонентов в отдельном контейнере\n   */\n  disablePortal?: boolean;\n  /**\n   * По умолчанию, mode=\"embedded\" переносит систему координат элементов с `position: fixed` на\n   * свой контейнер через `transform: translate3d(0, 0, 0)`.\n   *\n   * Это поведение можно отключить с помощью этого параметра.\n   */\n  disableParentTransformForPositionFixedElements?: boolean;\n  layout?: 'card' | 'plain';\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/AppRoot\n */\nexport const AppRoot = ({\n  children,\n  mode = 'full',\n  scroll = 'global',\n  portalRoot: portalRootProp = null,\n  disablePortal,\n  disableParentTransformForPositionFixedElements,\n  className,\n  safeAreaInsets,\n  layout,\n  ...props\n}: AppRootProps) => {\n  const isKeyboardInputActive = useKeyboardInputTracker();\n  const rootRef = React.useRef<HTMLDivElement | null>(null);\n  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(null);\n  const { document } = useDOM();\n  const deprecatedInsets = useInsets(!safeAreaInsets);\n  const insets = safeAreaInsets ? safeAreaInsets : deprecatedInsets;\n  const appearance = useAppearance();\n\n  const { hasPointer, sizeX = 'none' } = useAdaptivity();\n\n  if (process.env.NODE_ENVIRONMENT === 'development') {\n    if (!safeAreaInsets) {\n      // TODO [>=6]: удалить warn\n      warn(\"[@vkontakte/vk-bridge] Интеграция VKUI с @vkontakte/vk-bridge устарела и будет удалена в v6. Используйте хук `useInsets()` из @vkontakte/vk-bridge-react и результат передайте в параметр `safeAreaInsets` (см. https://github.com/VKCOM/VKUI/issues/5049)\"); // prettier-ignore\n    }\n  }\n\n  // setup portal\n  useIsomorphicLayoutEffect(() => {\n    let portal: HTMLElement | null = null;\n    if (portalRootProp) {\n      if (isRefObject(portalRootProp)) {\n        portal = portalRootProp.current;\n      } else {\n        portal = portalRootProp;\n      }\n    }\n    if (!portal) {\n      portal = document!.createElement('div');\n      document!.body.appendChild(portal);\n    }\n    setPortalRoot(portal);\n    return () => {\n      if (!portalRootProp) {\n        portal?.parentElement?.removeChild(portal);\n      }\n    };\n  }, [portalRootProp]);\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    if (parent) {\n      if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n        parent.style.transform = 'translate3d(0, 0, 0)';\n      }\n      parent.classList.add(...classes);\n    }\n\n    return () => {\n      if (parent) {\n        if (mode === 'embedded' && !disableParentTransformForPositionFixedElements) {\n          parent.style.transform = '';\n        }\n        parent.classList.remove(...classes);\n      }\n    };\n  }, [disableParentTransformForPositionFixedElements]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'full') {\n      document!.documentElement.classList.add('vkui');\n\n      return () => {\n        document!.documentElement.classList.remove('vkui');\n      };\n    }\n\n    return undefined;\n  }, [document, mode]);\n\n  // setup insets\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial' || !rootRef.current?.parentElement) {\n      return noop;\n    }\n\n    const parent = rootRef.current.parentElement;\n\n    let key: keyof SafeAreaInsets;\n    for (key in insets) {\n      if (insets.hasOwnProperty(key) && typeof insets[key] === 'number') {\n        const inset = insets[key];\n        parent.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n        portalRoot &&\n          portalRoot.style.setProperty(INSET_CUSTOM_PROPERTY_PREFIX + key, `${inset}px`);\n      }\n    }\n\n    return () => {\n      let key: keyof SafeAreaInsets;\n      for (key in insets) {\n        if (insets.hasOwnProperty(key)) {\n          parent.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n          portalRoot && portalRoot.style.removeProperty(INSET_CUSTOM_PROPERTY_PREFIX + key);\n        }\n      }\n    };\n  }, [insets, portalRoot]);\n\n  // adaptivity handler\n  useIsomorphicLayoutEffect(() => {\n    if (mode === 'partial') {\n      return noop;\n    }\n\n    const classNames = containerClassNames(layout, sizeX);\n\n    const container = mode === 'embedded' ? rootRef.current?.parentElement : document!.body;\n\n    if (!classNames.length || !container) {\n      return noop;\n    }\n\n    container.classList.add(...classNames);\n    return () => {\n      container.classList.remove(...classNames);\n    };\n  }, [sizeX, layout]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (mode !== 'full' || appearance === undefined) {\n      return noop;\n    }\n    document!.documentElement.style.setProperty('color-scheme', appearance);\n\n    return () => document!.documentElement.style.removeProperty('color-scheme');\n  }, [appearance]);\n\n  const ScrollController = React.useMemo(\n    () => (scroll === 'contain' ? ElementScrollController : GlobalScrollController),\n    [scroll],\n  );\n\n  const content = (\n    <AppRootContext.Provider\n      value={{\n        appRoot: rootRef,\n        portalRoot,\n        embedded: mode === 'embedded',\n        keyboardInput: isKeyboardInputActive,\n        mode,\n        disablePortal,\n        layout,\n      }}\n    >\n      <ScrollController elRef={rootRef}>{children}</ScrollController>\n    </AppRootContext.Provider>\n  );\n\n  return mode === 'partial' ? (\n    content\n  ) : (\n    <div\n      ref={rootRef}\n      className={classNames(\n        styles['AppRoot'],\n        hasPointer === undefined\n          ? styles['AppRoot--pointer-none']\n          : !hasPointer && styles['AppRoot--pointer-has-not'],\n        className,\n      )}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n};\n"],"names":["AppRoot","warn","warnOnce","vkuiSizeXClassNames","none","SizeType","REGULAR","vkuiLayoutClassNames","card","plain","containerClassNames","layout","sizeX","classNames","push","COMPACT","INSET_CUSTOM_PROPERTY_PREFIX","children","mode","scroll","portalRootProp","portalRoot","disablePortal","disableParentTransformForPositionFixedElements","className","safeAreaInsets","props","isKeyboardInputActive","useKeyboardInputTracker","rootRef","React","useRef","useState","setPortalRoot","document","useDOM","deprecatedInsets","useInsets","insets","appearance","useAppearance","useAdaptivity","hasPointer","process","env","NODE_ENVIRONMENT","useIsomorphicLayoutEffect","portal","isRefObject","current","createElement","body","appendChild","parentElement","removeChild","noop","parent","classes","concat","style","transform","classList","add","remove","documentElement","undefined","key","hasOwnProperty","inset","setProperty","removeProperty","container","length","ScrollController","useMemo","ElementScrollController","GlobalScrollController","content","AppRootContext","Provider","value","appRoot","embedded","keyboardInput","elRef","div","ref"],"mappings":"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"}

package/dist/cjs/components/AppRoot/AppRootContext.d.ts

@@ -6,5 +6,6 @@ export interface AppRootContextInterface {
     mode?: 'partial' | 'embedded' | 'full';
     keyboardInput?: boolean;
     disablePortal?: boolean;
+    layout?: 'card' | 'plain';
 }
 export declare const AppRootContext: React.Context<AppRootContextInterface>;