@vkontakte/vkui 5.2.3 → 5.3.0

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

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

@@ -1,136 +1,138 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "Popper", {
+    enumerable: true,
+    get: function() {
+        return Popper;
+    }
 });
-exports.Popper = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+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 _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 _excluded = ["targetRef", "children", "getRef", "placement", "onPlacementChange", "arrow", "arrowClassName", "sameWidth", "offsetDistance", "offsetSkidding", "forcePortal", "autoUpdateOnTargetResize", "style", "customMiddlewares", "renderContent", "className"];
-/**
- * @see https://vkcom.github.io/VKUI/#/Popper
- */
-var Popper = function Popper(_ref) {
-  var targetRef = _ref.targetRef,
-    children = _ref.children,
-    getRef = _ref.getRef,
-    _ref$placement = _ref.placement,
-    placementProp = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
-    onPlacementChange = _ref.onPlacementChange,
-    arrow = _ref.arrow,
-    arrowClassName = _ref.arrowClassName,
-    sameWidth = _ref.sameWidth,
-    _ref$offsetDistance = _ref.offsetDistance,
-    offsetDistance = _ref$offsetDistance === void 0 ? 8 : _ref$offsetDistance,
-    _ref$offsetSkidding = _ref.offsetSkidding,
-    offsetSkidding = _ref$offsetSkidding === void 0 ? 0 : _ref$offsetSkidding,
-    _ref$forcePortal = _ref.forcePortal,
-    forcePortal = _ref$forcePortal === void 0 ? true : _ref$forcePortal,
-    _ref$autoUpdateOnTarg = _ref.autoUpdateOnTargetResize,
-    autoUpdateOnTargetResize = _ref$autoUpdateOnTarg === void 0 ? false : _ref$autoUpdateOnTarg,
-    styleProp = _ref.style,
-    customMiddlewares = _ref.customMiddlewares,
-    renderContent = _ref.renderContent,
-    className = _ref.className,
-    restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var arrowRef = React.useRef(null);
-  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
-    })];
-
-    // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
-    if (isNotAutoPlacement) {
-      middlewares.push((0, _floating.flipMiddleware)());
-    } else {
-      middlewares.push((0, _floating.autoPlacementMiddleware)({
-        alignment: (0, _floating.getAutoPlacementAlign)(placementProp)
-      }));
-    }
-    middlewares.push((0, _floating.shiftMiddleware)());
-    if (sameWidth) {
-      middlewares.push((0, _floating.sizeMiddleware)({
-        apply: function apply(_ref2) {
-          var rects = _ref2.rects,
-            elements = _ref2.elements;
-          Object.assign(elements.floating.style, {
-            width: "".concat(rects.reference.width, "px")
-          });
+var _appRootPortal = require("../AppRoot/AppRootPortal");
+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, [
+        "targetRef",
+        "children",
+        "getRef",
+        "placement",
+        "onPlacementChange",
+        "arrow",
+        "arrowClassName",
+        "sameWidth",
+        "offsetDistance",
+        "offsetSkidding",
+        "forcePortal",
+        "autoUpdateOnTargetResize",
+        "style",
+        "customMiddlewares",
+        "renderContent",
+        "className"
+    ]);
+    var arrowRef = _react.useRef(null);
+    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
+            })
+        ];
+        // см. https://floating-ui.com/docs/flip#conflict-with-autoplacement
+        if (isNotAutoPlacement) {
+            middlewares.push((0, _floating.flipMiddleware)());
+        } else {
+            middlewares.push((0, _floating.autoPlacementMiddleware)({
+                alignment: (0, _floating.getAutoPlacementAlign)(placementProp)
+            }));
         }
-      }));
-    }
-    if (customMiddlewares) {
-      middlewares.push.apply(middlewares, (0, _toConsumableArray2.default)(customMiddlewares));
-    }
-
-    // см. https://floating-ui.com/docs/arrow#order
-    if (arrow) {
-      middlewares.push((0, _floating.arrowMiddleware)({
-        element: arrowRef,
-        padding: _PopperArrow.ARROW_PADDING
-      }));
-    }
-    return middlewares;
-  }, [arrow, sameWidth, offsetSkidding, offsetDistance, customMiddlewares, placementProp, isNotAutoPlacement]);
-  var _useFloating = (0, _floating.useFloating)({
-      placement: isNotAutoPlacement ? placementProp : undefined,
-      middleware: memoizedMiddlewares,
-      whileElementsMounted: function whileElementsMounted() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
+        middlewares.push((0, _floating.shiftMiddleware)());
+        if (sameWidth) {
+            middlewares.push((0, _floating.sizeMiddleware)({
+                apply: function apply(param) {
+                    var rects = param.rects, elements = param.elements;
+                    Object.assign(elements.floating.style, {
+                        width: "".concat(rects.reference.width, "px")
+                    });
+                }
+            }));
         }
-        return _floating.autoUpdateFloatingElement.apply(void 0, args.concat([{
-          elementResize: autoUpdateOnTargetResize
-        }]));
-      }
-    }),
-    floatingDataX = _useFloating.x,
-    floatingDataY = _useFloating.y,
-    floatingPositionStrategy = _useFloating.strategy,
-    resolvedPlacement = _useFloating.placement,
-    refs = _useFloating.refs,
-    arrowCoords = _useFloating.middlewareData.arrow;
-  var handleRootRef = (0, _useExternRef.useExternRef)(refs.setFloating, getRef);
-  React.useEffect(function () {
-    refs.setReference(targetRef.current);
-  }, [refs, targetRef]);
-  React.useEffect(function () {
-    if (resolvedPlacement && onPlacementChange) {
-      onPlacementChange({
-        placement: resolvedPlacement
-      });
-    }
-  }, [onPlacementChange, resolvedPlacement]);
-  var dropdown = /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, restProps, {
-    className: (0, _vkjs.classNames)("vkuiPopper", className),
-    ref: handleRootRef,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, styleProp), (0, _floating.convertFloatingDataToReactCSSProperties)(floatingPositionStrategy, floatingDataX, floatingDataY, sameWidth ? null : undefined))
-  }), arrow && /*#__PURE__*/React.createElement(_PopperArrow.PopperArrow, {
-    coords: arrowCoords,
-    placement: resolvedPlacement,
-    arrowClassName: arrowClassName,
-    getRootRef: arrowRef
-  }), renderContent ? renderContent({
-    className: "vkuiPopper__content"
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "vkuiPopper__content"
-  }, children));
-  return /*#__PURE__*/React.createElement(_AppRootPortal.AppRootPortal, {
-    forcePortal: forcePortal,
-    className: "vkuiPopperPortal"
-  }, dropdown);
+        if (customMiddlewares) {
+            var _middlewares;
+            (_middlewares = middlewares).push.apply(_middlewares, _toConsumableArray(customMiddlewares));
+        }
+        // см. https://floating-ui.com/docs/arrow#order
+        if (arrow) {
+            middlewares.push((0, _floating.arrowMiddleware)({
+                element: arrowRef,
+                padding: _popperArrow.ARROW_PADDING
+            }));
+        }
+        return middlewares;
+    }, [
+        arrow,
+        sameWidth,
+        offsetSkidding,
+        offsetDistance,
+        customMiddlewares,
+        placementProp,
+        isNotAutoPlacement
+    ]);
+    var _useFloating = (0, _floating.useFloating)({
+        placement: isNotAutoPlacement ? placementProp : undefined,
+        middleware: memoizedMiddlewares,
+        whileElementsMounted: function whileElementsMounted() {
+            for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                args[_key] = arguments[_key];
+            }
+            return _floating.autoUpdateFloatingElement.apply(void 0, _toConsumableArray(args).concat([
+                {
+                    elementResize: autoUpdateOnTargetResize
+                }
+            ]));
+        }
+    }), floatingDataX = _useFloating.x, floatingDataY = _useFloating.y, floatingPositionStrategy = _useFloating.strategy, resolvedPlacement = _useFloating.placement, refs = _useFloating.refs, _useFloating_middlewareData = _useFloating.middlewareData, arrowCoords = _useFloating_middlewareData.arrow;
+    var handleRootRef = (0, _useExternRef.useExternRef)(refs.setFloating, getRef);
+    _react.useEffect(function() {
+        refs.setReference(targetRef.current);
+    }, [
+        refs,
+        targetRef
+    ]);
+    _react.useEffect(function() {
+        if (resolvedPlacement && onPlacementChange) {
+            onPlacementChange({
+                placement: resolvedPlacement
+            });
+        }
+    }, [
+        onPlacementChange,
+        resolvedPlacement
+    ]);
+    var dropdown = /*#__PURE__*/ _react.createElement("div", _objectSpreadProps(_objectSpread({}, 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, {
+        coords: arrowCoords,
+        placement: resolvedPlacement,
+        arrowClassName: arrowClassName,
+        getRootRef: arrowRef
+    }), renderContent ? renderContent({
+        className: ""
+    }) : children);
+    return /*#__PURE__*/ _react.createElement(_appRootPortal.AppRootPortal, {
+        forcePortal: forcePortal
+    }, dropdown);
 };
-exports.Popper = Popper;
+
 //# sourceMappingURL=Popper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Popper.js","names":["Popper","targetRef","children","getRef","placement","placementProp","onPlacementChange","arrow","arrowClassName","sameWidth","offsetDistance","offsetSkidding","forcePortal","autoUpdateOnTargetResize","styleProp","style","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","floatingDataX","x","floatingDataY","y","floatingPositionStrategy","strategy","resolvedPlacement","refs","arrowCoords","middlewareData","handleRootRef","useExternRef","setFloating","useEffect","setReference","current","dropdown","classNames","convertFloatingDataToReactCSSProperties"],"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 ? (\n        renderContent({ className: styles['Popper__content'] })\n      ) : (\n        <div className={styles['Popper__content']}>{children}</div>\n      )}\n    </div>\n  );\n\n  return (\n    <AppRootPortal forcePortal={forcePortal} className={styles['PopperPortal']}>\n      {dropdown}\n    </AppRootPortal>\n  );\n};\n"],"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 { 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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"}

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

@@ -4,7 +4,7 @@ import type { HasRootRef } from '../../types';
 export declare const ARROW_PADDING = 10;
 export declare const ARROW_WIDTH = 20;
 export declare const ARROW_HEIGHT = 8;
-declare type Coords = {
+type Coords = {
     x?: number;
     y?: number;
 };

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

@@ -1,68 +1,93 @@
 "use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ARROW_PADDING: function() {
+        return ARROW_PADDING;
+    },
+    ARROW_WIDTH: function() {
+        return ARROW_WIDTH;
+    },
+    ARROW_HEIGHT: function() {
+        return ARROW_HEIGHT;
+    },
+    PopperArrow: function() {
+        return PopperArrow;
+    }
 });
-exports.PopperArrow = exports.ARROW_WIDTH = exports.ARROW_PADDING = exports.ARROW_HEIGHT = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var ARROW_PADDING = 10;
-exports.ARROW_PADDING = ARROW_PADDING;
 var ARROW_WIDTH = 20;
-exports.ARROW_WIDTH = ARROW_WIDTH;
 var ARROW_HEIGHT = 8;
-exports.ARROW_HEIGHT = ARROW_HEIGHT;
 function getPositionsStylesByCoords(placement) {
-  var coords = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    x: 0,
-    y: 0
-  };
-  if (placement.startsWith('top')) {
-    return {
-      top: '100%',
-      left: coords.x
-    };
-  } else if (placement.startsWith('right')) {
-    return {
-      top: coords.y,
-      right: 'calc(100% - 6px)'
+    var coords = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {
+        x: 0,
+        y: 0
     };
-  } else if (placement.startsWith('bottom')) {
-    return {
-      bottom: '100%',
-      left: coords.x
-    };
-  } else {
-    return {
-      top: coords.y,
-      left: 'calc(100% - 6px)'
-    };
-  }
+    if (placement.startsWith("top")) {
+        return {
+            top: "100%",
+            left: coords.x
+        };
+    } else if (placement.startsWith("right")) {
+        return {
+            top: coords.y,
+            right: "calc(100% - 6px)"
+        };
+    } else if (placement.startsWith("bottom")) {
+        return {
+            bottom: "100%",
+            left: coords.x
+        };
+    } else {
+        return {
+            top: coords.y,
+            left: "calc(100% - 6px)"
+        };
+    }
 }
-var PopperArrow = function PopperArrow(_ref) {
-  var coords = _ref.coords,
-    arrowClassName = _ref.arrowClassName,
-    placement = _ref.placement,
-    getRootRef = _ref.getRootRef;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: getRootRef,
-    style: getPositionsStylesByCoords(placement, coords),
-    className: "vkuiPopperArrow",
-    "data-placement": placement
-  }, /*#__PURE__*/React.createElement("svg", {
-    className: (0, _vkjs.classNames)("vkuiPopperArrow__in", arrowClassName),
-    width: "20",
-    height: "8",
-    viewBox: "0 0 20 8",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "evenodd",
-    clipRule: "evenodd",
-    d: "M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z",
-    fill: "currentColor"
-  })));
+var DEFAULT_ARROW_WIDTH = 20;
+var DEFAULT_ARROW_HEIGHT = 8;
+/**
+ * Примечание 1.
+ *
+ * В компоненте, SVG элемент `<path />` представляет собой стрелку с платформой в виде прямоугольника в 1px. Платформа
+ * служит для исправления проблемы с белой полоской между контентом и стрелкой, которая зачастую проявляется при
+ * изменении масштаба страницы.
+ *
+ * Чтобы исправление сработало нужно:
+ * 1. Прибавить высоту платформы к `height` и `viewBox` SVG контейнера.
+ * 2. Сместить положение SVG контейнера на высоту платформы – сделано в CSS через `translateY(1px)`.
+ *
+ * https://github.com/VKCOM/VKUI/issues/2123
+ */ var PLATFORM_HEIGHT = 1;
+var ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;
+var PopperArrow = function(param) {
+    var coords = param.coords, arrowClassName = param.arrowClassName, placement = param.placement, getRootRef = param.getRootRef;
+    return /*#__PURE__*/ _react.createElement("div", {
+        ref: getRootRef,
+        style: getPositionsStylesByCoords(placement, coords),
+        className: "vkuiPopperArrow",
+        "data-placement": placement
+    }, /*#__PURE__*/ _react.createElement("svg", {
+        className: (0, _vkjs.classNames)("vkuiPopperArrow__in", arrowClassName),
+        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"
+    }, /*#__PURE__*/ _react.createElement("path", {
+        d: "M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z",
+        fill: "currentColor"
+    })));
 };
-exports.PopperArrow = PopperArrow;
+
 //# sourceMappingURL=PopperArrow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PopperArrow.js","names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","PopperArrow","arrowClassName","getRootRef","classNames"],"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport styles from './PopperArrow.module.css';\n\nexport const ARROW_PADDING = 10;\nexport const ARROW_WIDTH = 20;\nexport const ARROW_HEIGHT = 8;\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nfunction getPositionsStylesByCoords(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): React.CSSProperties {\n  if (placement.startsWith('top')) {\n    return {\n      top: '100%',\n      left: coords.x,\n    };\n  } else if (placement.startsWith('right')) {\n    return {\n      top: coords.y,\n      right: 'calc(100% - 6px)',\n    };\n  } else if (placement.startsWith('bottom')) {\n    return {\n      bottom: '100%',\n      left: coords.x,\n    };\n  } else {\n    return {\n      top: coords.y,\n      left: 'calc(100% - 6px)',\n    };\n  }\n}\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n}\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n}: PopperArrowProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={getPositionsStylesByCoords(placement, coords)}\n      className={styles['PopperArrow']}\n      data-placement={placement}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\n        width=\"20\"\n        height=\"8\"\n        viewBox=\"0 0 20 8\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          fillRule=\"evenodd\"\n          clipRule=\"evenodd\"\n          d=\"M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z\"\n          fill=\"currentColor\"\n        />\n      </svg>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AAKO,IAAMA,aAAa,GAAG,EAAE;AAAC;AACzB,IAAMC,WAAW,GAAG,EAAE;AAAC;AACvB,IAAMC,YAAY,GAAG,CAAC;AAAC;AAO9B,SAASC,0BAA0B,CACjCC,SAAoB,EAEC;EAAA,IADrBC,MAAc,uEAAG;IAAEC,CAAC,EAAE,CAAC;IAAEC,CAAC,EAAE;EAAE,CAAC;EAE/B,IAAIH,SAAS,CAACI,UAAU,CAAC,KAAK,CAAC,EAAE;IAC/B,OAAO;MACLC,GAAG,EAAE,MAAM;MACXC,IAAI,EAAEL,MAAM,CAACC;IACf,CAAC;EACH,CAAC,MAAM,IAAIF,SAAS,CAACI,UAAU,CAAC,OAAO,CAAC,EAAE;IACxC,OAAO;MACLC,GAAG,EAAEJ,MAAM,CAACE,CAAC;MACbI,KAAK,EAAE;IACT,CAAC;EACH,CAAC,MAAM,IAAIP,SAAS,CAACI,UAAU,CAAC,QAAQ,CAAC,EAAE;IACzC,OAAO;MACLI,MAAM,EAAE,MAAM;MACdF,IAAI,EAAEL,MAAM,CAACC;IACf,CAAC;EACH,CAAC,MAAM;IACL,OAAO;MACLG,GAAG,EAAEJ,MAAM,CAACE,CAAC;MACbG,IAAI,EAAE;IACR,CAAC;EACH;AACF;AAQO,IAAMG,WAAW,GAAG,SAAdA,WAAW,OAKA;EAAA,IAJtBR,MAAM,QAANA,MAAM;IACNS,cAAc,QAAdA,cAAc;IACdV,SAAS,QAATA,SAAS;IACTW,UAAU,QAAVA,UAAU;EAEV,oBACE;IACE,GAAG,EAAEA,UAAW;IAChB,KAAK,EAAEZ,0BAA0B,CAACC,SAAS,EAAEC,MAAM,CAAE;IACrD,SAAS,mBAAwB;IACjC,kBAAgBD;EAAU,gBAE1B;IACE,SAAS,EAAE,IAAAY,gBAAU,yBAA4BF,cAAc,CAAE;IACjE,KAAK,EAAC,IAAI;IACV,MAAM,EAAC,GAAG;IACV,OAAO,EAAC,UAAU;IAClB,IAAI,EAAC,MAAM;IACX,KAAK,EAAC;EAA4B,gBAElC;IACE,QAAQ,EAAC,SAAS;IAClB,QAAQ,EAAC,SAAS;IAClB,CAAC,EAAC,gDAAgD;IAClD,IAAI,EAAC;EAAc,EACnB,CACE,CACF;AAEV,CAAC;AAAC"}
+{"version":3,"sources":["../../../../src/components/PopperArrow/PopperArrow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport type { Placement } from '../../lib/floating';\nimport type { HasRootRef } from '../../types';\nimport styles from './PopperArrow.module.css';\n\nexport const ARROW_PADDING = 10;\nexport const ARROW_WIDTH = 20;\nexport const ARROW_HEIGHT = 8;\n\ntype Coords = {\n  x?: number;\n  y?: number;\n};\n\nfunction getPositionsStylesByCoords(\n  placement: Placement,\n  coords: Coords = { x: 0, y: 0 },\n): React.CSSProperties {\n  if (placement.startsWith('top')) {\n    return {\n      top: '100%',\n      left: coords.x,\n    };\n  } else if (placement.startsWith('right')) {\n    return {\n      top: coords.y,\n      right: 'calc(100% - 6px)',\n    };\n  } else if (placement.startsWith('bottom')) {\n    return {\n      bottom: '100%',\n      left: coords.x,\n    };\n  } else {\n    return {\n      top: coords.y,\n      left: 'calc(100% - 6px)',\n    };\n  }\n}\n\nexport interface PopperArrowProps extends HasRootRef<HTMLDivElement> {\n  coords?: Coords;\n  placement: Placement;\n  arrowClassName?: string;\n}\n\nconst DEFAULT_ARROW_WIDTH = 20;\nconst DEFAULT_ARROW_HEIGHT = 8;\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 */\nconst PLATFORM_HEIGHT = 1;\nconst ARROW_HEIGHT_WITH_WHITE_SPACE = DEFAULT_ARROW_HEIGHT + PLATFORM_HEIGHT;\n\nexport const PopperArrow = ({\n  coords,\n  arrowClassName,\n  placement,\n  getRootRef,\n}: PopperArrowProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      style={getPositionsStylesByCoords(placement, coords)}\n      className={styles['PopperArrow']}\n      data-placement={placement}\n    >\n      <svg\n        className={classNames(styles['PopperArrow__in'], arrowClassName)}\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      >\n        <path d=\"M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z\" fill=\"currentColor\" />\n      </svg>\n    </div>\n  );\n};\n"],"names":["ARROW_PADDING","ARROW_WIDTH","ARROW_HEIGHT","PopperArrow","getPositionsStylesByCoords","placement","coords","x","y","startsWith","top","left","right","bottom","DEFAULT_ARROW_WIDTH","DEFAULT_ARROW_HEIGHT","PLATFORM_HEIGHT","ARROW_HEIGHT_WITH_WHITE_SPACE","arrowClassName","getRootRef","div","ref","style","className","data-placement","svg","classNames","width","height","viewBox","xmlns","path","d","fill"],"mappings":";;;;;;;;;;;IAMaA,aAAa;eAAbA;;IACAC,WAAW;eAAXA;;IACAC,YAAY;eAAZA;;IA2DAC,WAAW;eAAXA;;;;2DAnEU;oBACI;AAKpB,IAAMH,gBAAgB;AACtB,IAAMC,cAAc;AACpB,IAAMC,eAAe;AAO5B,SAASE,2BACPC,SAAoB,EAEC;QADrBC,SAAAA,iEAAiB;QAAEC,GAAG;QAAGC,GAAG;IAAE,CAAC;IAE/B,IAAIH,UAAUI,UAAU,CAAC,QAAQ;QAC/B,OAAO;YACLC,KAAK;YACLC,MAAML,OAAOC,CAAC;QAChB;IACF,OAAO,IAAIF,UAAUI,UAAU,CAAC,UAAU;QACxC,OAAO;YACLC,KAAKJ,OAAOE,CAAC;YACbI,OAAO;QACT;IACF,OAAO,IAAIP,UAAUI,UAAU,CAAC,WAAW;QACzC,OAAO;YACLI,QAAQ;YACRF,MAAML,OAAOC,CAAC;QAChB;IACF,OAAO;QACL,OAAO;YACLG,KAAKJ,OAAOE,CAAC;YACbG,MAAM;QACR;IACF,CAAC;AACH;AAQA,IAAMG,sBAAsB;AAC5B,IAAMC,uBAAuB;AAE7B;;;;;;;;;;;;CAYC,GACD,IAAMC,kBAAkB;AACxB,IAAMC,gCAAgCF,uBAAuBC;AAEtD,IAAMb,cAAc,gBAKH;QAJtBG,eAAAA,QACAY,uBAAAA,gBACAb,kBAAAA,WACAc,mBAAAA;IAEA,qBACE,qBAACC;QACCC,KAAKF;QACLG,OAAOlB,2BAA2BC,WAAWC;QAC7CiB,SAAS;QACTC,kBAAgBnB;qBAEhB,qBAACoB;QACCF,WAAWG,IAAAA,gBAAU,yBAA4BR;QACjDS,OAAOb;QACPc,QAAQX;QACRY,SAAS,AAAC,OAA6BZ,OAAvBH,qBAAoB,KAAiC,OAA9BG;QACvCa,OAAM;qBAEN,qBAACC;QAAKC,GAAE;QAA6CC,MAAK;;AAIlE"}