@salutejs/plasma-new-hope 0.146.1-canary.1412.10900761739.0 → 0.146.1-canary.1441.10902378762.0

package/styled-components/cjs/components/Popup/hooks/usePopup.js

@@ -18,7 +18,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-// Хук для подключения анимации
+// Хук для поключения анимации
 var usePopupAnimation = function usePopupAnimation() {
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),

package/styled-components/cjs/examples/plasma_b2c/components/Drawer/Drawer.stories.tsx

@@ -211,7 +211,7 @@ export const DrawerDemo: StoryObj<StoryDrawerProps> = {
         asModal: true,
         closePlacement: 'right',
         width: '25vw',
-        height: '100vh',
+        height: '100dvh',
         borderRadius: 'none',
     },
     render: (args) => <StoryDrawerDemo {...args} />,

package/styled-components/cjs/examples/plasma_b2c/components/Modal/Modal.stories.tsx

@@ -80,7 +80,7 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledWrapper = styled.div`
-    height: 300px;
+    height: 1200px;
 `;
 
 const Content = styled.div`

package/styled-components/cjs/examples/plasma_b2c/components/Popup/Popup.stories.tsx

@@ -55,7 +55,7 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledWrapper = styled.div`
-    height: 600px;
+    height: 1200px;
 `;
 
 const OtherContent = styled.div`

package/styled-components/cjs/examples/plasma_web/components/Modal/Modal.stories.tsx

@@ -80,7 +80,7 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledWrapper = styled.div`
-    height: 300px;
+    height: 1200px;
 `;
 
 const Content = styled.div`

package/styled-components/cjs/examples/plasma_web/components/Popup/Popup.stories.tsx

@@ -55,7 +55,7 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledWrapper = styled.div`
-    height: 600px;
+    height: 1200px;
 `;
 
 const OtherContent = styled.div`

package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx

@@ -37,17 +37,20 @@ export function App() {
 
 ### Формат даты
 Формат даты задается с помощью свойства `format`.
-| Обозначение | Отображение | Описание            |
-|-------------|-------------|---------------------|
-| DD          | 01-31       | Дни месяца, 2 цифры |
-| D           | 1-31        | Дни месяца          |
-| MM          | 01-12       | Месяц года, 2 цифры |
-| M           | 1-12        | Месяц года          |
-| YYYY        | 2024        | Год из 4 цифр       |
-| YY          | 24          | Год из 2 цифр       |
-| Q           | 1-4         | Квартал             |
+| Обозначение | Отображение                           | Описание                         |
+|-------------|---------------------------------------|----------------------------------|
+| DD          | 01-31                                 | Дни месяца, 2 цифры              |
+| D           | 1-31                                  | Дни месяца                       |
+| MMMM        | January...December / январь...декабрь | Месяц года, полное название      |
+| MMM         | Jan...Dec / янв.-дек.                 | Месяц года, сокращенное название |
+| MM          | 01-12                                 | Месяц года, 2 цифры              |
+| M           | 1-12                                  | Месяц года                       |
+| YYYY        | 2024                                  | Год из 4 цифр                    |
+| YY          | 24                                    | Год из 2 цифр                    |
+| Q           | 1-4                                   | Квартал                          |
+
 При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату.
-Свойство `maskWithFormat` позволяет маскировать ввод:
+Свойство `maskWithFormat` позволяет маскировать ввод, кроме случаев когда месяц имеет формат полной записи MMMM:
 
 ```tsx live
 import React from 'react';

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js

@@ -113,7 +113,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState8 = _slicedToArray(_useState7, 2),
       calendarFirstValue = _useState8[0],
       setCalendarFirstValue = _useState8[1];
-    var _useState9 = useState(formatInputValue(defaultFirstDate, format, lang)),
+    var _useState9 = useState(formatInputValue({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      })),
       _useState10 = _slicedToArray(_useState9, 2),
       inputFirstValue = _useState10[0],
       setInputFirstValue = _useState10[1];
@@ -121,7 +125,11 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState12 = _slicedToArray(_useState11, 2),
       calendarSecondValue = _useState12[0],
       setCalendarSecondValue = _useState12[1];
-    var _useState13 = useState(formatInputValue(defaultSecondDate, format, lang)),
+    var _useState13 = useState(formatInputValue({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      })),
       _useState14 = _slicedToArray(_useState13, 2),
       inputSecondValue = _useState14[0],
       setInputSecondValue = _useState14[1];
@@ -240,17 +248,33 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     }, [opened]);
     useEffect(function () {
       setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
+      setInputFirstValue(formatInputValue({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultFirstDate]);
     useEffect(function () {
       setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
+      setInputSecondValue(formatInputValue({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultSecondDate]);
     useEffect(function () {
       setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format, lang));
-      setInputFirstValue(formatInputValue(defaultFirstDate, format, lang));
+      setInputFirstValue(formatInputValue({
+        value: defaultFirstDate,
+        format: format,
+        lang: lang
+      }));
       setCalendarSecondValue(formatCalendarValue(defaultSecondDate, format, lang));
-      setInputSecondValue(formatInputValue(defaultSecondDate, format, lang));
+      setInputSecondValue(formatInputValue({
+        value: defaultSecondDate,
+        format: format,
+        lang: lang
+      }));
     }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: rootRef,

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -83,7 +83,11 @@ export var datePickerRoot = function datePickerRoot(Root) {
       _useState4 = _slicedToArray(_useState3, 2),
       calendarValue = _useState4[0],
       setCalendarValue = _useState4[1];
-    var _useState5 = useState(formatInputValue(defaultDate, format, lang)),
+    var _useState5 = useState(formatInputValue({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      })),
       _useState6 = _slicedToArray(_useState5, 2),
       inputValue = _useState6[0],
       setInputValue = _useState6[1];
@@ -149,11 +153,19 @@ export var datePickerRoot = function datePickerRoot(Root) {
     }, [opened]);
     useEffect(function () {
       setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue(defaultDate, format, lang));
+      setInputValue(formatInputValue({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      }));
     }, [defaultDate]);
     useEffect(function () {
       setCalendarValue(formatCalendarValue(defaultDate, format, lang));
-      setInputValue(formatInputValue(defaultDate, format, lang));
+      setInputValue(formatInputValue({
+        value: defaultDate,
+        format: format,
+        lang: lang
+      }));
     }, [format, lang]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       view: view,

package/styled-components/es/components/DatePicker/hooks/useDatePicker.js

@@ -1,5 +1,6 @@
 import { classes } from '../DatePicker.tokens';
 import { formatCalendarValue, formatInputValue, getDateFromFormat, getMaskedDateOnInput } from '../utils/dateHelper';
+import { customDayjs } from '../../../utils/datejs';
 export var useDatePicker = function useDatePicker(_ref) {
   var currentValue = _ref.currentValue,
     setInputValue = _ref.setInputValue,
@@ -38,10 +39,43 @@ export var useDatePicker = function useDatePicker(_ref) {
     var newValue = maskWithFormat ? getMaskedDateOnInput(value, format, dateFormatDelimiter(), currentValue) : value;
     if (!format) {
       setCalendarValue(formatCalendarValue(newValue));
-    } else if ((newValue === null || newValue === void 0 ? void 0 : newValue.length) === format.length) {
+      setInputValue(formatInputValue({
+        value: newValue,
+        format: format,
+        lang: lang
+      }));
+      onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
+      return;
+    }
+
+    /**
+     * NOTE: если в формате даты есть месяц в полном названии или сокращенном,
+     * нужно дополнительно проводить валидацию на полноту введенной даты.
+     * Иначе dayjs циклически будет пытаться отформатировать некорректную дату.
+     */
+    var hasMonthFullName = /M{3,4}/g.test(format);
+    var isValidMonth;
+    var isLengthEqual;
+    if (hasMonthFullName) {
+      customDayjs.locale(lang);
+      var firstIndexOfMonth = format.indexOf('M');
+      var lastIndexOfMonth = newValue.indexOf(dateFormatDelimiter(), firstIndexOfMonth);
+      var fullMonthName = !lastIndexOfMonth ? newValue.slice(firstIndexOfMonth) : newValue.slice(firstIndexOfMonth, lastIndexOfMonth);
+      var monthFormatting = format.replace(/[^M]/g, '');
+      isValidMonth = customDayjs("01 ".concat(fullMonthName, " 1970"), "DD ".concat(monthFormatting, " YYYY"), true).isValid();
+      isLengthEqual = format.length - monthFormatting.length === newValue.length - fullMonthName.length;
+    }
+    if (!hasMonthFullName && (newValue === null || newValue === void 0 ? void 0 : newValue.length) === (format === null || format === void 0 ? void 0 : format.length) || isValidMonth && isLengthEqual) {
       setCalendarValue(formatCalendarValue(newValue, format, lang));
     }
-    setInputValue(formatInputValue(newValue, format, lang));
+    setInputValue(formatInputValue({
+      value: newValue,
+      format: format,
+      lang: lang,
+      hasMonthFullName: hasMonthFullName,
+      isValidMonth: isValidMonth,
+      isLengthEqual: isLengthEqual
+    }));
     onChangeValue === null || onChangeValue === void 0 || onChangeValue(event, newValue);
   };
   var handleCommitDate = function handleCommitDate(date, applyFormat, isCalendarValue, dateInfo) {
@@ -55,8 +89,13 @@ export var useDatePicker = function useDatePicker(_ref) {
     }
     if (isCalendarValue) {
       setCalendarValue(formatCalendarValue(date, format, lang));
-      setInputValue(formatInputValue(date, format, lang));
-      return onCommitDate === null || onCommitDate === void 0 ? void 0 : onCommitDate(date, false, true, dateInfo);
+      setInputValue(formatInputValue({
+        value: date,
+        format: format,
+        lang: lang
+      }));
+      onCommitDate === null || onCommitDate === void 0 || onCommitDate(date, false, true, dateInfo);
+      return;
     }
     var formatString = applyFormat ? format : undefined;
     var _getDateFromFormat = getDateFromFormat(date, formatString, lang),
@@ -64,7 +103,11 @@ export var useDatePicker = function useDatePicker(_ref) {
       isError = _getDateFromFormat.isError,
       isSuccess = _getDateFromFormat.isSuccess;
     setCalendarValue(formatCalendarValue(newDate, format, lang));
-    setInputValue(formatInputValue(newDate, format, lang));
+    setInputValue(formatInputValue({
+      value: newDate,
+      format: format,
+      lang: lang
+    }));
     onCommitDate === null || onCommitDate === void 0 || onCommitDate(newDate, isError, isSuccess);
   };
   return {

package/styled-components/es/components/DatePicker/utils/dateHelper.js

@@ -1,8 +1,17 @@
 import { customDayjs } from '../../../utils/datejs';
-export var formatInputValue = function formatInputValue(value, format, lang) {
+export var formatInputValue = function formatInputValue(_ref) {
+  var value = _ref.value,
+    format = _ref.format,
+    lang = _ref.lang,
+    hasMonthFullName = _ref.hasMonthFullName,
+    isValidMonth = _ref.isValidMonth,
+    isLengthEqual = _ref.isLengthEqual;
   if (!value || !lang) {
     return '';
   }
+  if (hasMonthFullName && (!isValidMonth || !isLengthEqual)) {
+    return String(value);
+  }
   if (format && customDayjs(value, format, true).isValid()) {
     return customDayjs(value, format).locale(lang).format(format);
   }
@@ -56,7 +65,7 @@ export var getMaskedDateOnInput = function getMaskedDateOnInput(value, format, d
   if (!value) {
     return '';
   }
-  if (!format || !delimiter) {
+  if (!format || !delimiter || /M{3,4}/g.test(format)) {
     return value;
   }
   if (value.length >= format.length) {

package/styled-components/es/components/Popup/Popup.js

@@ -8,8 +8,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { forwardRef, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { useForkRef, safeUseId } from '@salutejs/plasma-core';
 import { cx } from '../../utils';
 import { Portal } from '../Portal';
@@ -17,7 +16,6 @@ import { POPUP_PORTAL_ID } from './PopupContext';
 import { PopupRoot } from './PopupRoot';
 import { usePopup } from './hooks';
 import { classes } from './Popup.tokens';
-import { StyledPortalContainer } from './Popup.styles';
 export var handlePosition = function handlePosition(placement, offset) {
   var x = '0rem';
   var y = '0rem';
@@ -41,8 +39,8 @@ export var handlePosition = function handlePosition(placement, offset) {
   var bottom;
   var transform;
   var placements = placement.split('-');
-  placements.forEach(function (placementValue) {
-    switch (placementValue) {
+  placements.forEach(function (placement) {
+    switch (placement) {
       case 'left':
         left = x;
         break;
@@ -75,139 +73,9 @@ export var handlePosition = function handlePosition(placement, offset) {
     transform: transform
   };
 };
-/*
-const getPortalParent = (frame: 'document' | string | React.RefObject<HTMLElement>, portalRef) => {
-    if (typeof frame !== 'string' && frame && frame.current) {
-        portalRef.current = frame.current;
-        return;
-    }
-
-    if (typeof frame === 'string' && frame !== 'document') {
-        const element = document.getElementById(frame);
-        if (element) {
-            const portal = document.createElement('div');
-            portal.className = 'frame-portal';
-            portal.style.position = 'relative';
-            portal.style.width = '0';
-
-            element.appendChild(portal);
-            portalRef.current = portal;
-
-            return;
-            //
-            // const portal = document?.querySelector('.frame-portal');
-            // if (!portal) {
-            //     portal = document.createElement('div');
-            //     document.getElementById(frame)?.appendChild(portal);
-            // }
-            // return portal;
-        }
-    }
-
-    const portal = document.getElementById(POPUP_PORTAL_ID);
-
-    if (!portal) {
-        ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
-    }
-
-    portalRef.current = portal;
-
-    let portal;
-
-        const hasFrame = typeof frame !== 'string' && frame && frame.current;
-        if (hasFrame) {
-            portal = frame.current;
-        } else {
-            // ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
-
-            portal = document.getElementById(POPUP_PORTAL_ID);
-
-            if (!portal) {
-                if (typeof frame === 'string' && frame !== 'document') {
-                    portal = document.createElement('div');
-                    document.getElementById(frame)?.appendChild(portal);
-                } else {
-                    portal.className('frame-portal');
-                    document.body.appendChild(portal);
-                    // ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
-                }
-            }
-        }
-
-};
-
-const usePortalContainer = (frame: 'document' | string | React.RefObject<HTMLElement>) => {
-    const portalRef = useRef<HTMLDivElement | null>(null);
-
-    if (typeof frame !== 'string' && frame && frame.current) {
-        return frame.current;
-    }
-
-    if (typeof frame === 'string' && frame !== 'document') {
-        const element = document.getElementById(frame);
-
-        const portal = document?.querySelector('.frame-portal');
-
-        if (portal) {
-            return portal;
-        }
-
-        if (element) {
-            const portal = document.createElement('div');
-            portal.className = 'frame-portal';
-            portal.style.position = 'relative';
-            // portal.style.width = '0';
-
-            element.appendChild(portal);
-            return portal;
-            //
-            // const portal = document?.querySelector('.frame-portal');
-            // if (!portal) {
-            //     portal = document.createElement('div');
-            //     document.getElementById(frame)?.appendChild(portal);
-            // }
-            // return portal;
-        }
-    }
-
-    const portal = document.getElementById(POPUP_PORTAL_ID);
-
-    if (!portal) {
-        const res = ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
-
-        console.log('!!! res', res);
-    }
-
-    console.log('!!!! portalRef.current', portalRef.current, document.getElementById(POPUP_PORTAL_ID));
-    return portalRef.current;
-
-    let portal;
-
-        const hasFrame = typeof frame !== 'string' && frame && frame.current;
-        if (hasFrame) {
-            portal = frame.current;
-        } else {
-            // ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
-
-            portal = document.getElementById(POPUP_PORTAL_ID);
-
-            if (!portal) {
-                if (typeof frame === 'string' && frame !== 'document') {
-                    portal = document.createElement('div');
-                    document.getElementById(frame)?.appendChild(portal);
-                } else {
-                    portal.className('frame-portal');
-                    document.body.appendChild(portal);
-                    // ReactDOM.createPortal(<StyledPortal id={POPUP_PORTAL_ID} ref={portalRef} />, document.body);
-                }
-            }
-        }
-
-};
-*/
 
 /**
- * Базовый компонент Popup.
+ * Базовый копмонент Popup.
  */
 export var popupRoot = function popupRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, outerRootRef) {
@@ -246,11 +114,44 @@ export var popupRoot = function popupRoot(Root) {
     var portalRef = useRef(null);
     var contentRef = useRef(null);
     var innerRef = useForkRef(contentRef, outerRootRef);
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      forceRender = _useState2[1];
+    useEffect(function () {
+      var portal = document.getElementById(POPUP_PORTAL_ID);
+      if (typeof frame !== 'string' && frame && frame.current) {
+        portal = frame.current;
+      }
+      if (!portal) {
+        portal = document.createElement('div');
+        portal.setAttribute('id', POPUP_PORTAL_ID);
+        /**
+         * Нужно для того, чтобы во фрейме не происходило скачков контента
+         * при анимации через transform, если есть элемент с шириной/высотой в 100% (Overlay)
+         */
+        portal.style.width = '0';
+        if (typeof frame === 'string' && frame !== 'document') {
+          var _document$getElementB;
+          (_document$getElementB = document.getElementById(frame)) === null || _document$getElementB === void 0 || _document$getElementB.appendChild(portal);
+        } else {
+          document.body.appendChild(portal);
+        }
+      }
+      portalRef.current = portal;
+
+      /**
+       * Изменение стейта нужно для того, чтобы Popup
+       * отобразился после записи DOM элемента в portalRef.current
+       */
+      forceRender(true);
+    }, []);
     if (!isVisible && !innerIsOpen) {
       return null;
     }
     var cls = cx(className, animationInfo !== null && animationInfo !== void 0 && animationInfo.endAnimation ? classes.endAnimation : '', animationInfo !== null && animationInfo !== void 0 && animationInfo.endTransition ? classes.endTransition : '');
-    var rootNode = /*#__PURE__*/React.createElement(Root, _extends({
+    return /*#__PURE__*/React.createElement(React.Fragment, null, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
+      container: portalRef.current
+    }, /*#__PURE__*/React.createElement(Root, _extends({
       className: cls
     }, rest), overlay, /*#__PURE__*/React.createElement(PopupRoot, {
       id: innerId,
@@ -260,25 +161,7 @@ export var popupRoot = function popupRoot(Root) {
       zIndex: zIndex,
       animationInfo: animationInfo,
       setVisible: setVisible
-    }, children));
-    if (typeof frame !== 'string' && frame && frame.current) {
-      return /*#__PURE__*/React.createElement(Portal, {
-        container: frame.current
-      }, rootNode);
-    }
-    var withFrameId = typeof frame === 'string' && frame !== 'document';
-    var containerElement = withFrameId && document.getElementById(frame);
-    if (containerElement) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(StyledPortalContainer, {
-        ref: portalRef
-      }, portalRef.current && /*#__PURE__*/React.createElement(Portal, {
-        container: portalRef.current
-      }, rootNode)), containerElement));
-    }
-    var globalPortal = typeof document !== 'undefined' && document.getElementById(POPUP_PORTAL_ID);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, globalPortal && /*#__PURE__*/React.createElement(Portal, {
-      container: globalPortal
-    }, rootNode));
+    }, children))));
   });
 };
 export var popupConfig = {

package/styled-components/es/components/Popup/Popup.styles.js

@@ -2,15 +2,12 @@ import styled from 'styled-components';
 import { DEFAULT_Z_INDEX } from './utils';
 export var StyledPortal = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-rkhnjn-0"
-})(["position:fixed;top:0;left:0;right:0;bottom:0;:empty{width:0;pointer-events:none;}:not(:empty){width:auto;pointer-events:auto;}"]);
-export var StyledPortalContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-rkhnjn-1"
-})(["width:0;"]);
+})([""]);
 export var PopupView = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-rkhnjn-2"
+  componentId: "plasma-new-hope__sc-rkhnjn-1"
 })(["position:relative;max-width:100%;pointer-events:all;"]);
 export var PopupRootContainer = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-rkhnjn-3"
+  componentId: "plasma-new-hope__sc-rkhnjn-2"
 })(["position:absolute;z-index:", ";left:", ";right:", ";top:", ";bottom:", ";transform:", ";"], function (_ref) {
   var zIndex = _ref.zIndex;
   return zIndex || DEFAULT_Z_INDEX;

package/styled-components/es/components/Popup/PopupContext.js

@@ -1,4 +1,3 @@
-var _StyledPortal;
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -9,19 +8,15 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { createContext, useState, useContext, useRef } from 'react';
-import ReactDOM from 'react-dom';
+import React, { createContext, useEffect, useState, useContext, useRef } from 'react';
 import { hasModals } from '../Modal/ModalContext';
-import { StyledPortal } from './Popup.styles';
 export var POPUP_PORTAL_ID = 'plasma-popup-root';
 var items = [];
 var PopupContext = /*#__PURE__*/createContext({
   items: items,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   register: function register(_info) {
     throw new Error('Function not implemented. Add PopupProvider');
   },
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   unregister: function unregister(_id) {
     throw new Error('Function not implemented. Add PopupProvider');
   }
@@ -32,7 +27,6 @@ export var usePopupContext = function usePopupContext() {
 export var PopupProvider = function PopupProvider(_ref) {
   var children = _ref.children;
   var prevBodyOverflowY = useRef(typeof document !== 'undefined' ? document.body.style.overflowY : '');
-  // eslint-disable-next-line no-shadow
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],
@@ -70,9 +64,15 @@ export var PopupProvider = function PopupProvider(_ref) {
     register: register,
     unregister: unregister
   };
+  useEffect(function () {
+    return function () {
+      var portal = document.createElement('div');
+      if (portal && document.body.contains(portal)) {
+        document.body.removeChild(portal);
+      }
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(PopupContext.Provider, {
     value: context
-  }, children, /*#__PURE__*/ReactDOM.createPortal(_StyledPortal || (_StyledPortal = /*#__PURE__*/React.createElement(StyledPortal, {
-    id: POPUP_PORTAL_ID
-  })), document.body));
+  }, children);
 };

package/styled-components/es/components/Popup/hooks/usePopup.js

@@ -13,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useEffect, useState } from 'react';
 import { usePopupContext } from '../PopupContext';
 
-// Хук для подключения анимации
+// Хук для поключения анимации
 var usePopupAnimation = function usePopupAnimation() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),

package/styled-components/es/examples/plasma_b2c/components/Drawer/Drawer.stories.tsx

@@ -211,7 +211,7 @@ export const DrawerDemo: StoryObj<StoryDrawerProps> = {
         asModal: true,
         closePlacement: 'right',
         width: '25vw',
-        height: '100vh',
+        height: '100dvh',
         borderRadius: 'none',
     },
     render: (args) => <StoryDrawerDemo {...args} />,

package/styled-components/es/examples/plasma_b2c/components/Modal/Modal.stories.tsx

@@ -80,7 +80,7 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledWrapper = styled.div`
-    height: 300px;
+    height: 1200px;
 `;
 
 const Content = styled.div`

package/styled-components/es/examples/plasma_b2c/components/Popup/Popup.stories.tsx

@@ -55,7 +55,7 @@ const StyledButton = styled(Button)`
 `;
 
 const StyledWrapper = styled.div`
-    height: 600px;
+    height: 1200px;
 `;
 
 const OtherContent = styled.div`