@vkontakte/vkui 5.4.3 → 5.5.1

package/dist/components/PanelHeaderEdit/PanelHeaderEdit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","Icon28EditOutline","usePlatform","Platform","PanelHeaderButton","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","aria-label","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AAiBnG;;CAEC,GACD,OAAO,IAAMC,kBAAkB,iBAKH;iCAJ1BC,UAAAA,wCAAW,KAAK,8CAChBC,WAAAA,0CAAY,8DACZC,WAAAA,0CAAY,6BACTC;QAHHH;QACAC;QACAC;;IAGA,IAAME,UAAUJ,WAAWE,YAAYD,SAAS;IAChD,IAAMI,cAAcL,WAAWN,oBAAoBC,iBAAiB;IACpE,IAAMW,WAAWV;IAEjB,qBACE,oBAACE;QAAkBS,cAAYH;OAAaD,YACzCG,aAAaT,SAASW,GAAG,GAAGJ,wBAAU,oBAACC,kBAAc;AAG5D,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelHeaderEdit/PanelHeaderEdit.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Icon28DoneOutline, Icon28EditOutline } from '@vkontakte/icons';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { Platform } from '../../lib/platform';\nimport { PanelHeaderButton, PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';\n\nexport interface PanelHeaderEditProps extends PanelHeaderButtonProps {\n  /**\n   * Включен ли режим редактирования\n   */\n  isActive?: boolean;\n  /**\n   * iOS only. Текст кнопки, когда режим редактирования не активен\n   */\n  editLabel?: string;\n  /**\n   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него\n   */\n  doneLabel?: string;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelHeaderEdit\n */\nexport const PanelHeaderEdit = ({\n  isActive = false,\n  editLabel = 'Редактировать',\n  doneLabel = 'Готово',\n  ...restProps\n}: PanelHeaderEditProps) => {\n  const iOSText = isActive ? doneLabel : editLabel;\n  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;\n  const platform = usePlatform();\n\n  return (\n    <PanelHeaderButton aria-label={iOSText} {...restProps}>\n      {platform === Platform.IOS ? iOSText : <AndroidIcon />}\n    </PanelHeaderButton>\n  );\n};\n"],"names":["React","Icon28DoneOutline","Icon28EditOutline","usePlatform","Platform","PanelHeaderButton","PanelHeaderEdit","isActive","editLabel","doneLabel","restProps","iOSText","AndroidIcon","platform","aria-label","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,EAAEC,iBAAiB,QAAQ,mBAAmB;AACxE,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,QAAgC,yCAAyC;AAiBnG;;CAEC,GACD,OAAO,IAAMC,kBAAkB;iCAC7BC,UAAAA,wCAAW,mDACXC,WAAAA,0CAAY,8DACZC,WAAAA,0CAAY,6BACTC;QAHHH;QACAC;QACAC;;IAGA,IAAME,UAAUJ,WAAWE,YAAYD;IACvC,IAAMI,cAAcL,WAAWN,oBAAoBC;IACnD,IAAMW,WAAWV;IAEjB,qBACE,oBAACE;QAAkBS,cAAYH;OAAaD,YACzCG,aAAaT,SAASW,MAAMJ,wBAAU,oBAACC;AAG9C,EAAE"}

package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { PanelHeaderButtonProps } from '../PanelHeaderButton/PanelHeaderButton';
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderSubmit
  */
-export declare const PanelHeaderSubmit: ({ children, ...restProps }: PanelHeaderButtonProps) => JSX.Element;
+export declare const PanelHeaderSubmit: ({ children, ...restProps }: PanelHeaderButtonProps) => React.JSX.Element;

package/dist/components/PanelHeaderSubmit/PanelHeaderSubmit.js

@@ -1,5 +1,5 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import * as React from "react";
 import { Icon28DoneOutline } from "@vkontakte/icons";
 import { usePlatform } from "../../hooks/usePlatform";

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

@@ -1 +1 @@
-{"version":3,"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"],"names":["React","Icon28DoneOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderSubmit","children","restProps","platform","aria-label","primary","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,iBAAiB,QAAgC,yCAAyC;AAEnG;;CAEC,GACD,OAAO,IAAMC,oBAAoB,iBAGH;iCAF5BC,UAAAA,wCAAW,4BACRC;QADHD;;IAGA,IAAME,WAAWP;IAEjB,qBACE,oBAACG;QAAkBK,cAAYN,qBAAqBG;QAAWI,SAAAA,IAAO;OAAKH,YACxEC,aAAaN,SAASS,GAAG,GAAGL,yBAAW,oBAACN,wBAAoB;AAGnE,EAAE"}
+{"version":3,"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"],"names":["React","Icon28DoneOutline","usePlatform","Platform","getTitleFromChildren","PanelHeaderButton","PanelHeaderSubmit","children","restProps","platform","aria-label","primary","IOS"],"mappings":";;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,mBAAmB;AACrD,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,oBAAoB,QAAQ,kBAAkB;AACvD,SAASC,iBAAiB,QAAgC,yCAAyC;AAEnG;;CAEC,GACD,OAAO,IAAMC,oBAAoB;iCAC/BC,UAAAA,wCAAW,4BACRC;QADHD;;IAGA,IAAME,WAAWP;IAEjB,qBACE,oBAACG;QAAkBK,cAAYN,qBAAqBG;QAAWI,SAAAA;OAAYH,YACxEC,aAAaN,SAASS,MAAML,yBAAW,oBAACN;AAG/C,EAAE"}

package/dist/components/PanelSpinner/PanelSpinner.d.ts

@@ -6,4 +6,4 @@ export interface PanelSpinnerProps extends SpinnerProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelSpinner
  */
-export declare const PanelSpinner: React.MemoExoticComponent<({ height, style, ...restProps }: PanelSpinnerProps) => JSX.Element>;
+export declare const PanelSpinner: React.MemoExoticComponent<({ height, style, ...restProps }: PanelSpinnerProps) => React.JSX.Element>;

package/dist/components/PanelSpinner/PanelSpinner.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+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 * as React from "react";
 import { Spinner } from "../Spinner/Spinner";
 /**

package/dist/components/PanelSpinner/PanelSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"names":["React","Spinner","PanelSpinner","memo","height","style","restProps","size","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAsB,qBAAqB;AAM3D;;CAEC,GACD,OAAO,IAAMC,6BAAeF,MAAMG,IAAI,CACpC,+BACE;+BADCC,QAAAA,oCAAS,oBAAIC,eAAAA,OAAUC;QAAvBF;QAAaC;;WACd,oBAACJ;QAAQM,MAAK;OAAcD;QAAWD,OAAO;YAAED,QAAAA;WAAWC;;AAAU,GAEvE;AAEFH,aAAaM,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/PanelSpinner/PanelSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Spinner, SpinnerProps } from '../Spinner/Spinner';\n\nexport interface PanelSpinnerProps extends SpinnerProps {\n  height?: number;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/PanelSpinner\n */\nexport const PanelSpinner = React.memo(\n  ({ height = 96, style, ...restProps }: PanelSpinnerProps) => (\n    <Spinner size=\"regular\" {...restProps} style={{ height, ...style }} />\n  ),\n);\n\nPanelSpinner.displayName = 'PanelSpinner';\n"],"names":["React","Spinner","PanelSpinner","memo","height","style","restProps","size","displayName"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,OAAO,QAAsB,qBAAqB;AAM3D;;CAEC,GACD,OAAO,IAAMC,6BAAeF,MAAMG,KAChC;+BAAGC,QAAAA,oCAAS,oBAAIC,eAAAA,OAAUC;QAAvBF;QAAaC;;WACd,oBAACJ;QAAQM,MAAK;OAAcD;QAAWD,OAAO;YAAED,QAAAA;WAAWC;;AAAU,GAEvE;AAEFH,aAAaM,cAAc"}

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

@@ -17,8 +17,12 @@ export interface PlaceholderProps extends React.HTMLAttributes<HTMLDivElement>,
      * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
      */
     stretched?: boolean;
+    /**
+     * Добавляет отступы к компоненту
+     */
+    withPadding?: boolean;
 }
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */
-export declare const Placeholder: ({ icon, header, action, children, stretched, getRootRef, className, ...restProps }: PlaceholderProps) => JSX.Element;
+export declare const Placeholder: ({ icon, header, action, children, stretched, getRootRef, className, withPadding, ...restProps }: PlaceholderProps) => React.JSX.Element;

package/dist/components/Placeholder/Placeholder.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+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 * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { Headline } from "../Typography/Headline/Headline";
@@ -8,21 +8,20 @@ import { Title } from "../Typography/Title/Title";
 /**
  * @see https://vkcom.github.io/VKUI/#/Placeholder
  */ export var Placeholder = function(_param) /*#__PURE__*/ {
-    var icon = _param.icon, header = _param.header, action = _param.action, children = _param.children, stretched = _param.stretched, getRootRef = _param.getRootRef, className = _param.className, restProps = _object_without_properties(_param, [
+    var icon = _param.icon, header = _param.header, action = _param.action, children = _param.children, stretched = _param.stretched, getRootRef = _param.getRootRef, className = _param.className, _param_withPadding = _param.withPadding, withPadding = _param_withPadding === void 0 ? true : _param_withPadding, restProps = _object_without_properties(_param, [
         "icon",
         "header",
         "action",
         "children",
         "stretched",
         "getRootRef",
-        "className"
+        "className",
+        "withPadding"
     ]);
     return React.createElement("div", _object_spread_props(_object_spread({}, restProps), {
         ref: getRootRef,
-        className: classNames("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", className)
-    }), /*#__PURE__*/ React.createElement("div", {
-        className: "vkuiPlaceholder__in"
-    }, hasReactNode(icon) && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiPlaceholder", stretched && "vkuiPlaceholder--stretched", withPadding && "vkuiPlaceholder--withPadding", className)
+    }), hasReactNode(icon) && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiPlaceholder__icon"
     }, icon), hasReactNode(header) && /*#__PURE__*/ React.createElement(Title, {
         level: "2",
@@ -33,7 +32,7 @@ import { Title } from "../Typography/Title/Title";
         className: "vkuiPlaceholder__text"
     }, children), hasReactNode(action) && /*#__PURE__*/ React.createElement("div", {
         className: "vkuiPlaceholder__action"
-    }, action)));
+    }, action));
 };
 
 //# sourceMappingURL=Placeholder.js.map

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 { 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"],"names":["React","classNames","hasReactNode","Headline","Title","Placeholder","icon","header","action","children","stretched","getRootRef","className","restProps","div","ref","level","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AAwBlD;;CAEC,GACD,OAAO,IAAMC,cAAc,+BAUzB;QATAC,cAAAA,MACAC,gBAAAA,QACAC,gBAAAA,QACAC,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACAC,mBAAAA,WACGC;QAPHP;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;WAGA,oBAACE,+CACKD;QACJE,KAAKJ;QACLC,WAAWX,8BAETS,2CACAE;sBAGF,oBAACE;QAAIF,SAAS;OACXV,aAAaI,uBAAS,oBAACQ;QAAIF,SAAS;OAAgCN,OACpEJ,aAAaK,yBACZ,oBAACH;QAAMY,OAAM;QAAIC,QAAO;QAAIL,SAAS;OAClCL,SAGJL,aAAaO,2BACZ,oBAACN;QAASc,QAAO;QAAIL,SAAS;OAC3BH,WAGJP,aAAaM,yBAAW,oBAACM;QAAIF,SAAS;OAAkCJ;AAExE,EACL"}
+{"version":3,"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  withPadding?: 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  withPadding = true,\n  ...restProps\n}: PlaceholderProps) => (\n  <div\n    {...restProps}\n    ref={getRootRef}\n    className={classNames(\n      styles['Placeholder'],\n      stretched && styles['Placeholder--stretched'],\n      withPadding && styles['Placeholder--withPadding'],\n      className,\n    )}\n  >\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);\n"],"names":["React","classNames","hasReactNode","Headline","Title","Placeholder","icon","header","action","children","stretched","getRootRef","className","withPadding","restProps","div","ref","level","weight"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAE3D,SAASC,QAAQ,QAAQ,kCAAkC;AAC3D,SAASC,KAAK,QAAQ,4BAA4B;AA4BlD;;CAEC,GACD,OAAO,IAAMC,cAAc;QACzBC,cAAAA,MACAC,gBAAAA,QACAC,gBAAAA,QACAC,kBAAAA,UACAC,mBAAAA,WACAC,oBAAAA,YACAC,mBAAAA,uCACAC,aAAAA,8CAAc,2BACXC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;WAGA,oBAACE,+CACKD;QACJE,KAAKL;QACLC,WAAWX,8BAETS,2CACAG,+CACAD;QAGDV,aAAaI,uBAAS,oBAACS;QAAIH,SAAS;OAAgCN,OACpEJ,aAAaK,yBACZ,oBAACH;QAAMa,OAAM;QAAIC,QAAO;QAAIN,SAAS;OAClCL,SAGJL,aAAaO,2BACZ,oBAACN;QAASe,QAAO;QAAIN,SAAS;OAC3BH,WAGJP,aAAaM,yBAAW,oBAACO;QAAIH,SAAS;OAAkCJ;AACtE,EACL"}

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

@@ -13,4 +13,4 @@ export interface PlatformProviderProps {
  * @since 5.1.0
  * @see https://vkcom.github.io/VKUI/#/PlatformProvider
  */
-export declare function PlatformProvider({ value, children }: PlatformProviderProps): JSX.Element;
+export declare function PlatformProvider({ value, children }: PlatformProviderProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"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 * @since 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"],"names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance","platform"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,KAA0C,EAAE;QAA1CC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACxC,IAAMC,aAAaN;IAEnB,qBACE,oBAACE;QAAuBK,UAAUH;qBAChC,oBAACH;QAAoBM,UAAUH;QAAOE,YAAYA;OAC/CD;AAIT,CAAC"}
+{"version":3,"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 * @since 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"],"names":["React","useAppearance","TokensClassProvider","ConfigProviderOverride","PlatformProvider","value","children","appearance","platform"],"mappings":"AAAA,OAAOA,WAAW,QAAQ;AAC1B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,SAASC,mBAAmB,QAAQ,gCAAgC;AACpE,SAASC,sBAAsB,QAAQ,2CAA2C;AAUlF;;;;;CAKC,GACD,OAAO,SAASC,iBAAiB,KAA0C;QAAxCC,QAAF,MAAEA,OAAOC,WAAT,MAASA;IACxC,IAAMC,aAAaN;IAEnB,qBACE,oBAACE;QAAuBK,UAAUH;qBAChC,oBAACH;QAAoBM,UAAUH;QAAOE,YAAYA;OAC/CD;AAIT"}

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

@@ -4,4 +4,4 @@ export interface PopoutRootProps extends React.HTMLAttributes<HTMLDivElement>, H
     popout?: React.ReactNode;
     modal?: React.ReactNode;
 }
-export declare const PopoutRoot: ({ popout, modal, children, getRootRef, className, ...restProps }: PopoutRootProps) => JSX.Element;
+export declare const PopoutRoot: ({ popout, modal, children, getRootRef, className, ...restProps }: PopoutRootProps) => React.JSX.Element;

package/dist/components/PopoutRoot/PopoutRoot.js

@@ -1,6 +1,6 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+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 * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries";

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 { 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"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AAOzD,IAAMC,mBAAmB,gBAAyC;QAAtCC,iBAAAA;IAC1B,IAAM,AAAEC,YAAcN,kCAAdM;IAER,qBACE,oBAACC;QACCC,WAAWT,qCAETO;OAGDD;AAGP;AAMA,IAAMI,kBAAkB,gBAAwC;QAArCJ,iBAAAA;IACzB,qBAAO,oBAACE;QAAIC,SAAS;OAAgCH;AACvD;AASA,OAAO,IAAMK,aAAa,iBAOH;QANrBC,gBAAAA,QACAC,eAAAA,OACAP,kBAAAA,UACAQ,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAP;QACAQ;QACAL;;IAGA,IAAM,AAAEO,WAAab,SAAba;IAERjB,MAAMkB,SAAS,CAAC,WAAM;QACpBL,UAAUV,kBAAkBc;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ,+CAAQO;QAAWN,WAAWT,6BAAiCS;QAAYS,KAAKJ;QAC9ER,wBACD,oBAACF,qBACE,CAAC,CAACQ,wBAAU,oBAACP,wBAAkBO,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 { 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"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","blurActiveElement","useDOM","AppRootPortal","PopoutRootPopout","children","isDesktop","div","className","PopoutRootModal","PopoutRoot","popout","modal","getRootRef","restProps","document","useEffect","ref"],"mappings":";;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,iBAAiB,EAAEC,MAAM,QAAQ,gBAAgB;AAE1D,SAASC,aAAa,QAAQ,2BAA2B;AAOzD,IAAMC,mBAAmB;QAAGC,iBAAAA;IAC1B,IAAM,AAAEC,YAAcN,kCAAdM;IAER,qBACE,oBAACC;QACCC,WAAWT,qCAETO;OAGDD;AAGP;AAMA,IAAMI,kBAAkB;QAAGJ,iBAAAA;IACzB,qBAAO,oBAACE;QAAIC,SAAS;OAAgCH;AACvD;AASA,OAAO,IAAMK,aAAa;QACxBC,gBAAAA,QACAC,eAAAA,OACAP,kBAAAA,UACAQ,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAP;QACAQ;QACAL;;IAGA,IAAM,AAAEO,WAAab,SAAba;IAERjB,MAAMkB,UAAU;QACdL,UAAUV,kBAAkBc;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,oBAACJ,+CAAQO;QAAWN,WAAWT,6BAAiCS;QAAYS,KAAKJ;QAC9ER,wBACD,oBAACF,qBACE,CAAC,CAACQ,wBAAU,oBAACP,wBAAkBO,SAC/B,CAAC,CAACC,uBAAS,oBAACH,uBAAiBG;AAItC,EAAE"}

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

@@ -9,4 +9,4 @@ export interface PopoutWrapperProps extends React.HTMLAttributes<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/PopoutWrapper
  */
-export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, className, ...restProps }: PopoutWrapperProps) => JSX.Element;
+export declare const PopoutWrapper: ({ alignY, alignX, closing, hasMask, fixed, children, onClick, className, ...restProps }: PopoutWrapperProps) => React.JSX.Element;

package/dist/components/PopoutWrapper/PopoutWrapper.js

@@ -1,7 +1,7 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+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 { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";

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 { 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 === styles['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        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[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"],"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","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,gBAAgB,iBAUH;+BATxBC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,KAAK,2CACfC,SAAAA,sCAAU,IAAI,yCACdC,OAAAA,kCAAQ,IAAI,iBACZC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,QAAQ,CAAC,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,MAAM,CAAiB,IAAI;IAE/C,IAAMC,cAAc,SAACC,GAA6B;QAChD,IAAI,CAACA,KAAKA,EAAEC,aAAa,oCAA4C;YACnEL,UAAU,IAAI;QAChB,CAAC;IACH;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,GAAG,GAAG,MAAM,GAAG;IAC7F3B,MAAM4B,SAAS,CAAC,WAAM;QACpB,CAACT,UAAUO,wBAAwBG,GAAG;IACxC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO,cAAc;OAAI;QACrEC,SAAS,KAAK;IAChB;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB,WAAW;QAChDkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}
+{"version":3,"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 === styles['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        {\n          center: styles['PopoutWrapper--alignY-center'],\n          top: styles['PopoutWrapper--alignY-top'],\n          bottom: styles['PopoutWrapper--alignY-bottom'],\n        }[alignY],\n        {\n          center: styles['PopoutWrapper--alignX-center'],\n          left: styles['PopoutWrapper--alignX-left'],\n          right: styles['PopoutWrapper--alignX-right'],\n        }[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"],"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","div","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,sBAAsB,QAAQ,qCAAqC;AAC5E,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,UAAU,QAAQ,yBAAyB;AACpD,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAW9C;;CAEC,GACD,OAAO,IAAMC,gBAAgB;+BAC3BC,QAAAA,oCAAS,iDACTC,QAAAA,oCAAS,kDACTC,SAAAA,sCAAU,gDACVC,SAAAA,sCAAU,6CACVC,OAAAA,kCAAQ,qBACRC,kBAAAA,UACAC,iBAAAA,SACAC,mBAAAA,WACGC;QARHR;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,IAAME,WAAWd;IACjB,IAA4BH,mCAAAA,MAAMkB,SAAS,CAACP,cAArCQ,SAAqBnB,oBAAboB,YAAapB;IAC5B,IAAMqB,QAAQrB,MAAMsB,OAAuB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,iDAAyD;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BtB,WAAWmB,aAAaN,aAAaX,SAASqB,MAAM,MAAM;IAC1F3B,MAAM4B,UAAU;QACd,CAACT,UAAUO,wBAAwBG;IACrC,GAAG;QAACH;QAAyBP;KAAO;IAEpC,IAAM,AAAEW,SAAWzB,SAAXyB;IACR5B,uBAAuB4B,QAAQ,aAAa,SAACN;eAAMA,EAAEO;OAAkB;QACrEC,SAAS;IACX;IAEA,qBACE,oBAACC,+CACKjB;QACJD,WAAWd,gCAET;YACEiC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAAC5B,OAAO,EACT;YACE0B,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAAC7B,OAAO,EACTC,yCACAS,uCACAP,qCACAD,wCACAI;QAEFwB,gBAAgBpB,SAASqB,YAAYjB;QACrCkB,KAAKpB;sBAEL,oBAACY;QAAIlB,SAAS;qBACZ,oBAACkB;QAAIlB,SAAS;QAAoCD,SAASA;sBAC3D,oBAACmB;QAAIlB,SAAS;OAAqCF;AAI3D,EAAE"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FocusTrapProps } from '../FocusTrap/FocusTrap';
 import { PopperCommonProps } from '../Popper/Popper';
-export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName' | 'content'>, Pick<FocusTrapProps, 'restoreFocus'> {
+export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'>, Pick<FocusTrapProps, 'restoreFocus'> {
     /**
      * Механика вызова всплывающего окна.
      *
@@ -14,7 +14,7 @@ export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowCl
      */
     action?: 'click' | 'hover';
     /**
-     * Если передан, то всплывающее окно будет показан/скрыт в зависимости от значения свойства.
+     * Если передан, то всплывающее окно будет показано/скрыто в зависимости от значения свойства.
      */
     shown?: boolean;
     /**
@@ -47,4 +47,4 @@ export interface PopoverProps extends Omit<PopperCommonProps, 'arrow' | 'arrowCl
 /**
  * @see https://vkcom.github.io/VKUI/#/Popover
  */
-export declare const Popover: ({ action, shown: shownProp, showDelay, hideDelay, offsetDistance, content, children, style: styleProp, className, getRef, onShownChange, restoreFocus, ...restProps }: PopoverProps) => JSX.Element;
+export declare const Popover: ({ action, shown: shownProp, showDelay, hideDelay, offsetDistance, content, children, style: styleProp, className, getRef, onShownChange, restoreFocus, ...restProps }: PopoverProps) => React.JSX.Element;

package/dist/components/Popover/Popover.js

@@ -1,7 +1,7 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+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 { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 import { useEventListener } from "../../hooks/useEventListener";

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

@@ -1 +1 @@
-{"version":3,"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, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<PopperCommonProps, 'arrow' | 'arrowClassName' | 'content'>,\n    Pick<FocusTrapProps, 'restoreFocus'> {\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  restoreFocus = true,\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\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","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","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}
+{"version":3,"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, FocusTrapProps } from '../FocusTrap/FocusTrap';\nimport { Popper, PopperCommonProps } from '../Popper/Popper';\nimport styles from './Popover.module.css';\n\nexport interface PopoverProps\n  extends Omit<\n      PopperCommonProps,\n      'arrow' | 'arrowClassName' | 'arrowHeight' | 'arrowPadding' | 'ArrowIcon' | 'content'\n    >,\n    Pick<FocusTrapProps, 'restoreFocus'> {\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  restoreFocus = true,\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\n              className={wrapperClassName}\n              onClose={handleContentKeyDownEscape}\n              restoreFocus={restoreFocus}\n            >\n              {content}\n            </FocusTrap>\n          )}\n          onMouseOver={hoverable ? hideTimeout.clear : undefined}\n          onMouseOut={hoverable ? handleTargetLeave : undefined}\n        />\n      )}\n    </React.Fragment>\n  );\n};\n"],"names":["React","classNames","useEventListener","useExternRef","useGlobalEventListener","usePatchChildrenRef","useTimeout","useDOM","FocusTrap","Popper","Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","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","Fragment","targetRef","renderContent","wrapperClassName","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { type Placement, type PlacementWithAuto, type UseFloatingMiddleware } from '../../lib/floating';
 import type { HasRef } from '../../types';
+import { type PopperArrowProps } from '../PopperArrow/PopperArrow';
 export interface PopperRenderContentProps {
     className: string;
 }
@@ -22,14 +23,42 @@ export interface PopperCommonProps extends React.HTMLAttributes<HTMLDivElement>,
      */
     arrow?: boolean;
     /**
-     * Стиль стрелки
+     * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.
+     */
+    arrowHeight?: number;
+    /**
+     * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.
+     */
+    arrowPadding?: number;
+    /**
+     * Стиль стрелки.
      */
     arrowClassName?: string;
+    /**
+     * Пользовательская 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?: PopperArrowProps['Icon'];
     /**
      * Выставлять ширину равной target элементу
      */
     sameWidth?: boolean;
     forcePortal?: boolean;
+    /**
+     * Кастомный root-элемент портала.
+     * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`
+     * из контекста `AppRoot`.
+     */
+    portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;
     /**
      * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.
      */
@@ -56,4 +85,4 @@ export interface PopperProps extends PopperCommonProps {
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */
-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;
+export declare const Popper: ({ targetRef, children, getRef, placement: placementProp, onPlacementChange, arrow, arrowHeight, arrowPadding, arrowClassName, ArrowIcon, sameWidth, offsetDistance, offsetSkidding, forcePortal, portalRoot, autoUpdateOnTargetResize, style: styleProp, customMiddlewares, renderContent, className, ...restProps }: PopperProps) => React.JSX.Element;

package/dist/components/Popper/Popper.js

@@ -1,41 +1,47 @@
-import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
-import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _to_consumable_array from "@swc/helpers/src/_to_consumable_array.mjs";
+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 { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
 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";
+import { DEFAULT_ARROW_HEIGHT, DEFAULT_ARROW_PADDING, DefaultIcon } from "../PopperArrow/DefaultIcon";
+import { PopperArrow } from "../PopperArrow/PopperArrow";
 /**
  * @see https://vkcom.github.io/VKUI/#/Popper
  */ export var Popper = function(_param) {
-    var targetRef = _param.targetRef, children = _param.children, getRef = _param.getRef, tmp = _param.placement, placementProp = tmp === void 0 ? "bottom-start" : tmp, onPlacementChange = _param.onPlacementChange, arrow = _param.arrow, arrowClassName = _param.arrowClassName, sameWidth = _param.sameWidth, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 8 : _param_offsetDistance, _param_offsetSkidding = _param.offsetSkidding, offsetSkidding = _param_offsetSkidding === void 0 ? 0 : _param_offsetSkidding, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, _param_autoUpdateOnTargetResize = _param.autoUpdateOnTargetResize, autoUpdateOnTargetResize = _param_autoUpdateOnTargetResize === void 0 ? false : _param_autoUpdateOnTargetResize, styleProp = _param.style, customMiddlewares = _param.customMiddlewares, renderContent = _param.renderContent, className = _param.className, restProps = _object_without_properties(_param, [
+    var targetRef = _param.targetRef, children = _param.children, getRef = _param.getRef, tmp = _param.placement, placementProp = tmp === void 0 ? "bottom-start" : tmp, onPlacementChange = _param.onPlacementChange, arrow = _param.arrow, _param_arrowHeight = _param.arrowHeight, arrowHeight = _param_arrowHeight === void 0 ? DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? DEFAULT_ARROW_PADDING : _param_arrowPadding, arrowClassName = _param.arrowClassName, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? DefaultIcon : _param_ArrowIcon, sameWidth = _param.sameWidth, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 8 : _param_offsetDistance, _param_offsetSkidding = _param.offsetSkidding, offsetSkidding = _param_offsetSkidding === void 0 ? 0 : _param_offsetSkidding, _param_forcePortal = _param.forcePortal, forcePortal = _param_forcePortal === void 0 ? true : _param_forcePortal, portalRoot = _param.portalRoot, _param_autoUpdateOnTargetResize = _param.autoUpdateOnTargetResize, autoUpdateOnTargetResize = _param_autoUpdateOnTargetResize === void 0 ? false : _param_autoUpdateOnTargetResize, styleProp = _param.style, customMiddlewares = _param.customMiddlewares, renderContent = _param.renderContent, className = _param.className, restProps = _object_without_properties(_param, [
         "targetRef",
         "children",
         "getRef",
         "placement",
         "onPlacementChange",
         "arrow",
+        "arrowHeight",
+        "arrowPadding",
         "arrowClassName",
+        "ArrowIcon",
         "sameWidth",
         "offsetDistance",
         "offsetSkidding",
         "forcePortal",
+        "portalRoot",
         "autoUpdateOnTargetResize",
         "style",
         "customMiddlewares",
         "renderContent",
         "className"
     ]);
-    var arrowRef = React.useRef(null);
+    var _React_useState = _sliced_to_array(React.useState(null), 2), arrowRef = _React_useState[0], setArrowRef = _React_useState[1];
     var isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);
     var memoizedMiddlewares = React.useMemo(function() {
         var middlewares = [
             offsetMiddleware({
                 crossAxis: offsetSkidding,
-                mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance
+                mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance
             })
         ];
         // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
@@ -65,18 +71,21 @@ import { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from "../PopperArrow/PopperA
         if (arrow) {
             middlewares.push(arrowMiddleware({
                 element: arrowRef,
-                padding: ARROW_PADDING
+                padding: arrowPadding
             }));
         }
         return middlewares;
     }, [
-        arrow,
-        sameWidth,
         offsetSkidding,
+        arrowRef,
+        arrow,
+        arrowHeight,
+        arrowPadding,
         offsetDistance,
+        isNotAutoPlacement,
+        sameWidth,
         customMiddlewares,
-        placementProp,
-        isNotAutoPlacement
+        placementProp
     ]);
     var _useFloating = useFloating({
         placement: isNotAutoPlacement ? placementProp : undefined,
@@ -117,12 +126,14 @@ import { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from "../PopperArrow/PopperA
         coords: arrowCoords,
         placement: resolvedPlacement,
         arrowClassName: arrowClassName,
-        getRootRef: arrowRef
+        getRootRef: setArrowRef,
+        Icon: ArrowIcon
     }), renderContent ? renderContent({
         className: ""
     }) : children);
     return /*#__PURE__*/ React.createElement(AppRootPortal, {
-        forcePortal: forcePortal
+        forcePortal: forcePortal,
+        portalRoot: portalRoot
     }, dropdown);
 };
 

package/dist/components/Popper/Popper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport { ARROW_HEIGHT, ARROW_PADDING, PopperArrow } from '../PopperArrow/PopperArrow';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Стиль стрелки\n   */\n  arrowClassName?: string;\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowClassName,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const arrowRef = React.useRef<HTMLDivElement>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: ARROW_PADDING,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    arrow,\n    sameWidth,\n    offsetSkidding,\n    offsetDistance,\n    customMiddlewares,\n    placementProp,\n    isNotAutoPlacement,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={arrowRef}\n        />\n      )}\n      {renderContent ? renderContent({ className: '' }) : children}\n    </div>\n  );\n\n  return <AppRootPortal forcePortal={forcePortal}>{dropdown}</AppRootPortal>;\n};\n"],"names":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","ARROW_HEIGHT","ARROW_PADDING","PopperArrow","Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","arrowRef","useRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","setFloating","useEffect","setReference","current","dropdown","div","ref","coords","getRootRef"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Popper/Popper.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport {\n  arrowMiddleware,\n  autoPlacementMiddleware,\n  autoUpdateFloatingElement,\n  checkIsNotAutoPlacement,\n  convertFloatingDataToReactCSSProperties,\n  flipMiddleware,\n  getAutoPlacementAlign,\n  offsetMiddleware,\n  type Placement,\n  type PlacementWithAuto,\n  shiftMiddleware,\n  sizeMiddleware,\n  useFloating,\n  type UseFloatingMiddleware,\n} from '../../lib/floating';\nimport type { HasRef } from '../../types';\nimport { AppRootPortal } from '../AppRoot/AppRootPortal';\nimport {\n  DEFAULT_ARROW_HEIGHT,\n  DEFAULT_ARROW_PADDING,\n  DefaultIcon,\n} from '../PopperArrow/DefaultIcon';\nimport { PopperArrow, type PopperArrowProps } from '../PopperArrow/PopperArrow';\nimport styles from './Popper.module.css';\n\nexport interface PopperRenderContentProps {\n  className: string;\n}\n\nexport interface PopperCommonProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства\n   */\n  placement?: PlacementWithAuto;\n  /**\n   * Отступ по вспомогательной оси\n   */\n  offsetSkidding?: number;\n  /**\n   * Отступ по главной оси\n   */\n  offsetDistance?: number;\n  /**\n   * Отображать ли стрелку, указывающую на якорный элемент\n   */\n  arrow?: boolean;\n  /**\n   * Высота стрелки. Складывается с `offsetDistance`, чтобы стрелка не залезала на якорный элемент.\n   */\n  arrowHeight?: number;\n  /**\n   * Безопасная зона вокруг стрелки, чтобы та не выходила за края контента.\n   */\n  arrowPadding?: number;\n  /**\n   * Стиль стрелки.\n   */\n  arrowClassName?: string;\n  /**\n   * Пользовательская SVG иконка.\n   *\n   * Требования:\n   *\n   * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).\n   * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,\n   *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.\n   *    (см. https://github.com/VKCOM/VKUI/pull/4496).\n   * 3. Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2.\n   * 4. Убедитесь, что компонент принимает все валидные для SVG параметры.\n   * 5. Убедитесь, что SVG и её элементы наследует цвет через `fill=\"currentColor\"`.\n   */\n  ArrowIcon?: PopperArrowProps['Icon'];\n  /**\n   * Выставлять ширину равной target элементу\n   */\n  sameWidth?: boolean;\n  forcePortal?: boolean;\n  /**\n   * Кастомный root-элемент портала.\n   * При передаче вместе с `forcePorta=true` игнорируется `portalRoot` и `disablePortal`\n   * из контекста `AppRoot`.\n   */\n  portalRoot?: HTMLElement | React.RefObject<HTMLElement> | null;\n  /**\n   * Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию.\n   */\n  autoUpdateOnTargetResize?: boolean;\n  /**\n   * Массив кастомных модификаторов для Popper (необходимо мемоизировать)\n   */\n  customMiddlewares?: UseFloatingMiddleware[];\n  /**\n   * При передаче содержимого в `children`, он будет обёрнут во внутренний контейнер.\n   *\n   * Если хочется управлять этим контейнером, то используйте данную функцию.\n   *\n   * > ⚠️ Параметр `children` будет проигнорирован.\n   */\n  renderContent?(props: PopperRenderContentProps): React.ReactNode;\n  onPlacementChange?(data: { placement?: Placement }): void;\n}\n\nexport interface PopperProps extends PopperCommonProps {\n  targetRef: React.RefObject<HTMLElement>;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/Popper\n */\nexport const Popper = ({\n  targetRef,\n  children,\n  getRef,\n  placement: placementProp = 'bottom-start',\n  onPlacementChange,\n  arrow,\n  arrowHeight = DEFAULT_ARROW_HEIGHT,\n  arrowPadding = DEFAULT_ARROW_PADDING,\n  arrowClassName,\n  ArrowIcon = DefaultIcon,\n  sameWidth,\n  offsetDistance = 8,\n  offsetSkidding = 0,\n  forcePortal = true,\n  portalRoot,\n  autoUpdateOnTargetResize = false,\n  style: styleProp,\n  customMiddlewares,\n  renderContent,\n  className,\n  ...restProps\n}: PopperProps) => {\n  const [arrowRef, setArrowRef] = React.useState<HTMLDivElement | null>(null);\n\n  const isNotAutoPlacement = checkIsNotAutoPlacement(placementProp);\n\n  const memoizedMiddlewares = React.useMemo(() => {\n    const middlewares: UseFloatingMiddleware[] = [\n      offsetMiddleware({\n        crossAxis: offsetSkidding,\n        mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance,\n      }),\n    ];\n\n    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement\n    if (isNotAutoPlacement) {\n      middlewares.push(flipMiddleware());\n    } else {\n      middlewares.push(\n        autoPlacementMiddleware({ alignment: getAutoPlacementAlign(placementProp) }),\n      );\n    }\n\n    middlewares.push(shiftMiddleware());\n\n    if (sameWidth) {\n      middlewares.push(\n        sizeMiddleware({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n      );\n    }\n\n    if (customMiddlewares) {\n      middlewares.push(...customMiddlewares);\n    }\n\n    // см. https://floating-ui.com/docs/arrow#order\n    if (arrow) {\n      middlewares.push(\n        arrowMiddleware({\n          element: arrowRef,\n          padding: arrowPadding,\n        }),\n      );\n    }\n\n    return middlewares;\n  }, [\n    offsetSkidding,\n    arrowRef,\n    arrow,\n    arrowHeight,\n    arrowPadding,\n    offsetDistance,\n    isNotAutoPlacement,\n    sameWidth,\n    customMiddlewares,\n    placementProp,\n  ]);\n\n  const {\n    x: floatingDataX,\n    y: floatingDataY,\n    strategy: floatingPositionStrategy,\n    placement: resolvedPlacement,\n    refs,\n    middlewareData: { arrow: arrowCoords },\n  } = useFloating({\n    placement: isNotAutoPlacement ? placementProp : undefined,\n    middleware: memoizedMiddlewares,\n    whileElementsMounted(...args) {\n      return autoUpdateFloatingElement(...args, {\n        elementResize: autoUpdateOnTargetResize,\n      });\n    },\n  });\n\n  const handleRootRef = useExternRef<HTMLDivElement>(refs.setFloating, getRef);\n\n  React.useEffect(() => {\n    refs.setReference(targetRef.current);\n  }, [refs, targetRef]);\n\n  React.useEffect(() => {\n    if (resolvedPlacement && onPlacementChange) {\n      onPlacementChange({ placement: resolvedPlacement });\n    }\n  }, [onPlacementChange, resolvedPlacement]);\n\n  const dropdown = (\n    <div\n      {...restProps}\n      className={classNames(styles['Popper'], className)}\n      ref={handleRootRef}\n      style={{\n        ...styleProp,\n        ...convertFloatingDataToReactCSSProperties(\n          floatingPositionStrategy,\n          floatingDataX,\n          floatingDataY,\n          sameWidth ? null : undefined,\n        ),\n      }}\n    >\n      {arrow && (\n        <PopperArrow\n          coords={arrowCoords}\n          placement={resolvedPlacement}\n          arrowClassName={arrowClassName}\n          getRootRef={setArrowRef}\n          Icon={ArrowIcon}\n        />\n      )}\n      {renderContent ? renderContent({ className: '' }) : children}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} portalRoot={portalRoot}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"names":["React","classNames","useExternRef","arrowMiddleware","autoPlacementMiddleware","autoUpdateFloatingElement","checkIsNotAutoPlacement","convertFloatingDataToReactCSSProperties","flipMiddleware","getAutoPlacementAlign","offsetMiddleware","shiftMiddleware","sizeMiddleware","useFloating","AppRootPortal","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","PopperArrow","Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","arrowPadding","arrowClassName","ArrowIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","useState","arrowRef","setArrowRef","isNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","crossAxis","mainAxis","push","alignment","apply","rects","elements","Object","assign","floating","width","reference","element","padding","undefined","middleware","whileElementsMounted","args","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","setFloating","useEffect","setReference","current","dropdown","div","ref","coords","getRootRef","Icon"],"mappings":"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"}