@salutejs/plasma-core 1.135.0-dev.0 → 1.135.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,6 +14,7 @@ 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';
@@ -25,6 +26,7 @@ import { MutableRefObject } 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';
@@ -754,21 +756,36 @@ export interface MaxLinesProps {
     maxLines?: number;
 }
 
+// @public (undocumented)
+export type ModalAnimationInfo = PopupAnimationInfo;
+
 // @public
 export const ModalBase: FC<ModalBaseProps>;
 
 // @public (undocumented)
-export interface ModalBaseProps extends Omit<PopupBaseProps, 'frame'> {
+export const modalBaseOverlayClass = "modal-base-overlay";
+
+// @public (undocumented)
+export interface ModalBaseProps extends PopupBaseProps {
     closeOnEsc?: boolean;
     closeOnOverlayClick?: boolean;
-    focusAfterRef?: React_2.RefObject<HTMLElement>;
-    initialFocusRef?: React_2.RefObject<HTMLElement>;
+    focusAfterRef?: React.RefObject<HTMLElement>;
+    initialFocusRef?: React.RefObject<HTMLElement>;
     onClose?: () => void;
     onEscKeyDown?: (event: KeyboardEvent) => void;
-    onOverlayClick?: (event: React_2.MouseEvent<HTMLDivElement>) => void;
+    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     withBlur?: boolean;
 }
 
+// @public (undocumented)
+export type ModalBaseRootProps = PopupRootProps & Pick<ModalBaseProps, 'initialFocusRef' | 'focusAfterRef' | 'onClose'>;
+
+// @public
+export const ModalOverlay: FC<ModalOverlayProps>;
+
+// @public (undocumented)
+export type ModalOverlayProps = Pick<PopupRootProps, 'id' | 'animationInfo' | 'zIndex'> & Pick<ModalBaseProps, 'withBlur' | 'closeOnOverlayClick' | 'onOverlayClick' | 'onClose'>;
+
 // @public (undocumented)
 export const monthLongName: (val: number) => string;
 
@@ -835,6 +852,18 @@ 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>>;
 
@@ -845,13 +874,14 @@ export const PopupBase: React_2.ForwardRefExoticComponent<PopupBaseProps & React
 export type PopupBasePlacement = BasicPopupBasePlacement | MixedPopupBasePlacement;
 
 // @public (undocumented)
-export interface PopupBaseProps extends React_2.HTMLAttributes<HTMLDivElement> {
-    children?: React_2.ReactNode;
-    frame?: 'document' | React_2.RefObject<HTMLElement>;
+export interface PopupBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    animationInfo?: PopupAnimationInfo;
+    children?: React.ReactNode;
+    frame?: 'document' | React.RefObject<HTMLElement>;
     isOpen: boolean;
     // (undocumented)
-    offset?: [number | string, number | string];
-    overlay?: React_2.ReactNode;
+    offset?: [number, number] | [string, string];
+    overlay?: React.ReactNode;
     // (undocumented)
     placement?: PopupBasePlacement;
     popupInfo?: PopupInfo;
@@ -863,6 +893,12 @@ export const PopupBaseProvider: React_2.FC<{
     children: ReactNode;
 }>;
 
+// @public
+export const PopupBaseRoot: React_2.ForwardRefExoticComponent<PopupRootProps & React_2.RefAttributes<HTMLDivElement>>;
+
+// @public (undocumented)
+export const popupBaseRootClass = "popup-base-root";
+
 // @public (undocumented)
 export interface PopupContextType {
     // (undocumented)
@@ -893,6 +929,14 @@ export interface PopupProps extends HTMLAttributes<HTMLDivElement> {
     trigger: 'hover' | 'click';
 }
 
+// @public (undocumented)
+export interface PopupRootProps extends Omit<PopupBaseProps, 'isOpen' | 'overlay'> {
+    // (undocumented)
+    id: string;
+    // (undocumented)
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
 // @public
 export const Price: React_2.FC<PriceProps>;
 
@@ -1318,6 +1362,13 @@ 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: {
@@ -1326,6 +1377,17 @@ 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;
 
@@ -1430,6 +1492,7 @@ 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.d.ts

@@ -1,40 +1,5 @@
-import React, { FC } from 'react';
-import { PopupBaseProps } from '../PopupBase/PopupBase';
-export interface ModalBaseProps extends Omit<PopupBaseProps, 'frame'> {
-    /**
-     * Нужно ли применять blur для подложки.
-     */
-    withBlur?: boolean;
-    /**
-     * Закрывать модальное окно при нажатии на ESC(по умолчанию true).
-     */
-    closeOnEsc?: boolean;
-    /**
-     * Закрывать модальное окно при нажатии вне области модального окна(по умолчанию true),
-     */
-    closeOnOverlayClick?: boolean;
-    /**
-     * Обработчик клика при нажатии на ESC(если не передан, то при нажатии используется onClose).
-     */
-    onEscKeyDown?: (event: KeyboardEvent) => void;
-    /**
-     * Обработчик клика при нажатии вне области модального окна(если не передан, то при нажатии используется onClose).
-     */
-    onOverlayClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Первый элемент для фокуса внутри модального окна.
-     */
-    initialFocusRef?: React.RefObject<HTMLElement>;
-    /**
-     * Элемент для фокуса после закрытия модального окна
-     * (по умолчанию фокус на последнем перед открытием активном элементе).
-     */
-    focusAfterRef?: React.RefObject<HTMLElement>;
-    /**
-     * Общий обработчик клика по кнопке "закрыть".
-     */
-    onClose?: () => void;
-}
+import { FC } from 'react';
+import { ModalBaseProps } from './types';
 /**
  * ModalBase.
  * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.

package/components/ModalBase/ModalBase.js

@@ -1,33 +1,29 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ModalBase = void 0;
 
-var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+
+var _styledComponents = /*#__PURE__*/require("styled-components");
 
-var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
+var _PopupBase = /*#__PURE__*/require("../PopupBase/PopupBase");
 
 var _hooks = /*#__PURE__*/require("../../hooks");
 
-var _PopupBaseContext = /*#__PURE__*/require("../PopupBase/PopupBaseContext");
+var _ModalOverlay = /*#__PURE__*/require("./ModalOverlay");
 
-var _PopupBase = /*#__PURE__*/require("../PopupBase/PopupBase");
-
-var _ModalBaseContext = /*#__PURE__*/require("./ModalBaseContext");
+var _hooks2 = /*#__PURE__*/require("./hooks");
 
 var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
 
 var _NoScroll;
 
-var _excluded = ["id", "isOpen", "placement", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "children"];
-
-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); }
+var _excluded = ["id", "animationInfo", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children"];
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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); }
 
@@ -36,105 +32,59 @@ 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)('ModalBase/ModalBase');
-
-// TODO: новый отдельный оверлей #778
-var StyledOverlay = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma__sc-urf4on-0"
-})(["position:absolute;width:100%;height:100%;top:0;left:0;", " ", ";background-color:", ";backdrop-filter:var(--backdrop-filter);cursor:", ";"], function (_ref) {
-  var zIndex = _ref.zIndex;
-  return (0, _styledComponents.css)(["z-index:", ";"], zIndex || _PopupBase.DEFAULT_Z_INDEX);
-}, function (_ref2) {
-  var $withBlur = _ref2.$withBlur;
-  return (0, _styledComponents.css)(["--background-color:", ";--backdrop-filter:", ";"], $withBlur ? 'var(--plasma-modal-blur-overlay-color)' : 'var(--plasma-modal-overlay-color)', $withBlur ? 'blur(1rem)' : 'none');
-}, function (_ref3) {
-  var transparent = _ref3.transparent;
-  return transparent ? 'transparent' : 'var(--background-color)';
-}, function (_ref4) {
-  var clickable = _ref4.clickable;
-  return clickable ? 'pointer' : 'default';
-});
-
 var NoScroll = /*#__PURE__*/(0, _styledComponents.createGlobalStyle)(["body{overflow-y:hidden;}"]);
-var ESCAPE_KEYCODE = 27;
 /**
  * ModalBase.
  * Управляет показом/скрытием, подложкой и анимацией визуальной части модального окна.
  */
 
-var ModalBase = function ModalBase(_ref5) {
-  var id = _ref5.id,
-      isOpen = _ref5.isOpen,
-      placement = _ref5.placement,
-      onClose = _ref5.onClose,
-      onOverlayClick = _ref5.onOverlayClick,
-      onEscKeyDown = _ref5.onEscKeyDown,
-      _ref5$closeOnEsc = _ref5.closeOnEsc,
-      closeOnEsc = _ref5$closeOnEsc === void 0 ? true : _ref5$closeOnEsc,
-      _ref5$closeOnOverlayC = _ref5.closeOnOverlayClick,
-      closeOnOverlayClick = _ref5$closeOnOverlayC === void 0 ? true : _ref5$closeOnOverlayC,
-      withBlur = _ref5.withBlur,
-      initialFocusRef = _ref5.initialFocusRef,
-      focusAfterRef = _ref5.focusAfterRef,
-      children = _ref5.children,
-      rest = _objectWithoutProperties(_ref5, _excluded);
+var ModalBase = function ModalBase(_ref) {
+  var id = _ref.id,
+      animationInfo = _ref.animationInfo,
+      onClose = _ref.onClose,
+      onOverlayClick = _ref.onOverlayClick,
+      onEscKeyDown = _ref.onEscKeyDown,
+      _ref$closeOnEsc = _ref.closeOnEsc,
+      closeOnEsc = _ref$closeOnEsc === void 0 ? true : _ref$closeOnEsc,
+      _ref$closeOnOverlayCl = _ref.closeOnOverlayClick,
+      closeOnOverlayClick = _ref$closeOnOverlayCl === void 0 ? true : _ref$closeOnOverlayCl,
+      withBlur = _ref.withBlur,
+      initialFocusRef = _ref.initialFocusRef,
+      focusAfterRef = _ref.focusAfterRef,
+      zIndex = _ref.zIndex,
+      popupInfo = _ref.popupInfo,
+      children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
+  var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef);
   var uniqId = (0, _hooks.useUniqId)();
   var innerId = id || uniqId;
-  var popupController = (0, _PopupBaseContext.usePopupBaseContext)();
-  var trapRef = (0, _hooks.useFocusTrap)(true, initialFocusRef, focusAfterRef);
-  var onOverlayKeyDown = (0, _react.useCallback)(function (event) {
-    if (!closeOnOverlayClick) {
-      return;
-    }
-
-    if (onOverlayClick) {
-      onOverlayClick(event);
-      return;
-    }
-
-    if (onClose) {
-      onClose();
-    }
-  }, [closeOnOverlayClick, onOverlayClick, onClose]); // При ESC закрывает текущее окно, если это возможно
-
-  var onKeyDown = (0, _react.useCallback)(function (event) {
-    if (closeOnEsc && event.keyCode === ESCAPE_KEYCODE && (0, _ModalBaseContext.getIdLastModal)(popupController.items) === innerId) {
-      if (onEscKeyDown) {
-        onEscKeyDown(event);
-        return;
-      }
-
-      if (onClose) {
-        onClose();
-      }
-    }
-  }, [onClose, onEscKeyDown, popupController, closeOnEsc]);
-  (0, _react.useEffect)(function () {
-    window.addEventListener('keydown', onKeyDown);
-    return function () {
-      window.removeEventListener('keydown', onKeyDown);
-    };
-  }, [onClose, onEscKeyDown, popupController, closeOnEsc]);
-  var modalInfo = {
-    id: innerId,
-    info: {
-      isModal: true
-    }
-  };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, _NoScroll || (_NoScroll = /*#__PURE__*/_react["default"].createElement(NoScroll, null)), /*#__PURE__*/_react["default"].createElement(_PopupBase.PopupBase, _extends({
+
+  var _useModal = (0, _hooks2.useModal)({
     id: innerId,
-    frame: "document",
-    isOpen: isOpen,
-    placement: placement,
+    closeOnEsc: closeOnEsc,
+    onEscKeyDown: onEscKeyDown,
+    onClose: onClose,
+    popupInfo: popupInfo
+  }),
+      modalInfo = _useModal.modalInfo;
+
+  return /*#__PURE__*/_react["default"].createElement(_PopupBase.PopupBase, _extends({
+    id: id,
     ref: trapRef,
     popupInfo: modalInfo,
-    overlay: /*#__PURE__*/_react["default"].createElement(StyledOverlay, {
-      transparent: (0, _ModalBaseContext.getIdLastModal)(popupController.items) !== innerId,
-      clickable: closeOnOverlayClick,
-      onClick: onOverlayKeyDown,
-      $withBlur: withBlur
+    animationInfo: animationInfo,
+    zIndex: zIndex,
+    overlay: /*#__PURE__*/_react["default"].createElement(_ModalOverlay.ModalOverlay, {
+      id: innerId,
+      withBlur: withBlur,
+      onOverlayClick: onOverlayClick,
+      onClose: onClose,
+      animationInfo: animationInfo,
+      zIndex: zIndex,
+      closeOnOverlayClick: closeOnOverlayClick
     })
-  }, rest), children));
+  }, rest), _NoScroll || (_NoScroll = /*#__PURE__*/_react["default"].createElement(NoScroll, null)), children);
 };
 
 exports.ModalBase = ModalBase;

package/components/ModalBase/ModalBaseContext.d.ts

@@ -1,8 +1,9 @@
-import { PopupInfo } from '../PopupBase/PopupBaseContext';
+import { PopupInfo } from '../PopupBase';
 export interface ModalInfo extends PopupInfo {
     id: string;
     info?: {
         isModal?: true;
     };
 }
-export declare const getIdLastModal: (items: ModalInfo[]) => string;
+export declare const getIdLastModal: (items: ModalInfo[]) => string | undefined;
+export declare const getIdFirstModal: (items: ModalInfo[]) => string | undefined;

package/components/ModalBase/ModalBaseContext.js

@@ -3,25 +3,39 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getIdLastModal = void 0;
+exports.getIdFirstModal = exports.getIdLastModal = void 0;
 
 /**
  * Взаимодействие с модальными оконами.
  */
-var getLastModal = function getLastModal(items) {
-  var modals = items.filter(function (item) {
+var getModals = function getModals(items) {
+  return items.filter(function (item) {
     var _item$info;
 
     return item === null || item === void 0 ? void 0 : (_item$info = item.info) === null || _item$info === void 0 ? void 0 : _item$info.isModal;
   });
-  var lastModal = modals && modals[modals.length - 1];
-  return lastModal;
 };
 
 var getIdLastModal = function getIdLastModal(items) {
-  var _getLastModal;
+  var modals = getModals(items);
 
-  return (_getLastModal = getLastModal(items)) === null || _getLastModal === void 0 ? void 0 : _getLastModal.id;
+  if (!modals.length) {
+    return;
+  }
+
+  return modals[modals.length - 1].id;
+};
+
+exports.getIdLastModal = getIdLastModal;
+
+var getIdFirstModal = function getIdFirstModal(items) {
+  var modals = getModals(items);
+
+  if (!modals.length) {
+    return;
+  }
+
+  return modals[0].id;
 };
 
-exports.getIdLastModal = getIdLastModal;
+exports.getIdFirstModal = getIdFirstModal;

package/components/ModalBase/ModalOverlay.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+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;
+}, never>;
+/**
+ * ModalOverlay - подложка для ModalBase.
+ */
+export declare const ModalOverlay: FC<ModalOverlayProps>;

package/components/ModalBase/ModalOverlay.js

@@ -0,0 +1,108 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalOverlay = exports.Overlay = exports.modalBaseOverlayClass = void 0;
+
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+
+var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
+
+var _PopupBaseRoot = /*#__PURE__*/require("../PopupBase/PopupBaseRoot");
+
+var _PopupBase = /*#__PURE__*/require("../PopupBase");
+
+var _ModalBaseContext = /*#__PURE__*/require("./ModalBaseContext");
+
+var _collectPackageInfo = /*#__PURE__*/require("../../collectPackageInfo");
+
+var _excluded = ["id", "withBlur", "onOverlayClick", "onClose", "animationInfo", "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); }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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)('ModalBase/ModalOverlay');
+
+/*
+ * Класс компонента ModalBaseOverlay: `modal-base-overlay`
+ */
+var modalBaseOverlayClass = 'modal-base-overlay'; // TODO: новый отдельный оверлей #778
+
+exports.modalBaseOverlayClass = modalBaseOverlayClass;
+
+var Overlay = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma__sc-1jo935d-0"
+})(["position:fixed;width:100%;height:100%;top:0;left:0;", " ", ";background-color:", ";backdrop-filter:var(--backdrop-filter);cursor:", ";"], function (_ref) {
+  var zIndex = _ref.zIndex;
+  return (0, _styledComponents.css)(["z-index:", ";"], zIndex || _PopupBaseRoot.DEFAULT_Z_INDEX);
+}, function (_ref2) {
+  var $withBlur = _ref2.$withBlur;
+  return (0, _styledComponents.css)(["--background-color:", ";--backdrop-filter:", ";"], $withBlur ? 'var(--plasma-modal-blur-overlay-color)' : 'var(--plasma-modal-overlay-color)', $withBlur ? 'blur(1rem)' : 'none');
+}, function (_ref3) {
+  var transparent = _ref3.transparent;
+  return transparent ? 'transparent' : 'var(--background-color)';
+}, function (_ref4) {
+  var clickable = _ref4.clickable;
+  return clickable ? 'pointer' : 'default';
+});
+/**
+ * ModalOverlay - подложка для ModalBase.
+ */
+
+
+exports.Overlay = Overlay;
+
+var ModalOverlay = function ModalOverlay(_ref5) {
+  var id = _ref5.id,
+      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,
+      rest = _objectWithoutProperties(_ref5, _excluded);
+
+  var popupController = (0, _PopupBase.usePopupBaseContext)();
+  var onModalOverlayKeyDown = (0, _react.useCallback)(function (event) {
+    if (!closeOnOverlayClick) {
+      return;
+    }
+
+    if (onOverlayClick) {
+      onOverlayClick(event);
+      return;
+    }
+
+    if (onClose) {
+      onClose();
+    }
+  }, [closeOnOverlayClick, onOverlayClick, onClose]);
+  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
+  }, rest));
+};
+
+exports.ModalOverlay = ModalOverlay;

package/components/ModalBase/hooks.d.ts

@@ -0,0 +1,5 @@
+import { ModalInfo } from './ModalBaseContext';
+import { ModalHookArgs } from './types';
+export declare const useModal: ({ id, popupInfo, onEscKeyDown, onClose, closeOnEsc }: ModalHookArgs) => {
+    modalInfo: ModalInfo;
+};