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

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1eiy8 */
+/* hash: x87uh */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -45,20 +45,23 @@
 } :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_1ttf0 {
+} .bottom-sheet__modal_1qfi2 {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_1ttf0 {
+} .bottom-sheet__wrapper_1qfi2 {
     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_1ttf0 {
+    transition: border-radius 0.3s ease;
+} .bottom-sheet__fullscreen_1qfi2 {
+    border-radius: 0;
+} .bottom-sheet__component_1qfi2 {
     overflow: hidden;
     position: relative;
     display: flex;
@@ -66,16 +69,16 @@
     border-radius: inherit;
     background-color: var(--color-light-bg-primary);
     pointer-events: all;
-} .bottom-sheet__withTransition_1ttf0 {
+} .bottom-sheet__withTransition_1qfi2 {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_1ttf0 {
+} .bottom-sheet__scrollableContainer_1qfi2 {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_1ttf0 {
+} .bottom-sheet__marker_1qfi2 {
     position: fixed;
     top: var(--gap-2xs);
     left: 50%;
@@ -85,7 +88,7 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
     z-index: 1000;
-} .bottom-sheet__content_1ttf0 {
+} .bottom-sheet__content_1qfi2 {
     position: relative;
     z-index: 0;
     display: flex;
@@ -94,73 +97,73 @@
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
     background-color: inherit;
-} .bottom-sheet__noHeader_1ttf0 {
+} .bottom-sheet__noHeader_1qfi2 {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_1ttf0 {
+} .bottom-sheet__noFooter_1qfi2 {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_1ttf0 {
+} .bottom-sheet__scrollLocked_1qfi2 {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_1ttf0 {
+} .bottom-sheet__hiddenScrollbar_1qfi2 {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_1ttf0::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1qfi2::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_1ttf0 {
+    } .bottom-sheet__disabledPointerEvents_1qfi2 {
     pointer-events: none;
-} .bottom-sheet__appear_1ttf0 .bottom-sheet__wrapper_1ttf0, .bottom-sheet__enter_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+} .bottom-sheet__appear_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__enter_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transition: none;
-    } .bottom-sheet__appearActive_1ttf0 .bottom-sheet__wrapper_1ttf0, .bottom-sheet__enterActive_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+    } .bottom-sheet__appearActive_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__enterActive_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_1ttf0 .bottom-sheet__wrapper_1ttf0, .bottom-sheet__appearDone_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+    } .bottom-sheet__enterDone_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__appearDone_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transform: translateY(0);
-    } .bottom-sheet__exit_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+    } .bottom-sheet__exit_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+    } .bottom-sheet__exitActive_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_1ttf0 {
+    } .bottom-sheet__background-accent_1qfi2 {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_1ttf0 {
+        } .bottom-sheet__background-info_1qfi2 {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_1ttf0 {
+        } .bottom-sheet__background-attention-muted_1qfi2 {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_1ttf0 {
+        } .bottom-sheet__background-positive-muted_1qfi2 {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_1ttf0 {
+        } .bottom-sheet__background-negative-muted_1qfi2 {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_1ttf0 {
+        } .bottom-sheet__background-primary_1qfi2 {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_1ttf0 {
+        } .bottom-sheet__background-primary-inverted_1qfi2 {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_1ttf0 {
+        } .bottom-sheet__background-secondary_1qfi2 {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_1ttf0 {
+        } .bottom-sheet__background-secondary-inverted_1qfi2 {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_1ttf0 {
+        } .bottom-sheet__background-tertiary_1qfi2 {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_1ttf0 {
+        } .bottom-sheet__background-tertiary-inverted_1qfi2 {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_1ttf0 {
+        } .bottom-sheet__background-quaternary_1qfi2 {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_1ttf0 {
+        } .bottom-sheet__background-quaternary-inverted_1qfi2 {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_1ttf0 {
+        } .bottom-sheet__background-specialbg-component_1qfi2 {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_1ttf0 {
+        } .bottom-sheet__background-specialbg-component-inverted_1qfi2 {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_1ttf0 {
+        } .bottom-sheet__background-specialbg-primary-grouped_1qfi2 {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_1ttf0 {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1qfi2 {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_1ttf0 {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1qfi2 {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_1ttf0 {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1qfi2 {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1ttf0 {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1qfi2 {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_1ttf0 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1qfi2 {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1ttf0 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qfi2 {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/esm/index.js

@@ -7,6 +7,7 @@ import 'react-merge-refs';
 import 'react-swipeable';
 import 'classnames';
 import '@alfalab/core-components-base-modal/esm';
+import '@alfalab/core-components-shared/esm';
 import './components/footer/Component.js';
 import './components/header/Component.js';
 import '@alfalab/core-components-navigation-bar/esm';

package/esm/types.d.ts

@@ -105,6 +105,14 @@ type BottomSheetProps = {
      * @default true
      */
     swipeable?: boolean;
+    /**
+     * Будет ли свайпаться контент
+     */
+    swipeableContent?: boolean;
+    /**
+     * Порог свайпа
+     */
+    swipeThreshold?: number;
     /**
      * Слот слева
      */
@@ -208,17 +216,9 @@ type BottomSheetProps = {
      */
     hideScrollbar?: boolean;
     /**
-     * Обработчик закрытия
-     */
-    onClose: () => void;
-    /**
-     * Обработчик нажатия на стрелку назад
+     * Верхний отступ шторки, если она открыта на максимальную высоту
      */
-    onBack?: () => void;
-    /**
-     * Вызывается после притягивания к одной из `magneticAreas`
-     */
-    onMagnetize?: (index: number) => void;
+    headerOffset?: number;
     /**
      * Содержимое bottom-sheet всегда в DOM
      */
@@ -235,5 +235,25 @@ type BottomSheetProps = {
      * Отключает вызов `onClose` при нажатии Escape
      */
     disableEscapeKeyDown?: boolean;
+    /**
+     * Обработчик закрытия
+     */
+    onClose: () => void;
+    /**
+     * Обработчик нажатия на стрелку назад
+     */
+    onBack?: () => void;
+    /**
+     * Вызывается в начале анимации притягивания к одной из `magneticAreas`
+     */
+    onMagnetize?: (index: number) => void;
+    /**
+     * Вызывается после окончания анимации притягивания
+     */
+    onMagnetizeEnd?: () => void;
+    /**
+     * Вызывается при изменении положения шторки
+     */
+    onOffsetChange?: (offset: number, percent: number) => void;
 };
 export { BottomSheetTitleAlign, BottomSheetProps };

package/esm/utils.d.ts

@@ -1,8 +1,8 @@
 declare const TIMEOUT = 500;
 declare const SWIPE_VELOCITY = 0.4;
 declare const MARKER_HEIGHT = 24;
-declare const HEADER_OFFSET = 24;
 declare const CLOSE_OFFSET = 0.2;
 declare const SCROLL_OFFSET = 1;
-declare const convertPercentToNumber: (value: string | number, fullHeight: number) => number;
-export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, HEADER_OFFSET, CLOSE_OFFSET, SCROLL_OFFSET, convertPercentToNumber };
+declare const HEADER_OFFSET = 24;
+declare const convertPercentToNumber: (value: string | number, fullHeight: number, headerOffset?: number) => number;
+export { TIMEOUT, SWIPE_VELOCITY, MARKER_HEIGHT, CLOSE_OFFSET, SCROLL_OFFSET, HEADER_OFFSET, convertPercentToNumber };

package/esm/utils.js

@@ -1,12 +1,12 @@
 var TIMEOUT = 500;
 var SWIPE_VELOCITY = 0.4;
 var MARKER_HEIGHT = 24;
-/* Верхний отступ шторки, если она открыта на максимальную высоту */
-var HEADER_OFFSET = 24;
 var CLOSE_OFFSET = 0.2;
 var SCROLL_OFFSET = 1;
-var convertPercentToNumber = function (value, fullHeight) {
-    var maxHeight = fullHeight - HEADER_OFFSET;
+var HEADER_OFFSET = 24;
+var convertPercentToNumber = function (value, fullHeight, headerOffset) {
+    if (headerOffset === void 0) { headerOffset = HEADER_OFFSET; }
+    var maxHeight = fullHeight - headerOffset;
     if (typeof value === 'string') {
         var percent = parseFloat(value) / 100;
         if (percent < 0) {

package/index.css

@@ -1,4 +1,4 @@
-/* hash: 1eiy8 */
+/* hash: x87uh */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -45,20 +45,23 @@
 } :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_1ttf0 {
+} .bottom-sheet__modal_1qfi2 {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_1ttf0 {
+} .bottom-sheet__wrapper_1qfi2 {
     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_1ttf0 {
+    transition: border-radius 0.3s ease;
+} .bottom-sheet__fullscreen_1qfi2 {
+    border-radius: 0;
+} .bottom-sheet__component_1qfi2 {
     overflow: hidden;
     position: relative;
     display: flex;
@@ -66,16 +69,16 @@
     border-radius: inherit;
     background-color: var(--color-light-bg-primary);
     pointer-events: all;
-} .bottom-sheet__withTransition_1ttf0 {
+} .bottom-sheet__withTransition_1qfi2 {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_1ttf0 {
+} .bottom-sheet__scrollableContainer_1qfi2 {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_1ttf0 {
+} .bottom-sheet__marker_1qfi2 {
     position: fixed;
     top: var(--gap-2xs);
     left: 50%;
@@ -85,7 +88,7 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
     z-index: 1000;
-} .bottom-sheet__content_1ttf0 {
+} .bottom-sheet__content_1qfi2 {
     position: relative;
     z-index: 0;
     display: flex;
@@ -94,73 +97,73 @@
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
     background-color: inherit;
-} .bottom-sheet__noHeader_1ttf0 {
+} .bottom-sheet__noHeader_1qfi2 {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_1ttf0 {
+} .bottom-sheet__noFooter_1qfi2 {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_1ttf0 {
+} .bottom-sheet__scrollLocked_1qfi2 {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_1ttf0 {
+} .bottom-sheet__hiddenScrollbar_1qfi2 {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_1ttf0::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1qfi2::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_1ttf0 {
+    } .bottom-sheet__disabledPointerEvents_1qfi2 {
     pointer-events: none;
-} .bottom-sheet__appear_1ttf0 .bottom-sheet__wrapper_1ttf0, .bottom-sheet__enter_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+} .bottom-sheet__appear_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__enter_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transition: none;
-    } .bottom-sheet__appearActive_1ttf0 .bottom-sheet__wrapper_1ttf0, .bottom-sheet__enterActive_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+    } .bottom-sheet__appearActive_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__enterActive_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_1ttf0 .bottom-sheet__wrapper_1ttf0, .bottom-sheet__appearDone_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+    } .bottom-sheet__enterDone_1qfi2 .bottom-sheet__wrapper_1qfi2, .bottom-sheet__appearDone_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transform: translateY(0);
-    } .bottom-sheet__exit_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+    } .bottom-sheet__exit_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_1ttf0 .bottom-sheet__wrapper_1ttf0 {
+    } .bottom-sheet__exitActive_1qfi2 .bottom-sheet__wrapper_1qfi2 {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_1ttf0 {
+    } .bottom-sheet__background-accent_1qfi2 {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_1ttf0 {
+        } .bottom-sheet__background-info_1qfi2 {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_1ttf0 {
+        } .bottom-sheet__background-attention-muted_1qfi2 {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_1ttf0 {
+        } .bottom-sheet__background-positive-muted_1qfi2 {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_1ttf0 {
+        } .bottom-sheet__background-negative-muted_1qfi2 {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_1ttf0 {
+        } .bottom-sheet__background-primary_1qfi2 {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_1ttf0 {
+        } .bottom-sheet__background-primary-inverted_1qfi2 {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_1ttf0 {
+        } .bottom-sheet__background-secondary_1qfi2 {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_1ttf0 {
+        } .bottom-sheet__background-secondary-inverted_1qfi2 {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_1ttf0 {
+        } .bottom-sheet__background-tertiary_1qfi2 {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_1ttf0 {
+        } .bottom-sheet__background-tertiary-inverted_1qfi2 {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_1ttf0 {
+        } .bottom-sheet__background-quaternary_1qfi2 {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_1ttf0 {
+        } .bottom-sheet__background-quaternary-inverted_1qfi2 {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_1ttf0 {
+        } .bottom-sheet__background-specialbg-component_1qfi2 {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_1ttf0 {
+        } .bottom-sheet__background-specialbg-component-inverted_1qfi2 {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_1ttf0 {
+        } .bottom-sheet__background-specialbg-primary-grouped_1qfi2 {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_1ttf0 {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1qfi2 {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_1ttf0 {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1qfi2 {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_1ttf0 {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1qfi2 {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1ttf0 {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1qfi2 {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_1ttf0 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1qfi2 {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1ttf0 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1qfi2 {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/index.js

@@ -11,6 +11,7 @@ require('react-merge-refs');
 require('react-swipeable');
 require('classnames');
 require('@alfalab/core-components-base-modal');
+require('@alfalab/core-components-shared');
 require('./components/footer/Component.js');
 require('./components/header/Component.js');
 require('@alfalab/core-components-navigation-bar');