@alfalab/core-components 41.4.0 → 41.6.0

package/bottom-sheet/index.css

@@ -1,4 +1,4 @@
-/* hash: 101y0 */
+/* hash: 1vtom */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -45,20 +45,20 @@
 } :root {
     --bottom-sheet-in-transition: transform 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
     --bottom-sheet-out-transition: transform 0.3s ease;
-} .bottom-sheet__modal_diofv {
+} .bottom-sheet__modal_1jumg {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_diofv {
+} .bottom-sheet__wrapper_1jumg {
     transform: translateY(100%);
     overflow: hidden;
     pointer-events: none;
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
-} .bottom-sheet__component_diofv {
+} .bottom-sheet__component_1jumg {
     overflow: hidden;
     position: relative;
     display: flex;
@@ -66,16 +66,16 @@
     border-radius: inherit;
     background-color: var(--color-light-bg-primary);
     pointer-events: all;
-} .bottom-sheet__withTransition_diofv {
+} .bottom-sheet__withTransition_1jumg {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_diofv {
+} .bottom-sheet__scrollableContainer_1jumg {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_diofv {
+} .bottom-sheet__marker_1jumg {
     position: fixed;
     top: var(--gap-2xs);
     left: 50%;
@@ -85,7 +85,7 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
     z-index: 1000;
-} .bottom-sheet__content_diofv {
+} .bottom-sheet__content_1jumg {
     position: relative;
     z-index: 0;
     display: flex;
@@ -94,73 +94,73 @@
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
     background-color: inherit;
-} .bottom-sheet__noHeader_diofv {
+} .bottom-sheet__noHeader_1jumg {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_diofv {
+} .bottom-sheet__noFooter_1jumg {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_diofv {
+} .bottom-sheet__scrollLocked_1jumg {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_diofv {
+} .bottom-sheet__hiddenScrollbar_1jumg {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_diofv::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1jumg::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_diofv {
+    } .bottom-sheet__disabledPointerEvents_1jumg {
     pointer-events: none;
-} .bottom-sheet__appear_diofv .bottom-sheet__wrapper_diofv, .bottom-sheet__enter_diofv .bottom-sheet__wrapper_diofv {
+} .bottom-sheet__appear_1jumg .bottom-sheet__wrapper_1jumg, .bottom-sheet__enter_1jumg .bottom-sheet__wrapper_1jumg {
         transition: none;
-    } .bottom-sheet__appearActive_diofv .bottom-sheet__wrapper_diofv, .bottom-sheet__enterActive_diofv .bottom-sheet__wrapper_diofv {
+    } .bottom-sheet__appearActive_1jumg .bottom-sheet__wrapper_1jumg, .bottom-sheet__enterActive_1jumg .bottom-sheet__wrapper_1jumg {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_diofv .bottom-sheet__wrapper_diofv, .bottom-sheet__appearDone_diofv .bottom-sheet__wrapper_diofv {
+    } .bottom-sheet__enterDone_1jumg .bottom-sheet__wrapper_1jumg, .bottom-sheet__appearDone_1jumg .bottom-sheet__wrapper_1jumg {
         transform: translateY(0);
-    } .bottom-sheet__exit_diofv .bottom-sheet__wrapper_diofv {
+    } .bottom-sheet__exit_1jumg .bottom-sheet__wrapper_1jumg {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_diofv .bottom-sheet__wrapper_diofv {
+    } .bottom-sheet__exitActive_1jumg .bottom-sheet__wrapper_1jumg {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_diofv {
+    } .bottom-sheet__background-accent_1jumg {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_diofv {
+        } .bottom-sheet__background-info_1jumg {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_diofv {
+        } .bottom-sheet__background-attention-muted_1jumg {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_diofv {
+        } .bottom-sheet__background-positive-muted_1jumg {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_diofv {
+        } .bottom-sheet__background-negative-muted_1jumg {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_diofv {
+        } .bottom-sheet__background-primary_1jumg {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_diofv {
+        } .bottom-sheet__background-primary-inverted_1jumg {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_diofv {
+        } .bottom-sheet__background-secondary_1jumg {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_diofv {
+        } .bottom-sheet__background-secondary-inverted_1jumg {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_diofv {
+        } .bottom-sheet__background-tertiary_1jumg {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_diofv {
+        } .bottom-sheet__background-tertiary-inverted_1jumg {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_diofv {
+        } .bottom-sheet__background-quaternary_1jumg {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_diofv {
+        } .bottom-sheet__background-quaternary-inverted_1jumg {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_diofv {
+        } .bottom-sheet__background-specialbg-component_1jumg {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_diofv {
+        } .bottom-sheet__background-specialbg-component-inverted_1jumg {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_diofv {
+        } .bottom-sheet__background-specialbg-primary-grouped_1jumg {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_diofv {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1jumg {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_diofv {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1jumg {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_diofv {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1jumg {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_diofv {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1jumg {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_diofv {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1jumg {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_diofv {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1jumg {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/modern/component.js

@@ -16,14 +16,14 @@ const getDataTestId = (dataTestId, element) => {
     return dataTestId ? `${dataTestId}${elementPart}` : undefined;
 };
 
-const isClient = () => typeof window !== 'undefined';
-
-const styles = {"modal":"bottom-sheet__modal_diofv","wrapper":"bottom-sheet__wrapper_diofv","component":"bottom-sheet__component_diofv","withTransition":"bottom-sheet__withTransition_diofv","scrollableContainer":"bottom-sheet__scrollableContainer_diofv","marker":"bottom-sheet__marker_diofv","content":"bottom-sheet__content_diofv","noHeader":"bottom-sheet__noHeader_diofv","noFooter":"bottom-sheet__noFooter_diofv","scrollLocked":"bottom-sheet__scrollLocked_diofv","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_diofv","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_diofv","appear":"bottom-sheet__appear_diofv","enter":"bottom-sheet__enter_diofv","appearActive":"bottom-sheet__appearActive_diofv","enterActive":"bottom-sheet__enterActive_diofv","enterDone":"bottom-sheet__enterDone_diofv","appearDone":"bottom-sheet__appearDone_diofv","exit":"bottom-sheet__exit_diofv","exitActive":"bottom-sheet__exitActive_diofv","background-accent":"bottom-sheet__background-accent_diofv","background-info":"bottom-sheet__background-info_diofv","background-attention-muted":"bottom-sheet__background-attention-muted_diofv","background-positive-muted":"bottom-sheet__background-positive-muted_diofv","background-negative-muted":"bottom-sheet__background-negative-muted_diofv","background-primary":"bottom-sheet__background-primary_diofv","background-primary-inverted":"bottom-sheet__background-primary-inverted_diofv","background-secondary":"bottom-sheet__background-secondary_diofv","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_diofv","background-tertiary":"bottom-sheet__background-tertiary_diofv","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_diofv","background-quaternary":"bottom-sheet__background-quaternary_diofv","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_diofv","background-specialbg-component":"bottom-sheet__background-specialbg-component_diofv","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_diofv","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_diofv","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_diofv","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_diofv","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_diofv","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_diofv","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_diofv","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_diofv"};
+const styles = {"modal":"bottom-sheet__modal_1jumg","wrapper":"bottom-sheet__wrapper_1jumg","component":"bottom-sheet__component_1jumg","withTransition":"bottom-sheet__withTransition_1jumg","scrollableContainer":"bottom-sheet__scrollableContainer_1jumg","marker":"bottom-sheet__marker_1jumg","content":"bottom-sheet__content_1jumg","noHeader":"bottom-sheet__noHeader_1jumg","noFooter":"bottom-sheet__noFooter_1jumg","scrollLocked":"bottom-sheet__scrollLocked_1jumg","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1jumg","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1jumg","appear":"bottom-sheet__appear_1jumg","enter":"bottom-sheet__enter_1jumg","appearActive":"bottom-sheet__appearActive_1jumg","enterActive":"bottom-sheet__enterActive_1jumg","enterDone":"bottom-sheet__enterDone_1jumg","appearDone":"bottom-sheet__appearDone_1jumg","exit":"bottom-sheet__exit_1jumg","exitActive":"bottom-sheet__exitActive_1jumg","background-accent":"bottom-sheet__background-accent_1jumg","background-info":"bottom-sheet__background-info_1jumg","background-attention-muted":"bottom-sheet__background-attention-muted_1jumg","background-positive-muted":"bottom-sheet__background-positive-muted_1jumg","background-negative-muted":"bottom-sheet__background-negative-muted_1jumg","background-primary":"bottom-sheet__background-primary_1jumg","background-primary-inverted":"bottom-sheet__background-primary-inverted_1jumg","background-secondary":"bottom-sheet__background-secondary_1jumg","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1jumg","background-tertiary":"bottom-sheet__background-tertiary_1jumg","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1jumg","background-quaternary":"bottom-sheet__background-quaternary_1jumg","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1jumg","background-specialbg-component":"bottom-sheet__background-specialbg-component_1jumg","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1jumg","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1jumg","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1jumg","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1jumg","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1jumg","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1jumg","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1jumg","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1jumg"};
 require('./index.css');
 
-const BottomSheet = forwardRef(({ open, title, container, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, onClose, onBack, onMagnetize, }, ref) => {
+const BottomSheet = forwardRef(({ open, title, container, usePortal, backgroundColor, titleSize = 'default', subtitle, actionButton, contentClassName, containerClassName, containerProps, headerClassName, footerClassName, addonClassName, closerClassName, backerClassName, modalClassName, modalWrapperClassName, className, leftAddons, rightAddons, bottomAddons, hasCloser, hasBacker, titleAlign = 'left', trimTitle, stickyHeader, stickyFooter = true, initialHeight = 'default', hideOverlay, hideScrollbar, hideHeader, disableOverlayClick, disableBlockingScroll, children, zIndex, transitionProps = {}, magneticAreas: magneticAreasProp, initialActiveAreaIndex, dataTestId, swipeable = true, scrollLocked: scrollLockedProp, backdropProps, scrollableContainerRef = () => null, bottomSheetInstanceRef, sheetContainerRef = () => null, onClose, onBack, onMagnetize, }, ref) => {
     const hasInitialIdx = initialActiveAreaIndex !== undefined;
-    const fullHeight = use100vh() || isClient() ? window.innerHeight : 0;
+    const fullHeight = use100vh() || 0;
+    // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
+    const isFirstRender = fullHeight === 0;
     const magneticAreas = useMemo(() => {
         if (magneticAreasProp) {
             return magneticAreasProp.map((area) => convertPercentToNumber(area, fullHeight));
@@ -31,12 +31,10 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
         return [0, fullHeight - HEADER_OFFSET];
     }, [fullHeight, magneticAreasProp]);
     const lastMagneticArea = magneticAreas[magneticAreas.length - 1];
-    const [sheetOffset, setSheetOffset] = useState(hasInitialIdx
-        ? lastMagneticArea - magneticAreas[initialActiveAreaIndex]
-        : magneticAreas[0]);
+    const [sheetOffset, setSheetOffset] = useState(0);
     const [backdropOpacity, setBackdropOpacity] = useState(1);
-    const [activeArea, setActiveArea] = useState(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea);
-    const swipingInProgress = useRef(false);
+    const [activeArea, setActiveArea] = useState(0);
+    const swipingInProgress = useRef(null);
     const headerRef = useRef(null);
     const sheetHeight = useRef(0);
     const sheetRef = useRef(null);
@@ -92,6 +90,7 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
         }
     };
     const scrollToArea = (idx) => {
+        swipingInProgress.current = false;
         const nextArea = magneticAreas[idx];
         if (nextArea === 0) {
             onClose();
@@ -228,10 +227,20 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
     const handleEntered = (node, isAppearing) => {
         setBackdropOpacity(1);
         setSheetHeight();
+        // Ready for swiping
+        swipingInProgress.current = false;
         if (transitionProps.onEntered) {
             transitionProps.onEntered(node, isAppearing);
         }
     };
+    useEffect(() => {
+        // Инициализируем стейт только после того, как была рассчитана высота вьюпорта.
+        if (!isFirstRender) {
+            setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[initialActiveAreaIndex] : 0);
+            setActiveArea(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isFirstRender]);
     useEffect(() => {
         onMagnetize?.(open ? getActiveAreaIndex(activeArea) : 0);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -239,15 +248,13 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
     useImperativeHandle(bottomSheetInstanceRef, () => ({
         scrollToArea,
     }));
-    const getSwipeStyles = () => ({
-        transform: sheetOffset ? `translateY(${sheetOffset}px)` : '',
-    });
+    const getSwipeStyles = () => sheetOffset ? { transform: `translateY(${sheetOffset}px)` } : {};
     const getHeightStyles = () => ({
-        height: initialHeight === 'full' ? `${lastMagneticArea}px` : 'unset',
-        maxHeight: `${lastMagneticArea}px`,
+        height: !isFirstRender && initialHeight === 'full' ? `${lastMagneticArea}px` : 'unset',
+        maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
     });
     const bgClassName = backgroundColor && styles[`background-${backgroundColor}`];
-    return (React.createElement(BaseModal, { open: open, ref: ref, container: container, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: {
+    return (React.createElement(BaseModal, { open: open, ref: ref, container: container, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, usePortal: usePortal, scrollHandler: scrollableContainer, Backdrop: SwipeableBackdrop, backdropProps: {
             ...backdropProps,
             className: styles.disabledPointerEvents,
             opacity: backdropOpacity,
@@ -265,7 +272,7 @@ const BottomSheet = forwardRef(({ open, title, container, backgroundColor, title
         } },
         React.createElement("div", { style: { ...getHeightStyles() }, className: styles.wrapper, onTransitionEnd: setSheetHeight },
             React.createElement("div", { className: cn(styles.component, bgClassName, className, {
-                    [styles.withTransition]: !swipingInProgress.current,
+                    [styles.withTransition]: swipingInProgress.current === false,
                 }), style: {
                     ...getSwipeStyles(),
                     ...getHeightStyles(),

package/bottom-sheet/modern/components/footer/Component.js

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import cn from 'classnames';
 import { BaseModalContext } from '../../../../base-modal/modern';
 
-const styles = {"footer":"bottom-sheet__footer_82dr7","sticky":"bottom-sheet__sticky_82dr7","highlighted":"bottom-sheet__highlighted_82dr7","background-accent":"bottom-sheet__background-accent_82dr7","background-info":"bottom-sheet__background-info_82dr7","background-attention-muted":"bottom-sheet__background-attention-muted_82dr7","background-positive-muted":"bottom-sheet__background-positive-muted_82dr7","background-negative-muted":"bottom-sheet__background-negative-muted_82dr7","background-primary":"bottom-sheet__background-primary_82dr7","background-primary-inverted":"bottom-sheet__background-primary-inverted_82dr7","background-secondary":"bottom-sheet__background-secondary_82dr7","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_82dr7","background-tertiary":"bottom-sheet__background-tertiary_82dr7","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_82dr7","background-quaternary":"bottom-sheet__background-quaternary_82dr7","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_82dr7","background-specialbg-component":"bottom-sheet__background-specialbg-component_82dr7","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_82dr7","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_82dr7","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_82dr7","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_82dr7","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_82dr7","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_82dr7","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_82dr7","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_82dr7"};
+const styles = {"footer":"bottom-sheet__footer_cbsha","sticky":"bottom-sheet__sticky_cbsha","highlighted":"bottom-sheet__highlighted_cbsha","background-accent":"bottom-sheet__background-accent_cbsha","background-info":"bottom-sheet__background-info_cbsha","background-attention-muted":"bottom-sheet__background-attention-muted_cbsha","background-positive-muted":"bottom-sheet__background-positive-muted_cbsha","background-negative-muted":"bottom-sheet__background-negative-muted_cbsha","background-primary":"bottom-sheet__background-primary_cbsha","background-primary-inverted":"bottom-sheet__background-primary-inverted_cbsha","background-secondary":"bottom-sheet__background-secondary_cbsha","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_cbsha","background-tertiary":"bottom-sheet__background-tertiary_cbsha","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_cbsha","background-quaternary":"bottom-sheet__background-quaternary_cbsha","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_cbsha","background-specialbg-component":"bottom-sheet__background-specialbg-component_cbsha","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_cbsha","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_cbsha","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_cbsha","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_cbsha","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_cbsha","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_cbsha","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_cbsha","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_cbsha"};
 require('./index.css');
 
 const Footer = ({ children, className, sticky }) => {

package/bottom-sheet/modern/components/footer/index.css

@@ -1,4 +1,4 @@
-/* hash: 1wk86 */
+/* hash: 1chkp */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -41,58 +41,58 @@
 } :root {
     --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-secondary);
     --bottom-sheet-footer-background-color: var(--color-light-bg-primary);
-} .bottom-sheet__footer_82dr7 {
+} .bottom-sheet__footer_cbsha {
     padding: var(--gap-m) var(--gap-m);
     background-color: var(--color-light-bg-primary);
-} .bottom-sheet__sticky_82dr7 {
+} .bottom-sheet__sticky_cbsha {
     position: sticky;
     bottom: 0;
     z-index: 1;
-} .bottom-sheet__highlighted_82dr7 {
+} .bottom-sheet__highlighted_cbsha {
     border-top: var(--bottom-sheet-footer-border-top);
     background-color: var(--bottom-sheet-footer-background-color);
-} .bottom-sheet__background-accent_82dr7 {
+} .bottom-sheet__background-accent_cbsha {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_82dr7 {
+        } .bottom-sheet__background-info_cbsha {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_82dr7 {
+        } .bottom-sheet__background-attention-muted_cbsha {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_82dr7 {
+        } .bottom-sheet__background-positive-muted_cbsha {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_82dr7 {
+        } .bottom-sheet__background-negative-muted_cbsha {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_82dr7 {
+        } .bottom-sheet__background-primary_cbsha {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_82dr7 {
+        } .bottom-sheet__background-primary-inverted_cbsha {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_82dr7 {
+        } .bottom-sheet__background-secondary_cbsha {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_82dr7 {
+        } .bottom-sheet__background-secondary-inverted_cbsha {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_82dr7 {
+        } .bottom-sheet__background-tertiary_cbsha {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_82dr7 {
+        } .bottom-sheet__background-tertiary-inverted_cbsha {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_82dr7 {
+        } .bottom-sheet__background-quaternary_cbsha {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_82dr7 {
+        } .bottom-sheet__background-quaternary-inverted_cbsha {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_82dr7 {
+        } .bottom-sheet__background-specialbg-component_cbsha {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_82dr7 {
+        } .bottom-sheet__background-specialbg-component-inverted_cbsha {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_82dr7 {
+        } .bottom-sheet__background-specialbg-primary-grouped_cbsha {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_82dr7 {
+        } .bottom-sheet__background-specialbg-secondary-grouped_cbsha {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_82dr7 {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_cbsha {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_82dr7 {
+        } .bottom-sheet__background-specialbg-secondary-transparent_cbsha {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_82dr7 {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_cbsha {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_82dr7 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_cbsha {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_82dr7 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_cbsha {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/modern/components/header/Component.js

@@ -4,7 +4,7 @@ import { BaseModalContext } from '../../../../base-modal/modern';
 import { NavigationBar } from '../../../../navigation-bar/modern';
 import { HEADER_OFFSET } from '../../utils.js';
 
-const styles = {"headerWrapper":"bottom-sheet__headerWrapper_5cqr6","hasContent":"bottom-sheet__hasContent_5cqr6","header":"bottom-sheet__header_5cqr6","sticky":"bottom-sheet__sticky_5cqr6","highlighted":"bottom-sheet__highlighted_5cqr6","justifyEnd":"bottom-sheet__justifyEnd_5cqr6","addon":"bottom-sheet__addon_5cqr6","addonFixed":"bottom-sheet__addonFixed_5cqr6","title":"bottom-sheet__title_5cqr6","titleCenter":"bottom-sheet__titleCenter_5cqr6","titleLeft":"bottom-sheet__titleLeft_5cqr6","trimTitle":"bottom-sheet__trimTitle_5cqr6"};
+const styles = {"headerWrapper":"bottom-sheet__headerWrapper_14xyw","hasContent":"bottom-sheet__hasContent_14xyw","header":"bottom-sheet__header_14xyw","sticky":"bottom-sheet__sticky_14xyw","highlighted":"bottom-sheet__highlighted_14xyw","justifyEnd":"bottom-sheet__justifyEnd_14xyw","addon":"bottom-sheet__addon_14xyw","addonFixed":"bottom-sheet__addonFixed_14xyw","title":"bottom-sheet__title_14xyw","titleCenter":"bottom-sheet__titleCenter_14xyw","titleLeft":"bottom-sheet__titleLeft_14xyw","trimTitle":"bottom-sheet__trimTitle_14xyw"};
 require('./index.css');
 
 const Header = ({ className, sticky, headerRef, title, children, ...restProps }) => {

package/bottom-sheet/modern/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: gqfc1 */
+/* hash: fcxdo */
 :root {
 } /* deprecated */ :root {
     --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -27,42 +27,42 @@
     --bottom-sheet-title-font-weight: 700;
     --bottom-sheet-title-line-height: 24px;
     --bottom-sheet-title-font-family: var(--font-family-system);
-} .bottom-sheet__headerWrapper_5cqr6 {
+} .bottom-sheet__headerWrapper_14xyw {
     padding: var(--gap-s) var(--gap-xs) var(--gap-2xs);
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
     z-index: 1;
-} .bottom-sheet__hasContent_5cqr6 {
+} .bottom-sheet__hasContent_14xyw {
     background-color: inherit;
-} .bottom-sheet__header_5cqr6 {
+} .bottom-sheet__header_14xyw {
     display: flex;
-} .bottom-sheet__sticky_5cqr6 {
+} .bottom-sheet__sticky_14xyw {
     position: sticky;
     top: 0;
-} .bottom-sheet__highlighted_5cqr6 {
+} .bottom-sheet__highlighted_14xyw {
     border-bottom: var(--bottom-sheet-header-border-bottom);
-} .bottom-sheet__justifyEnd_5cqr6 {
+} .bottom-sheet__justifyEnd_14xyw {
     justify-content: flex-end;
-} .bottom-sheet__addon_5cqr6 {
+} .bottom-sheet__addon_14xyw {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 48px;
     height: 48px;
-} .bottom-sheet__addonFixed_5cqr6 {
+} .bottom-sheet__addonFixed_14xyw {
     position: fixed;
-} .bottom-sheet__title_5cqr6 {
+} .bottom-sheet__title_14xyw {
     padding: var(--gap-s) var(--gap-xs);
     width: 100%;
     font-size: var(--bottom-sheet-title-font-size);
     font-weight: var(--bottom-sheet-title-font-weight);
     line-height: var(--bottom-sheet-title-line-height);
     font-family: var(--bottom-sheet-title-font-family);
-} .bottom-sheet__titleCenter_5cqr6 {
+} .bottom-sheet__titleCenter_14xyw {
     text-align: center;
-} .bottom-sheet__titleLeft_5cqr6 {
+} .bottom-sheet__titleLeft_14xyw {
     text-align: left;
-} .bottom-sheet__trimTitle_5cqr6 {
+} .bottom-sheet__trimTitle_14xyw {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/bottom-sheet/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 101y0 */
+/* hash: 1vtom */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -45,20 +45,20 @@
 } :root {
     --bottom-sheet-in-transition: transform 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
     --bottom-sheet-out-transition: transform 0.3s ease;
-} .bottom-sheet__modal_diofv {
+} .bottom-sheet__modal_1jumg {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_diofv {
+} .bottom-sheet__wrapper_1jumg {
     transform: translateY(100%);
     overflow: hidden;
     pointer-events: none;
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
-} .bottom-sheet__component_diofv {
+} .bottom-sheet__component_1jumg {
     overflow: hidden;
     position: relative;
     display: flex;
@@ -66,16 +66,16 @@
     border-radius: inherit;
     background-color: var(--color-light-bg-primary);
     pointer-events: all;
-} .bottom-sheet__withTransition_diofv {
+} .bottom-sheet__withTransition_1jumg {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_diofv {
+} .bottom-sheet__scrollableContainer_1jumg {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_diofv {
+} .bottom-sheet__marker_1jumg {
     position: fixed;
     top: var(--gap-2xs);
     left: 50%;
@@ -85,7 +85,7 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
     z-index: 1000;
-} .bottom-sheet__content_diofv {
+} .bottom-sheet__content_1jumg {
     position: relative;
     z-index: 0;
     display: flex;
@@ -94,73 +94,73 @@
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
     background-color: inherit;
-} .bottom-sheet__noHeader_diofv {
+} .bottom-sheet__noHeader_1jumg {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_diofv {
+} .bottom-sheet__noFooter_1jumg {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_diofv {
+} .bottom-sheet__scrollLocked_1jumg {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_diofv {
+} .bottom-sheet__hiddenScrollbar_1jumg {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_diofv::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1jumg::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_diofv {
+    } .bottom-sheet__disabledPointerEvents_1jumg {
     pointer-events: none;
-} .bottom-sheet__appear_diofv .bottom-sheet__wrapper_diofv, .bottom-sheet__enter_diofv .bottom-sheet__wrapper_diofv {
+} .bottom-sheet__appear_1jumg .bottom-sheet__wrapper_1jumg, .bottom-sheet__enter_1jumg .bottom-sheet__wrapper_1jumg {
         transition: none;
-    } .bottom-sheet__appearActive_diofv .bottom-sheet__wrapper_diofv, .bottom-sheet__enterActive_diofv .bottom-sheet__wrapper_diofv {
+    } .bottom-sheet__appearActive_1jumg .bottom-sheet__wrapper_1jumg, .bottom-sheet__enterActive_1jumg .bottom-sheet__wrapper_1jumg {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_diofv .bottom-sheet__wrapper_diofv, .bottom-sheet__appearDone_diofv .bottom-sheet__wrapper_diofv {
+    } .bottom-sheet__enterDone_1jumg .bottom-sheet__wrapper_1jumg, .bottom-sheet__appearDone_1jumg .bottom-sheet__wrapper_1jumg {
         transform: translateY(0);
-    } .bottom-sheet__exit_diofv .bottom-sheet__wrapper_diofv {
+    } .bottom-sheet__exit_1jumg .bottom-sheet__wrapper_1jumg {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_diofv .bottom-sheet__wrapper_diofv {
+    } .bottom-sheet__exitActive_1jumg .bottom-sheet__wrapper_1jumg {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_diofv {
+    } .bottom-sheet__background-accent_1jumg {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_diofv {
+        } .bottom-sheet__background-info_1jumg {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_diofv {
+        } .bottom-sheet__background-attention-muted_1jumg {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_diofv {
+        } .bottom-sheet__background-positive-muted_1jumg {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_diofv {
+        } .bottom-sheet__background-negative-muted_1jumg {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_diofv {
+        } .bottom-sheet__background-primary_1jumg {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_diofv {
+        } .bottom-sheet__background-primary-inverted_1jumg {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_diofv {
+        } .bottom-sheet__background-secondary_1jumg {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_diofv {
+        } .bottom-sheet__background-secondary-inverted_1jumg {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_diofv {
+        } .bottom-sheet__background-tertiary_1jumg {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_diofv {
+        } .bottom-sheet__background-tertiary-inverted_1jumg {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_diofv {
+        } .bottom-sheet__background-quaternary_1jumg {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_diofv {
+        } .bottom-sheet__background-quaternary-inverted_1jumg {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_diofv {
+        } .bottom-sheet__background-specialbg-component_1jumg {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_diofv {
+        } .bottom-sheet__background-specialbg-component-inverted_1jumg {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_diofv {
+        } .bottom-sheet__background-specialbg-primary-grouped_1jumg {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_diofv {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1jumg {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_diofv {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1jumg {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_diofv {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1jumg {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_diofv {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1jumg {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_diofv {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1jumg {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_diofv {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1jumg {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/bottom-sheet/modern/types.d.ts

@@ -36,6 +36,10 @@ type BottomSheetProps = {
      * Контейнер к которому будут добавляться порталы
      */
     container?: BaseModalProps['container'];
+    /**
+     * Рендерить ли в контейнер через портал.
+     */
+    usePortal?: BaseModalProps['usePortal'];
     /**
      * Дополнительный класс
      */