@vkontakte/vkui 6.0.3 → 6.1.0

package/dist/components/Placeholder/Placeholder.d.ts

@@ -32,11 +32,11 @@ export interface PlaceholderProps extends PlaceholderContainerProps {
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
 export declare const Placeholder: {
-    ({ icon, header, children, action, noPadding, ...restProps }: PlaceholderProps): React.JSX.Element;
-    Container: ({ stretched, noPadding, ...restProps }: PlaceholderContainerProps) => React.JSX.Element;
-    Icon: (props: PlaceholderIconProps) => React.JSX.Element;
-    Header: ({ className, ...restProps }: PlaceholderHeaderProps) => React.JSX.Element;
-    Text: ({ className, ...restProps }: PlaceholderTextProps) => React.JSX.Element;
-    Actions: (props: PlaceholderActionsProps) => React.JSX.Element;
+    ({ icon, header, children, action, noPadding, ...restProps }: PlaceholderProps): import("react/jsx-runtime").JSX.Element;
+    Container: ({ stretched, noPadding, ...restProps }: PlaceholderContainerProps) => import("react/jsx-runtime").JSX.Element;
+    Icon: (props: PlaceholderIconProps) => import("react/jsx-runtime").JSX.Element;
+    Header: ({ className, ...restProps }: PlaceholderHeaderProps) => import("react/jsx-runtime").JSX.Element;
+    Text: ({ className, ...restProps }: PlaceholderTextProps) => import("react/jsx-runtime").JSX.Element;
+    Actions: (props: PlaceholderActionsProps) => import("react/jsx-runtime").JSX.Element;
 };
 //# sourceMappingURL=Placeholder.d.ts.map

package/dist/components/Placeholder/Placeholder.js

@@ -1,5 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -10,18 +12,18 @@ const PlaceholderContainer = (_param)=>{
         "stretched",
         "noPadding"
     ]);
-    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread({
         baseClassName: classNames("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", !noPadding && "vkuiPlaceholder--withPadding")
     }, restProps));
 };
-const PlaceholderIcon = (props)=>/*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+const PlaceholderIcon = (props)=>/*#__PURE__*/ _jsx(RootComponent, _object_spread({
         baseClassName: "vkuiPlaceholder__icon"
     }, props));
 const PlaceholderHeader = (_param)=>{
     var { className } = _param, restProps = _object_without_properties(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ React.createElement(Title, _object_spread({
+    return /*#__PURE__*/ _jsx(Title, _object_spread({
         level: "2",
         weight: "2",
         className: classNames(className, "vkuiPlaceholder__header")
@@ -31,12 +33,12 @@ const PlaceholderText = (_param)=>{
     var { className } = _param, restProps = _object_without_properties(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ React.createElement(Headline, _object_spread({
+    return /*#__PURE__*/ _jsx(Headline, _object_spread({
         weight: "3",
         className: classNames(className, "vkuiPlaceholder__text")
     }, restProps));
 };
-const PlaceholderActions = (props)=>/*#__PURE__*/ React.createElement(RootComponent, _object_spread({
+const PlaceholderActions = (props)=>/*#__PURE__*/ _jsx(RootComponent, _object_spread({
         baseClassName: "vkuiPlaceholder__action"
     }, props));
 /**
@@ -49,9 +51,24 @@ const PlaceholderActions = (props)=>/*#__PURE__*/ React.createElement(RootCompon
         "action",
         "noPadding"
     ]);
-    return /*#__PURE__*/ React.createElement(PlaceholderContainer, _object_spread({
+    return /*#__PURE__*/ _jsxs(PlaceholderContainer, _object_spread_props(_object_spread({
         noPadding: noPadding
-    }, restProps), hasReactNode(icon) && /*#__PURE__*/ React.createElement(PlaceholderIcon, null, icon), hasReactNode(header) && /*#__PURE__*/ React.createElement(PlaceholderHeader, null, header), hasReactNode(children) && /*#__PURE__*/ React.createElement(PlaceholderText, null, children), hasReactNode(action) && /*#__PURE__*/ React.createElement(PlaceholderActions, null, action));
+    }, restProps), {
+        children: [
+            hasReactNode(icon) && /*#__PURE__*/ _jsx(PlaceholderIcon, {
+                children: icon
+            }),
+            hasReactNode(header) && /*#__PURE__*/ _jsx(PlaceholderHeader, {
+                children: header
+            }),
+            hasReactNode(children) && /*#__PURE__*/ _jsx(PlaceholderText, {
+                children: children
+            }),
+            hasReactNode(action) && /*#__PURE__*/ _jsx(PlaceholderActions, {
+                children: action
+            })
+        ]
+    }));
 };
 Placeholder.Container = PlaceholderContainer;
 Placeholder.Icon = PlaceholderIcon;

package/dist/components/Placeholder/Placeholder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n   */\n  stretched?: boolean;\n  /**\n   * Убирает отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\nconst PlaceholderContainer = ({\n  stretched,\n  noPadding = false,\n  ...restProps\n}: PlaceholderContainerProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      !noPadding && styles['Placeholder--withPadding'],\n    )}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderIcon = (props: PlaceholderIconProps) => (\n  <RootComponent baseClassName={styles['Placeholder__icon']} {...props} />\n);\n\nexport type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderHeader = ({ className, ...restProps }: PlaceholderHeaderProps) => (\n  <Title\n    level=\"2\"\n    weight=\"2\"\n    className={classNames(className, styles['Placeholder__header'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps) => (\n  <Headline\n    weight=\"3\"\n    className={classNames(className, styles['Placeholder__text'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderActions = (props: PlaceholderActionsProps) => (\n  <RootComponent baseClassName={styles['Placeholder__action']} {...props} />\n);\n\nexport interface PlaceholderProps extends PlaceholderContainerProps {\n  /**\n   * Иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Заголовок плейсхолдера\n   */\n  header?: React.ReactNode;\n  /**\n   * Кнопка действия\n   */\n  action?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  children,\n  action,\n  noPadding = false,\n  ...restProps\n}: PlaceholderProps) => (\n  <PlaceholderContainer noPadding={noPadding} {...restProps}>\n    {hasReactNode(icon) && <PlaceholderIcon>{icon}</PlaceholderIcon>}\n    {hasReactNode(header) && <PlaceholderHeader>{header}</PlaceholderHeader>}\n    {hasReactNode(children) && <PlaceholderText>{children}</PlaceholderText>}\n    {hasReactNode(action) && <PlaceholderActions>{action}</PlaceholderActions>}\n  </PlaceholderContainer>\n);\n\nPlaceholder.Container = PlaceholderContainer;\nPlaceholder.Icon = PlaceholderIcon;\nPlaceholder.Header = PlaceholderHeader;\nPlaceholder.Text = PlaceholderText;\nPlaceholder.Actions = PlaceholderActions;\n"],"names":["React","classNames","hasReactNode","RootComponent","Headline","Title","PlaceholderContainer","stretched","noPadding","restProps","baseClassName","PlaceholderIcon","props","PlaceholderHeader","className","level","weight","PlaceholderText","PlaceholderActions","Placeholder","icon","header","children","action","Container","Icon","Header","Text","Actions"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAclD,MAAMC,uBAAuB;QAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EAES,WADvBC;QAFHF;QACAC;;yBAGA,oBAACL;QACCO,eAAeT,8BAEbM,2CACA,CAACC;OAECC;;AAMR,MAAME,kBAAkB,CAACC,sBACvB,oBAACT;QAAcO,aAAa;OAAmCE;AAKjE,MAAMC,oBAAoB;QAAC,EAAEC,SAAS,EAAwC,WAAnCL;QAAdK;;yBAC3B,oBAACT;QACCU,OAAM;QACNC,QAAO;QACPF,WAAWb,WAAWa;OAClBL;;AAMR,MAAMQ,kBAAkB;QAAC,EAAEH,SAAS,EAAsC,WAAjCL;QAAdK;;yBACzB,oBAACV;QACCY,QAAO;QACPF,WAAWb,WAAWa;OAClBL;;AAMR,MAAMS,qBAAqB,CAACN,sBAC1B,oBAACT;QAAcO,aAAa;OAAqCE;AAkBnE;;CAEC,GACD,OAAO,MAAMO,cAAc;QAAC,EAC1BC,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNf,YAAY,KAAK,EAEA,WADdC;QALHW;QACAC;QACAC;QACAC;QACAf;;yBAGA,oBAACF;QAAqBE,WAAWA;OAAeC,YAC7CP,aAAakB,uBAAS,oBAACT,uBAAiBS,OACxClB,aAAamB,yBAAW,oBAACR,yBAAmBQ,SAC5CnB,aAAaoB,2BAAa,oBAACL,uBAAiBK,WAC5CpB,aAAaqB,yBAAW,oBAACL,0BAAoBK;EAEhD;AAEFJ,YAAYK,SAAS,GAAGlB;AACxBa,YAAYM,IAAI,GAAGd;AACnBQ,YAAYO,MAAM,GAAGb;AACrBM,YAAYQ,IAAI,GAAGV;AACnBE,YAAYS,OAAO,GAAGV"}
+{"version":3,"sources":["../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasComponent, HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderContainerProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер\n   */\n  stretched?: boolean;\n  /**\n   * Убирает отступы у компонента\n   */\n  noPadding?: boolean;\n}\n\nconst PlaceholderContainer = ({\n  stretched,\n  noPadding = false,\n  ...restProps\n}: PlaceholderContainerProps) => (\n  <RootComponent\n    baseClassName={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      !noPadding && styles['Placeholder--withPadding'],\n    )}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderIcon = (props: PlaceholderIconProps) => (\n  <RootComponent baseClassName={styles['Placeholder__icon']} {...props} />\n);\n\nexport type PlaceholderHeaderProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderHeader = ({ className, ...restProps }: PlaceholderHeaderProps) => (\n  <Title\n    level=\"2\"\n    weight=\"2\"\n    className={classNames(className, styles['Placeholder__header'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderTextProps = HTMLAttributesWithRootRef<HTMLElement> & HasComponent;\n\nconst PlaceholderText = ({ className, ...restProps }: PlaceholderTextProps) => (\n  <Headline\n    weight=\"3\"\n    className={classNames(className, styles['Placeholder__text'])}\n    {...restProps}\n  />\n);\n\nexport type PlaceholderActionsProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nconst PlaceholderActions = (props: PlaceholderActionsProps) => (\n  <RootComponent baseClassName={styles['Placeholder__action']} {...props} />\n);\n\nexport interface PlaceholderProps extends PlaceholderContainerProps {\n  /**\n   * Иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Заголовок плейсхолдера\n   */\n  header?: React.ReactNode;\n  /**\n   * Кнопка действия\n   */\n  action?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  children,\n  action,\n  noPadding = false,\n  ...restProps\n}: PlaceholderProps) => (\n  <PlaceholderContainer noPadding={noPadding} {...restProps}>\n    {hasReactNode(icon) && <PlaceholderIcon>{icon}</PlaceholderIcon>}\n    {hasReactNode(header) && <PlaceholderHeader>{header}</PlaceholderHeader>}\n    {hasReactNode(children) && <PlaceholderText>{children}</PlaceholderText>}\n    {hasReactNode(action) && <PlaceholderActions>{action}</PlaceholderActions>}\n  </PlaceholderContainer>\n);\n\nPlaceholder.Container = PlaceholderContainer;\nPlaceholder.Icon = PlaceholderIcon;\nPlaceholder.Header = PlaceholderHeader;\nPlaceholder.Text = PlaceholderText;\nPlaceholder.Actions = PlaceholderActions;\n"],"names":["React","classNames","hasReactNode","RootComponent","Headline","Title","PlaceholderContainer","stretched","noPadding","restProps","baseClassName","PlaceholderIcon","props","PlaceholderHeader","className","level","weight","PlaceholderText","PlaceholderActions","Placeholder","icon","header","children","action","Container","Icon","Header","Text","Actions"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,aAAa,QAAQ,iCAAiC;AAC/D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAclD,MAAMC,uBAAuB;QAAC,EAC5BC,SAAS,EACTC,YAAY,KAAK,EAES,WADvBC;QAFHF;QACAC;;yBAGA,KAACL;QACCO,eAAeT,8BAEbM,2CACA,CAACC;OAECC;;AAMR,MAAME,kBAAkB,CAACC,sBACvB,KAACT;QAAcO,aAAa;OAAmCE;AAKjE,MAAMC,oBAAoB;QAAC,EAAEC,SAAS,EAAwC,WAAnCL;QAAdK;;yBAC3B,KAACT;QACCU,OAAM;QACNC,QAAO;QACPF,WAAWb,WAAWa;OAClBL;;AAMR,MAAMQ,kBAAkB;QAAC,EAAEH,SAAS,EAAsC,WAAjCL;QAAdK;;yBACzB,KAACV;QACCY,QAAO;QACPF,WAAWb,WAAWa;OAClBL;;AAMR,MAAMS,qBAAqB,CAACN,sBAC1B,KAACT;QAAcO,aAAa;OAAqCE;AAkBnE;;CAEC,GACD,OAAO,MAAMO,cAAc;QAAC,EAC1BC,IAAI,EACJC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNf,YAAY,KAAK,EAEA,WADdC;QALHW;QACAC;QACAC;QACAC;QACAf;;yBAGA,MAACF;QAAqBE,WAAWA;OAAeC;;YAC7CP,aAAakB,uBAAS,KAACT;0BAAiBS;;YACxClB,aAAamB,yBAAW,KAACR;0BAAmBQ;;YAC5CnB,aAAaoB,2BAAa,KAACL;0BAAiBK;;YAC5CpB,aAAaqB,yBAAW,KAACL;0BAAoBK;;;;EAEhD;AAEFJ,YAAYK,SAAS,GAAGlB;AACxBa,YAAYM,IAAI,GAAGd;AACnBQ,YAAYO,MAAM,GAAGb;AACrBM,YAAYQ,IAAI,GAAGV;AACnBE,YAAYS,OAAO,GAAGV"}

package/dist/components/PlatformProvider/PlatformProvider.d.ts

@@ -13,5 +13,5 @@ export interface PlatformProviderProps {
  * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */
-export declare function PlatformProvider({ value, children }: PlatformProviderProps): React.JSX.Element;
+export declare function PlatformProvider({ value, children }: PlatformProviderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PlatformProvider.d.ts.map

package/dist/components/PlatformProvider/PlatformProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlatformProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PlatformProvider/PlatformProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIlD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,qBAM1E"}
+{"version":3,"file":"PlatformProvider.d.ts","sourceRoot":"","sources":["../../../src/components/PlatformProvider/PlatformProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIlD,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAM1E"}

package/dist/components/PlatformProvider/PlatformProvider.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { TokensClassProvider } from '../../lib/tokens';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
@@ -7,9 +8,12 @@ import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride
  * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */ export function PlatformProvider({ value, children }) {
-    return /*#__PURE__*/ React.createElement(ConfigProviderOverride, {
-        platform: value
-    }, /*#__PURE__*/ React.createElement(TokensClassProvider, null, children));
+    return /*#__PURE__*/ _jsx(ConfigProviderOverride, {
+        platform: value,
+        children: /*#__PURE__*/ _jsx(TokensClassProvider, {
+            children: children
+        })
+    });
 }
 
 //# sourceMappingURL=PlatformProvider.js.map

package/dist/components/PlatformProvider/PlatformProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider>{children}</TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","platform"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,oBAACH;QAAuBI,UAAUF;qBAChC,oBAACH,2BAAqBI;AAG5B"}
+{"version":3,"sources":["../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokens';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @since 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider>{children}</TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"names":["React","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","platform"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":";AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,EAAEC,KAAK,EAAEC,QAAQ,EAAyB;IACzE,qBACE,KAACH;QAAuBI,UAAUF;kBAChC,cAAA,KAACH;sBAAqBI;;;AAG5B"}

package/dist/components/PopoutRoot/PopoutRoot.d.ts

@@ -3,11 +3,11 @@ import { HTMLAttributesWithRootRef } from '../../types';
 /**
  * @private
  */
-export declare const PopoutRootPopout: ({ className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const PopoutRootPopout: ({ className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 /**
  * @private
  */
-export declare const PopoutRootModal: ({ className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
+export declare const PopoutRootModal: ({ className, ...restProps }: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
 export interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     popout?: React.ReactNode;
     modal?: React.ReactNode;
@@ -15,5 +15,5 @@ export interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElemen
 /**
  * @private
  */
-export declare const PopoutRoot: ({ popout, modal, children, ...restProps }: PopoutRootProps) => React.JSX.Element;
+export declare const PopoutRoot: ({ popout, modal, children, ...restProps }: PopoutRootProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PopoutRoot.d.ts.map

package/dist/components/PopoutRoot/PopoutRoot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.d.ts","sourceRoot":"","sources":["../../../src/components/PopoutRoot/PopoutRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gCAG1B,MAAM,cAAc,CAAC,cAAc,CAAC,sBAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,gCAGzB,MAAM,cAAc,CAAC,cAAc,CAAC,sBAEtC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,8CAA+C,eAAe,sBAgBpF,CAAC"}
+{"version":3,"file":"PopoutRoot.d.ts","sourceRoot":"","sources":["../../../src/components/PopoutRoot/PopoutRoot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAKxD;;GAEG;AACH,eAAO,MAAM,gBAAgB,gCAG1B,MAAM,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,gCAGzB,MAAM,cAAc,CAAC,cAAc,CAAC,4CAEtC,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IAChF,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,8CAA+C,eAAe,4CAgBpF,CAAC"}

package/dist/components/PopoutRoot/PopoutRoot.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { blurActiveElement, useDOM } from '../../lib/dom';
@@ -12,7 +13,7 @@ import { RootComponent } from '../RootComponent/RootComponent';
     var { className } = _param, restProps = _object_without_properties(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
+    return /*#__PURE__*/ _jsx("div", _object_spread({
         className: classNames("vkuiPopoutRoot__popout", className)
     }, restProps));
 };
@@ -22,7 +23,7 @@ import { RootComponent } from '../RootComponent/RootComponent';
     var { className } = _param, restProps = _object_without_properties(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ React.createElement("div", _object_spread({
+    return /*#__PURE__*/ _jsx("div", _object_spread({
         className: classNames("vkuiPopoutRoot__modal", className)
     }, restProps));
 };
@@ -41,9 +42,22 @@ import { RootComponent } from '../RootComponent/RootComponent';
         document,
         popout
     ]);
-    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
-        baseClassName: "vkuiPopoutRoot"
-    }), children, /*#__PURE__*/ React.createElement(AppRootPortal, null, !!popout && /*#__PURE__*/ React.createElement(PopoutRootPopout, null, popout), !!modal && /*#__PURE__*/ React.createElement(PopoutRootModal, null, modal)));
+    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+        baseClassName: "vkuiPopoutRoot",
+        children: [
+            children,
+            /*#__PURE__*/ _jsxs(AppRootPortal, {
+                children: [
+                    !!popout && /*#__PURE__*/ _jsx(PopoutRootPopout, {
+                        children: popout
+                    }),
+                    !!modal && /*#__PURE__*/ _jsx(PopoutRootModal, {
+                        children: modal
+                    })
+                ]
+            })
+        ]
+    }));
 };
 
 //# sourceMappingURL=PopoutRoot.js.map

package/dist/components/PopoutRoot/PopoutRoot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutRoot.module.css';\n\n/**\n * @private\n */\nexport const PopoutRootPopout = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__popout'], className)} {...restProps} />\n);\n\n/**\n * @private\n */\nexport const PopoutRootModal = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__modal'], className)} {...restProps} />\n);\n\nexport interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","blurActiveElement","useDOM","AppRootPortal","RootComponent","PopoutRootPopout","className","restProps","div","PopoutRootModal","PopoutRoot","popout","modal","children","document","useEffect","baseClassName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAG/D;;CAEC,GACD,OAAO,MAAMC,mBAAmB;QAAC,EAC/BC,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,oBAACE;QAAIF,WAAWN,qCAAyCM;OAAgBC;EACzE;AAEF;;CAEC,GACD,OAAO,MAAME,kBAAkB;QAAC,EAC9BH,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,oBAACE;QAAIF,WAAWN,oCAAwCM;OAAgBC;EACxE;AAOF;;CAEC,GACD,OAAO,MAAMG,aAAa;QAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BN;QAA5BI;QAAQC;QAAOC;;IAC1C,MAAM,EAAEC,QAAQ,EAAE,GAAGZ;IAErBH,MAAMgB,SAAS,CAAC;QACdJ,UAAUV,kBAAkBa;IAC9B,GAAG;QAACA;QAAUH;KAAO;IAErB,qBACE,oBAACP,uDAAkBG;QAAWS,aAAa;QACxCH,wBACD,oBAACV,qBACE,CAAC,CAACQ,wBAAU,oBAACN,wBAAkBM,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}
+{"version":3,"sources":["../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutRoot.module.css';\n\n/**\n * @private\n */\nexport const PopoutRootPopout = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__popout'], className)} {...restProps} />\n);\n\n/**\n * @private\n */\nexport const PopoutRootModal = ({\n  className,\n  ...restProps\n}: React.HTMLAttributes<HTMLDivElement>) => (\n  <div className={classNames(styles['PopoutRoot__modal'], className)} {...restProps} />\n);\n\nexport interface PopoutRootProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\n/**\n * @private\n */\nexport const PopoutRoot = ({ popout, modal, children, ...restProps }: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <RootComponent {...restProps} baseClassName={styles['PopoutRoot']}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","blurActiveElement","useDOM","AppRootPortal","RootComponent","PopoutRootPopout","className","restProps","div","PopoutRootModal","PopoutRoot","popout","modal","children","document","useEffect","baseClassName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,aAAa,QAAQ,iCAAiC;AAG/D;;CAEC,GACD,OAAO,MAAMC,mBAAmB;QAAC,EAC/BC,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,KAACE;QAAIF,WAAWN,qCAAyCM;OAAgBC;EACzE;AAEF;;CAEC,GACD,OAAO,MAAME,kBAAkB;QAAC,EAC9BH,SAAS,EAE4B,WADlCC;QADHD;;yBAGA,KAACE;QAAIF,WAAWN,oCAAwCM;OAAgBC;EACxE;AAOF;;CAEC,GACD,OAAO,MAAMG,aAAa;QAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,QAAQ,EAAiC,WAA5BN;QAA5BI;QAAQC;QAAOC;;IAC1C,MAAM,EAAEC,QAAQ,EAAE,GAAGZ;IAErBH,MAAMgB,SAAS,CAAC;QACdJ,UAAUV,kBAAkBa;IAC9B,GAAG;QAACA;QAAUH;KAAO;IAErB,qBACE,MAACP,uDAAkBG;QAAWS,aAAa;;YACxCH;0BACD,MAACV;;oBACE,CAAC,CAACQ,wBAAU,KAACN;kCAAkBM;;oBAC/B,CAAC,CAACC,uBAAS,KAACH;kCAAiBG;;;;;;AAItC,EAAE"}

package/dist/components/PopoutWrapper/PopoutWrapper.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { HTMLAttributesWithRootRef } from '../../types';
 export interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
     /**
@@ -27,5 +26,5 @@ export interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivEle
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */
-export declare const PopoutWrapper: ({ alignY, alignX, closing, noBackground, fixed, children, onClick, ...restProps }: PopoutWrapperProps) => React.JSX.Element;
+export declare const PopoutWrapper: ({ alignY, alignX, closing, noBackground, fixed, children, onClick, ...restProps }: PopoutWrapperProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PopoutWrapper.d.ts.map

package/dist/components/PopoutWrapper/PopoutWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgBxD,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,sFASvB,kBAAkB,sBAkCpB,CAAC"}
+{"version":3,"file":"PopoutWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAgBxD,MAAM,WAAW,kBAAmB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACnF;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,sFASvB,kBAAkB,4CAkCpB,CAAC"}

package/dist/components/PopoutWrapper/PopoutWrapper.js

@@ -1,6 +1,7 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -42,17 +43,23 @@ const stylesAlignY = {
         animationFinishFallback,
         opened
     ]);
-    return /*#__PURE__*/ React.createElement(RootComponent, _object_spread_props(_object_spread({}, restProps), {
+    return /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
         baseClassName: classNames("vkuiPopoutWrapper", stylesAlignY[alignY], stylesAlignX[alignX], closing && "vkuiPopoutWrapper--closing", opened && "vkuiPopoutWrapper--opened", fixed && "vkuiPopoutWrapper--fixed", !noBackground && "vkuiPopoutWrapper--masked"),
-        onAnimationEnd: opened ? undefined : onFadeInEnd
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiPopoutWrapper__container"
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiPopoutWrapper__overlay",
-        onClick: onClick
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiPopoutWrapper__content"
-    }, children)));
+        onAnimationEnd: opened ? undefined : onFadeInEnd,
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "vkuiPopoutWrapper__container",
+            children: [
+                /*#__PURE__*/ _jsx("div", {
+                    className: "vkuiPopoutWrapper__overlay",
+                    onClick: onClick
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "vkuiPopoutWrapper__content",
+                    children: children
+                })
+            ]
+        })
+    }));
 };
 
 //# sourceMappingURL=PopoutWrapper.js.map

package/dist/components/PopoutWrapper/PopoutWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles['PopoutWrapper--alignX-center'],\n  left: styles['PopoutWrapper--alignX-left'],\n  right: styles['PopoutWrapper--alignX-right'],\n};\n\nconst stylesAlignY = {\n  center: styles['PopoutWrapper--alignY-center'],\n  top: styles['PopoutWrapper--alignY-top'],\n  bottom: styles['PopoutWrapper--alignY-bottom'],\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(noBackground);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === 'ios' ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PopoutWrapper'],\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        !noBackground && styles['PopoutWrapper--masked'],\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","RootComponent","stylesAlignX","center","left","right","stylesAlignY","top","bottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","platform","opened","setOpened","useState","onFadeInEnd","e","animationName","animationFinishFallback","useEffect","set","baseClassName","onAnimationEnd","undefined","div","className"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,MAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AA2BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EAEY,WADhBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWnB;IACjB,MAAM,CAACoB,QAAQC,UAAU,GAAGvB,MAAMwB,QAAQ,CAACR;IAE3C,MAAMS,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,mCAAuC;YAC9DJ,UAAU;QACZ;IACF;IACA,MAAMK,0BAA0BzB,WAAWsB,aAAaJ,aAAa,QAAQ,MAAM;IACnFrB,MAAM6B,SAAS,CAAC;QACd,CAACP,UAAUM,wBAAwBE,GAAG;IACxC,GAAG;QAACF;QAAyBN;KAAO;IAEpC,qBACE,oBAAClB,uDACKgB;QACJW,eAAe9B,gCAEbQ,YAAY,CAACI,OAAO,EACpBR,YAAY,CAACS,OAAO,EACpBC,yCACAO,uCACAL,qCACA,CAACD;QAEHgB,gBAAgBV,SAASW,YAAYR;sBAErC,oBAACS;QAAIC,SAAS;qBACZ,oBAACD;QAAIC,SAAS;QAAoChB,SAASA;sBAC3D,oBAACe;QAAIC,SAAS;OAAqCjB;AAI3D,EAAE"}
+{"version":3,"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport styles from './PopoutWrapper.module.css';\n\nconst stylesAlignX = {\n  center: styles['PopoutWrapper--alignX-center'],\n  left: styles['PopoutWrapper--alignX-left'],\n  right: styles['PopoutWrapper--alignX-right'],\n};\n\nconst stylesAlignY = {\n  center: styles['PopoutWrapper--alignY-center'],\n  top: styles['PopoutWrapper--alignY-top'],\n  bottom: styles['PopoutWrapper--alignY-bottom'],\n};\n\nexport interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  /**\n   * Позволяет сделать прозрачную подложку\n   */\n  noBackground?: boolean;\n  /**\n   * Включает фиксированное позиционирование.\n   *\n   * По умолчанию у компонента не задан никакой `position`.\n   */\n  fixed?: boolean;\n  /**\n   * Выравнивает контент по горизонтали.\n   */\n  alignX?: 'left' | 'center' | 'right';\n  /**\n   * Выравнивает контент по вертикали.\n   */\n  alignY?: 'top' | 'center' | 'bottom';\n  /**\n   * Спрячет компонент через fade-out анимацию.\n   */\n  closing?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PopoutWrapper\n */\nexport const PopoutWrapper = ({\n  alignY = 'center',\n  alignX = 'center',\n  closing = false,\n  noBackground = false,\n  fixed = true,\n  children,\n  onClick,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(noBackground);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === styles['animation-full-fade-in']) {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === 'ios' ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        styles['PopoutWrapper'],\n        stylesAlignY[alignY],\n        stylesAlignX[alignX],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        !noBackground && styles['PopoutWrapper--masked'],\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n    >\n      <div className={styles['PopoutWrapper__container']}>\n        <div className={styles['PopoutWrapper__overlay']} onClick={onClick} />\n        <div className={styles['PopoutWrapper__content']}>{children}</div>\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","usePlatform","useTimeout","RootComponent","stylesAlignX","center","left","right","stylesAlignY","top","bottom","PopoutWrapper","alignY","alignX","closing","noBackground","fixed","children","onClick","restProps","platform","opened","setOpened","useState","onFadeInEnd","e","animationName","animationFinishFallback","useEffect","set","baseClassName","onAnimationEnd","undefined","div","className"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,SAASC,aAAa,QAAQ,iCAAiC;AAG/D,MAAMC,eAAe;IACnBC,MAAM;IACNC,IAAI;IACJC,KAAK;AACP;AAEA,MAAMC,eAAe;IACnBH,MAAM;IACNI,GAAG;IACHC,MAAM;AACR;AA2BA;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,SAAS,QAAQ,EACjBC,SAAS,QAAQ,EACjBC,UAAU,KAAK,EACfC,eAAe,KAAK,EACpBC,QAAQ,IAAI,EACZC,QAAQ,EACRC,OAAO,EAEY,WADhBC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWnB;IACjB,MAAM,CAACoB,QAAQC,UAAU,GAAGvB,MAAMwB,QAAQ,CAACR;IAE3C,MAAMS,cAAc,CAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,aAAa,mCAAuC;YAC9DJ,UAAU;QACZ;IACF;IACA,MAAMK,0BAA0BzB,WAAWsB,aAAaJ,aAAa,QAAQ,MAAM;IACnFrB,MAAM6B,SAAS,CAAC;QACd,CAACP,UAAUM,wBAAwBE,GAAG;IACxC,GAAG;QAACF;QAAyBN;KAAO;IAEpC,qBACE,KAAClB,uDACKgB;QACJW,eAAe9B,gCAEbQ,YAAY,CAACI,OAAO,EACpBR,YAAY,CAACS,OAAO,EACpBC,yCACAO,uCACAL,qCACA,CAACD;QAEHgB,gBAAgBV,SAASW,YAAYR;kBAErC,cAAA,MAACS;YAAIC,SAAS;;8BACZ,KAACD;oBAAIC,SAAS;oBAAoChB,SAASA;;8BAC3D,KAACe;oBAAIC,SAAS;8BAAqCjB;;;;;AAI3D,EAAE"}

package/dist/components/Popover/Popover.d.ts

@@ -1,6 +1,11 @@
-import * as React from 'react';
 import { type FloatingComponentProps, type FloatingContentRenderProp, type OnShownChange } from '../../lib/floating';
 import type { HTMLAttributesWithRootRef } from '../../types';
+import { type FloatingArrowProps as FloatingArrowPropsPrivate } from '../FloatingArrow/FloatingArrow';
+/**
+ * @alias
+ * @public
+ */
+export type PopoverArrowProps = Omit<FloatingArrowPropsPrivate, 'getRootRef' | 'coords' | 'placement' | 'Icon'>;
 /**
  * @alias
  * @public
@@ -11,24 +16,48 @@ export type PopoverOnShownChange = OnShownChange;
  * @public
  */
 export type PopoverContentRenderProp = FloatingContentRenderProp;
-type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'placement' | 'onPlacementChange' | 'trigger' | 'content' | 'hoverDelay' | 'closeAfterClick' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'shown' | 'onShownChange' | 'usePortal' | 'sameWidth' | 'hideWhenReferenceHidden' | 'disabled' | 'disableInteractive' | 'disableCloseOnClickOutside' | 'disableCloseOnEscKey' | 'autoFocus' | 'restoreFocus' | 'children' | 'zIndex'>;
+type AllowedFloatingComponentProps = Pick<FloatingComponentProps, 'arrow' | 'arrowHeight' | 'arrowPadding' | 'placement' | 'onPlacementChange' | 'trigger' | 'content' | 'hoverDelay' | 'closeAfterClick' | 'offsetByMainAxis' | 'offsetByCrossAxis' | 'defaultShown' | 'shown' | 'onShownChange' | 'usePortal' | 'sameWidth' | 'hideWhenReferenceHidden' | 'disabled' | 'disableInteractive' | 'disableCloseOnClickOutside' | 'disableCloseOnEscKey' | 'autoFocus' | 'restoreFocus' | 'children' | 'zIndex' | 'disableFlipMiddleware'>;
 /**
  * @public
  */
 export interface PopoverProps extends AllowedFloatingComponentProps, Omit<HTMLAttributesWithRootRef<HTMLDivElement>, keyof FloatingComponentProps> {
     /**
-     * Отключает у всплывающего элемента стилизацию по умолчанию, а именно:
-     * - background
-     * - border-radius
-     * - box-shadow
+     * Отключает у всплывающего элемента стилизацию по умолчанию.
+     *
+     * У `content`:
+     * - _background_
+     * - _border-radius_
+     * - _box-shadow_
+     *
+     * У `arrow`:
+     * - _color_
      *
-     * Используется в случае, если необходимо стилизовать по своему.
+     * Используется в случае, если необходимо стилизовать по своему. Для `arrow` _color_ можно
+     * определить через в `arrowProps.iconClassName` или `arrowProps.iconStyle`.
      */
     noStyling?: boolean;
+    /**
+     * Позволяет набросить на стрелку пользовательские атрибуты.
+     */
+    arrowProps?: PopoverArrowProps;
+    /**
+     * Пользовательская SVG иконка.
+     *
+     * Требования:
+     *
+     * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).
+     * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,
+     *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.
+     *    (см. https://github.com/VKCOM/VKUI/pull/4496).
+     * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.
+     * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.
+     * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
+     */
+    ArrowIcon?: FloatingArrowPropsPrivate['Icon'];
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
-export declare const Popover: ({ placement: expectedPlacement, onPlacementChange, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, defaultShown, shown: shownProp, onShownChange, usePortal, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => React.JSX.Element;
+export declare const Popover: ({ arrow: withArrow, arrowHeight, arrowPadding, placement: expectedPlacement, onPlacementChange, disableFlipMiddleware, trigger, content, hoverDelay, closeAfterClick, offsetByMainAxis, offsetByCrossAxis, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, defaultShown, shown: shownProp, onShownChange, usePortal, arrowProps, ArrowIcon, autoFocus, restoreFocus, className, children, noStyling, zIndex, role, ...restPopoverProps }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Popover.d.ts.map

package/dist/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAK7D;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAEjE,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,WAAW,GACX,mBAAmB,GACnB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,OAAO,GACP,eAAe,GACf,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,UAAU,GACV,oBAAoB,GACpB,4BAA4B,GAC5B,sBAAsB,GACtB,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,CACX,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC;IAC/E;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,sZAmCjB,YAAY,sBA0Ed,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAKA,OAAO,EACL,KAAK,sBAAsB,EAC3B,KAAK,yBAAyB,EAC9B,KAAK,aAAa,EAInB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAO7D,OAAO,EAEL,KAAK,kBAAkB,IAAI,yBAAyB,EACrD,MAAM,gCAAgC,CAAC;AAIxC;;;GAGG;AACH,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,yBAAyB,EACzB,YAAY,GAAG,QAAQ,GAAG,WAAW,GAAG,MAAM,CAC/C,CAAC;AAEF;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG,aAAa,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,wBAAwB,GAAG,yBAAyB,CAAC;AAEjE,KAAK,6BAA6B,GAAG,IAAI,CACvC,sBAAsB,EACpB,OAAO,GACP,aAAa,GACb,cAAc,GACd,WAAW,GACX,mBAAmB,GACnB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,iBAAiB,GACjB,kBAAkB,GAClB,mBAAmB,GACnB,cAAc,GACd,OAAO,GACP,eAAe,GACf,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,UAAU,GACV,oBAAoB,GACpB,4BAA4B,GAC5B,sBAAsB,GACtB,WAAW,GACX,cAAc,GACd,UAAU,GACV,QAAQ,GACR,uBAAuB,CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,YACf,SAAQ,6BAA6B,EACnC,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,MAAM,sBAAsB,CAAC;IAC/E;;;;;;;;;;;;;OAaG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;;;;;OAYG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;CAC/C;AAED;;GAEG;AACH,eAAO,MAAM,OAAO,ifA2CjB,YAAY,4CAkGd,CAAC"}

package/dist/components/Popover/Popover.js

@@ -1,26 +1,34 @@
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { usePatchChildren } from '../../hooks/usePatchChildren';
 import { injectAriaExpandedPropByRole } from '../../lib/accessibility';
-import { animationFadeClassNames, transformOriginClassNames } from '../../lib/cssAnimation';
+import { animationFadeClassNames, transformOriginClassNames } from '../../lib/animation';
 import { useFloatingMiddlewaresBootstrap, useFloatingWithInteractions, usePlacementChangeCallback } from '../../lib/floating';
 import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from '../FloatingArrow/DefaultIcon';
+import { FloatingArrow } from '../FloatingArrow/FloatingArrow';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */ export const Popover = (_param)=>{
     var { // UsePopoverProps
-    placement: expectedPlacement = 'bottom-start', onPlacementChange, trigger = 'click', content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, // uncontrolled
+    arrow: withArrow, arrowHeight = DEFAULT_ARROW_HEIGHT, arrowPadding = DEFAULT_ARROW_PADDING, placement: expectedPlacement = 'bottom-start', onPlacementChange, disableFlipMiddleware = false, trigger = 'click', content, hoverDelay = 150, closeAfterClick, offsetByMainAxis = 8, offsetByCrossAxis = 0, sameWidth, hideWhenReferenceHidden, disabled, disableInteractive, disableCloseOnClickOutside, disableCloseOnEscKey, // uncontrolled
     defaultShown = false, // controlled
     shown: shownProp, onShownChange, // Для AppRootPortal
-    usePortal = true, // FocusTrapProps
+    usePortal = true, // Для FloatingArrow
+    arrowProps, ArrowIcon = DefaultIcon, // FocusTrapProps
     autoFocus = true, restoreFocus = true, className, children, noStyling = false, zIndex = 'var(--vkui--z_index_popout)', // a11y
     role } = _param, restPopoverProps = _object_without_properties(_param, [
+        "arrow",
+        "arrowHeight",
+        "arrowPadding",
         "placement",
         "onPlacementChange",
+        "disableFlipMiddleware",
         "trigger",
         "content",
         "hoverDelay",
@@ -37,6 +45,8 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
         "shown",
         "onShownChange",
         "usePortal",
+        "arrowProps",
+        "ArrowIcon",
         "autoFocus",
         "restoreFocus",
         "className",
@@ -45,14 +55,20 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
         "zIndex",
         "role"
     ]);
+    const [arrowRef, setArrowRef] = React.useState(null);
     const { middlewares, strictPlacement } = useFloatingMiddlewaresBootstrap({
+        arrow: withArrow,
+        arrowRef,
+        arrowHeight,
+        arrowPadding,
         placement: expectedPlacement,
         offsetByMainAxis,
         offsetByCrossAxis,
         sameWidth,
-        hideWhenReferenceHidden
+        hideWhenReferenceHidden,
+        disableFlipMiddleware
     });
-    const { placement, shown, willBeHide, refs, referenceProps, floatingProps, onClose, onRestoreFocus, onEscapeKeyDown } = useFloatingWithInteractions({
+    const { placement: resolvedPlacement, shown, willBeHide, refs, referenceProps, floatingProps, middlewareData, onClose, onRestoreFocus, onEscapeKeyDown } = useFloatingWithInteractions({
         middlewares,
         placement: strictPlacement,
         trigger,
@@ -66,27 +82,51 @@ import { FocusTrap } from '../FocusTrap/FocusTrap';
         shown: shownProp,
         onShownChange
     });
-    usePlacementChangeCallback(placement, onPlacementChange);
+    usePlacementChangeCallback(expectedPlacement, resolvedPlacement, onPlacementChange);
     const [, child] = usePatchChildren(children, injectAriaExpandedPropByRole(referenceProps, shown, role), refs.setReference);
     let popover = null;
     if (shown) {
         floatingProps.style.zIndex = String(zIndex);
-        popover = /*#__PURE__*/ React.createElement(AppRootPortal, {
-            usePortal: usePortal
-        }, /*#__PURE__*/ React.createElement("div", _object_spread({
-            ref: refs.setFloating,
-            className: "vkuiPopover"
-        }, floatingProps), /*#__PURE__*/ React.createElement(FocusTrap, _object_spread_props(_object_spread({}, restPopoverProps), {
-            role: role,
-            className: classNames("vkuiPopover__in", noStyling ? undefined : "vkuiPopover__in--withStyling", willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, transformOriginClassNames[placement], className),
-            autoFocus: disableInteractive ? false : autoFocus,
-            restoreFocus: restoreFocus ? onRestoreFocus : false,
-            onClose: onEscapeKeyDown
-        }), typeof content === 'function' ? content({
-            onClose
-        }) : content)));
+        let arrow = null;
+        if (withArrow) {
+            const { arrow: arrowCoords } = middlewareData;
+            arrow = /*#__PURE__*/ _jsx(FloatingArrow, _object_spread_props(_object_spread({
+                iconClassName: noStyling ? undefined : "vkuiPopover__arrow"
+            }, arrowProps), {
+                coords: arrowCoords,
+                placement: resolvedPlacement,
+                getRootRef: setArrowRef,
+                Icon: ArrowIcon
+            }));
+        }
+        popover = /*#__PURE__*/ _jsx(AppRootPortal, {
+            usePortal: usePortal,
+            children: /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
+                ref: refs.setFloating,
+                className: "vkuiPopover"
+            }, floatingProps), {
+                children: /*#__PURE__*/ _jsxs(FocusTrap, _object_spread_props(_object_spread({}, restPopoverProps), {
+                    role: role,
+                    className: classNames("vkuiPopover__in", noStyling ? undefined : "vkuiPopover__in--withStyling", willBeHide ? animationFadeClassNames.out : animationFadeClassNames.in, transformOriginClassNames[resolvedPlacement], className),
+                    autoFocus: disableInteractive ? false : autoFocus,
+                    restoreFocus: restoreFocus ? onRestoreFocus : false,
+                    onClose: onEscapeKeyDown,
+                    children: [
+                        arrow,
+                        typeof content === 'function' ? content({
+                            onClose
+                        }) : content
+                    ]
+                }))
+            }))
+        });
     }
-    return /*#__PURE__*/ React.createElement(React.Fragment, null, child, popover);
+    return /*#__PURE__*/ _jsxs(React.Fragment, {
+        children: [
+            child,
+            popover
+        ]
+    });
 };
 
 //# sourceMappingURL=Popover.js.map