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

package/modern/components/header/index.css

@@ -1,4 +1,4 @@
-/* hash: 1yadn */
+/* hash: 1x5qy */
 :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_1t48d {
+} .bottom-sheet__headerWrapper_198ve {
     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_1t48d {
+} .bottom-sheet__hasContent_198ve {
     background-color: inherit;
-} .bottom-sheet__header_1t48d {
+} .bottom-sheet__header_198ve {
     display: flex;
-} .bottom-sheet__sticky_1t48d {
+} .bottom-sheet__sticky_198ve {
     position: sticky;
     top: 0;
-} .bottom-sheet__highlighted_1t48d {
+} .bottom-sheet__highlighted_198ve {
     border-bottom: var(--bottom-sheet-header-border-bottom);
-} .bottom-sheet__justifyEnd_1t48d {
+} .bottom-sheet__justifyEnd_198ve {
     justify-content: flex-end;
-} .bottom-sheet__addon_1t48d {
+} .bottom-sheet__addon_198ve {
     display: flex;
     justify-content: center;
     align-items: center;
     min-width: 48px;
     height: 48px;
-} .bottom-sheet__addonFixed_1t48d {
+} .bottom-sheet__addonFixed_198ve {
     position: fixed;
-} .bottom-sheet__title_1t48d {
+} .bottom-sheet__title_198ve {
     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_1t48d {
+} .bottom-sheet__titleCenter_198ve {
     text-align: center;
-} .bottom-sheet__titleLeft_1t48d {
+} .bottom-sheet__titleLeft_198ve {
     text-align: left;
-} .bottom-sheet__trimTitle_1t48d {
+} .bottom-sheet__trimTitle_198ve {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: ozuwp */
+/* hash: okunf */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -45,31 +45,31 @@
 } :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_3cpay {
+} .bottom-sheet__modal_88g3f {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_3cpay {
+} .bottom-sheet__wrapper_88g3f {
     transform: translateY(100%);
     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_3cpay {
+} .bottom-sheet__fullscreen_88g3f {
     border-radius: 0;
-} .bottom-sheet__component_3cpay {
+} .bottom-sheet__component_88g3f {
     position: relative;
     display: flex;
     flex-direction: column;
     border-radius: inherit;
     background-color: var(--color-light-bg-primary);
     pointer-events: all;
-} .bottom-sheet__withTransition_3cpay {
+} .bottom-sheet__withTransition_88g3f {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_3cpay {
+} .bottom-sheet__scrollableContainer_88g3f {
     overflow: auto;
     display: flex;
     flex-direction: column;
@@ -77,7 +77,7 @@
     height: 100%;
     background-color: inherit;
     border-radius: inherit;
-} .bottom-sheet__marker_3cpay {
+} .bottom-sheet__marker_88g3f {
     position: fixed;
     top: var(--gap-2xs);
     right: 0;
@@ -85,11 +85,11 @@
     z-index: 1000;
     width: 36px;
     margin: 0 auto;
-} .bottom-sheet__defaultMarker_3cpay {
+} .bottom-sheet__defaultMarker_88g3f {
     height: 4px;
     border-radius: var(--border-radius-xxl);
     background-color: var(--color-light-graphic-quaternary);
-} .bottom-sheet__content_3cpay {
+} .bottom-sheet__content_88g3f {
     position: relative;
     z-index: 0;
     display: flex;
@@ -98,73 +98,73 @@
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
     background-color: inherit;
-} .bottom-sheet__noHeader_3cpay {
+} .bottom-sheet__noHeader_88g3f {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_3cpay {
+} .bottom-sheet__noFooter_88g3f {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_3cpay {
+} .bottom-sheet__scrollLocked_88g3f {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_3cpay {
+} .bottom-sheet__hiddenScrollbar_88g3f {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_3cpay::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_88g3f::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_3cpay {
+    } .bottom-sheet__disabledPointerEvents_88g3f {
     pointer-events: none;
-} .bottom-sheet__appear_3cpay .bottom-sheet__wrapper_3cpay, .bottom-sheet__enter_3cpay .bottom-sheet__wrapper_3cpay {
+} .bottom-sheet__appear_88g3f .bottom-sheet__wrapper_88g3f, .bottom-sheet__enter_88g3f .bottom-sheet__wrapper_88g3f {
         transition: none;
-    } .bottom-sheet__appearActive_3cpay .bottom-sheet__wrapper_3cpay, .bottom-sheet__enterActive_3cpay .bottom-sheet__wrapper_3cpay {
+    } .bottom-sheet__appearActive_88g3f .bottom-sheet__wrapper_88g3f, .bottom-sheet__enterActive_88g3f .bottom-sheet__wrapper_88g3f {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_3cpay .bottom-sheet__wrapper_3cpay, .bottom-sheet__appearDone_3cpay .bottom-sheet__wrapper_3cpay {
+    } .bottom-sheet__enterDone_88g3f .bottom-sheet__wrapper_88g3f, .bottom-sheet__appearDone_88g3f .bottom-sheet__wrapper_88g3f {
         transform: translateY(0);
-    } .bottom-sheet__exit_3cpay .bottom-sheet__wrapper_3cpay {
+    } .bottom-sheet__exit_88g3f .bottom-sheet__wrapper_88g3f {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_3cpay .bottom-sheet__wrapper_3cpay {
+    } .bottom-sheet__exitActive_88g3f .bottom-sheet__wrapper_88g3f {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_3cpay {
+    } .bottom-sheet__background-accent_88g3f {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_3cpay {
+        } .bottom-sheet__background-info_88g3f {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_3cpay {
+        } .bottom-sheet__background-attention-muted_88g3f {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_3cpay {
+        } .bottom-sheet__background-positive-muted_88g3f {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_3cpay {
+        } .bottom-sheet__background-negative-muted_88g3f {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_3cpay {
+        } .bottom-sheet__background-primary_88g3f {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_3cpay {
+        } .bottom-sheet__background-primary-inverted_88g3f {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_3cpay {
+        } .bottom-sheet__background-secondary_88g3f {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_3cpay {
+        } .bottom-sheet__background-secondary-inverted_88g3f {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_3cpay {
+        } .bottom-sheet__background-tertiary_88g3f {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_3cpay {
+        } .bottom-sheet__background-tertiary-inverted_88g3f {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_3cpay {
+        } .bottom-sheet__background-quaternary_88g3f {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_3cpay {
+        } .bottom-sheet__background-quaternary-inverted_88g3f {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_3cpay {
+        } .bottom-sheet__background-specialbg-component_88g3f {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_3cpay {
+        } .bottom-sheet__background-specialbg-component-inverted_88g3f {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_3cpay {
+        } .bottom-sheet__background-specialbg-primary-grouped_88g3f {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_3cpay {
+        } .bottom-sheet__background-specialbg-secondary-grouped_88g3f {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_3cpay {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_88g3f {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_3cpay {
+        } .bottom-sheet__background-specialbg-secondary-transparent_88g3f {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_3cpay {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_88g3f {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_3cpay {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_88g3f {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_3cpay {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_88g3f {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/modern/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react-transition-group" />
 import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
+import { HandledEvents } from 'react-swipeable/es/types';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "@alfalab/core-components-base-modal";
 import { NavigationBarProps } from "@alfalab/core-components-navigation-bar";
@@ -263,5 +264,9 @@ type BottomSheetProps = {
      * Вызывается при изменении положения шторки
      */
     onOffsetChange?: (offset: number, percent: number) => void;
+    /**
+     * Вызывается для событий touchend and mouseup.
+     */
+    onTouchEnd?: (event: HandledEvents) => void;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/package.json

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

package/src/component.tsx

@@ -14,7 +14,7 @@ import { HandledEvents } from 'react-swipeable/es/types';
 import cn from 'classnames';
 
 import { BaseModal } from '@alfalab/core-components-base-modal';
-import { getDataTestId } from '@alfalab/core-components-shared';
+import { fnUtils, getDataTestId } from '@alfalab/core-components-shared';
 
 import { Footer } from './components/footer/Component';
 import { Header, HeaderProps } from './components/header/Component';
@@ -31,6 +31,8 @@ import {
 
 import styles from './index.module.css';
 
+const { isNil } = fnUtils;
+
 export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
     (
         {
@@ -87,6 +89,7 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             onClose,
             onBack,
             onMagnetize,
+            onTouchEnd,
             disableRestoreFocus,
             disableAutoFocus,
             disableEscapeKeyDown,
@@ -98,7 +101,6 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
         },
         ref,
     ) => {
-        const hasInitialIdx = initialActiveAreaIndex !== undefined;
         const fullHeight = use100vh() || 0;
         // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
         const isFirstRender = fullHeight === 0;
@@ -357,7 +359,8 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
             setSwipingInProgress(true);
         };
 
-        const handleTouchEnd: TapCallback = () => {
+        const handleTouchEnd: TapCallback = ({ event }) => {
+            onTouchEnd?.(event);
             setSwipingInProgress(false);
             scrollOccurred.current = false;
         };
@@ -389,12 +392,10 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
 
         const handleExited = (node: HTMLElement) => {
             const idx = initialActiveAreaIndex as number;
-            const nextArea = hasInitialIdx ? magneticAreas[idx] : lastMagneticArea;
+            const nextArea = isNil(idx) ? lastMagneticArea : magneticAreas[idx];
 
             setBackdropOpacity(1);
-            setSheetOffset(
-                hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0],
-            );
+            setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
             setActiveArea(nextArea);
             onMagnetizeEnd?.();
             if (transitionProps.onExited) {
@@ -431,19 +432,14 @@ export const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(
         };
 
         useEffect(() => {
-            // Инициализируем стейт только после того, как была рассчитана высота вьюпорта.
+            // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
             if (!isFirstRender) {
-                setSheetOffset(
-                    hasInitialIdx ? lastMagneticArea - magneticAreas[initialActiveAreaIndex] : 0,
-                );
+                const idx = initialActiveAreaIndex as number;
 
-                setActiveArea(
-                    hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea,
-                );
+                setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
+                setActiveArea(isNil(idx) ? lastMagneticArea : magneticAreas[idx]);
             }
-
-            // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [isFirstRender]);
+        }, [initialActiveAreaIndex, isFirstRender, lastMagneticArea, magneticAreas]);
 
         useEffect(() => {
             if (!sheetRef.current) return;

package/src/types.ts

@@ -1,4 +1,5 @@
 import type { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
+import type { HandledEvents } from 'react-swipeable/es/types';
 import type { TransitionProps } from 'react-transition-group/Transition';
 
 import type { BaseModalProps } from '@alfalab/core-components-base-modal';
@@ -325,4 +326,9 @@ export type BottomSheetProps = {
      * Вызывается при изменении положения шторки
      */
     onOffsetChange?: (offset: number, percent: number) => void;
+
+    /**
+     * Вызывается для событий touchend and mouseup.
+     */
+    onTouchEnd?: (event: HandledEvents) => void;
 };

package/types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react-transition-group" />
 import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
+import { HandledEvents } from 'react-swipeable/es/types';
 import { TransitionProps } from 'react-transition-group/Transition';
 import { BaseModalProps } from "@alfalab/core-components-base-modal";
 import { NavigationBarProps } from "@alfalab/core-components-navigation-bar";
@@ -263,5 +264,9 @@ type BottomSheetProps = {
      * Вызывается при изменении положения шторки
      */
     onOffsetChange?: (offset: number, percent: number) => void;
+    /**
+     * Вызывается для событий touchend and mouseup.
+     */
+    onTouchEnd?: (event: HandledEvents) => void;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };