@salutejs/plasma-core 1.136.0-dev.0 → 1.137.0-dev.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# v1.135.0 (Thu Oct 19 2023)
+
+#### 🚀 Enhancement
+
+- Release 19.10.2023 [#815](https://github.com/salute-developers/plasma/pull/815) ([@Yeti-or](https://github.com/Yeti-or) [@kayman233](https://github.com/kayman233) [@TitanKuzmich](https://github.com/TitanKuzmich) [@Yakutoc](https://github.com/Yakutoc) nikita.belyanskiy@south.rt.ru [@neretin-trike](https://github.com/neretin-trike))
+- feat(plasma-core): animation with other API ([@kayman233](https://github.com/kayman233))
+- feat(plasma-ui): add placement for Confirm ([@kayman233](https://github.com/kayman233))
+- feat(plasma-new-hope/b2c/web/core): Add Popover to new hope ([@TitanKuzmich](https://github.com/TitanKuzmich))
+
+#### 🐛 Bug Fix
+
+- fix(plasma-core, plasma-ui): remove withAnimation from PopupBase ([@kayman233](https://github.com/kayman233))
+- fix(plasma-core, plasma-ui): minor refactoring and types fix ([@kayman233](https://github.com/kayman233))
+- feat(plasma-core, plasma-ui): add animation for PopupBase etc ([@kayman233](https://github.com/kayman233))
+- docs(plasma-core/hope/web/b2c): generate new api ([@TitanKuzmich](https://github.com/TitanKuzmich))
+- docs: generate new api for plasma-core ([@TitanKuzmich](https://github.com/TitanKuzmich))
+- fix(plasma-web-docs): Make button blur prop deprecated ([@TitanKuzmich](https://github.com/TitanKuzmich))
+- fix(plasma-core): refactor in PopupBase/ModalBase ([@kayman233](https://github.com/kayman233))
+- feat(plasma-core, plasma-web, plasma-b2c): ModalBase component ([@kayman233](https://github.com/kayman233))
+
+#### Authors: 6
+
+- [@kayman233](https://github.com/kayman233)
+- Alex Czech ([@Yakutoc](https://github.com/Yakutoc))
+- Krivonos Aleksandr ([@TitanKuzmich](https://github.com/TitanKuzmich))
+- neretinaa ([@neretin-trike](https://github.com/neretin-trike))
+- Nikita Belyanskiy (nikita.belyanskiy@south.rt.ru)
+- Vasiliy ([@Yeti-or](https://github.com/Yeti-or))
+
+---
+
 # v1.134.0 (Fri Sep 29 2023)
 
 #### 🚀 Enhancement

package/api/plasma-core.api.md

@@ -14,7 +14,6 @@ import { Context } from 'react';
 import { CSSObject } from 'styled-components';
 import { CSSProperties } from 'react';
 import { DefaultTheme } from 'styled-components';
-import { Dispatch } from 'react';
 import { DraggableData } from 'react-draggable';
 import { FC } from 'react';
 import { FlattenInterpolation } from 'styled-components';
@@ -23,10 +22,10 @@ import { FunctionComponent } from 'react';
 import { HTMLAttributes } from 'react';
 import { InterpolationFunction } from 'styled-components';
 import { MutableRefObject } from 'react';
+import { PropsWithChildren } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
-import { SetStateAction } from 'react';
 import { spacing } from '@salutejs/plasma-typo';
 import { SpacingProps } from '@salutejs/plasma-typo';
 import { SpacingProps as SpacingProps_2 } from '@salutejs/plasma-typo/lib/cjs/mixins/applySpacing';
@@ -566,6 +565,12 @@ export interface DoubleSliderProps extends SliderBaseProps {
     value: number[];
 }
 
+// @public (undocumented)
+export const endAnimationClass = "popup-base-end-animation";
+
+// @public (undocumented)
+export const endTransitionClass = "popup-base-end-transition";
+
 // @public (undocumented)
 export const extractTextFrom: (textSource?: string | number | null | ReactNode) => string;
 
@@ -756,9 +761,6 @@ export interface MaxLinesProps {
     maxLines?: number;
 }
 
-// @public (undocumented)
-export type ModalAnimationInfo = PopupAnimationInfo;
-
 // @public
 export const ModalBase: FC<ModalBaseProps>;
 
@@ -784,7 +786,7 @@ export type ModalBaseRootProps = PopupRootProps & Pick<ModalBaseProps, 'initialF
 export const ModalOverlay: FC<ModalOverlayProps>;
 
 // @public (undocumented)
-export type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'> & Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
+export type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'zIndex'> & Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
 
 // @public (undocumented)
 export const monthLongName: (val: number) => string;
@@ -852,18 +854,6 @@ export interface PinProps {
 // @public @deprecated
 export const Popup: React_2.NamedExoticComponent<PopupProps & React_2.RefAttributes<HTMLDivElement>>;
 
-// @public (undocumented)
-export interface PopupAnimationInfo {
-    // (undocumented)
-    endAnimation: boolean;
-    // (undocumented)
-    endTransition: boolean;
-    // (undocumented)
-    setEndAnimation: React.Dispatch<React.SetStateAction<boolean>>;
-    // (undocumented)
-    setEndTransition: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
 // @public
 export const PopupBase: React_2.ForwardRefExoticComponent<PopupBaseProps & React_2.RefAttributes<HTMLDivElement>>;
 
@@ -875,9 +865,8 @@ export type PopupBasePlacement = BasicPopupBasePlacement | MixedPopupBasePlaceme
 
 // @public (undocumented)
 export interface PopupBaseProps extends React.HTMLAttributes<HTMLDivElement> {
-    animationInfo?: PopupAnimationInfo;
     children?: React.ReactNode;
-    frame?: 'document' | React.RefObject<HTMLElement>;
+    frame?: 'document' | string | React.RefObject<HTMLElement>;
     isOpen: boolean;
     // (undocumented)
     offset?: [number, number] | [string, string];
@@ -885,16 +874,12 @@ export interface PopupBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     // (undocumented)
     placement?: PopupBasePlacement;
     popupInfo?: PopupInfo;
+    withAnimation?: boolean;
     zIndex?: string;
 }
 
 // @public (undocumented)
-export const PopupBaseProvider: React_2.FC<{
-    children: ReactNode;
-}>;
-
-// @public
-export const PopupBaseRoot: React_2.ForwardRefExoticComponent<PopupRootProps & React_2.RefAttributes<HTMLDivElement>>;
+export const PopupBaseProvider: FC<PropsWithChildren>;
 
 // @public (undocumented)
 export const popupBaseRootClass = "popup-base-root";
@@ -914,7 +899,7 @@ export interface PopupInfo {
     // (undocumented)
     id: string;
     // (undocumented)
-    info?: Object;
+    info?: Record<string, any>;
 }
 
 // @public (undocumented)
@@ -931,6 +916,8 @@ export interface PopupProps extends HTMLAttributes<HTMLDivElement> {
 
 // @public (undocumented)
 export interface PopupRootProps extends Omit<PopupBaseProps, 'isOpen' | 'overlay'> {
+    // Warning: (ae-forgotten-export) The symbol "PopupAnimationInfo" needs to be exported by the entry point index.d.ts
+    animationInfo: PopupAnimationInfo;
     // (undocumented)
     id: string;
     // (undocumented)
@@ -1362,13 +1349,6 @@ export const useForkRef: UseForkRefHook;
 // @public
 export const useIsomorphicLayoutEffect: typeof useEffect;
 
-// Warning: (ae-forgotten-export) The symbol "ModalHookArgs" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const useModal: ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc }: ModalHookArgs) => {
-    modalInfo: ModalInfo;
-};
-
 // @public (undocumented)
 export const usePaginationDots: ({ items, index, visibleItems }: SmartPaginationDotsProps) => {
     sliced: {
@@ -1377,17 +1357,6 @@ export const usePaginationDots: ({ items, index, visibleItems }: SmartPagination
     activeId: string | number;
 };
 
-// Warning: (ae-forgotten-export) The symbol "PopupHookArgs" needs to be exported by the entry point index.d.ts
-//
-// @public (undocumented)
-export const usePopup: ({ isOpen, id, popupInfo, animationInfo }: PopupHookArgs) => {
-    isVisible: boolean;
-    setVisible: Dispatch<SetStateAction<boolean>>;
-};
-
-// @public (undocumented)
-export const usePopupAnimation: () => PopupAnimationInfo;
-
 // @public (undocumented)
 export const usePopupBaseContext: () => PopupContextType;
 
@@ -1492,7 +1461,6 @@ export interface WithSkeletonProps {
 
 // Warnings were encountered during analysis:
 //
-// components/ModalBase/hooks.d.ts:4:5 - (ae-forgotten-export) The symbol "ModalInfo" needs to be exported by the entry point index.d.ts
 // components/Toast/Toast.d.ts:4:5 - (ae-forgotten-export) The symbol "ToastRole" needs to be exported by the entry point index.d.ts
 // components/Toast/useToast.d.ts:2:5 - (ae-forgotten-export) The symbol "ShowToast" needs to be exported by the entry point index.d.ts
 

package/components/ModalBase/ModalBase.js

@@ -21,7 +21,7 @@ var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
 
 var _NoScroll;
 
-var _excluded = ["id", "animationInfo", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children"];
+var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -40,7 +40,7 @@ var NoScroll = /*#__PURE__*/(0, _styledComponents.createGlobalStyle)(["body{over
 
 var ModalBase = function ModalBase(_ref) {
   var id = _ref.id,
-      animationInfo = _ref.animationInfo,
+      withAnimation = _ref.withAnimation,
       onClose = _ref.onClose,
       onOverlayClick = _ref.onOverlayClick,
       onEscKeyDown = _ref.onEscKeyDown,
@@ -73,14 +73,13 @@ var ModalBase = function ModalBase(_ref) {
     id: id,
     ref: trapRef,
     popupInfo: modalInfo,
-    animationInfo: animationInfo,
+    withAnimation: withAnimation,
     zIndex: zIndex,
     overlay: /*#__PURE__*/_react["default"].createElement(_ModalOverlay.ModalOverlay, {
       id: innerId,
       withBlur: withBlur,
       onOverlayClick: onOverlayClick,
       onClose: onClose,
-      animationInfo: animationInfo,
       zIndex: zIndex,
       closeOnOverlayClick: closeOnOverlayClick
     })

package/components/ModalBase/ModalOverlay.d.ts

@@ -3,7 +3,6 @@ import { ModalOverlayProps } from './types';
 export declare const modalBaseOverlayClass = "modal-base-overlay";
 export declare const Overlay: import("styled-components").StyledComponent<"div", any, {
     transparent?: boolean | undefined;
-    endAnimation?: boolean | undefined;
     $withBlur?: boolean | undefined;
     clickable?: boolean | undefined;
     zIndex?: string | undefined;

package/components/ModalBase/ModalOverlay.js

@@ -19,7 +19,7 @@ var _ModalBaseContext = /*#__PURE__*/require("./ModalBaseContext");
 
 var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
 
-var _excluded = ["id", "withBlur", "onOverlayClick", "onClose", "animationInfo", "zIndex", "closeOnOverlayClick"];
+var _excluded = ["id", "withBlur", "onOverlayClick", "onClose", "zIndex", "closeOnOverlayClick"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -67,7 +67,6 @@ var ModalOverlay = function ModalOverlay(_ref5) {
       withBlur = _ref5.withBlur,
       onOverlayClick = _ref5.onOverlayClick,
       onClose = _ref5.onClose,
-      animationInfo = _ref5.animationInfo,
       zIndex = _ref5.zIndex,
       _ref5$closeOnOverlayC = _ref5.closeOnOverlayClick,
       closeOnOverlayClick = _ref5$closeOnOverlayC === void 0 ? true : _ref5$closeOnOverlayC,
@@ -91,14 +90,10 @@ var ModalOverlay = function ModalOverlay(_ref5) {
   var transparent = (0, _react.useMemo)(function () {
     return (0, _ModalBaseContext.getIdLastModal)(popupController.items) !== id;
   }, [id, popupController.items]);
-  var endAnimation = (0, _react.useMemo)(function () {
-    return (0, _ModalBaseContext.getIdFirstModal)(popupController.items) === id && (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation);
-  }, [id, popupController.items]);
   return /*#__PURE__*/_react["default"].createElement(Overlay, _extends({
     className: modalBaseOverlayClass,
     transparent: transparent,
     clickable: closeOnOverlayClick,
-    endAnimation: endAnimation,
     onClick: onModalOverlayKeyDown,
     zIndex: zIndex,
     $withBlur: withBlur

package/components/ModalBase/hooks.js

@@ -11,15 +11,12 @@ var _PopupBase = /*#__PURE__*/require("../PopupBase");
 
 var _ModalBaseContext = /*#__PURE__*/require("./ModalBaseContext");
 
-var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-(0, _collectPackageInfo.collectPackageInfo)('ModalBase/hooks');
 var ESCAPE_KEYCODE = 27;
 
 var useModal = function useModal(_ref) {

package/components/ModalBase/index.d.ts

@@ -1,4 +1,3 @@
 export { ModalBase } from './ModalBase';
-export { useModal } from './hooks';
 export { ModalOverlay, modalBaseOverlayClass } from './ModalOverlay';
-export type { ModalBaseProps, ModalAnimationInfo, ModalBaseRootProps, ModalOverlayProps } from './types';
+export type { ModalBaseProps, ModalBaseRootProps, ModalOverlayProps } from './types';

package/components/ModalBase/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "ModalBase", {
     return _ModalBase.ModalBase;
   }
 });
-Object.defineProperty(exports, "useModal", {
-  enumerable: true,
-  get: function get() {
-    return _hooks.useModal;
-  }
-});
 Object.defineProperty(exports, "ModalOverlay", {
   enumerable: true,
   get: function get() {
@@ -30,6 +24,4 @@ Object.defineProperty(exports, "modalBaseOverlayClass", {
 
 var _ModalBase = /*#__PURE__*/require("./ModalBase");
 
-var _hooks = /*#__PURE__*/require("./hooks");
-
 var _ModalOverlay = /*#__PURE__*/require("./ModalOverlay");

package/components/ModalBase/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { PopupBaseProps, PopupRootProps } from '../PopupBase';
-import { PopupAnimationInfo, PopupHookArgs } from '../PopupBase/types';
+import { PopupHookArgs } from '../PopupBase/types';
 export interface ModalBaseProps extends PopupBaseProps {
     /**
      * Нужно ли применять blur для подложки.
@@ -36,7 +36,6 @@ export interface ModalBaseProps extends PopupBaseProps {
      */
     onClose?: () => void;
 }
-export declare type ModalAnimationInfo = PopupAnimationInfo;
 export declare type ModalBaseRootProps = PopupRootProps & Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'>;
-export declare type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'> & Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
+export declare type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'zIndex'> & Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
 export declare type ModalHookArgs = Pick<PopupHookArgs, 'id' | 'popupInfo'> & Pick<ModalBaseProps, 'closeOnEsc' | 'onEscKeyDown' | 'onClose'>;

package/components/PopupBase/PopupBase.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { PopupBaseProps } from './types';
+import { PopupAnimationInfo, PopupBaseProps } from './types';
+export declare const getClassName: (animationInfo: PopupAnimationInfo, className?: string | undefined) => string;
 /**
  * Базовый копмонент PopupBase.
  */

package/components/PopupBase/PopupBase.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopupBase = void 0;
+exports.PopupBase = exports.getClassName = void 0;
 
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 
@@ -21,9 +21,11 @@ var _PopupBaseRoot = /*#__PURE__*/require("./PopupBaseRoot");
 
 var _hooks2 = /*#__PURE__*/require("./hooks");
 
+var _utils = /*#__PURE__*/require("./utils");
+
 var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
 
-var _excluded = ["id", "isOpen", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "animationInfo"];
+var _excluded = ["id", "isOpen", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "withAnimation", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -31,6 +33,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -52,12 +56,19 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var StyledPortal = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma__sc-1md4coi-0"
 })([""]);
+
+var getClassName = function getClassName(animationInfo, className) {
+  var endAnimation = animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? _utils.endAnimationClass : '';
+  var endTransition = animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? _utils.endTransitionClass : '';
+  return [className, endAnimation, endTransition].filter(Boolean).join(' ');
+};
 /**
  * Базовый копмонент PopupBase.
  */
 
 
-var PopupBase = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
+exports.getClassName = getClassName;
+var PopupBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var id = _ref.id,
       isOpen = _ref.isOpen,
       _ref$placement = _ref.placement,
@@ -71,7 +82,9 @@ var PopupBase = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       role = _ref.role,
       zIndex = _ref.zIndex,
       popupInfo = _ref.popupInfo,
-      animationInfo = _ref.animationInfo,
+      _ref$withAnimation = _ref.withAnimation,
+      withAnimation = _ref$withAnimation === void 0 ? false : _ref$withAnimation,
+      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var uniqId = (0, _hooks.useUniqId)();
@@ -81,9 +94,10 @@ var PopupBase = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     isOpen: isOpen,
     id: innerId,
     popupInfo: popupInfo,
-    animationInfo: animationInfo
+    withAnimation: withAnimation
   }),
       isVisible = _usePopup.isVisible,
+      animationInfo = _usePopup.animationInfo,
       setVisible = _usePopup.setVisible;
 
   var portalRef = (0, _react.useRef)(null);
@@ -97,19 +111,26 @@ var PopupBase = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   (0, _react.useEffect)(function () {
     var portal = document.getElementById(_PopupBaseContext.POPOVER_PORTAL_ID);
 
-    if (frame !== 'document' && frame && frame.current) {
+    if (typeof frame !== 'string' && frame && frame.current) {
       portal = frame.current;
     }
 
     if (!portal) {
       portal = document.createElement('div');
       portal.setAttribute('id', _PopupBaseContext.POPOVER_PORTAL_ID);
-      document.body.appendChild(portal);
+
+      if (typeof frame === 'string' && frame !== 'document') {
+        var _document$getElementB;
+
+        (_document$getElementB = document.getElementById(frame)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.appendChild(portal);
+      } else {
+        document.body.appendChild(portal);
+      }
     }
 
     portalRef.current = portal;
     /**
-     * Изменение стейта нужно для того, чтобы PopupBase
+     * Изменение стейта нужно для того, чтобы Popup
      * отобразился после записи DOM элемента в portalRef.current
      */
 
@@ -120,7 +141,9 @@ var PopupBase = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     return null;
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, portalRef.current && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(StyledPortal, rest, overlay, /*#__PURE__*/_react["default"].createElement(_PopupBaseRoot.PopupBaseRoot, {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, portalRef.current && /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(StyledPortal, _extends({
+    className: getClassName(animationInfo, className)
+  }, rest), overlay, /*#__PURE__*/_react["default"].createElement(_PopupBaseRoot.PopupBaseRoot, {
     id: innerId,
     ref: innerRef,
     placement: placement,
@@ -131,5 +154,4 @@ var PopupBase = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     setVisible: setVisible
   }, children)), portalRef.current));
 });
-
 exports.PopupBase = PopupBase;

package/components/PopupBase/PopupBaseContext.d.ts

@@ -1,7 +1,5 @@
-import React, { ReactNode } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { PopupContextType } from './types';
 export declare const POPOVER_PORTAL_ID = "plasma-popup-root";
 export declare const usePopupBaseContext: () => PopupContextType;
-export declare const PopupBaseProvider: React.FC<{
-    children: ReactNode;
-}>;
+export declare const PopupBaseProvider: FC<PropsWithChildren>;

package/components/PopupBase/PopupBaseContext.js

@@ -39,8 +39,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var POPOVER_PORTAL_ID = 'plasma-popup-root';
 exports.POPOVER_PORTAL_ID = POPOVER_PORTAL_ID;
 var items = [];
-
-var PopupBaseContext = /*#__PURE__*/_react["default"].createContext({
+var PopupBaseContext = /*#__PURE__*/(0, _react.createContext)({
   items: items,
   register: function register(_info) {
     throw new Error('Function not implemented. Add PopupBaseProvider');
@@ -51,7 +50,7 @@ var PopupBaseContext = /*#__PURE__*/_react["default"].createContext({
 });
 
 var usePopupBaseContext = function usePopupBaseContext() {
-  return _react["default"].useContext(PopupBaseContext);
+  return (0, _react.useContext)(PopupBaseContext);
 };
 
 exports.usePopupBaseContext = usePopupBaseContext;
@@ -59,16 +58,13 @@ exports.usePopupBaseContext = usePopupBaseContext;
 var PopupBaseProvider = function PopupBaseProvider(_ref) {
   var children = _ref.children;
 
-  var _React$useState = _react["default"].useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      items = _React$useState2[0],
-      setItems = _React$useState2[1];
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
 
   var register = function register(info) {
-    var updatedItems = _toConsumableArray(items);
-
-    updatedItems.push(info);
-    setItems(updatedItems);
+    setItems([].concat(_toConsumableArray(items), [info]));
   };
 
   var unregister = function unregister(id) {

package/components/PopupBase/PopupBaseRoot.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
 import { PopupRootProps } from './types';
 export declare const DEFAULT_Z_INDEX = 9000;
-export declare const popupBaseRootClass = "popup-base-root";
 /**
  * Корень PopupBase.
  * Управляет показом/скрытием и анимацией всплывающего окна.

package/components/PopupBase/PopupBaseRoot.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopupBaseRoot = exports.popupBaseRootClass = exports.DEFAULT_Z_INDEX = void 0;
+exports.PopupBaseRoot = exports.DEFAULT_Z_INDEX = void 0;
 
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 
@@ -17,8 +17,6 @@ var _PopupBaseContext = /*#__PURE__*/require("./PopupBaseContext");
 
 var _utils = /*#__PURE__*/require("./utils");
 
-var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
-
 var _excluded = ["id", "placement", "offset", "frame", "setVisible", "children", "role", "zIndex", "animationInfo"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,15 +29,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-(0, _collectPackageInfo.collectPackageInfo)('PopupBase/PopupBaseRoot');
 var DEFAULT_Z_INDEX = 9000;
-/*
- * Класс корневого компонента PopupBaseRoot: `popup-base-root`
- */
-
 exports.DEFAULT_Z_INDEX = DEFAULT_Z_INDEX;
-var popupBaseRootClass = 'popup-base-root';
-exports.popupBaseRootClass = popupBaseRootClass;
 
 var PopupBaseView = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma__sc-14025jn-0"
@@ -91,9 +82,9 @@ var PopupBaseRoot = /*#__PURE__*/_react["default"].forwardRef(function (_ref4, r
       setVisible(false);
       animationInfo.setEndAnimation(false);
     }
-  }, [popupController.unregister, animationInfo, setVisible]);
+  }, [popupController.unregister, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation, setVisible]);
   return /*#__PURE__*/_react["default"].createElement(PopupRootContainer, _extends({
-    className: popupBaseRootClass,
+    className: _utils.popupBaseRootClass,
     ref: innerRef,
     placement: placement,
     frame: frame,

package/components/PopupBase/hooks.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { PopupAnimationInfo, PopupHookArgs } from './types';
 export declare const usePopupAnimation: () => PopupAnimationInfo;
-export declare const usePopup: ({ isOpen, id, popupInfo, animationInfo }: PopupHookArgs) => {
+export declare const usePopup: ({ isOpen, id, popupInfo, withAnimation }: PopupHookArgs) => {
     isVisible: boolean;
     setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    animationInfo: PopupAnimationInfo;
 };

package/components/PopupBase/hooks.js

@@ -9,8 +9,6 @@ var _react = /*#__PURE__*/require("react");
 
 var _PopupBaseContext = /*#__PURE__*/require("./PopupBaseContext");
 
-var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -29,8 +27,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-(0, _collectPackageInfo.collectPackageInfo)('PopupBase/hooks');
-
 // Хук для поключения анимации
 var usePopupAnimation = function usePopupAnimation() {
   var _useState = (0, _react.useState)(false),
@@ -58,18 +54,21 @@ var usePopup = function usePopup(_ref) {
   var isOpen = _ref.isOpen,
       id = _ref.id,
       popupInfo = _ref.popupInfo,
-      animationInfo = _ref.animationInfo;
+      withAnimation = _ref.withAnimation;
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
       isVisible = _useState6[0],
       setVisible = _useState6[1];
 
-  var popupController = (0, _PopupBaseContext.usePopupBaseContext)(); // для использования transition в качестве анимации
+  var popupController = (0, _PopupBaseContext.usePopupBaseContext)();
+  var animationInfo = usePopupAnimation(); // для использования transition в качестве анимации
 
   (0, _react.useEffect)(function () {
-    animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.setEndTransition(animationInfo && (!isVisible || (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation)));
-  }, [animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation, isVisible]); // сначала добавление/удаление из контекста, и только после этого отображение/скрытие
+    if (withAnimation && animationInfo) {
+      animationInfo.setEndTransition(!isVisible || (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation));
+    }
+  }, [animationInfo, withAnimation, isVisible]); // сначала добавление/удаление из контекста, и только после этого отображение/скрытие
 
   (0, _react.useEffect)(function () {
     // при первом открытии
@@ -78,7 +77,7 @@ var usePopup = function usePopup(_ref) {
         id: id
       }, popupInfo));
       setVisible(true);
-      animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.setEndAnimation(false);
+      animationInfo.setEndAnimation(false);
       return;
     }
 
@@ -87,18 +86,19 @@ var usePopup = function usePopup(_ref) {
     } // если есть анимация - закрытие по окончании анимации
 
 
-    if (animationInfo) {
-      animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.setEndAnimation(true);
+    if (withAnimation) {
+      animationInfo.setEndAnimation(true);
       return;
     } // иначе обычное закрытие
 
 
     popupController.unregister(id);
     setVisible(false);
-  }, [isOpen, isVisible, animationInfo]);
+  }, [isOpen, isVisible, animationInfo, withAnimation]);
   return {
     isVisible: isVisible,
-    setVisible: setVisible
+    setVisible: setVisible,
+    animationInfo: animationInfo
   };
 };
 

package/components/PopupBase/index.d.ts

@@ -1,5 +1,4 @@
 export { PopupBaseProvider, usePopupBaseContext } from './PopupBaseContext';
 export { PopupBase } from './PopupBase';
-export { usePopupAnimation, usePopup } from './hooks';
-export { PopupBaseRoot, popupBaseRootClass } from './PopupBaseRoot';
-export type { PopupBasePlacement, PopupInfo, PopupContextType, PopupBaseProps, PopupAnimationInfo, PopupRootProps, } from './types';
+export { popupBaseRootClass, endAnimationClass, endTransitionClass } from './utils';
+export type { PopupBasePlacement, PopupInfo, PopupContextType, PopupBaseProps, PopupRootProps } from './types';

package/components/PopupBase/index.js

@@ -21,28 +21,22 @@ Object.defineProperty(exports, "PopupBase", {
     return _PopupBase.PopupBase;
   }
 });
-Object.defineProperty(exports, "usePopupAnimation", {
-  enumerable: true,
-  get: function get() {
-    return _hooks.usePopupAnimation;
-  }
-});
-Object.defineProperty(exports, "usePopup", {
+Object.defineProperty(exports, "popupBaseRootClass", {
   enumerable: true,
   get: function get() {
-    return _hooks.usePopup;
+    return _utils.popupBaseRootClass;
   }
 });
-Object.defineProperty(exports, "PopupBaseRoot", {
+Object.defineProperty(exports, "endAnimationClass", {
   enumerable: true,
   get: function get() {
-    return _PopupBaseRoot.PopupBaseRoot;
+    return _utils.endAnimationClass;
   }
 });
-Object.defineProperty(exports, "popupBaseRootClass", {
+Object.defineProperty(exports, "endTransitionClass", {
   enumerable: true,
   get: function get() {
-    return _PopupBaseRoot.popupBaseRootClass;
+    return _utils.endTransitionClass;
   }
 });
 
@@ -50,6 +44,4 @@ var _PopupBaseContext = /*#__PURE__*/require("./PopupBaseContext");
 
 var _PopupBase = /*#__PURE__*/require("./PopupBase");
 
-var _hooks = /*#__PURE__*/require("./hooks");
-
-var _PopupBaseRoot = /*#__PURE__*/require("./PopupBaseRoot");
+var _utils = /*#__PURE__*/require("./utils");

package/components/PopupBase/types.d.ts

@@ -4,7 +4,7 @@ export declare type MixedPopupBasePlacement = 'top-right' | 'top-left' | 'bottom
 export declare type PopupBasePlacement = BasicPopupBasePlacement | MixedPopupBasePlacement;
 export interface PopupInfo {
     id: string;
-    info?: Object;
+    info?: Record<string, any>;
 }
 export interface PopupContextType {
     items: PopupInfo[];
@@ -19,9 +19,9 @@ export interface PopupBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     placement?: PopupBasePlacement;
     offset?: [number, number] | [string, string];
     /**
-     * В каком контейнере позиционируется(по умолчанию document).
+     * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него.
      */
-    frame?: 'document' | React.RefObject<HTMLElement>;
+    frame?: 'document' | string | React.RefObject<HTMLElement>;
     /**
      * Содержимое PopupBase.
      */
@@ -39,9 +39,9 @@ export interface PopupBaseProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     popupInfo?: PopupInfo;
     /**
-     * Данные из хука usePopupAnimation.
+     * Использовать ли анимацию.
      */
-    animationInfo?: PopupAnimationInfo;
+    withAnimation?: boolean;
 }
 export interface PopupAnimationInfo {
     endAnimation: boolean;
@@ -52,8 +52,12 @@ export interface PopupAnimationInfo {
 export interface PopupRootProps extends Omit<PopupBaseProps, 'isOpen' | 'overlay'> {
     id: string;
     setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    /**
+     * Данные из хука usePopupAnimation.
+     */
+    animationInfo: PopupAnimationInfo;
 }
-export interface PopupHookArgs extends Pick<PopupBaseProps, 'isOpen' | 'popupInfo' | 'animationInfo'> {
+export interface PopupHookArgs extends Pick<PopupBaseProps, 'isOpen' | 'popupInfo' | 'withAnimation'> {
     id: string;
 }
 export interface PopupRootContainerProps extends Omit<PopupBaseProps, 'isOpen' | 'overlay'> {

package/components/PopupBase/utils.d.ts

@@ -1 +1,4 @@
+export declare const popupBaseRootClass = "popup-base-root";
+export declare const endAnimationClass = "popup-base-end-animation";
+export declare const endTransitionClass = "popup-base-end-transition";
 export declare const handlePosition: (placement?: "center" | "left" | "right" | "top" | "bottom" | "top-right" | "top-left" | "bottom-right" | "bottom-left" | undefined, offset?: [number, number] | [string, string] | undefined) => import("styled-components").FlattenSimpleInterpolation;

package/components/PopupBase/utils.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.handlePosition = void 0;
+exports.handlePosition = exports.endTransitionClass = exports.endAnimationClass = exports.popupBaseRootClass = void 0;
 
 var _styledComponents = /*#__PURE__*/require("styled-components");
 
+var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -19,6 +21,18 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+(0, _collectPackageInfo.collectPackageInfo)('PopupBase/utils');
+
+/*
+ * Класс корневого компонента PopupBaseRoot: `popup-base-root`
+ */
+var popupBaseRootClass = 'popup-base-root';
+exports.popupBaseRootClass = popupBaseRootClass;
+var endAnimationClass = 'popup-base-end-animation';
+exports.endAnimationClass = endAnimationClass;
+var endTransitionClass = 'popup-base-end-transition';
+exports.endTransitionClass = endTransitionClass;
+
 var handlePosition = function handlePosition(placement, offset) {
   var x = '0rem';
   var y = '0rem';

package/es/components/ModalBase/ModalBase.js

@@ -1,6 +1,6 @@
 var _NoScroll;
 
-var _excluded = ["id", "animationInfo", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children"];
+var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -24,7 +24,7 @@ var NoScroll = /*#__PURE__*/createGlobalStyle(["body{overflow-y:hidden;}"]);
 
 export var ModalBase = function ModalBase(_ref) {
   var id = _ref.id,
-      animationInfo = _ref.animationInfo,
+      withAnimation = _ref.withAnimation,
       onClose = _ref.onClose,
       onOverlayClick = _ref.onOverlayClick,
       onEscKeyDown = _ref.onEscKeyDown,
@@ -57,14 +57,13 @@ export var ModalBase = function ModalBase(_ref) {
     id: id,
     ref: trapRef,
     popupInfo: modalInfo,
-    animationInfo: animationInfo,
+    withAnimation: withAnimation,
     zIndex: zIndex,
     overlay: /*#__PURE__*/React.createElement(ModalOverlay, {
       id: innerId,
       withBlur: withBlur,
       onOverlayClick: onOverlayClick,
       onClose: onClose,
-      animationInfo: animationInfo,
       zIndex: zIndex,
       closeOnOverlayClick: closeOnOverlayClick
     })

package/es/components/ModalBase/ModalOverlay.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "withBlur", "onOverlayClick", "onClose", "animationInfo", "zIndex", "closeOnOverlayClick"];
+var _excluded = ["id", "withBlur", "onOverlayClick", "onClose", "zIndex", "closeOnOverlayClick"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -10,7 +10,7 @@ import React, { useCallback, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { DEFAULT_Z_INDEX } from '../PopupBase/PopupBaseRoot';
 import { usePopupBaseContext } from '../PopupBase';
-import { getIdFirstModal, getIdLastModal } from './ModalBaseContext';
+import { getIdLastModal } from './ModalBaseContext';
 import { collectPackageInfo } from '../../collectPackageInfo';
 collectPackageInfo('ModalBase/ModalOverlay');
 
@@ -43,7 +43,6 @@ export var ModalOverlay = function ModalOverlay(_ref5) {
       withBlur = _ref5.withBlur,
       onOverlayClick = _ref5.onOverlayClick,
       onClose = _ref5.onClose,
-      animationInfo = _ref5.animationInfo,
       zIndex = _ref5.zIndex,
       _ref5$closeOnOverlayC = _ref5.closeOnOverlayClick,
       closeOnOverlayClick = _ref5$closeOnOverlayC === void 0 ? true : _ref5$closeOnOverlayC,
@@ -67,14 +66,10 @@ export var ModalOverlay = function ModalOverlay(_ref5) {
   var transparent = useMemo(function () {
     return getIdLastModal(popupController.items) !== id;
   }, [id, popupController.items]);
-  var endAnimation = useMemo(function () {
-    return getIdFirstModal(popupController.items) === id && (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation);
-  }, [id, popupController.items]);
   return /*#__PURE__*/React.createElement(Overlay, _extends({
     className: modalBaseOverlayClass,
     transparent: transparent,
     clickable: closeOnOverlayClick,
-    endAnimation: endAnimation,
     onClick: onModalOverlayKeyDown,
     zIndex: zIndex,
     $withBlur: withBlur

package/es/components/ModalBase/hooks.js

@@ -7,8 +7,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import { useCallback, useEffect } from 'react';
 import { usePopupBaseContext } from '../PopupBase';
 import { getIdLastModal } from './ModalBaseContext';
-import { collectPackageInfo } from '../../collectPackageInfo';
-collectPackageInfo('ModalBase/hooks');
 var ESCAPE_KEYCODE = 27;
 export var useModal = function useModal(_ref) {
   var id = _ref.id,

package/es/components/ModalBase/index.js

@@ -1,3 +1,2 @@
 export { ModalBase } from './ModalBase';
-export { useModal } from './hooks';
 export { ModalOverlay, modalBaseOverlayClass } from './ModalOverlay';

package/es/components/PopupBase/PopupBase.js

@@ -1,4 +1,6 @@
-var _excluded = ["id", "isOpen", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "animationInfo"];
+var _excluded = ["id", "isOpen", "placement", "offset", "frame", "children", "overlay", "role", "zIndex", "popupInfo", "withAnimation", "className"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -16,23 +18,29 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
 import ReactDOM from 'react-dom';
 import styled from 'styled-components';
 import { useForkRef, useUniqId } from '../../hooks';
 import { POPOVER_PORTAL_ID } from './PopupBaseContext';
 import { PopupBaseRoot } from './PopupBaseRoot';
 import { usePopup } from './hooks';
+import { endAnimationClass, endTransitionClass } from './utils';
 import { collectPackageInfo } from '../../collectPackageInfo';
 collectPackageInfo('PopupBase/PopupBase');
 var StyledPortal = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma__sc-1md4coi-0"
 })([""]);
+export var getClassName = function getClassName(animationInfo, className) {
+  var endAnimation = animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? endAnimationClass : '';
+  var endTransition = animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? endTransitionClass : '';
+  return [className, endAnimation, endTransition].filter(Boolean).join(' ');
+};
 /**
  * Базовый копмонент PopupBase.
  */
 
-export var PopupBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+export var PopupBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var id = _ref.id,
       isOpen = _ref.isOpen,
       _ref$placement = _ref.placement,
@@ -46,7 +54,9 @@ export var PopupBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       role = _ref.role,
       zIndex = _ref.zIndex,
       popupInfo = _ref.popupInfo,
-      animationInfo = _ref.animationInfo,
+      _ref$withAnimation = _ref.withAnimation,
+      withAnimation = _ref$withAnimation === void 0 ? false : _ref$withAnimation,
+      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var uniqId = useUniqId();
@@ -56,9 +66,10 @@ export var PopupBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     isOpen: isOpen,
     id: innerId,
     popupInfo: popupInfo,
-    animationInfo: animationInfo
+    withAnimation: withAnimation
   }),
       isVisible = _usePopup.isVisible,
+      animationInfo = _usePopup.animationInfo,
       setVisible = _usePopup.setVisible;
 
   var portalRef = useRef(null);
@@ -72,19 +83,26 @@ export var PopupBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   useEffect(function () {
     var portal = document.getElementById(POPOVER_PORTAL_ID);
 
-    if (frame !== 'document' && frame && frame.current) {
+    if (typeof frame !== 'string' && frame && frame.current) {
       portal = frame.current;
     }
 
     if (!portal) {
       portal = document.createElement('div');
       portal.setAttribute('id', POPOVER_PORTAL_ID);
-      document.body.appendChild(portal);
+
+      if (typeof frame === 'string' && frame !== 'document') {
+        var _document$getElementB;
+
+        (_document$getElementB = document.getElementById(frame)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.appendChild(portal);
+      } else {
+        document.body.appendChild(portal);
+      }
     }
 
     portalRef.current = portal;
     /**
-     * Изменение стейта нужно для того, чтобы PopupBase
+     * Изменение стейта нужно для того, чтобы Popup
      * отобразился после записи DOM элемента в portalRef.current
      */
 
@@ -95,7 +113,9 @@ export var PopupBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, portalRef.current && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortal, rest, overlay, /*#__PURE__*/React.createElement(PopupBaseRoot, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, portalRef.current && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortal, _extends({
+    className: getClassName(animationInfo, className)
+  }, rest), overlay, /*#__PURE__*/React.createElement(PopupBaseRoot, {
     id: innerId,
     ref: innerRef,
     placement: placement,

package/es/components/PopupBase/PopupBaseContext.js

@@ -18,12 +18,12 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, createContext, useContext } from 'react';
 import { collectPackageInfo } from '../../collectPackageInfo';
 collectPackageInfo('PopupBase/PopupBaseContext');
 export var POPOVER_PORTAL_ID = 'plasma-popup-root';
 var items = [];
-var PopupBaseContext = /*#__PURE__*/React.createContext({
+var PopupBaseContext = /*#__PURE__*/createContext({
   items: items,
   register: function register(_info) {
     throw new Error('Function not implemented. Add PopupBaseProvider');
@@ -33,21 +33,18 @@ var PopupBaseContext = /*#__PURE__*/React.createContext({
   }
 });
 export var usePopupBaseContext = function usePopupBaseContext() {
-  return React.useContext(PopupBaseContext);
+  return useContext(PopupBaseContext);
 };
 export var PopupBaseProvider = function PopupBaseProvider(_ref) {
   var children = _ref.children;
 
-  var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      items = _React$useState2[0],
-      setItems = _React$useState2[1];
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
 
   var register = function register(info) {
-    var updatedItems = _toConsumableArray(items);
-
-    updatedItems.push(info);
-    setItems(updatedItems);
+    setItems([].concat(_toConsumableArray(items), [info]));
   };
 
   var unregister = function unregister(id) {

package/es/components/PopupBase/PopupBaseRoot.js

@@ -10,15 +10,8 @@ import React, { useCallback, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { useForkRef } from '../../hooks';
 import { usePopupBaseContext } from './PopupBaseContext';
-import { handlePosition } from './utils';
-import { collectPackageInfo } from '../../collectPackageInfo';
-collectPackageInfo('PopupBase/PopupBaseRoot');
+import { handlePosition, popupBaseRootClass } from './utils';
 export var DEFAULT_Z_INDEX = 9000;
-/*
- * Класс корневого компонента PopupBaseRoot: `popup-base-root`
- */
-
-export var popupBaseRootClass = 'popup-base-root';
 var PopupBaseView = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma__sc-14025jn-0"
 })(["position:relative;max-width:100%;pointer-events:all;"]);
@@ -67,7 +60,7 @@ export var PopupBaseRoot = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
       setVisible(false);
       animationInfo.setEndAnimation(false);
     }
-  }, [popupController.unregister, animationInfo, setVisible]);
+  }, [popupController.unregister, animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation, setVisible]);
   return /*#__PURE__*/React.createElement(PopupRootContainer, _extends({
     className: popupBaseRootClass,
     ref: innerRef,

package/es/components/PopupBase/hooks.js

@@ -19,8 +19,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useEffect, useState } from 'react';
 import { usePopupBaseContext } from './PopupBaseContext'; // Хук для поключения анимации
 
-import { collectPackageInfo } from '../../collectPackageInfo';
-collectPackageInfo('PopupBase/hooks');
 export var usePopupAnimation = function usePopupAnimation() {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -44,18 +42,21 @@ export var usePopup = function usePopup(_ref) {
   var isOpen = _ref.isOpen,
       id = _ref.id,
       popupInfo = _ref.popupInfo,
-      animationInfo = _ref.animationInfo;
+      withAnimation = _ref.withAnimation;
 
   var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
       isVisible = _useState6[0],
       setVisible = _useState6[1];
 
-  var popupController = usePopupBaseContext(); // для использования transition в качестве анимации
+  var popupController = usePopupBaseContext();
+  var animationInfo = usePopupAnimation(); // для использования transition в качестве анимации
 
   useEffect(function () {
-    animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.setEndTransition(animationInfo && (!isVisible || (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation)));
-  }, [animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation, isVisible]); // сначала добавление/удаление из контекста, и только после этого отображение/скрытие
+    if (withAnimation && animationInfo) {
+      animationInfo.setEndTransition(!isVisible || (animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.endAnimation));
+    }
+  }, [animationInfo, withAnimation, isVisible]); // сначала добавление/удаление из контекста, и только после этого отображение/скрытие
 
   useEffect(function () {
     // при первом открытии
@@ -64,7 +65,7 @@ export var usePopup = function usePopup(_ref) {
         id: id
       }, popupInfo));
       setVisible(true);
-      animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.setEndAnimation(false);
+      animationInfo.setEndAnimation(false);
       return;
     }
 
@@ -73,17 +74,18 @@ export var usePopup = function usePopup(_ref) {
     } // если есть анимация - закрытие по окончании анимации
 
 
-    if (animationInfo) {
-      animationInfo === null || animationInfo === void 0 ? void 0 : animationInfo.setEndAnimation(true);
+    if (withAnimation) {
+      animationInfo.setEndAnimation(true);
       return;
     } // иначе обычное закрытие
 
 
     popupController.unregister(id);
     setVisible(false);
-  }, [isOpen, isVisible, animationInfo]);
+  }, [isOpen, isVisible, animationInfo, withAnimation]);
   return {
     isVisible: isVisible,
-    setVisible: setVisible
+    setVisible: setVisible,
+    animationInfo: animationInfo
   };
 };

package/es/components/PopupBase/index.js

@@ -1,4 +1,3 @@
 export { PopupBaseProvider, usePopupBaseContext } from './PopupBaseContext';
 export { PopupBase } from './PopupBase';
-export { usePopupAnimation, usePopup } from './hooks';
-export { PopupBaseRoot, popupBaseRootClass } from './PopupBaseRoot';
+export { popupBaseRootClass, endAnimationClass, endTransitionClass } from './utils';

package/es/components/PopupBase/utils.js

@@ -11,6 +11,15 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import { css } from 'styled-components';
+import { collectPackageInfo } from '../../collectPackageInfo';
+collectPackageInfo('PopupBase/utils');
+
+/*
+ * Класс корневого компонента PopupBaseRoot: `popup-base-root`
+ */
+export var popupBaseRootClass = 'popup-base-root';
+export var endAnimationClass = 'popup-base-end-animation';
+export var endTransitionClass = 'popup-base-end-transition';
 export var handlePosition = function handlePosition(placement, offset) {
   var x = '0rem';
   var y = '0rem';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salutejs/plasma-core",
-  "version": "1.136.0-dev.0",
+  "version": "1.137.0-dev.0",
   "description": "Core library for Plasma: Salute Design System",
   "author": "Salute Frontend Team <salute.developers@gmail.com>",
   "license": "MIT",
@@ -81,5 +81,5 @@
     "react-draggable": "4.4.3",
     "react-popper": "2.3.0"
   },
-  "gitHead": "ba181f9f3b91de5e3cf631a718d7ebc9d69265c7"
+  "gitHead": "18613ec93b0f813fb1cc97f0af0adc5310d25523"
 }