@salutejs/plasma-new-hope 0.377.0 → 0.377.1-dev.0

package/dist/emotion/es/components/Tour/components/Card/Card.js

@@ -1,18 +1,50 @@
-import React, { forwardRef } from "react";
-import { IconClose } from "../../../_Icon";
+import React, { forwardRef, useCallback, useRef } from "react";
 import cls from "classnames";
+import { IconClose } from "../../../_Icon";
+import { usePaginationDots } from "../../../PaginationDots/usePaginationDots";
 import { base as viewCSS } from "./variations/_view/base";
 import { base as sizeCSS } from "./variations/_size/base";
-import { CardText, CloseButton, Description, Dot, DotsContainer, Title, TourCard, Img, Controls, ActionButtonsContainer, SkipButtonContainer, CardBody } from "./Card.styles";
-import { classes } from "./Card.tokens";
-export const tourCardRoot = (Root)=>/*#__PURE__*/ forwardRef(({ view, size, image, title, description, orientation = 'horizontal', showPagination = true, stepCurrent = 0, stepLength = 0, actionButtons, skipButton, showClose = true, goToStep, onClose, style, className, ...rest }, outerRef)=>{
+import { CardText, CloseButton, Description, Dot, DotsContainer, Title, TourCard, Img, Controls, ActionButtonsContainer, SkipButtonContainer, CardBody, NumberContainer } from "./Card.styles";
+import { classes, tokens } from "./Card.tokens";
+export const tourCardRoot = (Root)=>/*#__PURE__*/ forwardRef(({ view, size, image, title, description, orientation = 'horizontal', contentDirection = 'row-reverse', showPagination = true, paginationVisibleItems = 3, paginationType = 'dot', stepCurrent = 0, stepLength = 0, actionButtons, skipButton, showClose = true, goToStep, onClose, style, className, ...rest }, outerRef)=>{
         // Если показан только текст, то к нему добавляется отступ снизу для компенсации.
         const onlyText = !showPagination && !actionButtons && !skipButton;
+        const paginationItems = useRef(Array(stepLength).fill(0).map((_, ind)=>({
+                id: ind + 1
+            })));
+        const { sliced, activeId } = usePaginationDots({
+            items: paginationItems.current,
+            index: stepCurrent,
+            visibleItems: Math.min(paginationVisibleItems, stepLength)
+        });
         const dotOnClick = (index)=>{
             if (goToStep) {
                 goToStep(index);
             }
         };
+        const getPaginationContent = useCallback(()=>{
+            const paginationContent = {
+                dot: /*#__PURE__*/ React.createElement(DotsContainer, {
+                    orientation: orientation,
+                    className: classes.pagination
+                }, sliced.map(({ id }, index)=>/*#__PURE__*/ React.createElement(Dot, {
+                        key: index,
+                        isActive: activeId === id,
+                        onClick: ()=>dotOnClick(index)
+                    }))),
+                compact: /*#__PURE__*/ React.createElement(NumberContainer, null, activeId, "/", stepLength)
+            };
+            if (orientation !== 'horizontal') {
+                return paginationContent.dot;
+            }
+            return paginationContent[paginationType];
+        }, [
+            sliced,
+            activeId,
+            stepLength,
+            orientation,
+            paginationType
+        ]);
         return /*#__PURE__*/ React.createElement(Root, {
             ref: outerRef,
             view: view,
@@ -21,11 +53,12 @@ export const tourCardRoot = (Root)=>/*#__PURE__*/ forwardRef(({ view, size, imag
         }, /*#__PURE__*/ React.createElement(TourCard, {
             className: cls(className, classes.card),
             style: style,
-            orientation: orientation
+            orientation: orientation,
+            contentDirection: contentDirection
         }, showClose && /*#__PURE__*/ React.createElement(CloseButton, {
             onClick: onClose
         }, /*#__PURE__*/ React.createElement(IconClose, {
-            size: "xs",
+            sizeCustomValue: `var(${tokens.closeButtonIconSize}, 1rem)`,
             color: "inherit"
         })), image && /*#__PURE__*/ React.createElement(Img, {
             ...image,
@@ -39,15 +72,9 @@ export const tourCardRoot = (Root)=>/*#__PURE__*/ forwardRef(({ view, size, imag
         }, title), /*#__PURE__*/ React.createElement(Description, {
             className: classes.description
         }, description)), /*#__PURE__*/ React.createElement(Controls, {
-            orientation: orientation
-        }, showPagination && /*#__PURE__*/ React.createElement(DotsContainer, {
             orientation: orientation,
-            className: classes.pagination
-        }, Array(stepLength).fill(null).map((_, index)=>/*#__PURE__*/ React.createElement(Dot, {
-                key: index,
-                isActive: stepCurrent === index,
-                onClick: ()=>dotOnClick(index)
-            }))), actionButtons && /*#__PURE__*/ React.createElement(ActionButtonsContainer, {
+            contentDirection: contentDirection
+        }, showPagination && getPaginationContent(), actionButtons && /*#__PURE__*/ React.createElement(ActionButtonsContainer, {
             orientation: orientation,
             className: classes.actionButtons
         }, actionButtons), skipButton && /*#__PURE__*/ React.createElement(SkipButtonContainer, {

package/dist/emotion/es/components/Tour/components/Card/Card.styles.js

@@ -7,50 +7,64 @@ export const IconButton = component(mergedConfig);
 const WIDTH_VERTICAL = 302;
 const WIDTH_HORIZONTAL = 720;
 export const TourCard = /*#__PURE__*/ styled("div", {
-    target: "ehootm0",
+    target: "en12sqi0",
     label: "TourCard"
-})("position:relative;display:flex;flex-direction:", ({ orientation })=>orientation === 'horizontal' ? 'row-reverse' : 'column', ";padding:var(", tokens.padding, ");background:var(", tokens.background, ");border-radius:var(", tokens.borderRadius, ");box-sizing:border-box;width:", ({ orientation })=>orientation === 'horizontal' ? WIDTH_HORIZONTAL : WIDTH_VERTICAL, "px;height:", ({ orientation })=>orientation === 'horizontal' ? `${WIDTH_VERTICAL}px` : 'auto', ";max-height:", ({ orientation })=>orientation === 'horizontal' ? WIDTH_VERTICAL : WIDTH_HORIZONTAL, "px;gap:", ({ orientation })=>orientation === 'horizontal' ? `var(${tokens.gap})` : '0', ";");
+})("position:relative;display:flex;flex-direction:", ({ orientation, contentDirection })=>{
+    if (orientation === 'vertical') {
+        return 'column';
+    }
+    return contentDirection;
+}, ";padding:var(", tokens.padding, ");background:var(", tokens.background, ");border-radius:var(", tokens.borderRadius, ");box-sizing:border-box;width:", ({ orientation })=>orientation === 'horizontal' ? WIDTH_HORIZONTAL : WIDTH_VERTICAL, "px;height:", ({ orientation })=>orientation === 'horizontal' ? `${WIDTH_VERTICAL}px` : 'auto', ";max-height:", ({ orientation })=>orientation === 'horizontal' ? WIDTH_VERTICAL : WIDTH_HORIZONTAL, "px;gap:", ({ orientation })=>orientation === 'horizontal' ? `var(${tokens.gap})` : '0', ";");
 export const CardBody = /*#__PURE__*/ styled("div", {
-    target: "ehootm1",
+    target: "en12sqi1",
     label: "CardBody"
 })("display:flex;flex-direction:column;flex:1;");
 export const Img = /*#__PURE__*/ styled("img", {
-    target: "ehootm2",
+    target: "en12sqi2",
     label: "Img"
-})("width:", ({ orientation })=>orientation === 'horizontal' ? 'auto' : '100%', ";height:", ({ orientation })=>orientation === 'horizontal' ? '100%' : 'auto', ";border-radius:calc(var(", tokens.borderRadius, ") - var(", tokens.padding, "));");
+})("width:", ({ orientation })=>orientation === 'horizontal' ? 'auto' : '100%', ";height:", ({ orientation })=>orientation === 'horizontal' ? '100%' : 'auto', ";border-radius:var(", tokens.imageBorderRadius, ",calc(var(", tokens.borderRadius, ") - var(", tokens.padding, ")));margin:var(", tokens.imageMargin, ");");
 export const CardText = /*#__PURE__*/ styled("div", {
-    target: "ehootm3",
+    target: "en12sqi3",
     label: "CardText"
-})("display:flex;flex-direction:column;flex:1;padding:var(", tokens.textPadding, ");padding:", ({ onlyText })=>onlyText ? `var(${tokens.textPaddingExtra})` : `var(${tokens.textPadding})`, ";gap:var(", tokens.textGap, ");");
+})("display:flex;flex-direction:column;flex:1;padding:", ({ onlyText })=>onlyText ? `var(${tokens.textPaddingExtra})` : `var(${tokens.textPadding})`, ";gap:var(", tokens.textGap, ");");
 export const Title = /*#__PURE__*/ styled("span", {
-    target: "ehootm4",
+    target: "en12sqi4",
     label: "Title"
 })("color:var(", tokens.titleColor, ");font-family:var(", tokens.titleFontFamily, ");font-size:var(", tokens.titleFontSize, ");font-style:var(", tokens.titleFontStyle, ");letter-spacing:var(", tokens.titleFontLetterSpacing, ");line-height:var(", tokens.titleFontLineHeight, ");font-weight:var(", tokens.titleFontWeight, ");");
 export const Description = /*#__PURE__*/ styled("span", {
-    target: "ehootm5",
+    target: "en12sqi5",
     label: "Description"
 })("color:var(", tokens.descriptionColor, ");font-family:var(", tokens.descriptionFontFamily, ");font-size:var(", tokens.descriptionFontSize, ");font-style:var(", tokens.descriptionFontStyle, ");line-height:var(", tokens.descriptionFontLineHeight, ");font-weight:var(", tokens.descriptionFontWeight, ");");
 export const Controls = /*#__PURE__*/ styled("div", {
-    target: "ehootm6",
+    target: "en12sqi6",
     label: "Controls"
-})("display:flex;flex-direction:", ({ orientation })=>orientation === 'horizontal' ? 'row' : 'column', ";align-items:", ({ orientation })=>orientation === 'horizontal' ? 'center' : 'stretch', ";justify-content:", ({ orientation })=>orientation === 'horizontal' ? 'space-between' : 'normal', ";");
+})("display:flex;flex-direction:", ({ orientation, contentDirection })=>{
+    if (orientation === 'vertical') {
+        return 'column';
+    }
+    return contentDirection === 'row-reverse' ? 'row' : 'row-reverse';
+}, ";align-items:", ({ orientation })=>orientation === 'horizontal' ? 'center' : 'stretch', ";justify-content:", ({ orientation })=>orientation === 'horizontal' ? 'space-between' : 'normal', ";");
+export const NumberContainer = /*#__PURE__*/ styled("div", {
+    target: "en12sqi7",
+    label: "NumberContainer"
+})("color:var(", tokens.paginationNumberColor, ");font-family:var(", tokens.paginationNumberFontFamily, ");font-size:var(", tokens.paginationNumberFontSize, ");font-style:var(", tokens.paginationNumberFontStyle, ");line-height:var(", tokens.paginationNumberFontLineHeight, ");font-weight:var(", tokens.paginationNumberFontWeight, ");text-align:center;");
 export const DotsContainer = /*#__PURE__*/ styled("ul", {
-    target: "ehootm7",
+    target: "en12sqi8",
     label: "DotsContainer"
-})("display:flex;align-items:center;justify-content:center;margin:", ({ orientation })=>orientation === 'horizontal' ? '0 0 0 8px' : `var(${tokens.dotContainerMargin})`, ";padding:0;list-style:none;gap:var(", tokens.dotsGap, ");");
+})("display:flex;align-items:center;justify-content:center;margin:", ({ orientation })=>orientation === 'horizontal' ? '0 0 0 0.5rem' : `var(${tokens.dotContainerMargin})`, ";padding:0;list-style:none;gap:var(", tokens.dotsGap, ");");
 export const Dot = /*#__PURE__*/ styled("li", {
-    target: "ehootm8",
+    target: "en12sqi9",
     label: "Dot"
 })("width:var(", tokens.dotSize, ");height:var(", tokens.dotSize, ");cursor:pointer;border-radius:50%;background:", ({ isActive })=>isActive ? `var(${tokens.dotActiveBackground})` : `var(${tokens.dotBackground})`, ";transition:background 0.3s ease-in-out;&:hover{background:", ({ isActive })=>isActive ? `var(${tokens.dotActiveBackgroundHover},var(${tokens.dotActiveBackground}))` : `var(${tokens.dotBackgroundHover})`, ";}&:active{background:", ({ isActive })=>isActive ? `var(${tokens.dotActiveBackgroundActive}, var(${tokens.dotActiveBackground}))` : `var(${tokens.dotBackgroundActive})`, ";}");
 export const ActionButtonsContainer = /*#__PURE__*/ styled("div", {
-    target: "ehootm9",
+    target: "en12sqi10",
     label: "ActionButtonsContainer"
 })("margin:", ({ orientation })=>orientation === 'horizontal' ? '0' : `var(${tokens.actionButtonsMargin})`, ";order:", ({ orientation })=>orientation === 'horizontal' ? '-1' : 'auto', ";");
 export const SkipButtonContainer = /*#__PURE__*/ styled("div", {
-    target: "ehootm10",
+    target: "en12sqi11",
     label: "SkipButtonContainer"
 })("display:flex;justify-content:center;margin:", ({ orientation })=>orientation === 'horizontal' ? '0 0 0 8px' : `var(${tokens.skipButtonMargin})`, ";");
 export const CloseButton = /*#__PURE__*/ styled(IconButton, {
-    target: "ehootm11",
+    target: "en12sqi12",
     label: "CloseButton"
 })("position:absolute;top:1rem;right:1rem;", iconButtonTokens.iconButtonColor, ":var(", tokens.closeButtonColor, ");", iconButtonTokens.iconButtonBackgroundColor, ":var(", tokens.closeButtonBackgroundColor, ");", iconButtonTokens.iconButtonColorHover, ":var(", tokens.closeButtonColorHover, ");", iconButtonTokens.iconButtonColorActive, ":var(", tokens.closeButtonColorActive, ");", iconButtonTokens.iconButtonHeight, ":var(", tokens.closeButtonWidth, ");", iconButtonTokens.iconButtonWidth, ":var(", tokens.closeButtonHeight, ");", iconButtonTokens.iconButtonRadius, ":var(", tokens.closeButtonRadius, ");", iconButtonTokens.iconButtonFocusColor, ":var(", tokens.closeButtonFocusColor, ");");

package/dist/emotion/es/components/Tour/components/Card/Card.tokens.js

@@ -11,6 +11,8 @@ export const tokens = {
     background: '--sdds-core-tour-card-card-background',
     borderRadius: '--sdds-core-tour-card-border-radius',
     gap: '--sdds-core-tour-card-gap',
+    imageBorderRadius: '--sdds-core-tour-card-image-border-radius',
+    imageMargin: '--sdds-core-tour-card-image-margin',
     textPadding: '--sdds-core-tour-card-text-padding',
     textPaddingExtra: '--sdds-core-tour-card-text-padding-extra',
     textGap: '--sdds-core-tour-card-text-gap',
@@ -27,6 +29,12 @@ export const tokens = {
     descriptionFontStyle: '--sdds-core-tour-card-description-font-style',
     descriptionFontLineHeight: '--sdds-core-tour-card-description-font-line-height',
     descriptionFontWeight: '--sdds-core-tour-card-description-font-weight',
+    paginationNumberColor: '--sdds-core-tour-card-pagination-number-color',
+    paginationNumberFontFamily: '--sdds-core-tour-card-pagination-number-font-family',
+    paginationNumberFontSize: '--sdds-core-tour-card-pagination-number-font-size',
+    paginationNumberFontStyle: '--sdds-core-tour-card-pagination-number-font-style',
+    paginationNumberFontLineHeight: '--sdds-core-tour-card-pagination-number-font-line-height',
+    paginationNumberFontWeight: '--sdds-core-tour-card-pagination-number-font-weight',
     dotsGap: '--sdds-core-tour-card-pagination-dots-gap',
     dotSize: '--sdds-core-tour-card-pagination-dot-size',
     dotBackground: '--sdds-core-tour-card-pagination-dot-background',
@@ -38,6 +46,7 @@ export const tokens = {
     dotContainerMargin: '--sdds-core-tour-card-pagination-dot-container-margin',
     actionButtonsMargin: '--sdds-core-tour-card-actions-buttons-margin',
     skipButtonMargin: '--sdds-core-tour-card-skip-button-margin',
+    closeButtonIconSize: '--sdds-core-tour-card-close-button-icon-size',
     closeButtonWidth: '--sdds-core-tour-card-close-button-width',
     closeButtonHeight: '--sdds-core-tour-card-close-button-height',
     closeButtonRadius: '--sdds-core-tour-card-close-button-radius',

package/dist/emotion/es/components/_Icon/Icons/IconChevronDown.js

@@ -1,11 +1,12 @@
 import React from "react";
 import { ChevronDown } from "../Icon.assets/ChevronDown";
 import { IconRoot } from "../IconRoot";
-export const IconChevronDown = ({ size = 'xs', color, className })=>{
+export const IconChevronDown = ({ size = 'xs', color, className, ...rest })=>{
     return /*#__PURE__*/ React.createElement(IconRoot, {
         className: className,
         size: size,
         color: color,
-        icon: ChevronDown
+        icon: ChevronDown,
+        ...rest
     });
 };

package/dist/emotion/es/components/_Icon/Icons/IconClose.js

@@ -1,13 +1,14 @@
 import React from "react";
 import { Close } from "../Icon.assets/Close";
 import { IconRoot } from "../IconRoot";
-export const IconClose = ({ size = 's', color, className, sizeCustomProperty, sizeCustomValue })=>{
+export const IconClose = ({ size = 's', color, className, sizeCustomProperty, sizeCustomValue, ...rest })=>{
     return /*#__PURE__*/ React.createElement(IconRoot, {
         className: className,
         size: size,
         color: color,
         sizeCustomProperty: sizeCustomProperty,
         sizeCustomValue: sizeCustomValue,
-        icon: Close
+        icon: Close,
+        ...rest
     });
 };

package/dist/emotion/es/components/_beta/Popover/Popover.styles.js

@@ -1,17 +1,17 @@
 import styled from "@emotion/styled";
 import { css } from "@emotion/react";
 import { tokens } from "./Popover.tokens";
-export const base = /*#__PURE__*/ css("border-radius:var(", tokens.borderRadius, ");", "base");
+export const base = /*#__PURE__*/ css("border-radius:var(", tokens.borderRadius, ");outline:none;", "base");
 export const Wrapper = /*#__PURE__*/ styled("div", {
-    target: "ee7owtj0",
+    target: "ej4v1ln0",
     label: "Wrapper"
 })("position:relative;background:var(", tokens.backgroundColor, ");padding:var(", tokens.padding, ");border-radius:var(", tokens.borderRadius, ");box-shadow:var(", tokens.boxShadow, ");filter:var(", tokens.dropShadow, ",none);width:100%;height:100%;box-sizing:border-box;");
 export const CloseButton = /*#__PURE__*/ styled("button", {
-    target: "ee7owtj1",
+    target: "ej4v1ln1",
     label: "CloseButton"
 })("position:absolute;top:var(", tokens.iconOffset, ");right:var(", tokens.iconOffset, ");padding:0;margin:0;border:none;background:none;cursor:pointer;line-height:0;color:var(", tokens.iconColor, ");&:hover{color:var(", tokens.iconColorHover, ");}&:active{color:var(", tokens.iconColorActive, ");}");
 export const Tail = /*#__PURE__*/ styled("div", {
-    target: "ee7owtj2",
+    target: "ej4v1ln2",
     label: "Tail"
 })("position:absolute;pointer-events:none;width:", ({ side })=>side === 'left' || side === 'right' ? `var(${tokens.tailHeight})` : `var(${tokens.tailWidth})`, ";height:", ({ side })=>side === 'left' || side === 'right' ? `var(${tokens.tailWidth})` : `var(${tokens.tailHeight})`, ";top:", ({ side })=>side === 'top' ? '100%' : 'auto', ";right:", ({ side })=>side === 'right' ? '100%' : 'auto', ";bottom:", ({ side })=>side === 'bottom' ? '100%' : 'auto', ";left:", ({ side })=>side === 'left' ? '100%' : 'auto', ";&::before{content:'';position:absolute;top:50%;left:50%;width:var(", tokens.tailWidth, ");height:var(", tokens.tailHeight, ");background:var(", tokens.backgroundColor, ");transform:translate(-50%,-50%)\n            ", ({ side })=>({
         top: 'rotate(180deg)',

package/dist/emotion/es/hooks/useFocusTrap.js

@@ -36,18 +36,20 @@ const processNode = (node, firstFocusSelector, ref)=>{
 const focusManager = new FocusManager();
 /**
  *  Захватывает фокус внутри DOM node.
- * */ export const useFocusTrap = (active = true, firstFocusSelector, focusAfterNode, focusAfterAnimation, enableOnFirstMount)=>{
+ * */ export const useFocusTrap = (active = true, firstFocusSelector, focusAfterNode, focusAfterAnimation, enableOnFirstMount, focusTrapSelectors)=>{
     const ref = useRef();
+    const focusTrapSelectorsRef = useRef(focusTrapSelectors);
+    focusTrapSelectorsRef.current = focusTrapSelectors;
     const setRef = useCallback((node)=>{
         if (!active) {
             return;
         }
         if (ref.current) {
-            focusManager.teardownScopedFocus();
+            focusManager.teardownScopedFocus(ref.current);
             focusManager.returnFocus();
         }
         if ((active || enableOnFirstMount) && node) {
-            focusManager.setupScopedFocus(node);
+            focusManager.setupScopedFocus(node, ()=>focusTrapSelectorsRef.current);
             focusManager.markForFocusAfter(focusAfterNode);
             // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
             setTimeout(()=>{
@@ -73,11 +75,13 @@ const focusManager = new FocusManager();
             return;
         }
         const handleKeyDown = (event)=>{
-            if (event.key === 'Tab' && ref.current) {
-                scopeTab(ref.current, event, active);
+            if (event.key === 'Tab' && ref.current && focusManager.isTopFocusNode(ref.current)) {
+                scopeTab(ref.current, event, active, focusTrapSelectorsRef.current);
                 if (enableOnFirstMount) {
                     setTimeout(()=>{
-                        focusManager.teardownScopedFocus();
+                        if (ref.current) {
+                            focusManager.teardownScopedFocus(ref.current);
+                        }
                     });
                 }
             }

package/dist/emotion/es/mixins/applySliderThumb.js

@@ -0,0 +1,33 @@
+/**
+ * Слои фона бегунка. Порядок: содержимое, заливка по padding-box, рамка по border-box.
+ */ const thumbLayers = (tokens, borderColorToken, innerContent)=>`
+    background: ${innerContent} no-repeat center,
+        linear-gradient(var(${tokens.background}, transparent), var(${tokens.background}, transparent)) padding-box,
+        var(${borderColorToken}, transparent) border-box;
+`;
+/**
+ * Миксин бегунка слайдера.
+ *
+ * Рамка рисуется слоем фона по border-box, а не через box-shadow: так её толщина может быть
+ * асимметричной, форма — эллиптической, а внутрь бегунка можно положить содержимое (innerContent).
+ *
+ * В обычном состоянии innerContent не показывается — только в hover/active/focus,
+ * см. applySliderThumbFocus.
+ */ export const applySliderThumb = (tokens)=>`
+    box-sizing: content-box;
+    width: var(${tokens.width});
+    height: var(${tokens.height}, var(${tokens.width}));
+    border-radius: var(${tokens.borderRadius}, 50%);
+    cursor: grab;
+
+    border-style: solid;
+    border-color: transparent;
+    border-width: var(${tokens.borderWidth}, 0);
+
+    transition: background-color 0.1s ease-in-out, background-image 0.1s ease-in-out;
+
+    ${thumbLayers(tokens, tokens.borderColor, 'none')}
+`;
+/**
+ * Состояния hover/active/focus бегунка: меняется цвет рамки и показывается innerContent.
+ */ export const applySliderThumbFocus = (tokens)=>thumbLayers(tokens, tokens.focusBorderColor, `var(${tokens.innerContent}, none)`);

package/dist/emotion/es/mixins/index.js

@@ -11,3 +11,4 @@ export * from "./applySkeletonAnimation";
 export * from "./applyHidden";
 export * from "./createApplyPaperMixin";
 export * from "./addScrollbar";
+export * from "./applySliderThumb";

package/dist/emotion/es/utils/focusManager.js

@@ -11,7 +11,7 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-import { findTabbableDescendants } from "./tabbable";
+import { findTabbableInFocusScope, isElementInFocusScope } from "./focusScope";
 /**
  *  Менеджер фокуса при открытии и закрытии нод при использовании focus-trap.
  *  Также необходим, чтобы фокус всегда должен находиться внутри необходимой ноды.
@@ -24,11 +24,11 @@ import { findTabbableDescendants } from "./tabbable";
         _define_property(this, "handleFocus", ()=>{
             // Фокус всегда должен находиться внутри необходимой ноды
             const focusNode = this.focusNodes[this.focusNodes.length - 1];
-            if (!focusNode || focusNode.contains(document.activeElement)) {
+            if (!focusNode || isElementInFocusScope(focusNode.element, document.activeElement, focusNode.getFocusTrapSelectors?.())) {
                 return;
             }
             // Выделяем первый tabbable элемент
-            const el = findTabbableDescendants(focusNode)[0] || focusNode;
+            const el = findTabbableInFocusScope(focusNode.element, focusNode.getFocusTrapSelectors?.())[0] || focusNode.element;
             el.focus();
         });
         // добавление на фокус после анмаунта
@@ -44,14 +44,25 @@ import { findTabbableDescendants } from "./tabbable";
             }
         });
         // при маунте ноды
-        _define_property(this, "setupScopedFocus", (element)=>{
-            this.focusNodes.push(element);
-            document.addEventListener('focusin', this.handleFocus, true);
+        _define_property(this, "setupScopedFocus", (element, getFocusTrapSelectors)=>{
+            this.focusNodes.push({
+                element,
+                getFocusTrapSelectors
+            });
+            if (this.focusNodes.length === 1) {
+                document.addEventListener('focusin', this.handleFocus, true);
+            }
         });
         // при анмаунте
-        _define_property(this, "teardownScopedFocus", ()=>{
-            this.focusNodes.pop();
-            document.removeEventListener('focusin', this.handleFocus);
+        _define_property(this, "teardownScopedFocus", (element)=>{
+            const focusNodeIndex = element ? this.focusNodes.map((focusNode)=>focusNode.element).lastIndexOf(element) : this.focusNodes.length - 1;
+            if (focusNodeIndex >= 0) {
+                this.focusNodes.splice(focusNodeIndex, 1);
+            }
+            if (!this.focusNodes.length) {
+                document.removeEventListener('focusin', this.handleFocus, true);
+            }
         });
+        _define_property(this, "isTopFocusNode", (element)=>this.focusNodes[this.focusNodes.length - 1]?.element === element);
     }
 }

package/dist/emotion/es/utils/focusScope.js

@@ -0,0 +1,30 @@
+import { findTabbableDescendants, isTabble } from "./tabbable";
+const getAdditionalFocusScopeElements = (root, focusTrapSelectors)=>{
+    if (!focusTrapSelectors?.length) {
+        return [];
+    }
+    const elements = focusTrapSelectors.flatMap((selector)=>Array.from(root.ownerDocument.querySelectorAll(selector)));
+    return Array.from(new Set(elements)).filter((element)=>element !== root);
+};
+export const isElementInFocusScope = (root, element, focusTrapSelectors)=>{
+    if (!element) {
+        return false;
+    }
+    return [
+        root,
+        ...getAdditionalFocusScopeElements(root, focusTrapSelectors)
+    ].some((scopeElement)=>scopeElement.contains(element));
+};
+export const findTabbableInFocusScope = (root, focusTrapSelectors)=>{
+    const additionalScopeElements = getAdditionalFocusScopeElements(root, focusTrapSelectors);
+    const tabbable = [
+        ...findTabbableDescendants(root),
+        ...additionalScopeElements.flatMap((element)=>[
+                ...isTabble(element) ? [
+                    element
+                ] : [],
+                ...findTabbableDescendants(element)
+            ])
+    ];
+    return Array.from(new Set(tabbable));
+};

package/dist/emotion/es/utils/scopeTab.js

@@ -1,10 +1,10 @@
-import { findTabbableDescendants } from "./tabbable";
+import { findTabbableInFocusScope } from "./focusScope";
 /**
  * Управлление фокусом лишь внутри ноды через tab
  * @param node
  * @param event
- */ export const scopeTab = (node, event, activeFocusTrap)=>{
-    const tabbable = findTabbableDescendants(node);
+ */ export const scopeTab = (node, event, activeFocusTrap, focusTrapSelectors)=>{
+    const tabbable = findTabbableInFocusScope(node, focusTrapSelectors);
     if (!tabbable.length) {
         event.preventDefault();
         return;

package/dist/styled-components/cjs/components/Accordion/Accordion.tokens.js

@@ -28,6 +28,8 @@ const classes = {
     clearAccordionItem: 'clear-accordion-item',
     accordionItemShowBody: 'accordion-item-show-body',
     accordionPlusAnimationElement: 'accordion-plus-animation-element',
+    accordionArrowAnimation: 'accordion-arrow-animation',
+    accordionSignAnimation: 'accordion-sign-animation',
     accordionDisabled: 'accordion-disabled',
     accordionItemBody: 'accordion-item-body'
 };

package/dist/styled-components/cjs/components/Accordion/ui/AccordionItem/AccordionItem.js

@@ -54,8 +54,11 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRight, contentLeft, title, pin = 'square-square', children, type = 'sign', index, className, style, eventKey, disabled, alignWithTitle = true, opened, view, onChange, onClick, titleProps, bodyProps, ...rest }, outerRef)=>{
+const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRight, contentLeft, defaultIconContent, defaultIconPlacement, title, pin = 'square-square', children, type, index, className, style, eventKey, disabled, alignWithTitle = true, opened, view, onChange, onClick, titleProps, bodyProps, ...rest }, outerRef)=>{
     const key = eventKey ?? index ?? 0;
+    const resolvedDefaultIconContent = defaultIconContent ?? type ?? 'sign';
+    const resolvedDefaultIconPlacement = defaultIconPlacement ?? (defaultIconContent === undefined && type === 'arrow' ? 'left' : 'right');
+    const openedState = opened ?? value;
     const [leftPadding, setLeftPadding] = (0, _react.useState)();
     const handleOpen = ()=>{
         if (disabled) {
@@ -74,12 +77,15 @@ const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRigh
         const leftPaddingBody = leftContentWidth && (alignWithTitle || view === 'clear') ? `calc(${leftContentWidth}px + var(${_Accordiontokens.tokens.accordionItemGap}))` : 0;
         setLeftPadding(leftPaddingBody);
     }, [
-        value,
+        alignWithTitle,
+        contentLeft,
+        defaultIconContent,
+        defaultIconPlacement,
         type,
-        leftContentRef,
-        setLeftPadding
+        value,
+        view
     ]);
-    const openedBodyClass = opened ?? value ? _Accordiontokens.classes.accordionItemShowBody : undefined;
+    const openedBodyClass = openedState ? _Accordiontokens.classes.accordionItemShowBody : undefined;
     const StyledAnimationPlus = ()=>/*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledPlus, null, /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledMinus, {
             size: "xs",
             color: "inherit",
@@ -91,16 +97,46 @@ const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRigh
             sizeCustomProperty: _Accordiontokens.tokens.accordionItemIconSize
         }));
     const accordionBorderRadius = (0, _roundness.convertRoundnessMatrix)(pin, `var(${_Accordiontokens.tokens.accordionItemViewBorderRadius}, var(${_Accordiontokens.tokens.accordionItemBorderRadius}))`, '1.5rem');
-    const openedClass = opened ?? value ? _Accordiontokens.classes.accordionItemOpened : '';
+    const openedClass = openedState ? _Accordiontokens.classes.accordionItemOpened : '';
     const disabledClass = disabled ? _Accordiontokens.classes.accordionDisabled : '';
-    const leftContent = contentLeft ?? (type === 'arrow' ? /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledArrow, {
-        size: "xs",
-        color: "inherit",
-        sizeCustomProperty: _Accordiontokens.tokens.accordionItemIconSize
-    }) : undefined);
-    const leftContentRotate = type === 'arrow' && (opened ?? value) ? _Accordiontokens.classes.accordionItemShowBody : undefined;
-    const rightContent = contentRight ?? (type === 'sign' ? /*#__PURE__*/ _react.default.createElement(StyledAnimationPlus, null) : undefined);
-    const rightContentRotate = type === 'sign' && (opened ?? value) ? _Accordiontokens.classes.accordionItemShowBody : undefined;
+    const getDefaultIcon = ()=>{
+        switch(resolvedDefaultIconContent){
+            case 'arrow':
+                return /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledArrow, {
+                    size: "xs",
+                    color: "inherit",
+                    sizeCustomProperty: _Accordiontokens.tokens.accordionItemIconSize
+                });
+            case 'chevron':
+                return /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledChevron, {
+                    size: "xs",
+                    color: "inherit",
+                    sizeCustomProperty: _Accordiontokens.tokens.accordionItemIconSize
+                });
+            case 'sign':
+                return /*#__PURE__*/ _react.default.createElement(StyledAnimationPlus, null);
+            default:
+                return undefined;
+        }
+    };
+    const defaultIcon = getDefaultIcon();
+    let defaultIconAnimationClass;
+    if (resolvedDefaultIconContent === 'sign') {
+        defaultIconAnimationClass = _Accordiontokens.classes.accordionSignAnimation;
+    } else if (resolvedDefaultIconContent === 'arrow' || resolvedDefaultIconContent === 'chevron') {
+        defaultIconAnimationClass = _Accordiontokens.classes.accordionArrowAnimation;
+    }
+    const defaultLeftContent = resolvedDefaultIconPlacement === 'left' ? defaultIcon : undefined;
+    const defaultRightContent = resolvedDefaultIconPlacement === 'right' ? defaultIcon : undefined;
+    const leftContent = contentLeft !== undefined ? contentLeft : defaultLeftContent;
+    const leftContentClassName = contentLeft === undefined ? (0, _utils.cx)(defaultIconAnimationClass, openedBodyClass) : undefined;
+    const rightContentClassName = (0, _utils.cx)(defaultIconAnimationClass, openedBodyClass);
+    let renderedRightContent = contentRight;
+    if (contentRight === undefined && defaultRightContent) {
+        renderedRightContent = /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionContentRight, {
+            className: rightContentClassName
+        }, defaultRightContent);
+    }
     return /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionItem, {
         className: (0, _utils.cx)(_Accordiontokens.classes.accordionItem, className, openedClass, disabledClass),
         key: key,
@@ -119,7 +155,7 @@ const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRigh
         },
         tabIndex: 0,
         onClick: handleOpen,
-        "aria-expanded": opened ?? value,
+        "aria-expanded": openedState,
         "aria-controls": `accordion-item-section${key}`,
         id: `accordion-item-${key}`,
         style: {
@@ -127,12 +163,10 @@ const AccordionItem = /*#__PURE__*/ (0, _react.forwardRef)(({ value, contentRigh
         }
     }, /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionHeaderLeft, null, leftContent && /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionContentLeft, {
         ref: leftContentRef,
-        className: leftContentRotate
-    }, leftContent), /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionTitle, titleProps, title)), contentRight || rightContent && /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionContentRight, {
-        className: rightContentRotate
-    }, rightContent && rightContent)), /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionBodyAnimate, {
+        className: leftContentClassName
+    }, leftContent), /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionTitle, titleProps, title)), renderedRightContent), /*#__PURE__*/ _react.default.createElement(_AccordionItemstyles.StyledAccordionBodyAnimate, {
         "aria-labelledby": `accordion-item-${key}`,
-        "aria-hidden": !(opened ?? value),
+        "aria-hidden": !openedState,
         id: `accordion-item-section${key}`,
         className: (0, _utils.cx)(openedBodyClass),
         style: {