@alfalab/core-components-bottom-sheet 6.6.1 → 6.7.0

package/modern/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1fskn */
+/* hash: 1yadn */
 :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_1v92z {
+} .bottom-sheet__headerWrapper_1t48d {
     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_1v92z {
+} .bottom-sheet__hasContent_1t48d {
     background-color: inherit;
-} .bottom-sheet__header_1v92z {
+} .bottom-sheet__header_1t48d {
     display: flex;
-} .bottom-sheet__sticky_1v92z {
+} .bottom-sheet__sticky_1t48d {
     position: sticky;
     top: 0;
-} .bottom-sheet__highlighted_1v92z {
+} .bottom-sheet__highlighted_1t48d {
     border-bottom: var(--bottom-sheet-header-border-bottom);
-} .bottom-sheet__justifyEnd_1v92z {
+} .bottom-sheet__justifyEnd_1t48d {
     justify-content: flex-end;
-} .bottom-sheet__addon_1v92z {
+} .bottom-sheet__addon_1t48d {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 48px;
     height: 48px;
-} .bottom-sheet__addonFixed_1v92z {
+} .bottom-sheet__addonFixed_1t48d {
     position: fixed;
-} .bottom-sheet__title_1v92z {
+} .bottom-sheet__title_1t48d {
     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_1v92z {
+} .bottom-sheet__titleCenter_1t48d {
     text-align: center;
-} .bottom-sheet__titleLeft_1v92z {
+} .bottom-sheet__titleLeft_1t48d {
     text-align: left;
-} .bottom-sheet__trimTitle_1v92z {
+} .bottom-sheet__trimTitle_1t48d {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: x87uh */
+/* hash: ozuwp */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -45,50 +45,51 @@
 } :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_1qfi2 {
+} .bottom-sheet__modal_3cpay {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_1qfi2 {
+} .bottom-sheet__wrapper_3cpay {
     transform: translateY(100%);
-    overflow: hidden;
     pointer-events: none;
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
     transition: border-radius 0.3s ease;
-} .bottom-sheet__fullscreen_1qfi2 {
+} .bottom-sheet__fullscreen_3cpay {
     border-radius: 0;
-} .bottom-sheet__component_1qfi2 {
-    overflow: hidden;
+} .bottom-sheet__component_3cpay {
     position: relative;
     display: flex;
     flex-direction: column;
     border-radius: inherit;
     background-color: var(--color-light-bg-primary);
     pointer-events: all;
-} .bottom-sheet__withTransition_1qfi2 {
+} .bottom-sheet__withTransition_3cpay {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_1qfi2 {
+} .bottom-sheet__scrollableContainer_3cpay {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_1qfi2 {
+    border-radius: inherit;
+} .bottom-sheet__marker_3cpay {
     position: fixed;
     top: var(--gap-2xs);
-    left: 50%;
+    right: 0;
+    left: 0;
+    z-index: 1000;
     width: 36px;
+    margin: 0 auto;
+} .bottom-sheet__defaultMarker_3cpay {
     height: 4px;
     border-radius: var(--border-radius-xxl);
-    transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
-    z-index: 1000;
-} .bottom-sheet__content_1qfi2 {
+} .bottom-sheet__content_3cpay {
     position: relative;
     z-index: 0;
     display: flex;
@@ -97,73 +98,73 @@
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
     background-color: inherit;
-} .bottom-sheet__noHeader_1qfi2 {
+} .bottom-sheet__noHeader_3cpay {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_1qfi2 {
+} .bottom-sheet__noFooter_3cpay {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_1qfi2 {
+} .bottom-sheet__scrollLocked_3cpay {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_1qfi2 {
+} .bottom-sheet__hiddenScrollbar_3cpay {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_1qfi2::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_3cpay::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_1qfi2 {
+    } .bottom-sheet__disabledPointerEvents_3cpay {
     pointer-events: none;
-} .bottom-sheet__appear_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__enter_1qfi2 .bottom-sheet__wrapper_1qfi2 {
+} .bottom-sheet__appear_3cpay .bottom-sheet__wrapper_3cpay, .bottom-sheet__enter_3cpay .bottom-sheet__wrapper_3cpay {
         transition: none;
-    } .bottom-sheet__appearActive_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__enterActive_1qfi2 .bottom-sheet__wrapper_1qfi2 {
+    } .bottom-sheet__appearActive_3cpay .bottom-sheet__wrapper_3cpay, .bottom-sheet__enterActive_3cpay .bottom-sheet__wrapper_3cpay {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__appearDone_1qfi2 .bottom-sheet__wrapper_1qfi2 {
+    } .bottom-sheet__enterDone_3cpay .bottom-sheet__wrapper_3cpay, .bottom-sheet__appearDone_3cpay .bottom-sheet__wrapper_3cpay {
         transform: translateY(0);
-    } .bottom-sheet__exit_1qfi2 .bottom-sheet__wrapper_1qfi2 {
+    } .bottom-sheet__exit_3cpay .bottom-sheet__wrapper_3cpay {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_1qfi2 .bottom-sheet__wrapper_1qfi2 {
+    } .bottom-sheet__exitActive_3cpay .bottom-sheet__wrapper_3cpay {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_1qfi2 {
+    } .bottom-sheet__background-accent_3cpay {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_1qfi2 {
+        } .bottom-sheet__background-info_3cpay {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_1qfi2 {
+        } .bottom-sheet__background-attention-muted_3cpay {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_1qfi2 {
+        } .bottom-sheet__background-positive-muted_3cpay {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_1qfi2 {
+        } .bottom-sheet__background-negative-muted_3cpay {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_1qfi2 {
+        } .bottom-sheet__background-primary_3cpay {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_1qfi2 {
+        } .bottom-sheet__background-primary-inverted_3cpay {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_1qfi2 {
+        } .bottom-sheet__background-secondary_3cpay {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_1qfi2 {
+        } .bottom-sheet__background-secondary-inverted_3cpay {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_1qfi2 {
+        } .bottom-sheet__background-tertiary_3cpay {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_1qfi2 {
+        } .bottom-sheet__background-tertiary-inverted_3cpay {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_1qfi2 {
+        } .bottom-sheet__background-quaternary_3cpay {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_1qfi2 {
+        } .bottom-sheet__background-quaternary-inverted_3cpay {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_1qfi2 {
+        } .bottom-sheet__background-specialbg-component_3cpay {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_1qfi2 {
+        } .bottom-sheet__background-specialbg-component-inverted_3cpay {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_1qfi2 {
+        } .bottom-sheet__background-specialbg-primary-grouped_3cpay {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_1qfi2 {
+        } .bottom-sheet__background-specialbg-secondary-grouped_3cpay {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_1qfi2 {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_3cpay {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_1qfi2 {
+        } .bottom-sheet__background-specialbg-secondary-transparent_3cpay {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1qfi2 {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_3cpay {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_1qfi2 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_3cpay {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qfi2 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_3cpay {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/modern/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react-transition-group" />
-import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "@alfalab/core-components-base-modal";
 import { NavigationBarProps } from "@alfalab/core-components-navigation-bar";
@@ -88,6 +88,14 @@ type BottomSheetProps = {
      * Дополнительный класс для обертки модального окна
      */
     modalWrapperClassName?: string;
+    /**
+     * Дополнительный класс для маркера
+     */
+    swipeableMarkerClassName?: string;
+    /**
+     * Кастомный маркер
+     */
+    swipeableMarker?: ReactElement;
     /**
      * TransitionProps, прокидываются в компонент CSSTransitionProps.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-bottom-sheet",
-    "version": "6.6.1",
+    "version": "6.7.0",
     "description": "Bottom sheet mobile component",
     "keywords": [],
     "license": "MIT",
@@ -17,7 +17,7 @@
     "dependencies": {
         "@alfalab/core-components-backdrop": "^3.1.0",
         "@alfalab/core-components-base-modal": "^5.4.0",
-        "@alfalab/core-components-navigation-bar": "^0.5.0",
+        "@alfalab/core-components-navigation-bar": "^0.5.2",
         "@alfalab/core-components-shared": "^0.2.0",
         "classnames": "^2.3.1",
         "react-div-100vh": "^0.7.0",

package/src/component.tsx

@@ -93,6 +93,8 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             keepMounted,
             onMagnetizeEnd,
             onOffsetChange,
+            swipeableMarker,
+            swipeableMarkerClassName,
         },
         ref,
     ) => {
@@ -467,6 +469,30 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             maxHeight: isFirstRender ? 0 : `${lastMagneticArea}px`,
         });
 
+        const renderMarker = () => {
+            if (swipeable) {
+                if (swipeableMarker) {
+                    return (
+                        <div className={cn(styles.marker, swipeableMarkerClassName)}>
+                            {swipeableMarker}
+                        </div>
+                    );
+                }
+
+                return (
+                    <div
+                        className={cn(
+                            styles.marker,
+                            styles.defaultMarker,
+                            swipeableMarkerClassName,
+                        )}
+                    />
+                );
+            }
+
+            return null;
+        };
+
         const bgClassName = backgroundColor && styles[`background-${backgroundColor}`];
 
         return (
@@ -528,6 +554,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                         ref={mergeRefs([sheetRef, sheetContainerRef, sheetSwipeableHandlers.ref])}
                         onTransitionEnd={handleTransitionEnd}
                     >
+                        {renderMarker()}
                         <div
                             {...containerProps}
                             className={cn(
@@ -541,8 +568,6 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
                             )}
                             ref={mergeRefs([scrollableContainer, scrollableContainerRef])}
                         >
-                            {swipeable && <div className={cn(styles.marker)} />}
-
                             {!hideHeader && !emptyHeader && <Header {...headerProps} />}
 
                             <div

package/src/index.module.css

@@ -16,7 +16,6 @@
 
 .wrapper {
     transform: translateY(100%);
-    overflow: hidden;
     pointer-events: none;
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
@@ -28,7 +27,6 @@
 }
 
 .component {
-    overflow: hidden;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -48,18 +46,23 @@
     position: relative;
     height: 100%;
     background-color: inherit;
+    border-radius: inherit;
 }
 
 .marker {
     position: fixed;
     top: var(--gap-2xs);
-    left: 50%;
+    right: 0;
+    left: 0;
+    z-index: 1000;
     width: 36px;
+    margin: 0 auto;
+}
+
+.defaultMarker {
     height: 4px;
     border-radius: var(--border-radius-xxl);
-    transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
-    z-index: 1000;
 }
 
 .content {

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode, RefObject } from 'react';
+import type { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import type { TransitionProps } from 'react-transition-group/Transition';
 
 import type { BaseModalProps } from '@alfalab/core-components-base-modal';
@@ -111,6 +111,16 @@ export type BottomSheetProps = {
      */
     modalWrapperClassName?: string;
 
+    /**
+     * Дополнительный класс для маркера
+     */
+    swipeableMarkerClassName?: string;
+
+    /**
+     * Кастомный маркер
+     */
+    swipeableMarker?: ReactElement;
+
     /**
      * TransitionProps, прокидываются в компонент CSSTransitionProps.
      */

package/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react-transition-group" />
-import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "@alfalab/core-components-base-modal";
 import { NavigationBarProps } from "@alfalab/core-components-navigation-bar";
@@ -88,6 +88,14 @@ type BottomSheetProps = {
      * Дополнительный класс для обертки модального окна
      */
     modalWrapperClassName?: string;
+    /**
+     * Дополнительный класс для маркера
+     */
+    swipeableMarkerClassName?: string;
+    /**
+     * Кастомный маркер
+     */
+    swipeableMarker?: ReactElement;
     /**
      * TransitionProps, прокидываются в компонент CSSTransitionProps.
      */