@vkontakte/vkui 5.4.3 → 5.5.1

package/dist/cjs/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":["PopoutRoot","PopoutRootPopout","children","isDesktop","useAdaptivityWithJSMediaQueries","div","className","classNames","PopoutRootModal","popout","modal","getRootRef","restProps","document","useDOM","React","useEffect","blurActiveElement","ref","AppRootPortal"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;;2DA1CU;oBACI;+CACqB;mBACN;6BAEZ;AAO9B,IAAMC,mBAAmB,gBAAyC;QAAtCC,iBAAAA;IAC1B,IAAM,AAAEC,YAAcC,IAAAA,gEAA+B,IAA7CD;IAER,qBACE,qBAACE;QACCC,WAAWC,IAAAA,gBAAU,4BAEnBJ;OAGDD;AAGP;AAMA,IAAMM,kBAAkB,gBAAwC;QAArCN,iBAAAA;IACzB,qBAAO,qBAACG;QAAIC,SAAS;OAAgCJ;AACvD;AASO,IAAMF,aAAa,iBAOH;QANrBS,gBAAAA,QACAC,eAAAA,OACAR,kBAAAA,UACAS,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAR;QACAS;QACAL;;IAGA,IAAM,AAAEO,WAAaC,IAAAA,WAAM,IAAnBD;IAERE,OAAMC,SAAS,CAAC,WAAM;QACpBP,UAAUQ,IAAAA,sBAAiB,EAACJ;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,qBAACJ,4CAAQO;QAAWN,WAAWC,IAAAA,gBAAU,oBAAuBD;QAAYY,KAAKP;QAC9ET,wBACD,qBAACiB,4BAAa,QACX,CAAC,CAACV,wBAAU,qBAACR,wBAAkBQ,SAC/B,CAAC,CAACC,uBAAS,qBAACF,uBAAiBE;AAItC"}
+{"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":["PopoutRoot","PopoutRootPopout","children","isDesktop","useAdaptivityWithJSMediaQueries","div","className","classNames","PopoutRootModal","popout","modal","getRootRef","restProps","document","useDOM","React","useEffect","blurActiveElement","ref","AppRootPortal"],"mappings":";;;;+BA0CaA;;;eAAAA;;;;;;;+DA1CU;oBACI;+CACqB;mBACN;6BAEZ;AAO9B,IAAMC,mBAAmB;QAAGC,iBAAAA;IAC1B,IAAM,AAAEC,YAAcC,IAAAA,oEAAdD;IAER,qBACE,qBAACE;QACCC,WAAWC,IAAAA,4CAETJ;OAGDD;AAGP;AAMA,IAAMM,kBAAkB;QAAGN,iBAAAA;IACzB,qBAAO,qBAACG;QAAIC,SAAS;OAAgCJ;AACvD;AASO,IAAMF,aAAa;QACxBS,gBAAAA,QACAC,eAAAA,OACAR,kBAAAA,UACAS,oBAAAA,YACAL,mBAAAA,WACGM;QALHH;QACAC;QACAR;QACAS;QACAL;;IAGA,IAAM,AAAEO,WAAaC,IAAAA,eAAbD;IAERE,OAAMC,UAAU;QACdP,UAAUQ,IAAAA,wBAAkBJ;IAC9B,GAAG;QAACA;QAAUJ;KAAO;IAErB,qBACE,qBAACJ,mDAAQO;QAAWN,WAAWC,IAAAA,oCAAiCD;QAAYY,KAAKP;QAC9ET,wBACD,qBAACiB,oCACE,CAAC,CAACV,wBAAU,qBAACR,wBAAkBQ,SAC/B,CAAC,CAACC,uBAAS,qBAACF,uBAAiBE;AAItC"}

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

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "PopoutWrapper", {
         return PopoutWrapper;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePlatform = require("../../hooks/usePlatform");
@@ -21,7 +21,7 @@ var _useTimeout = require("../../hooks/useTimeout");
 var _dom = require("../../lib/dom");
 var _platform = require("../../lib/platform");
 var PopoutWrapper = function(_param) {
-    var _param_alignY = _param.alignY, alignY = _param_alignY === void 0 ? "center" : _param_alignY, _param_alignX = _param.alignX, alignX = _param_alignX === void 0 ? "center" : _param_alignX, _param_closing = _param.closing, closing = _param_closing === void 0 ? false : _param_closing, _param_hasMask = _param.hasMask, hasMask = _param_hasMask === void 0 ? true : _param_hasMask, _param_fixed = _param.fixed, fixed = _param_fixed === void 0 ? true : _param_fixed, children = _param.children, onClick = _param.onClick, className = _param.className, restProps = _objectWithoutProperties(_param, [
+    var _param_alignY = _param.alignY, alignY = _param_alignY === void 0 ? "center" : _param_alignY, _param_alignX = _param.alignX, alignX = _param_alignX === void 0 ? "center" : _param_alignX, _param_closing = _param.closing, closing = _param_closing === void 0 ? false : _param_closing, _param_hasMask = _param.hasMask, hasMask = _param_hasMask === void 0 ? true : _param_hasMask, _param_fixed = _param.fixed, fixed = _param_fixed === void 0 ? true : _param_fixed, children = _param.children, onClick = _param.onClick, className = _param.className, restProps = _object_without_properties._(_param, [
         "alignY",
         "alignX",
         "closing",
@@ -32,7 +32,7 @@ var PopoutWrapper = function(_param) {
         "className"
     ]);
     var platform = (0, _usePlatform.usePlatform)();
-    var _React_useState = _slicedToArray(_react.useState(!hasMask), 2), opened = _React_useState[0], setOpened = _React_useState[1];
+    var _React_useState = _sliced_to_array._(_react.useState(!hasMask), 2), opened = _React_useState[0], setOpened = _React_useState[1];
     var elRef = _react.useRef(null);
     var onFadeInEnd = function(e) {
         if (!e || e.animationName === "vkui-animation-full-fade-in") {
@@ -52,7 +52,7 @@ var PopoutWrapper = function(_param) {
     }, {
         passive: false
     });
-    return /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiPopoutWrapper", {
             center: "vkuiPopoutWrapper--alignY-center",
             top: "vkuiPopoutWrapper--alignY-top",

package/dist/cjs/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":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","window","useDOM","useGlobalEventListener","preventDefault","passive","div","classNames","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;2DApBU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;AAclB,IAAMA,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,WAAWC,IAAAA,wBAAW;IAC5B,IAA4BC,iCAAAA,OAAMC,QAAQ,CAAC,CAACT,cAArCU,SAAqBF,oBAAbG,YAAaH;IAC5B,IAAMI,QAAQJ,OAAMK,MAAM,CAAiB,IAAI;IAE/C,IAAMC,cAAc,SAACC,GAA6B;QAChD,IAAI,CAACA,KAAKA,EAAEC,aAAa,oCAA4C;YACnEL,UAAU,IAAI;QAChB,CAAC;IACH;IACA,IAAMM,0BAA0BC,IAAAA,sBAAU,EAACJ,aAAaR,aAAaa,kBAAQ,CAACC,GAAG,GAAG,MAAM,GAAG;IAC7FZ,OAAMa,SAAS,CAAC,WAAM;QACpB,CAACX,UAAUO,wBAAwBK,GAAG;IACxC,GAAG;QAACL;QAAyBP;KAAO;IAEpC,IAAM,AAAEa,SAAWC,IAAAA,WAAM,IAAjBD;IACRE,IAAAA,8CAAsB,EAACF,QAAQ,aAAa,SAACR;eAAMA,EAAEW,cAAc;OAAI;QACrEC,SAAS,KAAK;IAChB;IAEA,qBACE,qBAACC,4CACKvB;QACJD,WAAWyB,IAAAA,gBAAU,uBAEnB;YACEC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAACnC,OAAO,EACT;YACEiC,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAACpC,OAAO,EACTC,yCACAW,uCACAT,qCACAD,wCACAI;QAEF+B,gBAAgBzB,SAAS0B,YAAYtB,WAAW;QAChDuB,KAAKzB;sBAEL,qBAACgB;QAAIxB,SAAS;qBACZ,qBAACwB;QAAIxB,SAAS;QAAoCD,SAASA;sBAC3D,qBAACyB;QAAIxB,SAAS;OAAqCF;AAI3D"}
+{"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":["PopoutWrapper","alignY","alignX","closing","hasMask","fixed","children","onClick","className","restProps","platform","usePlatform","React","useState","opened","setOpened","elRef","useRef","onFadeInEnd","e","animationName","animationFinishFallback","useTimeout","Platform","IOS","useEffect","set","window","useDOM","useGlobalEventListener","preventDefault","passive","div","classNames","center","top","bottom","left","right","onAnimationEnd","undefined","ref"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;;;;+DApBU;oBACI;sCACY;2BACX;0BACD;mBACJ;wBACE;AAclB,IAAMA,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,WAAWC,IAAAA;IACjB,IAA4BC,qCAAAA,OAAMC,SAAS,CAACT,cAArCU,SAAqBF,oBAAbG,YAAaH;IAC5B,IAAMI,QAAQJ,OAAMK,OAAuB;IAE3C,IAAMC,cAAc,SAACC;QACnB,IAAI,CAACA,KAAKA,EAAEC,iDAAyD;YACnEL,UAAU;QACZ;IACF;IACA,IAAMM,0BAA0BC,IAAAA,wBAAWJ,aAAaR,aAAaa,mBAASC,MAAM,MAAM;IAC1FZ,OAAMa,UAAU;QACd,CAACX,UAAUO,wBAAwBK;IACrC,GAAG;QAACL;QAAyBP;KAAO;IAEpC,IAAM,AAAEa,SAAWC,IAAAA,eAAXD;IACRE,IAAAA,gDAAuBF,QAAQ,aAAa,SAACR;eAAMA,EAAEW;OAAkB;QACrEC,SAAS;IACX;IAEA,qBACE,qBAACC,mDACKvB;QACJD,WAAWyB,IAAAA,uCAET;YACEC,MAAM;YACNC,GAAG;YACHC,MAAM;QACR,CAAC,CAACnC,OAAO,EACT;YACEiC,MAAM;YACNG,IAAI;YACJC,KAAK;QACP,CAAC,CAACpC,OAAO,EACTC,yCACAW,uCACAT,qCACAD,wCACAI;QAEF+B,gBAAgBzB,SAAS0B,YAAYtB;QACrCuB,KAAKzB;sBAEL,qBAACgB;QAAIxB,SAAS;qBACZ,qBAACwB;QAAIxB,SAAS;QAAoCD,SAASA;sBAC3D,qBAACyB;QAAIxB,SAAS;OAAqCF;AAI3D"}

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

@@ -8,12 +8,12 @@ Object.defineProperty(exports, "Popover", {
         return Popover;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _slicedToArray = require("@swc/helpers/lib/_sliced_to_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useEventListener = require("../../hooks/useEventListener");
 var _useExternRef = require("../../hooks/useExternRef");
@@ -21,10 +21,10 @@ var _useGlobalEventListener = require("../../hooks/useGlobalEventListener");
 var _usePatchChildrenRef = require("../../hooks/usePatchChildrenRef");
 var _useTimeout = require("../../hooks/useTimeout");
 var _dom = require("../../lib/dom");
-var _focusTrap = require("../FocusTrap/FocusTrap");
-var _popper = require("../Popper/Popper");
+var _FocusTrap = require("../FocusTrap/FocusTrap");
+var _Popper = require("../Popper/Popper");
 var Popover = function(_param) {
-    var _param_action = _param.action, action = _param_action === void 0 ? "click" : _param_action, shownProp = _param.shown, _param_showDelay = _param.showDelay, showDelay = _param_showDelay === void 0 ? 150 : _param_showDelay, _param_hideDelay = _param.hideDelay, hideDelay = _param_hideDelay === void 0 ? 150 : _param_hideDelay, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 8 : _param_offsetDistance, content = _param.content, children = _param.children, styleProp = _param.style, className = _param.className, getRef = _param.getRef, onShownChange = _param.onShownChange, _param_restoreFocus = _param.restoreFocus, restoreFocus = _param_restoreFocus === void 0 ? true : _param_restoreFocus, restProps = _objectWithoutProperties(_param, [
+    var _param_action = _param.action, action = _param_action === void 0 ? "click" : _param_action, shownProp = _param.shown, _param_showDelay = _param.showDelay, showDelay = _param_showDelay === void 0 ? 150 : _param_showDelay, _param_hideDelay = _param.hideDelay, hideDelay = _param_hideDelay === void 0 ? 150 : _param_hideDelay, _param_offsetDistance = _param.offsetDistance, offsetDistance = _param_offsetDistance === void 0 ? 8 : _param_offsetDistance, content = _param.content, children = _param.children, styleProp = _param.style, className = _param.className, getRef = _param.getRef, onShownChange = _param.onShownChange, _param_restoreFocus = _param.restoreFocus, restoreFocus = _param_restoreFocus === void 0 ? true : _param_restoreFocus, restProps = _object_without_properties._(_param, [
         "action",
         "shown",
         "showDelay",
@@ -41,11 +41,11 @@ var Popover = function(_param) {
     var document = (0, _dom.useDOM)().document;
     var hoverable = action === "hover";
     var hovered = _react.useRef(false);
-    var _React_useState = _slicedToArray(_react.useState(shownProp || false), 2), computedShown = _React_useState[0], setComputedShown = _React_useState[1];
-    var _React_useState1 = _slicedToArray(_react.useState(null), 2), dropdownNode = _React_useState1[0], setPopperNode = _React_useState1[1];
+    var _React_useState = _sliced_to_array._(_react.useState(shownProp || false), 2), computedShown = _React_useState[0], setComputedShown = _React_useState[1];
+    var _React_useState1 = _sliced_to_array._(_react.useState(null), 2), dropdownNode = _React_useState1[0], setPopperNode = _React_useState1[1];
     var shown = typeof shownProp === "boolean" ? shownProp : computedShown;
     var patchedPopperRef = (0, _useExternRef.useExternRef)(setPopperNode, getRef);
-    var _usePatchChildrenRef1 = _slicedToArray((0, _usePatchChildrenRef.usePatchChildrenRef)(children), 2), childRef = _usePatchChildrenRef1[0], child = _usePatchChildrenRef1[1];
+    var _usePatchChildrenRef1 = _sliced_to_array._((0, _usePatchChildrenRef.usePatchChildrenRef)(children), 2), childRef = _usePatchChildrenRef1[0], child = _usePatchChildrenRef1[1];
     var setShown = function(value) {
         if (typeof shownProp !== "boolean") {
             setComputedShown(value);
@@ -117,19 +117,19 @@ var Popover = function(_param) {
         targetEnterListener,
         targetLeaveListener
     ]);
-    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, child, shown && /*#__PURE__*/ _react.createElement(_popper.Popper, _objectSpreadProps(_objectSpread({}, restProps), {
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, child, shown && /*#__PURE__*/ _react.createElement(_Popper.Popper, _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiPopover", className),
         targetRef: childRef,
         getRef: patchedPopperRef,
         offsetDistance: offsetDistance,
         style: // Reason: Typescript ругается на CSS Custom Properties в объекте
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        _objectSpreadProps(_objectSpread({}, styleProp), {
+        _object_spread_props._(_object_spread._({}, styleProp), {
             "--vkui_internal--popover_safe_zone_padding": "".concat(offsetDistance, "px")
         }),
         renderContent: function(param) {
             var wrapperClassName = param.className;
-            return /*#__PURE__*/ _react.createElement(_focusTrap.FocusTrap, {
+            return /*#__PURE__*/ _react.createElement(_FocusTrap.FocusTrap, {
                 className: wrapperClassName,
                 onClose: handleContentKeyDownEscape,
                 restoreFocus: restoreFocus

package/dist/cjs/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":["Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","useDOM","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","Popper","classNames","targetRef","renderContent","wrapperClassName","FocusTrap","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":["Popover","action","shown","shownProp","showDelay","hideDelay","offsetDistance","content","children","style","styleProp","className","getRef","onShownChange","restoreFocus","restProps","document","useDOM","hoverable","hovered","React","useRef","useState","computedShown","setComputedShown","dropdownNode","setPopperNode","patchedPopperRef","useExternRef","usePatchChildrenRef","childRef","child","setShown","value","showTimeout","useTimeout","hideTimeout","handleTargetEnter","current","clear","set","handleTargetClick","handleTargetLeave","handleContentKeyDownEscape","handleOutsideClick","e","contains","target","useGlobalEventListener","capture","passive","targetEnterListener","useEventListener","targetClickEvent","targetLeaveListener","useEffect","add","remove","Fragment","Popper","classNames","targetRef","renderContent","wrapperClassName","FocusTrap","onClose","onMouseOver","undefined","onMouseOut"],"mappings":"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"}

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

@@ -8,43 +8,49 @@ Object.defineProperty(exports, "Popper", {
         return Popper;
     }
 });
-var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
-var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
-var _objectSpreadProps = require("@swc/helpers/lib/_object_spread_props.js").default;
-var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _toConsumableArray = require("@swc/helpers/lib/_to_consumable_array.js").default;
-var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
+var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
+var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
+var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _useExternRef = require("../../hooks/useExternRef");
 var _floating = require("../../lib/floating");
-var _appRootPortal = require("../AppRoot/AppRootPortal");
-var _popperArrow = require("../PopperArrow/PopperArrow");
+var _AppRootPortal = require("../AppRoot/AppRootPortal");
+var _DefaultIcon = require("../PopperArrow/DefaultIcon");
+var _PopperArrow = require("../PopperArrow/PopperArrow");
 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 = _objectWithoutProperties(_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 ? _DefaultIcon.DEFAULT_ARROW_HEIGHT : _param_arrowHeight, _param_arrowPadding = _param.arrowPadding, arrowPadding = _param_arrowPadding === void 0 ? _DefaultIcon.DEFAULT_ARROW_PADDING : _param_arrowPadding, arrowClassName = _param.arrowClassName, _param_ArrowIcon = _param.ArrowIcon, ArrowIcon = _param_ArrowIcon === void 0 ? _DefaultIcon.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 = (0, _floating.checkIsNotAutoPlacement)(placementProp);
     var memoizedMiddlewares = _react.useMemo(function() {
         var middlewares = [
             (0, _floating.offsetMiddleware)({
                 crossAxis: offsetSkidding,
-                mainAxis: arrow ? offsetDistance + _popperArrow.ARROW_HEIGHT : offsetDistance
+                mainAxis: arrow ? offsetDistance + arrowHeight : offsetDistance
             })
         ];
         // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
@@ -68,24 +74,27 @@ var Popper = function(_param) {
         }
         if (customMiddlewares) {
             var _middlewares;
-            (_middlewares = middlewares).push.apply(_middlewares, _toConsumableArray(customMiddlewares));
+            (_middlewares = middlewares).push.apply(_middlewares, _to_consumable_array._(customMiddlewares));
         }
         // см. https://floating-ui.com/docs/arrow#order
         if (arrow) {
             middlewares.push((0, _floating.arrowMiddleware)({
                 element: arrowRef,
-                padding: _popperArrow.ARROW_PADDING
+                padding: arrowPadding
             }));
         }
         return middlewares;
     }, [
-        arrow,
-        sameWidth,
         offsetSkidding,
+        arrowRef,
+        arrow,
+        arrowHeight,
+        arrowPadding,
         offsetDistance,
+        isNotAutoPlacement,
+        sameWidth,
         customMiddlewares,
-        placementProp,
-        isNotAutoPlacement
+        placementProp
     ]);
     var _useFloating = (0, _floating.useFloating)({
         placement: isNotAutoPlacement ? placementProp : undefined,
@@ -94,7 +103,7 @@ var Popper = function(_param) {
             for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
                 args[_key] = arguments[_key];
             }
-            return _floating.autoUpdateFloatingElement.apply(void 0, _toConsumableArray(args).concat([
+            return _floating.autoUpdateFloatingElement.apply(void 0, _to_consumable_array._(args).concat([
                 {
                     elementResize: autoUpdateOnTargetResize
                 }
@@ -118,20 +127,22 @@ var Popper = function(_param) {
         onPlacementChange,
         resolvedPlacement
     ]);
-    var dropdown = /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, restProps), {
+    var dropdown = /*#__PURE__*/ _react.createElement("div", _object_spread_props._(_object_spread._({}, restProps), {
         className: (0, _vkjs.classNames)("vkuiPopper", className),
         ref: handleRootRef,
-        style: _objectSpread({}, styleProp, (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
-    }), arrow && /*#__PURE__*/ _react.createElement(_popperArrow.PopperArrow, {
+        style: _object_spread._({}, styleProp, (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
+    }), arrow && /*#__PURE__*/ _react.createElement(_PopperArrow.PopperArrow, {
         coords: arrowCoords,
         placement: resolvedPlacement,
         arrowClassName: arrowClassName,
-        getRootRef: arrowRef
+        getRootRef: setArrowRef,
+        Icon: ArrowIcon
     }), renderContent ? renderContent({
         className: ""
     }) : children);
-    return /*#__PURE__*/ _react.createElement(_appRootPortal.AppRootPortal, {
-        forcePortal: forcePortal
+    return /*#__PURE__*/ _react.createElement(_AppRootPortal.AppRootPortal, {
+        forcePortal: forcePortal,
+        portalRoot: portalRoot
     }, dropdown);
 };
 

package/dist/cjs/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":["Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","arrowRef","React","useRef","isNotAutoPlacement","checkIsNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","offsetMiddleware","crossAxis","mainAxis","ARROW_HEIGHT","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","sizeMiddleware","apply","rects","elements","Object","assign","floating","width","reference","arrowMiddleware","element","padding","ARROW_PADDING","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","div","classNames","ref","convertFloatingDataToReactCSSProperties","PopperArrow","coords","getRootRef","AppRootPortal"],"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":["Popper","targetRef","children","getRef","placementProp","placement","onPlacementChange","arrow","arrowHeight","DEFAULT_ARROW_HEIGHT","arrowPadding","DEFAULT_ARROW_PADDING","arrowClassName","ArrowIcon","DefaultIcon","sameWidth","offsetDistance","offsetSkidding","forcePortal","portalRoot","autoUpdateOnTargetResize","style","styleProp","customMiddlewares","renderContent","className","restProps","React","useState","arrowRef","setArrowRef","isNotAutoPlacement","checkIsNotAutoPlacement","memoizedMiddlewares","useMemo","middlewares","offsetMiddleware","crossAxis","mainAxis","push","flipMiddleware","autoPlacementMiddleware","alignment","getAutoPlacementAlign","shiftMiddleware","sizeMiddleware","apply","rects","elements","Object","assign","floating","width","reference","arrowMiddleware","element","padding","useFloating","undefined","middleware","whileElementsMounted","args","autoUpdateFloatingElement","elementResize","x","floatingDataX","y","floatingDataY","strategy","floatingPositionStrategy","resolvedPlacement","refs","middlewareData","arrowCoords","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","div","classNames","ref","convertFloatingDataToReactCSSProperties","PopperArrow","coords","getRootRef","Icon","AppRootPortal"],"mappings":"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"}

package/dist/cjs/components/PopperArrow/DefaultIcon.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+/**
+ * Примечание 1.
+ *
+ * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа
+ * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при
+ * изменении масштаба страницы.
+ *
+ * Чтобы исправление сработало нужно:
+ * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.
+ * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.
+ *
+ * https://github.com/VKCOM/VKUI/issues/2123
+ */
+export declare const DEFAULT_ARROW_WIDTH = 20;
+export declare const DEFAULT_ARROW_HEIGHT = 8;
+export declare const DEFAULT_ARROW_PADDING = 10;
+export declare const DefaultIcon: (props: React.SVGAttributes<SVGSVGElement>) => React.JSX.Element;

package/dist/cjs/components/PopperArrow/DefaultIcon.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEFAULT_ARROW_WIDTH: function() {
+        return DEFAULT_ARROW_WIDTH;
+    },
+    DEFAULT_ARROW_HEIGHT: function() {
+        return DEFAULT_ARROW_HEIGHT;
+    },
+    DEFAULT_ARROW_PADDING: function() {
+        return DEFAULT_ARROW_PADDING;
+    },
+    DefaultIcon: function() {
+        return DefaultIcon;
+    }
+});
+var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+var _object_spread = require("@swc/helpers/_/_object_spread");
+var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+var DEFAULT_ARROW_WIDTH = 20;
+var DEFAULT_ARROW_HEIGHT = 8;
+var DEFAULT_ARROW_PADDING = 10;
+var PLATFORM_HEIGHT = 1;
+var ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
+var DefaultIcon = function(props) {
+    return /*#__PURE__*/ _react.createElement("svg", _object_spread._({
+        width: DEFAULT_ARROW_WIDTH,
+        height: ARROW_HEIGHT_WITH_WHITE_SPACE,
+        viewBox: "0 0 ".concat(DEFAULT_ARROW_WIDTH, " ").concat(ARROW_HEIGHT_WITH_WHITE_SPACE),
+        xmlns: "http://www.w3.org/2000/svg"
+    }, props), /*#__PURE__*/ _react.createElement("path", {
+        d: "M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z",
+        fill: "currentColor"
+    }));
+};
+
+//# sourceMappingURL=DefaultIcon.js.map

package/dist/cjs/components/PopperArrow/DefaultIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/PopperArrow/DefaultIcon.tsx"],"sourcesContent":["import * as React from 'react';\n\n/**\n * Примечание 1.\n *\n * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа\n * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при\n * изменении масштаба страницы.\n *\n * Чтобы исправление сработало нужно:\n * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.\n * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.\n *\n * https://github.com/VKCOM/VKUI/issues/2123\n */\n\nexport const DEFAULT_ARROW_WIDTH = 20;\nexport const DEFAULT_ARROW_HEIGHT = 8;\nexport const DEFAULT_ARROW_PADDING = 10;\n\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\nexport const DefaultIcon = (props: React.SVGAttributes<SVGSVGElement>) => {\n  return (\n    <svg\n      width={DEFAULT_ARROW_WIDTH}\n      height={ARROW_HEIGHT_WITH_WHITE_SPACE}\n      viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      {...props}\n    >\n      <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n    </svg>\n  );\n};\n"],"names":["DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","DEFAULT_ARROW_PADDING","DefaultIcon","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","props","svg","width","height","viewBox","xmlns","path","d","fill"],"mappings":";;;;;;;;;;;IAgBaA,mBAAmB;eAAnBA;;IACAC,oBAAoB;eAApBA;;IACAC,qBAAqB;eAArBA;;IAKAC,WAAW;eAAXA;;;;;+DAvBU;AAgBhB,IAAMH,sBAAsB;AAC5B,IAAMC,uBAAuB;AAC7B,IAAMC,wBAAwB;AAErC,IAAME,kBAAkB;AACxB,IAAMC,gCAAgCJ,uBAAuBG;AAEtD,IAAMD,cAAc,SAACG;IAC1B,qBACE,qBAACC;QACCC,OAAOR;QACPS,QAAQJ;QACRK,SAAS,AAAC,OAA6BL,OAAvBL,qBAAoB,KAAiC,OAA9BK;QACvCM,OAAM;OACFL,sBAEJ,qBAACM;QAAKC,GAAE;QAA6CC,MAAK;;AAGhE"}