@vkontakte/vkui 5.1.2 → 5.2.1

package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import * as React from 'react';
-import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { Icon28DoneOutline } from '@vkontakte/icons';
-import { Platform } from '../../lib/platform';
 import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
 import { getTitleFromChildren } from '../../lib/utils';
+import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit

package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeaderSubmit.js","names":["React","PanelHeaderButton","Icon28DoneOutline","Platform","usePlatform","getTitleFromChildren","PanelHeaderSubmit","children","restProps","platform","IOS"],"sources":["../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { Platform } from '../../lib/platform';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getTitleFromChildren } from '../../lib/utils';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAgC,wCAAwC;AAClG,SAASC,iBAAiB,QAAQ,kBAAkB;AACpD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,oBAAoB,QAAQ,iBAAiB;;AAEtD;AACA;AACA;AACA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAGL,WAAW,EAAE;EAE9B,oBACE,oBAAC,iBAAiB;IAAC,cAAYC,oBAAoB,CAACE,QAAQ,CAAE;IAAC,OAAO;EAAA,GAAKC,SAAS,GACjFC,QAAQ,KAAKN,QAAQ,CAACO,GAAG,GAAGH,QAAQ,gBAAG,oBAAC,iBAAiB,OAAG,CAC3C;AAExB,CAAC"}
+{"version":3,"file":"PanelHeaderSubmit.js","names":["React","Icon28DoneOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderSubmit","children","restProps","platform","IOS"],"sources":["../../../src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { getTitleFromChildren } from '../../lib/utils';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit\n */\nexport const PanelHeaderSubmit = ({\n  children = 'Готово',\n  ...restProps\n}: PanelHeaderButtonProps) => {\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={getTitleFromChildren(children)} primary {...restProps}>\n      {platform === Platform.IOS ? children : <Icon28DoneOutline />}\n    </PanelHeaderButton>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,iBAAiB,QAAQ,kBAAkB;AACpD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,iBAAiB,QAAgC,wCAAwC;;AAElG;AACA;AACA;AACA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,OAGA;EAAA,yBAF5BC,QAAQ;IAARA,QAAQ,8BAAG,QAAQ;IAChBC,SAAS;EAEZ,IAAMC,QAAQ,GAAGP,WAAW,EAAE;EAE9B,oBACE,oBAAC,iBAAiB;IAAC,cAAYE,oBAAoB,CAACG,QAAQ,CAAE;IAAC,OAAO;EAAA,GAAKC,SAAS,GACjFC,QAAQ,KAAKN,QAAQ,CAACO,GAAG,GAAGH,QAAQ,gBAAG,oBAAC,iBAAiB,OAAG,CAC3C;AAExB,CAAC"}

package/dist/components/Placeholder/Placeholder.js

@@ -3,8 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["icon", "header", "action", "children", "stretched", "getRootRef", "className"];
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
-import { Title } from '../Typography/Title/Title';
 import { Headline } from '../Typography/Headline/Headline';
+import { Title } from '../Typography/Title/Title';
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","names":["React","classNames","hasReactNode","Title","Headline","Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps"],"sources":["../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { Title } from '../Typography/Title/Title';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { HasRootRef } from '../../types';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\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  stretched?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  action,\n  children,\n  stretched,\n  getRootRef,\n  className,\n  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      className,\n    )}\n  >\n    <div className={styles['Placeholder__in']}>\n      {hasReactNode(icon) && <div className={styles['Placeholder__icon']}>{icon}</div>}\n      {hasReactNode(header) && (\n        <Title level=\"2\" weight=\"2\" className={styles['Placeholder__header']}>\n          {header}\n        </Title>\n      )}\n      {hasReactNode(children) && (\n        <Headline weight=\"3\" className={styles['Placeholder__text']}>\n          {children}\n        </Headline>\n      )}\n      {hasReactNode(action) && <div className={styles['Placeholder__action']}>{action}</div>}\n    </div>\n  </div>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,KAAK,QAAQ,2BAA2B;AACjD,SAASC,QAAQ,QAAQ,iCAAiC;AAyB1D;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW;EAAA,IACtBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEV,UAAU,oBAEnBS,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvCV,YAAY,CAACI,IAAI,CAAC,iBAAI;IAAK,SAAS;EAA8B,GAAEA,IAAI,CAAO,EAC/EJ,YAAY,CAACK,MAAM,CAAC,iBACnB,oBAAC,KAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACAL,YAAY,CAACO,QAAQ,CAAC,iBACrB,oBAAC,QAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACAP,YAAY,CAACM,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,MAAM,CAAO,CAClF,CACF;AAAA,CACP"}
+{"version":3,"file":"Placeholder.js","names":["React","classNames","hasReactNode","Headline","Title","Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps"],"sources":["../../../src/components/Placeholder/Placeholder.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { Headline } from '../Typography/Headline/Headline';\nimport { Title } from '../Typography/Title/Title';\nimport styles from './Placeholder.module.css';\n\nexport interface PlaceholderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\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  stretched?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Placeholder\n */\nexport const Placeholder = ({\n  icon,\n  header,\n  action,\n  children,\n  stretched,\n  getRootRef,\n  className,\n  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      className,\n    )}\n  >\n    <div className={styles['Placeholder__in']}>\n      {hasReactNode(icon) && <div className={styles['Placeholder__icon']}>{icon}</div>}\n      {hasReactNode(header) && (\n        <Title level=\"2\" weight=\"2\" className={styles['Placeholder__header']}>\n          {header}\n        </Title>\n      )}\n      {hasReactNode(children) && (\n        <Headline weight=\"3\" className={styles['Placeholder__text']}>\n          {children}\n        </Headline>\n      )}\n      {hasReactNode(action) && <div className={styles['Placeholder__action']}>{action}</div>}\n    </div>\n  </div>\n);\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,QAAQ,QAAQ,iCAAiC;AAC1D,SAASC,KAAK,QAAQ,2BAA2B;AAwBjD;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAW;EAAA,IACtBC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACVC,SAAS,QAATA,SAAS;IACNC,SAAS;EAAA,oBAEZ,wCACMA,SAAS;IACb,GAAG,EAAEF,UAAW;IAChB,SAAS,EAAEV,UAAU,oBAEnBS,SAAS,gCAAoC,EAC7CE,SAAS;EACT,iBAEF;IAAK,SAAS;EAA4B,GACvCV,YAAY,CAACI,IAAI,CAAC,iBAAI;IAAK,SAAS;EAA8B,GAAEA,IAAI,CAAO,EAC/EJ,YAAY,CAACK,MAAM,CAAC,iBACnB,oBAAC,KAAK;IAAC,KAAK,EAAC,GAAG;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAAgC,GAClEA,MAAM,CAEV,EACAL,YAAY,CAACO,QAAQ,CAAC,iBACrB,oBAAC,QAAQ;IAAC,MAAM,EAAC,GAAG;IAAC,SAAS;EAA8B,GACzDA,QAAQ,CAEZ,EACAP,YAAY,CAACM,MAAM,CAAC,iBAAI;IAAK,SAAS;EAAgC,GAAEA,MAAM,CAAO,CAClF,CACF;AAAA,CACP"}

package/dist/components/PlatformProvider/PlatformProvider.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
-import { TokensClassProvider } from '../../lib/tokensClassProvider';
 import { useAppearance } from '../../hooks/useAppearance';
+import { TokensClassProvider } from '../../lib/tokensClassProvider';
+import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 /**
  * Компонент, позволяющий переопределить платформу для части приложения
  *

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

@@ -1 +1 @@
-{"version":3,"file":"PlatformProvider.js","names":["React","ConfigProviderOverride","TokensClassProvider","useAppearance","PlatformProvider","value","children","appearance"],"sources":["../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\nimport { PlatformType } from '../../lib/platform';\nimport { useAppearance } from '../../hooks/useAppearance';\n\nexport interface PlatformProviderProps {\n  /**\n   * Платформа\n   */\n  value: PlatformType;\n  children: React.ReactNode;\n}\n\n/**\n * Компонент, позволяющий переопределить платформу для части приложения\n *\n * @version 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,sBAAsB,QAAQ,0CAA0C;AACjF,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,SAASC,aAAa,QAAQ,2BAA2B;AAUzD;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgB,OAA6C;EAAA,IAA1CC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAChD,IAAMC,UAAU,GAAGJ,aAAa,EAAE;EAElC,oBACE,oBAAC,sBAAsB;IAAC,QAAQ,EAAEE;EAAM,gBACtC,oBAAC,mBAAmB;IAAC,QAAQ,EAAEA,KAAM;IAAC,UAAU,EAAEE;EAAW,GAC1DD,QAAQ,CACW,CACC;AAE7B"}
+{"version":3,"file":"PlatformProvider.js","names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance"],"sources":["../../../src/components/PlatformProvider/PlatformProvider.tsx"],"sourcesContent":["import React from 'react';\nimport { useAppearance } from '../../hooks/useAppearance';\nimport { PlatformType } from '../../lib/platform';\nimport { TokensClassProvider } from '../../lib/tokensClassProvider';\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 * @version 5.1.0\n * @see https://vkcom.github.io/VKUI/#/PlatformProvider\n */\nexport function PlatformProvider({ value, children }: PlatformProviderProps) {\n  const appearance = useAppearance();\n\n  return (\n    <ConfigProviderOverride platform={value}>\n      <TokensClassProvider platform={value} appearance={appearance}>\n        {children}\n      </TokensClassProvider>\n    </ConfigProviderOverride>\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,QAAQ,2BAA2B;AAEzD,SAASC,mBAAmB,QAAQ,+BAA+B;AACnE,SAASC,sBAAsB,QAAQ,0CAA0C;AAUjF;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgB,OAA6C;EAAA,IAA1CC,KAAK,QAALA,KAAK;IAAEC,QAAQ,QAARA,QAAQ;EAChD,IAAMC,UAAU,GAAGN,aAAa,EAAE;EAElC,oBACE,oBAAC,sBAAsB;IAAC,QAAQ,EAAEI;EAAM,gBACtC,oBAAC,mBAAmB;IAAC,QAAQ,EAAEA,KAAM;IAAC,UAAU,EAAEE;EAAW,GAC1DD,QAAQ,CACW,CACC;AAE7B"}

package/dist/components/PopoutRoot/PopoutRoot.js

@@ -3,9 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["popout", "modal", "children", "getRootRef", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { blurActiveElement, useDOM } from '../../lib/dom';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { blurActiveElement, useDOM } from '../../lib/dom';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
 var PopoutRootPopout = function PopoutRootPopout(_ref) {
   var children = _ref.children;
   var _useAdaptivityWithJSM = useAdaptivityWithJSMediaQueries(),

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutRoot.js","names":["React","classNames","AppRootPortal","blurActiveElement","useDOM","useAdaptivityWithJSMediaQueries","PopoutRootPopout","children","isDesktop","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","document","useEffect"],"sources":["../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,aAAa,QAAQ,0BAA0B;AACxD,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,eAAe;AACzD,SAASC,+BAA+B,QAAQ,6CAA6C;AAO7F,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsBF,+BAA+B,EAAE;IAA/CG,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAEP,UAAU,2BAEnBO,SAAS,sCAA0C;EACnD,GAEDD,QAAQ,CACL;AAEV,CAAC;AAMD,IAAME,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCF,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASD,OAAO,IAAMG,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLL,QAAQ,SAARA,QAAQ;IACRM,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqBX,MAAM,EAAE;IAArBY,QAAQ,WAARA,QAAQ;EAEhBhB,KAAK,CAACiB,SAAS,CAAC,YAAM;IACpBN,MAAM,IAAIR,iBAAiB,CAACa,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEL,MAAM,CAAC,CAAC;EAEtB,oBACE,wCAASI,SAAS;IAAE,SAAS,EAAEd,UAAU,mBAAuBa,SAAS,CAAE;IAAC,GAAG,EAAED;EAAW,IACzFN,QAAQ,eACT,oBAAC,aAAa,QACX,CAAC,CAACI,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC"}
+{"version":3,"file":"PopoutRoot.js","names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","PopoutRootPopout","children","isDesktop","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","className","restProps","document","useEffect"],"sources":["../../../src/components/PopoutRoot/PopoutRoot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { blurActiveElement, useDOM } from '../../lib/dom';\nimport { HasRootRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport styles from './PopoutRoot.module.css';\n\ninterface PopoutRootPopoutProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootPopout = ({ children }: PopoutRootPopoutProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  return (\n    <div\n      className={classNames(\n        styles['PopoutRoot__popout'],\n        isDesktop && styles['PopoutRoot__popout--absolute'],\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n\ninterface PopoutRootModalProps {\n  children: React.ReactNode;\n}\n\nconst PopoutRootModal = ({ children }: PopoutRootModalProps) => {\n  return <div className={styles['PopoutRoot__modal']}>{children}</div>;\n};\n\nexport interface PopoutRootProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  popout?: React.ReactNode;\n  modal?: React.ReactNode;\n}\n\nexport const PopoutRoot = ({\n  popout,\n  modal,\n  children,\n  getRootRef,\n  className,\n  ...restProps\n}: PopoutRootProps) => {\n  const { document } = useDOM();\n\n  React.useEffect(() => {\n    popout && blurActiveElement(document);\n  }, [document, popout]);\n\n  return (\n    <div {...restProps} className={classNames(styles['PopoutRoot'], className)} ref={getRootRef}>\n      {children}\n      <AppRootPortal>\n        {!!popout && <PopoutRootPopout>{popout}</PopoutRootPopout>}\n        {!!modal && <PopoutRootModal>{modal}</PopoutRootModal>}\n      </AppRootPortal>\n    </div>\n  );\n};\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,+BAA+B,QAAQ,6CAA6C;AAC7F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,eAAe;AAEzD,SAASC,aAAa,QAAQ,0BAA0B;AAOxD,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4C;EAAA,IAAtCC,QAAQ,QAARA,QAAQ;EAClC,4BAAsBL,+BAA+B,EAAE;IAA/CM,SAAS,yBAATA,SAAS;EAEjB,oBACE;IACE,SAAS,EAAEP,UAAU,2BAEnBO,SAAS,sCAA0C;EACnD,GAEDD,QAAQ,CACL;AAEV,CAAC;AAMD,IAAME,eAAe,GAAG,SAAlBA,eAAe,QAA2C;EAAA,IAArCF,QAAQ,SAARA,QAAQ;EACjC,oBAAO;IAAK,SAAS;EAA8B,GAAEA,QAAQ,CAAO;AACtE,CAAC;AASD,OAAO,IAAMG,UAAU,GAAG,SAAbA,UAAU,QAOA;EAAA,IANrBC,MAAM,SAANA,MAAM;IACNC,KAAK,SAALA,KAAK;IACLL,QAAQ,SAARA,QAAQ;IACRM,UAAU,SAAVA,UAAU;IACVC,SAAS,SAATA,SAAS;IACNC,SAAS;EAEZ,cAAqBX,MAAM,EAAE;IAArBY,QAAQ,WAARA,QAAQ;EAEhBhB,KAAK,CAACiB,SAAS,CAAC,YAAM;IACpBN,MAAM,IAAIR,iBAAiB,CAACa,QAAQ,CAAC;EACvC,CAAC,EAAE,CAACA,QAAQ,EAAEL,MAAM,CAAC,CAAC;EAEtB,oBACE,wCAASI,SAAS;IAAE,SAAS,EAAEd,UAAU,mBAAuBa,SAAS,CAAE;IAAC,GAAG,EAAED;EAAW,IACzFN,QAAQ,eACT,oBAAC,aAAa,QACX,CAAC,CAACI,MAAM,iBAAI,oBAAC,gBAAgB,QAAEA,MAAM,CAAoB,EACzD,CAAC,CAACC,KAAK,iBAAI,oBAAC,eAAe,QAAEA,KAAK,CAAmB,CACxC,CACZ;AAEV,CAAC"}

package/dist/components/PopoutWrapper/PopoutWrapper.js

@@ -4,11 +4,11 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["alignY", "alignX", "closing", "hasMask", "fixed", "children", "onClick", "className"];
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { Platform } from '../../lib/platform';
-import { useTimeout } from '../../hooks/useTimeout';
-import { usePlatform } from '../../hooks/usePlatform';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useTimeout } from '../../hooks/useTimeout';
 import { useDOM } from '../../lib/dom';
+import { Platform } from '../../lib/platform';
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */

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

@@ -1 +1 @@
-{"version":3,"file":"PopoutWrapper.js","names":["React","classNames","Platform","useTimeout","usePlatform","useGlobalEventListener","useDOM","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","styles","undefined"],"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { Platform } from '../../lib/platform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { useDOM } from '../../lib/dom';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\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  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === 'vkui-animation-full-fade-in') {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        styles[`PopoutWrapper--alignY-${alignY}`],\n        styles[`PopoutWrapper--alignX-${alignX}`],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\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    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,QAAQ,QAAQ,oBAAoB;AAC7C,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,MAAM,QAAQ,eAAe;AAWtC;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAUA;EAAA,uBATxBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,oBACjBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,oBACfC,OAAO;IAAPA,OAAO,6BAAG,IAAI;IAAA,kBACdC,KAAK;IAALA,KAAK,2BAAG,IAAI;IACZC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGb,WAAW,EAAE;EAC9B,sBAA4BJ,KAAK,CAACkB,QAAQ,CAAC,CAACP,OAAO,CAAC;IAAA;IAA7CQ,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGrB,KAAK,CAACsB,MAAM,CAAiB,IAAI,CAAC;EAEhD,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAwB,EAAK;IAChD,IAAI,CAACA,CAAC,IAAIA,CAAC,CAACC,aAAa,KAAK,6BAA6B,EAAE;MAC3DL,SAAS,CAAC,IAAI,CAAC;IACjB;EACF,CAAC;EACD,IAAMM,uBAAuB,GAAGvB,UAAU,CAACoB,WAAW,EAAEN,QAAQ,KAAKf,QAAQ,CAACyB,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;EAC9F3B,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,CAACT,MAAM,IAAIO,uBAAuB,CAACG,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACH,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmBb,MAAM,EAAE;IAAnBwB,MAAM,WAANA,MAAM;EACdzB,sBAAsB,CAACyB,MAAM,EAAE,WAAW,EAAE,UAACN,CAAC;IAAA,OAAKA,CAAC,CAACO,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,wCACMhB,SAAS;IACb,SAAS,EAAEf,UAAU,sBAEnBgC,MAAM,iCAA0BzB,MAAM,EAAG,EACzCyB,MAAM,iCAA0BxB,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CS,MAAM,+BAAmC,EACzCP,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEI,MAAM,GAAGe,SAAS,GAAGX,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAEP;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}
+{"version":3,"file":"PopoutWrapper.js","names":["React","classNames","useGlobalEventListener","usePlatform","useTimeout","useDOM","Platform","PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","IOS","useEffect","set","window","preventDefault","passive","styles","undefined"],"sources":["../../../src/components/PopoutWrapper/PopoutWrapper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { Platform } from '../../lib/platform';\nimport styles from './PopoutWrapper.module.css';\n\nexport interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n  hasMask?: boolean;\n  fixed?: boolean;\n  alignY?: 'top' | 'center' | 'bottom';\n  alignX?: 'left' | 'center' | 'right';\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  hasMask = true,\n  fixed = true,\n  children,\n  onClick,\n  className,\n  ...restProps\n}: PopoutWrapperProps) => {\n  const platform = usePlatform();\n  const [opened, setOpened] = React.useState(!hasMask);\n  const elRef = React.useRef<HTMLDivElement>(null);\n\n  const onFadeInEnd = (e?: React.AnimationEvent) => {\n    if (!e || e.animationName === 'vkui-animation-full-fade-in') {\n      setOpened(true);\n    }\n  };\n  const animationFinishFallback = useTimeout(onFadeInEnd, platform === Platform.IOS ? 300 : 200);\n  React.useEffect(() => {\n    !opened && animationFinishFallback.set();\n  }, [animationFinishFallback, opened]);\n\n  const { window } = useDOM();\n  useGlobalEventListener(window, 'touchmove', (e) => e.preventDefault(), {\n    passive: false,\n  });\n\n  return (\n    <div\n      {...restProps}\n      className={classNames(\n        styles['PopoutWrapper'],\n        styles[`PopoutWrapper--alignY-${alignY}`],\n        styles[`PopoutWrapper--alignX-${alignX}`],\n        closing && styles['PopoutWrapper--closing'],\n        opened && styles['PopoutWrapper--opened'],\n        fixed && styles['PopoutWrapper--fixed'],\n        hasMask && styles['PopoutWrapper--masked'],\n        className,\n      )}\n      onAnimationEnd={opened ? undefined : onFadeInEnd}\n      ref={elRef}\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    </div>\n  );\n};\n"],"mappings":";;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,sBAAsB,QAAQ,oCAAoC;AAC3E,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,QAAQ,QAAQ,oBAAoB;AAW7C;AACA;AACA;AACA,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAa,OAUA;EAAA,uBATxBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,mBACjBC,MAAM;IAANA,MAAM,4BAAG,QAAQ;IAAA,oBACjBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,oBACfC,OAAO;IAAPA,OAAO,6BAAG,IAAI;IAAA,kBACdC,KAAK;IAALA,KAAK,2BAAG,IAAI;IACZC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACNC,SAAS;EAEZ,IAAMC,QAAQ,GAAGd,WAAW,EAAE;EAC9B,sBAA4BH,KAAK,CAACkB,QAAQ,CAAC,CAACP,OAAO,CAAC;IAAA;IAA7CQ,MAAM;IAAEC,SAAS;EACxB,IAAMC,KAAK,GAAGrB,KAAK,CAACsB,MAAM,CAAiB,IAAI,CAAC;EAEhD,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIC,CAAwB,EAAK;IAChD,IAAI,CAACA,CAAC,IAAIA,CAAC,CAACC,aAAa,KAAK,6BAA6B,EAAE;MAC3DL,SAAS,CAAC,IAAI,CAAC;IACjB;EACF,CAAC;EACD,IAAMM,uBAAuB,GAAGtB,UAAU,CAACmB,WAAW,EAAEN,QAAQ,KAAKX,QAAQ,CAACqB,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;EAC9F3B,KAAK,CAAC4B,SAAS,CAAC,YAAM;IACpB,CAACT,MAAM,IAAIO,uBAAuB,CAACG,GAAG,EAAE;EAC1C,CAAC,EAAE,CAACH,uBAAuB,EAAEP,MAAM,CAAC,CAAC;EAErC,cAAmBd,MAAM,EAAE;IAAnByB,MAAM,WAANA,MAAM;EACd5B,sBAAsB,CAAC4B,MAAM,EAAE,WAAW,EAAE,UAACN,CAAC;IAAA,OAAKA,CAAC,CAACO,cAAc,EAAE;EAAA,GAAE;IACrEC,OAAO,EAAE;EACX,CAAC,CAAC;EAEF,oBACE,wCACMhB,SAAS;IACb,SAAS,EAAEf,UAAU,sBAEnBgC,MAAM,iCAA0BzB,MAAM,EAAG,EACzCyB,MAAM,iCAA0BxB,MAAM,EAAG,EACzCC,OAAO,gCAAoC,EAC3CS,MAAM,+BAAmC,EACzCP,KAAK,8BAAkC,EACvCD,OAAO,+BAAmC,EAC1CI,SAAS,CACT;IACF,cAAc,EAAEI,MAAM,GAAGe,SAAS,GAAGX,WAAY;IACjD,GAAG,EAAEF;EAAM,iBAEX;IAAK,SAAS;EAAqC,gBACjD;IAAK,SAAS,8BAAmC;IAAC,OAAO,EAAEP;EAAQ,EAAG,eACtE;IAAK,SAAS;EAAmC,GAAED,QAAQ,CAAO,CAC9D,CACF;AAEV,CAAC;AAAC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA"}

package/dist/components/Popover/Popover.js

@@ -4,15 +4,15 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["action", "shown", "showDelay", "hideDelay", "offsetDistance", "content", "children", "style", "className", "getRef", "onShownChange"];
 import * as React from 'react';
-import { useDOM } from '../../lib/dom';
 import { classNames } from '@vkontakte/vkjs';
-import { Popper } from '../Popper/Popper';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { useTimeout } from '../../hooks/useTimeout';
-import { useExternRef } from '../../hooks/useExternRef';
 import { useEventListener } from '../../hooks/useEventListener';
+import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useDOM } from '../../lib/dom';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { Popper } from '../Popper/Popper';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */

package/dist/components/Popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","names":["React","useDOM","classNames","Popper","FocusTrap","useTimeout","useExternRef","useEventListener","useGlobalEventListener","usePatchChildrenRef","Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","wrapperClassName","undefined"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDOM } from '../../lib/dom';\nimport { classNames } from '@vkontakte/vkjs';\nimport { PopperCommonProps, Popper } from '../Popper/Popper';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Popover.js","names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shownProp","shown","showDelay","hideDelay","offsetDistance","content","children","styleProp","style","className","getRef","onShownChange","restProps","document","hoverable","hovered","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","childRef","child","setShown","value","showTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","capture","passive","targetEnterListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","wrapperClassName","undefined"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useEventListener } from '../../hooks/useEventListener';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useGlobalEventListener } from '../../hooks/useGlobalEventListener';\nimport { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';\nimport { useTimeout } from '../../hooks/useTimeout';\nimport { useDOM } from '../../lib/dom';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName'> {\n  /**\n   * Механика вызова всплывающего окна.\n   *\n   * - `\"click\"` – показывается/скрывается только при нажатии.\n   * - `\"hover\"` – помимо нажатия, будет показываться/скрывается при наведении/отведении мыши.\n   *\n   * > ⚠️`\"hover\"` на тач-устройствах будет работать как `\"click\"`, с одним лишь нюансом, что не будет закрываться\n   * > при повторном нажатии на целевой элемент. Для закрытия необходимо нажать на область вне целевого элемента\n   * > и выпадающего окна.\n   */\n  action?: 'click' | 'hover';\n  /**\n   * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.\n   */\n  shown?: boolean;\n  /**\n   * Количество миллисекунд, после которых произойдёт показ всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  showDelay?: number;\n  /**\n   * Количество миллисекунд, после которых произойдёт скрытие всплывающего окна.\n   *\n   * > Используется только для `action=\"hover\"` при наведении/отведении мыши.\n   */\n  hideDelay?: number;\n  /**\n   * Содержимое всплывающего окна.\n   */\n  content?: React.ReactNode;\n  /**\n   * Целевой элемент. Всплывающее окно появится возле него.\n   *\n   * > ⚠️ Если это пользовательский компонент, то он должен предоставлять параметры либо `getRootRef`, либо `ref` для получения ссылки на DOM-узел.\n   */\n  children?: React.ReactElement;\n  /**\n   * Вызывается при каждом изменении видимости всплывающего окна.\n   */\n  onShownChange?(shown: boolean): void;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popover\n */\nexport const Popover = ({\n  action = 'click',\n  shown: shownProp,\n  showDelay = 150,\n  hideDelay = 150,\n  offsetDistance = 8,\n  content,\n  children,\n  style: styleProp,\n  className,\n  getRef,\n  onShownChange,\n  ...restProps\n}: PopoverProps) => {\n  const { document } = useDOM();\n\n  const hoverable = action === 'hover';\n  const hovered = React.useRef(false);\n  const [computedShown, setComputedShown] = React.useState(shownProp || false);\n  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(null);\n\n  const shown = typeof shownProp === 'boolean' ? shownProp : computedShown;\n\n  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);\n\n  const [childRef, child] = usePatchChildrenRef(children);\n\n  const setShown = (value: boolean) => {\n    if (typeof shownProp !== 'boolean') {\n      setComputedShown(value);\n    }\n    typeof onShownChange === 'function' && onShownChange(value);\n  };\n\n  const showTimeout = useTimeout(() => setShown(true), showDelay);\n\n  const hideTimeout = useTimeout(() => setShown(false), hideDelay);\n\n  const handleTargetEnter = () => {\n    hovered.current = true;\n    hideTimeout.clear();\n    showTimeout.set();\n  };\n\n  const handleTargetClick = () => {\n    if (hovered.current && shown) {\n      return;\n    }\n    setShown(!shown);\n  };\n\n  const handleTargetLeave = () => {\n    hovered.current = false;\n    showTimeout.clear();\n    hideTimeout.set();\n  };\n\n  const handleContentKeyDownEscape = () => {\n    setShown(false);\n  };\n\n  const handleOutsideClick = (e: MouseEvent) => {\n    if (\n      dropdownNode &&\n      !childRef.current?.contains(e.target as Node) &&\n      !dropdownNode.contains(e.target as Node)\n    ) {\n      setShown(false);\n    }\n  };\n\n  useGlobalEventListener(document, 'click', handleOutsideClick, {\n    capture: true,\n    passive: true,\n  });\n  const targetEnterListener = useEventListener('mouseenter', handleTargetEnter);\n  const targetClickEvent = useEventListener('click', handleTargetClick);\n  const targetLeaveListener = useEventListener('mouseleave', handleTargetLeave);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    targetClickEvent.add(childRef.current);\n  }, [childRef, targetClickEvent]);\n\n  React.useEffect(() => {\n    if (!childRef.current) {\n      return;\n    }\n\n    if (hoverable) {\n      targetEnterListener.add(childRef.current);\n      targetLeaveListener.add(childRef.current);\n    }\n\n    return () => {\n      targetEnterListener.remove();\n      targetLeaveListener.remove();\n    };\n  }, [childRef, hoverable, targetEnterListener, targetLeaveListener]);\n\n  return (\n    <React.Fragment>\n      {child}\n      {shown && (\n        <Popper\n          {...restProps}\n          className={classNames(styles['Popover'], className)}\n          targetRef={childRef}\n          getRef={patchedPopperRef}\n          offsetDistance={offsetDistance}\n          style={\n            // Reason: Typescript ругается на CSS Custom Properties в объекте\n            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n            {\n              ...styleProp,\n              '--vkui_internal--popover_safe_zone_padding': `${offsetDistance}px`,\n            } as React.CSSProperties\n          }\n          renderContent={({ className: wrapperClassName }) => (\n            <FocusTrap className={wrapperClassName} onClose={handleContentKeyDownEscape}>\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Popper/Popper.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { Modifier } from 'react-popper';
-import { HasRef } from '../../types';
-export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'top' | 'bottom' | 'left' | 'right';
+import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
+import type { HasRef } from '../../types';
 export interface PopperRenderContentProps {
     className: string;
 }
@@ -9,7 +8,7 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
     /**
      * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
      */
-    placement?: Placement;
+    placement?: PlacementWithAuto;
     /**
      * Отступ по вспомогательной оси
      */
@@ -31,13 +30,14 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     sameWidth?: boolean;
     forcePortal?: boolean;
-    onPlacementChange?: (data: {
-        placement?: Placement;
-    }) => void;
+    /**
+     * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.
+     */
+    autoUpdateOnTargetResize?: boolean;
     /**
      * Массив кастомных модификаторов для Popper (необходимо мемоизировать)
      */
-    customModifiers?: Array<Modifier<string>>;
+    customMiddlewares?: UseFloatingMiddleware[];
     /**
      * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.
      *
@@ -46,6 +46,9 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      * > ⚠️ Параметр `children` будет проигнорирован.
      */
     renderContent?(props: PopperRenderContentProps): React.ReactNode;
+    onPlacementChange?(data: {
+        placement?: Placement;
+    }): void;
 }
 export interface PopperProps extends PopperCommonProps {
     targetRef: React.RefObject<HTMLElement>;
@@ -53,4 +56,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export declare const Popper: ({ targetRef, children, getRef, placement, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, style: compStyles, customModifiers, renderContent, className, ...restProps }: PopperProps) => JSX.Element;
+export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowClassName, sameWidth, offsetDistance, offsetSkidding, forcePortal, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, className, ...restProps }: PopperProps) => JSX.Element;

package/dist/components/Popper/Popper.js

@@ -1,146 +1,119 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "style", "customModifiers", "renderContent", "className"];
+var _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "autoUpdateOnTargetResize", "style", "customMiddlewares", "renderContent", "className"];
 import * as React from 'react';
-import { usePopper } from 'react-popper';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { PopperArrow } from '../PopperArrow/PopperArrow';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getPlatformClassName } from '../../helpers/getPlatformClassName';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { classNames } from '@vkontakte/vkjs';
-var ARROW_PADDING = 8;
-var ARROW_WIDTH = 20;
-var ARROW_HEIGHT = 8;
-var preventOverflowModifier = {
-  name: 'preventOverflow',
-  options: {
-    mainAxis: false
-  }
-};
-var flipModifier = {
-  name: 'flip'
-};
-var arrowModifier = {
-  name: 'arrow',
-  options: {
-    padding: ARROW_PADDING
-  }
-};
-var sameWidthModifier = {
-  name: 'sameWidth',
-  enabled: true,
-  phase: 'beforeWrite',
-  requires: ['computeStyles'],
-  fn: function fn(_ref) {
-    var state = _ref.state;
-    state.styles.popper.width = "".concat(state.rects.reference.width, "px");
-  },
-  effect: function effect(_ref2) {
-    var state = _ref2.state;
-    state.elements.popper.style.width = "".concat(state.elements.reference.offsetWidth, "px");
-  }
-};
-
+import { useExternRef } from '../../hooks/useExternRef';
+import { arrowMiddleware, autoPlacementMiddleware, autoUpdateFloatingElement, checkIsNotAutoPlacement, convertFloatingDataToReactCSSProperties, flipMiddleware, getAutoPlacementAlign, offsetMiddleware, shiftMiddleware, sizeMiddleware, useFloating } from '../../lib/floating';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
+import { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from '../PopperArrow/PopperArrow';
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-export var Popper = function Popper(_ref3) {
-  var _targetRef$current3;
-  var targetRef = _ref3.targetRef,
-    children = _ref3.children,
-    getRef = _ref3.getRef,
-    _ref3$placement = _ref3.placement,
-    placement = _ref3$placement === void 0 ? 'bottom-start' : _ref3$placement,
-    onPlacementChange = _ref3.onPlacementChange,
-    arrow = _ref3.arrow,
-    arrowClassName = _ref3.arrowClassName,
-    sameWidth = _ref3.sameWidth,
-    _ref3$offsetDistance = _ref3.offsetDistance,
-    offsetDistance = _ref3$offsetDistance === void 0 ? 8 : _ref3$offsetDistance,
-    _ref3$offsetSkidding = _ref3.offsetSkidding,
-    offsetSkidding = _ref3$offsetSkidding === void 0 ? 0 : _ref3$offsetSkidding,
-    _ref3$forcePortal = _ref3.forcePortal,
-    forcePortal = _ref3$forcePortal === void 0 ? true : _ref3$forcePortal,
-    compStyles = _ref3.style,
-    customModifiers = _ref3.customModifiers,
-    renderContent = _ref3.renderContent,
-    className = _ref3.className,
-    restProps = _objectWithoutProperties(_ref3, _excluded);
-  var _React$useState = React.useState(null),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    popperNode = _React$useState2[0],
-    setPopperNode = _React$useState2[1];
-  var _React$useState3 = React.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    smallTargetOffsetSkidding = _React$useState4[0],
-    setSmallTargetOffsetSkidding = _React$useState4[1];
-  var platform = usePlatform();
-  var setExternalRef = useExternRef(getRef, setPopperNode);
-  var modifiers = React.useMemo(function () {
-    var modifiers = [preventOverflowModifier, {
-      name: 'offset',
-      options: {
-        offset: [arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding, arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance]
-      }
-    }, flipModifier];
-    if (arrow) {
-      modifiers.push(arrowModifier);
+export var Popper = function Popper(_ref) {
+  var targetRef = _ref.targetRef,
+    children = _ref.children,
+    getRef = _ref.getRef,
+    _ref$placement = _ref.placement,
+    placementProp = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    onPlacementChange = _ref.onPlacementChange,
+    arrow = _ref.arrow,
+    arrowClassName = _ref.arrowClassName,
+    sameWidth = _ref.sameWidth,
+    _ref$offsetDistance = _ref.offsetDistance,
+    offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
+    _ref$offsetSkidding = _ref.offsetSkidding,
+    offsetSkidding = _ref$offsetSkidding === void 0 ? 0 : _ref$offsetSkidding,
+    _ref$forcePortal = _ref.forcePortal,
+    forcePortal = _ref$forcePortal === void 0 ? true : _ref$forcePortal,
+    _ref$autoUpdateOnTarg = _ref.autoUpdateOnTargetResize,
+    autoUpdateOnTargetResize = _ref$autoUpdateOnTarg === void 0 ? false : _ref$autoUpdateOnTarg,
+    styleProp = _ref.style,
+    customMiddlewares = _ref.customMiddlewares,
+    renderContent = _ref.renderContent,
+    className = _ref.className,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var arrowRef = React.useRef(null);
+  var isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
+  var memoizedMiddlewares = React.useMemo(function () {
+    var middlewares = [offsetMiddleware({
+      crossAxis: offsetSkidding,
+      mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance
+    })];
+
+    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+    if (isNotAutoPlacement) {
+      middlewares.push(flipMiddleware());
+    } else {
+      middlewares.push(autoPlacementMiddleware({
+        alignment: getAutoPlacementAlign(placementProp)
+      }));
     }
+    middlewares.push(shiftMiddleware());
     if (sameWidth) {
-      modifiers.push(sameWidthModifier);
+      middlewares.push(sizeMiddleware({
+        apply: function apply(_ref2) {
+          var rects = _ref2.rects,
+            elements = _ref2.elements;
+          Object.assign(elements.floating.style, {
+            width: "".concat(rects.reference.width, "px")
+          });
+        }
+      }));
     }
-    if (customModifiers) {
-      modifiers.push.apply(modifiers, _toConsumableArray(customModifiers));
+    if (customMiddlewares) {
+      middlewares.push.apply(middlewares, _toConsumableArray(customMiddlewares));
     }
-    return modifiers;
-  }, [arrow, sameWidth, smallTargetOffsetSkidding, offsetSkidding, offsetDistance, customModifiers]);
-  var _usePopper = usePopper(targetRef.current, popperNode, {
-      placement: placement,
-      modifiers: modifiers
-    }),
-    popperStyles = _usePopper.styles,
-    state = _usePopper.state,
-    attributes = _usePopper.attributes;
-  var resolvedPlacement = state === null || state === void 0 ? void 0 : state.placement;
-  var isEdgePlacement = !!resolvedPlacement && resolvedPlacement.includes('-'); // true, если поппер отрисован с краю
 
-  // Если поппер рисуется с краю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
-  // таргета из-за маленьких размеров последнего
-  useIsomorphicLayoutEffect(function () {
-    if (arrow && isEdgePlacement) {
-      var _ref4, _targetRef$current, _targetRef$current2;
-      var placementDirection = resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('bottom') || resolvedPlacement !== null && resolvedPlacement !== void 0 && resolvedPlacement.startsWith('top') ? 'vertical' : 'horizontal';
-      var arrowSize = placementDirection === 'vertical' ? ARROW_WIDTH : ARROW_HEIGHT;
-      var targetSize = (_ref4 = placementDirection === 'vertical' ? (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.offsetWidth : (_targetRef$current2 = targetRef.current) === null || _targetRef$current2 === void 0 ? void 0 : _targetRef$current2.offsetHeight) !== null && _ref4 !== void 0 ? _ref4 : 0;
-      if (targetSize < arrowSize + 2 * ARROW_PADDING) {
-        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
-      }
-    } else {
-      setSmallTargetOffsetSkidding(0);
+    // см. https://floating-ui.com/docs/arrow#order
+    if (arrow) {
+      middlewares.push(arrowMiddleware({
+        element: arrowRef,
+        padding: ARROW_PADDING
+      }));
     }
-  }, [arrow, isEdgePlacement]);
+    return middlewares;
+  }, [arrow, sameWidth, offsetSkidding, offsetDistance, customMiddlewares, placementProp, isNotAutoPlacement]);
+  var _useFloating = useFloating({
+      placement: isNotAutoPlacement ? placementProp : undefined,
+      middleware: memoizedMiddlewares,
+      whileElementsMounted: function whileElementsMounted() {
+        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+          args[_key] = arguments[_key];
+        }
+        return autoUpdateFloatingElement.apply(void 0, args.concat([{
+          elementResize: autoUpdateOnTargetResize
+        }]));
+      }
+    }),
+    floatingDataX = _useFloating.x,
+    floatingDataY = _useFloating.y,
+    floatingPositionStrategy = _useFloating.strategy,
+    resolvedPlacement = _useFloating.placement,
+    refs = _useFloating.refs,
+    arrowCoords = _useFloating.middlewareData.arrow;
+  var handleRootRef = useExternRef(refs.setFloating, getRef);
+  React.useEffect(function () {
+    refs.setReference(targetRef.current);
+  }, [refs, targetRef]);
   React.useEffect(function () {
-    if (resolvedPlacement) {
-      onPlacementChange && onPlacementChange({
+    if (resolvedPlacement && onPlacementChange) {
+      onPlacementChange({
         placement: resolvedPlacement
       });
     }
   }, [onPlacementChange, resolvedPlacement]);
-  var dropdown = /*#__PURE__*/React.createElement("div", _extends({}, restProps, attributes.popper, {
-    className: classNames("vkuiPopper", getPlatformClassName("vkuiPopper", platform), className),
-    ref: setExternalRef,
-    style: _objectSpread(_objectSpread(_objectSpread({}, compStyles), popperStyles.popper), {}, {
-      minWidth: sameWidth ? (_targetRef$current3 = targetRef.current) === null || _targetRef$current3 === void 0 ? void 0 : _targetRef$current3.scrollWidth : undefined
-    })
+  var dropdown = /*#__PURE__*/React.createElement("div", _extends({}, restProps, {
+    className: classNames("vkuiPopper", className),
+    ref: handleRootRef,
+    style: _objectSpread(_objectSpread({}, styleProp), convertFloatingDataToReactCSSProperties(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
   }), arrow && /*#__PURE__*/React.createElement(PopperArrow, {
-    attributes: attributes.arrow,
-    style: popperStyles.arrow,
-    arrowClassName: arrowClassName
+    coords: arrowCoords,
+    placement: resolvedPlacement,
+    arrowClassName: arrowClassName,
+    getRootRef: arrowRef
   }), renderContent ? renderContent({
     className: "vkuiPopper__content"
   }) : /*#__PURE__*/React.createElement("div", {