@salutejs/plasma-new-hope 0.119.0-canary.1347.10280706154.0 → 0.119.1-dev.0

package/styled-components/cjs/utils/tabbable.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isVisible = exports.isTabble = exports.isFocusable = exports.focusSelector = exports.findTabbableDescendants = void 0;
+var tabbableNode = /input|select|textarea|button|object/;
+var focusSelector = exports.focusSelector = /*#__PURE__*/['input', 'select', 'textarea', 'a', 'button', 'object', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
+var isHidden = function isHidden(el) {
+  return el.offsetWidth <= 0 && el.offsetHeight <= 0 || el.style.display === 'none' || el.style.visibility === 'hidden' || el.style.opacity === '0';
+};
+var isVisible = exports.isVisible = function isVisible(element, parentContainer) {
+  var parentElement = element;
+  while (parentElement) {
+    if (parentElement === parentContainer || parentElement === document.body) {
+      break;
+    }
+    if (isHidden(parentElement)) {
+      return false;
+    }
+    parentElement = parentElement.parentNode;
+  }
+  return true;
+};
+var getElementTabIndex = function getElementTabIndex(element) {
+  var tabIndex = element.getAttribute('tabindex');
+  return tabIndex === null ? NaN : parseInt(tabIndex, 10);
+};
+var isFocusable = exports.isFocusable = function isFocusable(element, parentContainer) {
+  var nodeName = element.nodeName.toLowerCase();
+  var isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
+  var res = tabbableNode.test(nodeName) && !element.disabled || (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN);
+  return Boolean(res) && isVisible(element, parentContainer);
+};
+var isTabble = exports.isTabble = function isTabble(element, parentContainer) {
+  var tabIndex = getElementTabIndex(element);
+  var isTabIndexNaN = Number.isNaN(tabIndex);
+  return (isTabIndexNaN || tabIndex >= 0) && isFocusable(element, parentContainer);
+};
+
+// Все элементы внутри данной ноды, до которых можно добраться табом
+var findTabbableDescendants = exports.findTabbableDescendants = function findTabbableDescendants(element) {
+  return Array.from(element.querySelectorAll(focusSelector)).filter(function (el) {
+    return isTabble(el, element);
+  });
+};

package/styled-components/cjs/utils/useFocusTrap.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFocusTrap = void 0;
+var _react = /*#__PURE__*/require("react");
+var _focusManager = /*#__PURE__*/require("../utils/focusManager");
+var _tabbable = /*#__PURE__*/require("../utils/tabbable");
+var _scopeTab = /*#__PURE__*/require("../utils/scopeTab");
+// Находим элемент для фокуса
+var getFocusElement = function getFocusElement(node, firstFocusSelector) {
+  var focusElement = null;
+  if (firstFocusSelector) {
+    if (typeof firstFocusSelector === 'string') {
+      focusElement = node.querySelector(firstFocusSelector);
+    } else if (firstFocusSelector.current) {
+      focusElement = firstFocusSelector.current;
+    }
+  }
+  if (!focusElement) {
+    var children = Array.from(node.querySelectorAll(_tabbable.focusSelector));
+    focusElement = children.find(function (el) {
+      return (0, _tabbable.isTabble)(el);
+    }) || null;
+  }
+
+  // Если ничего не нашлось, то может ли сама нода быть под фокусом
+  if (!focusElement && (0, _tabbable.isFocusable)(node)) {
+    focusElement = node;
+  }
+  return focusElement;
+};
+var processNode = function processNode(node, firstFocusSelector, ref) {
+  if (ref !== null && ref !== void 0 && ref.current) {
+    ref.current.removeEventListener('animationend', function () {
+      processNode(node, firstFocusSelector, ref);
+    });
+  }
+  var focusElement = getFocusElement(node, firstFocusSelector);
+  if (focusElement) {
+    focusElement.focus();
+  }
+};
+var focusManager = /*#__PURE__*/new _focusManager.FocusManager();
+
+/**
+ *  Захватывает фокус внутри DOM node.
+ * */
+var useFocusTrap = exports.useFocusTrap = function useFocusTrap() {
+  var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var firstFocusSelector = arguments.length > 1 ? arguments[1] : undefined;
+  var focusAfterNode = arguments.length > 2 ? arguments[2] : undefined;
+  var activeAfterAnimation = arguments.length > 3 ? arguments[3] : undefined;
+  var ref = (0, _react.useRef)();
+  var setRef = (0, _react.useCallback)(function (node) {
+    if (ref.current) {
+      focusManager.teardownScopedFocus();
+      focusManager.returnFocus();
+    }
+    if (active && node) {
+      focusManager.setupScopedFocus(node);
+      focusManager.markForFocusAfter(focusAfterNode);
+
+      // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
+      setTimeout(function () {
+        if (ref !== null && ref !== void 0 && ref.current && node.ownerDocument && activeAfterAnimation) {
+          ref.current.addEventListener('animationend', function () {
+            processNode(node, firstFocusSelector, ref);
+          });
+        } else if (node.ownerDocument) {
+          processNode(node, firstFocusSelector);
+        }
+      });
+      ref.current = node;
+      return;
+    }
+    ref.current = null;
+  }, [active, firstFocusSelector]);
+  (0, _react.useEffect)(function () {
+    if (!active) {
+      return;
+    }
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Tab' && ref.current) {
+        (0, _scopeTab.scopeTab)(ref.current, event);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [active]);
+  return setRef;
+};

package/styled-components/es/components/Accordion/Accordion.tokens.js

@@ -23,6 +23,7 @@ export var tokens = {
   accordionItemFocus: '--plasma-accordion-item-focus',
   accordionItemBorder: '--plasma-accordion-item-border',
   accordionItemBorderBottom: '--plasma-accordion-item-border-bottom',
+  accordionItemIconColor: '--plasma-accordion-item-color-icon',
   accordionItemTitleColor: '--plasma-accordion-item-title-color',
   accordionItemTitleFontFamily: '--plasma-accordion-item-title-font-family',
   accordionItemTitleFontSize: '--plasma-accordion-item-title-font-size',

package/styled-components/es/components/Accordion/ui/AccordionItem/AccordionItem.styles.js

@@ -33,10 +33,10 @@ export var StyledAccordionBody = /*#__PURE__*/styled.div.withConfig({
 })(["color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");overflow:hidden;padding-right:var(", ");padding-left:var(", ");text-align:left;"], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
 export var StyledArrow = /*#__PURE__*/styled(IconChevronDownFill).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-8"
-})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemTextColor);
+})(["pointer-events:none;user-select:none;color:var(", ");"], tokens.accordionItemIconColor);
 export var StyledMinus = /*#__PURE__*/styled(IconMinus).withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-9"
-})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemTextColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
+})(["pointer-events:none;user-select:none;color:var(", ");display:flex;align-items:center;position:absolute;top:0;left:0;&.", "{transition:0.2s;transform:rotate(90deg);}&.", "{transition:0.2s;transform:rotate(0deg);}"], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody);
 export var StyledPlus = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-20ij9z-10"
 })(["position:relative;height:1rem;display:flex;align-items:center;justify-content:center;width:1rem;"]);

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

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
+var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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."); }
@@ -39,7 +39,6 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       onScroll = _ref.onScroll,
       listMaxHeight = _ref.listMaxHeight,
       listWidth = _ref.listWidth,
-      portal = _ref.portal,
       filter = _ref.filter,
       onSuggestionSelect = _ref.onSuggestionSelect,
       _ref$threshold = _ref.threshold,
@@ -120,8 +119,6 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       offset: [0, 0],
       placement: getPlacements('bottom'),
       isFocusTrapped: false,
-      usePortal: Boolean(portal),
-      frame: portal,
       target: /*#__PURE__*/React.createElement(StyledTextField, _extends({
         value: value,
         onChange: handleChange,
@@ -149,13 +146,7 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       preventOverflow: false,
       ref: targetRef,
       listWidth: listWidth
-    }, renderList && renderList(finalResults) || Boolean(finalResults.length) && /*#__PURE__*/React.createElement(Root, {
-      view: view,
-      size: size,
-      labelPlacement: labelPlacement,
-      disabled: disabled,
-      readOnly: readOnly
-    }, /*#__PURE__*/React.createElement(Ul, {
+    }, renderList && renderList(finalResults) || Boolean(finalResults.length) && /*#__PURE__*/React.createElement(Ul, {
       id: listId,
       role: "listbox",
       "aria-label": label,
@@ -169,7 +160,7 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
         id: "".concat(listId, "/").concat(index),
         focused: focused === index
       });
-    }), renderListEnd && /*#__PURE__*/React.createElement(InfiniteLoaderWrapper, null, renderListEnd())))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+    }), renderListEnd && /*#__PURE__*/React.createElement(InfiniteLoaderWrapper, null, renderListEnd()))), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
       id: helperTextId,
       disabled: disabled,
       readOnly: readOnly

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

@@ -3,11 +3,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 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; }
 import React, { forwardRef, useCallback, useMemo } from 'react';
-import { useFocusTrap, useForkRef, safeUseId } from '@salutejs/plasma-core';
+import { useForkRef, safeUseId } from '@salutejs/plasma-core';
 import { component } from '../../engines';
 import { popupConfig, usePopupContext } from '../Popup';
 import { Overlay } from '../Overlay';
 import { DEFAULT_Z_INDEX } from '../Popup/utils';
+import { useFocusTrap } from '../../hooks';
 import { classes, tokens } from './Modal.tokens';
 import { useModal } from './hooks';
 import { base as viewCSS } from './variations/_view/base';
@@ -40,7 +41,7 @@ export var modalRoot = function modalRoot(Root) {
       view = _ref.view,
       isOpen = _ref.isOpen,
       rest = _objectWithoutProperties(_ref, _excluded);
-    var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);
+    var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
     var popupController = usePopupContext();
     var innerRef = useForkRef(trapRef, outerRootRef);
     var uniqId = safeUseId();

package/styled-components/es/components/Notification/NotificationsPortal.js

@@ -4,6 +4,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; }
 import React, { useMemo } from 'react';
 import { useStoreon } from 'storeon/react';
+import styled from 'styled-components';
+import { popupBaseRootClass } from '@salutejs/plasma-core';
 import { PopupProvider, popupConfig } from '../Popup';
 import { component } from '../../engines';
 import { cx } from '../../utils';
@@ -13,6 +15,9 @@ import { classes } from './Notification.tokens';
 
 // issue #823
 var Popup = /*#__PURE__*/component(popupConfig);
+var StyledPopup = /*#__PURE__*/styled(Popup).withConfig({
+  componentId: "plasma-new-hope__sc-9pvo2x-0"
+})(["& > .", "{overflow:hidden;}"], popupBaseRootClass);
 
 /**
  * Обертка для визуального представления уведомлений.
@@ -25,7 +30,7 @@ export var NotificationsPortal = function NotificationsPortal(_ref) {
   var Notification = useMemo(function () {
     return component(config);
   }, []);
-  return /*#__PURE__*/React.createElement(PopupProvider, null, notifications.length > 0 && /*#__PURE__*/React.createElement(Popup, {
+  return /*#__PURE__*/React.createElement(PopupProvider, null, notifications.length > 0 && /*#__PURE__*/React.createElement(StyledPopup, {
     isOpen: true,
     frame: frame,
     placement: "bottom-right",

package/styled-components/es/examples/plasma_b2c/components/Accordion/Accordion.config.js

@@ -7,8 +7,8 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
-      clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
+      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
+      clear: /*#__PURE__*/css(["", ":0;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
     },
     size: {
       l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
@@ -6,6 +6,7 @@ import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
 import { WithTheme } from '../../../_helpers';
 
 import { Modal, modalClasses } from './Modal';
@@ -206,3 +207,114 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
+
+const StyledModalAnimation = styled(Modal)`
+    /* stylelint-disable */
+    && .${popupClasses.root} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    && .${modalClasses.overlay} {
+        animation: overlayFadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
+        animation: overlayFadeOut 1s forwards;
+    }
+    /* stylelint-enable */
+
+    @keyframes overlayFadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes overlayFadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translate(-50%, 100%);
+        }
+
+        to {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+
+        to {
+            opacity: 0;
+            transform: translate(-50%, 100%);
+        }
+    }
+`;
+
+const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const ref = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
+                <StyledModalAnimation
+                    id="modal"
+                    frame="theme-root"
+                    withAnimation
+                    onClose={() => setIsOpen(false)}
+                    isOpen={isOpen}
+                    placement={placement}
+                    offset={[offsetX, offsetY]}
+                    initialFocusRef={ref}
+                    {...rest}
+                >
+                    <Content>
+                        <TextField value="Text" onChange={() => {}} />
+                        <TextField ref={ref} value="Text2" onChange={() => {}} />
+                        <Button text="Закрыть" onClick={close} />
+                    </Content>
+                </StyledModalAnimation>
+            </PopupProvider>
+        </SSRProvider>
+    );
+};
+
+export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'bottom',
+        withAnimation: true,
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalAnimationDemo {...args} />,
+};

package/styled-components/es/examples/plasma_web/components/Accordion/Accordion.config.js

@@ -7,8 +7,8 @@ export var config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
-      clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
+      "default": /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") var(", ");", ":var(--surface-solid-card);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":var(--surface-clear);", ":none;", ":0;", ":var(", ");"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft, accordionTokens.accordionItemPaddingHorizontal),
+      clear: /*#__PURE__*/css(["", ":0.125rem;", ":20rem;", ":var(", ") 0rem;", ":var(--surface-clear);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-primary);", ":var(--surface-accent);", ":0rem !important;", ":var(--surface-clear);", ":none;", ":0.125rem solid var(--surface-solid-tertiary);", ":0;"], accordionTokens.accordionGap, accordionTokens.accordionWidth, accordionTokens.accordionItemPadding, accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemBackground, accordionTokens.accordionItemTitleColor, accordionTokens.accordionItemTextColor, accordionTokens.accordionItemIconColor, accordionTokens.accordionItemFocus, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionBackground, accordionTokens.accordionItemBorder, accordionTokens.accordionItemBorderBottom, accordionTokens.accordionItemPaddingHorizontalLeft)
     },
     size: {
       l: /*#__PURE__*/css(["", ":1.0625rem;", ":1.25rem;", ":0.5rem;", ":0.875rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], accordionTokens.accordionItemPaddingVertical, accordionTokens.accordionItemPaddingHorizontal, accordionTokens.accordionItemGap, accordionTokens.accordionItemBorderRadius, accordionTokens.accordionItemTitleFontFamily, accordionTokens.accordionItemTitleFontSize, accordionTokens.accordionItemTitleFontStyle, accordionTokens.accordionItemTitleFontWeight, accordionTokens.accordionItemTitleLetterSpacing, accordionTokens.accordionItemTitleLineHeight, accordionTokens.accordionItemTextFontFamily, accordionTokens.accordionItemTextFontSize, accordionTokens.accordionItemTextFontStyle, accordionTokens.accordionItemTextFontWeight, accordionTokens.accordionItemTextLetterSpacing, accordionTokens.accordionItemTextLineHeight),

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import styled from 'styled-components';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
@@ -6,6 +6,7 @@ import { SSRProvider } from '@salutejs/plasma-core';
 
 import { PopupProvider, popupClasses } from '../Popup/Popup';
 import { Button } from '../Button/Button';
+import { TextField } from '../TextField/TextField';
 import { WithTheme } from '../../../_helpers';
 
 import { Modal, modalClasses } from './Modal';
@@ -206,3 +207,114 @@ export const ModalDemo: StoryObj<StoryModalProps> = {
     },
     render: (args) => <StoryModalDemo {...args} />,
 };
+
+const StyledModalAnimation = styled(Modal)`
+    /* stylelint-disable */
+    && .${popupClasses.root} {
+        animation: fadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${popupClasses.root} {
+        animation: fadeOut 1s forwards;
+    }
+
+    && .${modalClasses.overlay} {
+        animation: overlayFadeIn 1s forwards;
+    }
+
+    &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
+        animation: overlayFadeOut 1s forwards;
+    }
+    /* stylelint-enable */
+
+    @keyframes overlayFadeIn {
+        from {
+            opacity: 0;
+        }
+
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes overlayFadeOut {
+        from {
+            opacity: 1;
+        }
+
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes fadeIn {
+        from {
+            opacity: 0;
+            transform: translate(-50%, 100%);
+        }
+
+        to {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+    }
+
+    @keyframes fadeOut {
+        from {
+            opacity: 1;
+            transform: translate(-50%, -50%);
+        }
+
+        to {
+            opacity: 0;
+            transform: translate(-50%, 100%);
+        }
+    }
+`;
+
+const StoryModalAnimationDemo = ({ placement, offsetX, offsetY, ...rest }: StoryModalProps) => {
+    const ref = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const close = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <Button view="default" text="Открыть новое модальное окно" onClick={() => setIsOpen(!isOpen)} />
+                <StyledModalAnimation
+                    id="modal"
+                    frame="theme-root"
+                    withAnimation
+                    onClose={() => setIsOpen(false)}
+                    isOpen={isOpen}
+                    placement={placement}
+                    offset={[offsetX, offsetY]}
+                    initialFocusRef={ref}
+                    {...rest}
+                >
+                    <Content>
+                        <TextField value="Text" onChange={() => {}} />
+                        <TextField ref={ref} value="Text2" onChange={() => {}} />
+                        <Button text="Закрыть" onClick={close} />
+                    </Content>
+                </StyledModalAnimation>
+            </PopupProvider>
+        </SSRProvider>
+    );
+};
+
+export const ModalBottomAnimation: StoryObj<StoryModalProps> = {
+    args: {
+        placement: 'bottom',
+        withAnimation: true,
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+    },
+    render: (args) => <StoryModalAnimationDemo {...args} />,
+};

package/styled-components/es/hooks/index.js

@@ -1,4 +1,5 @@
 export { useUniqId } from './useUniqId';
+export { useFocusTrap } from './useFocusTrap';
 export { usePreviousValue } from './usePreviousValue';
 export { useForceUpdate } from './useForceUpdate';
 export { useDidMountEffect } from './useDidMountEffect';

package/styled-components/es/hooks/useFocusTrap.js

@@ -0,0 +1,90 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { FocusManager } from '../utils/focusManager';
+import { focusSelector, isFocusable, isTabble } from '../utils/tabbable';
+import { scopeTab } from '../utils/scopeTab';
+
+// Находим элемент для фокуса
+var getFocusElement = function getFocusElement(node, firstFocusSelector) {
+  var focusElement = null;
+  if (firstFocusSelector) {
+    if (typeof firstFocusSelector === 'string') {
+      focusElement = node.querySelector(firstFocusSelector);
+    } else if (firstFocusSelector.current) {
+      focusElement = firstFocusSelector.current;
+    }
+  }
+  if (!focusElement) {
+    var children = Array.from(node.querySelectorAll(focusSelector));
+    focusElement = children.find(function (el) {
+      return isTabble(el);
+    }) || null;
+  }
+
+  // Если ничего не нашлось, то может ли сама нода быть под фокусом
+  if (!focusElement && isFocusable(node)) {
+    focusElement = node;
+  }
+  return focusElement;
+};
+var processNode = function processNode(node, firstFocusSelector, ref) {
+  if (ref !== null && ref !== void 0 && ref.current) {
+    ref.current.removeEventListener('animationend', function () {
+      processNode(node, firstFocusSelector, ref);
+    });
+  }
+  var focusElement = getFocusElement(node, firstFocusSelector);
+  if (focusElement) {
+    focusElement.focus();
+  }
+};
+var focusManager = /*#__PURE__*/new FocusManager();
+
+/**
+ *  Захватывает фокус внутри DOM node.
+ * */
+export var useFocusTrap = function useFocusTrap() {
+  var active = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+  var firstFocusSelector = arguments.length > 1 ? arguments[1] : undefined;
+  var focusAfterNode = arguments.length > 2 ? arguments[2] : undefined;
+  var focusAfterAnimation = arguments.length > 3 ? arguments[3] : undefined;
+  var ref = useRef();
+  var setRef = useCallback(function (node) {
+    if (ref.current) {
+      focusManager.teardownScopedFocus();
+      focusManager.returnFocus();
+    }
+    if (active && node) {
+      focusManager.setupScopedFocus(node);
+      focusManager.markForFocusAfter(focusAfterNode);
+
+      // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
+      setTimeout(function () {
+        if (ref !== null && ref !== void 0 && ref.current && node.ownerDocument && focusAfterAnimation) {
+          ref.current.addEventListener('animationend', function () {
+            processNode(node, firstFocusSelector, ref);
+          });
+        } else if (node.ownerDocument) {
+          processNode(node, firstFocusSelector);
+        }
+      });
+      ref.current = node;
+      return;
+    }
+    ref.current = null;
+  }, [active, firstFocusSelector]);
+  useEffect(function () {
+    if (!active) {
+      return;
+    }
+    var handleKeyDown = function handleKeyDown(event) {
+      if (event.key === 'Tab' && ref.current) {
+        scopeTab(ref.current, event);
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [active]);
+  return setRef;
+};