@alfalab/core-components-bottom-sheet 6.4.2 → 6.6.0

package/esm/index.css

@@ -1,4 +1,4 @@
-/* hash: 1rth5 */
+/* hash: 1fqan */
 :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_7sflj {
+} .bottom-sheet__modal_1vjtp {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_7sflj {
+} .bottom-sheet__wrapper_1vjtp {
     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_7sflj {
+    transition: border-radius 0.3s ease;
+} .bottom-sheet__fullscreen_1vjtp {
+    border-radius: 0;
+} .bottom-sheet__component_1vjtp {
     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_7sflj {
+} .bottom-sheet__withTransition_1vjtp {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_7sflj {
+} .bottom-sheet__scrollableContainer_1vjtp {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_7sflj {
+} .bottom-sheet__marker_1vjtp {
     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_7sflj {
+} .bottom-sheet__content_1vjtp {
     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_7sflj {
+} .bottom-sheet__noHeader_1vjtp {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_7sflj {
+} .bottom-sheet__noFooter_1vjtp {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_7sflj {
+} .bottom-sheet__scrollLocked_1vjtp {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_7sflj {
+} .bottom-sheet__hiddenScrollbar_1vjtp {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_7sflj::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1vjtp::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_7sflj {
+    } .bottom-sheet__disabledPointerEvents_1vjtp {
     pointer-events: none;
-} .bottom-sheet__appear_7sflj .bottom-sheet__wrapper_7sflj, .bottom-sheet__enter_7sflj .bottom-sheet__wrapper_7sflj {
+} .bottom-sheet__appear_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__enter_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: none;
-    } .bottom-sheet__appearActive_7sflj .bottom-sheet__wrapper_7sflj, .bottom-sheet__enterActive_7sflj .bottom-sheet__wrapper_7sflj {
+    } .bottom-sheet__appearActive_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__enterActive_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_7sflj .bottom-sheet__wrapper_7sflj, .bottom-sheet__appearDone_7sflj .bottom-sheet__wrapper_7sflj {
+    } .bottom-sheet__enterDone_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__appearDone_1vjtp .bottom-sheet__wrapper_1vjtp {
         transform: translateY(0);
-    } .bottom-sheet__exit_7sflj .bottom-sheet__wrapper_7sflj {
+    } .bottom-sheet__exit_1vjtp .bottom-sheet__wrapper_1vjtp {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_7sflj .bottom-sheet__wrapper_7sflj {
+    } .bottom-sheet__exitActive_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_7sflj {
+    } .bottom-sheet__background-accent_1vjtp {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_7sflj {
+        } .bottom-sheet__background-info_1vjtp {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_7sflj {
+        } .bottom-sheet__background-attention-muted_1vjtp {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_7sflj {
+        } .bottom-sheet__background-positive-muted_1vjtp {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_7sflj {
+        } .bottom-sheet__background-negative-muted_1vjtp {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_7sflj {
+        } .bottom-sheet__background-primary_1vjtp {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_7sflj {
+        } .bottom-sheet__background-primary-inverted_1vjtp {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_7sflj {
+        } .bottom-sheet__background-secondary_1vjtp {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_7sflj {
+        } .bottom-sheet__background-secondary-inverted_1vjtp {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_7sflj {
+        } .bottom-sheet__background-tertiary_1vjtp {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_7sflj {
+        } .bottom-sheet__background-tertiary-inverted_1vjtp {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_7sflj {
+        } .bottom-sheet__background-quaternary_1vjtp {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_7sflj {
+        } .bottom-sheet__background-quaternary-inverted_1vjtp {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_7sflj {
+        } .bottom-sheet__background-specialbg-component_1vjtp {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_7sflj {
+        } .bottom-sheet__background-specialbg-component-inverted_1vjtp {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_7sflj {
+        } .bottom-sheet__background-specialbg-primary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_7sflj {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_7sflj {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_7sflj {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1vjtp {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_7sflj {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1vjtp {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_7sflj {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1vjtp {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_7sflj {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1vjtp {
             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;
     /**
      * Слот слева
      */
@@ -207,6 +215,26 @@ type BottomSheetProps = {
      * Скрыть скроллбар внутри шторки
      */
     hideScrollbar?: boolean;
+    /**
+     * Верхний отступ шторки, если она открыта на максимальную высоту
+     */
+    headerOffset?: number;
+    /**
+     * Содержимое bottom-sheet всегда в DOM
+     */
+    keepMounted?: boolean;
+    /**
+     * Отключает автоматический перевод фокуса на bottom-sheet при открытии
+     */
+    disableAutoFocus?: boolean;
+    /**
+     * Отключает восстановление фокуса на предыдущем элементе после закрытия bottom-sheet
+     */
+    disableRestoreFocus?: boolean;
+    /**
+     * Отключает вызов `onClose` при нажатии Escape
+     */
+    disableEscapeKeyDown?: boolean;
     /**
      * Обработчик закрытия
      */
@@ -216,8 +244,16 @@ type BottomSheetProps = {
      */
     onBack?: () => void;
     /**
-     * Вызывается после притягивания к одной из `magneticAreas`
+     * Вызывается в начале анимации притягивания к одной из `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: 1rth5 */
+/* hash: 1fqan */
 :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_7sflj {
+} .bottom-sheet__modal_1vjtp {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_7sflj {
+} .bottom-sheet__wrapper_1vjtp {
     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_7sflj {
+    transition: border-radius 0.3s ease;
+} .bottom-sheet__fullscreen_1vjtp {
+    border-radius: 0;
+} .bottom-sheet__component_1vjtp {
     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_7sflj {
+} .bottom-sheet__withTransition_1vjtp {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_7sflj {
+} .bottom-sheet__scrollableContainer_1vjtp {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_7sflj {
+} .bottom-sheet__marker_1vjtp {
     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_7sflj {
+} .bottom-sheet__content_1vjtp {
     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_7sflj {
+} .bottom-sheet__noHeader_1vjtp {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_7sflj {
+} .bottom-sheet__noFooter_1vjtp {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_7sflj {
+} .bottom-sheet__scrollLocked_1vjtp {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_7sflj {
+} .bottom-sheet__hiddenScrollbar_1vjtp {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_7sflj::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1vjtp::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_7sflj {
+    } .bottom-sheet__disabledPointerEvents_1vjtp {
     pointer-events: none;
-} .bottom-sheet__appear_7sflj .bottom-sheet__wrapper_7sflj, .bottom-sheet__enter_7sflj .bottom-sheet__wrapper_7sflj {
+} .bottom-sheet__appear_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__enter_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: none;
-    } .bottom-sheet__appearActive_7sflj .bottom-sheet__wrapper_7sflj, .bottom-sheet__enterActive_7sflj .bottom-sheet__wrapper_7sflj {
+    } .bottom-sheet__appearActive_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__enterActive_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_7sflj .bottom-sheet__wrapper_7sflj, .bottom-sheet__appearDone_7sflj .bottom-sheet__wrapper_7sflj {
+    } .bottom-sheet__enterDone_1vjtp .bottom-sheet__wrapper_1vjtp, .bottom-sheet__appearDone_1vjtp .bottom-sheet__wrapper_1vjtp {
         transform: translateY(0);
-    } .bottom-sheet__exit_7sflj .bottom-sheet__wrapper_7sflj {
+    } .bottom-sheet__exit_1vjtp .bottom-sheet__wrapper_1vjtp {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_7sflj .bottom-sheet__wrapper_7sflj {
+    } .bottom-sheet__exitActive_1vjtp .bottom-sheet__wrapper_1vjtp {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_7sflj {
+    } .bottom-sheet__background-accent_1vjtp {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_7sflj {
+        } .bottom-sheet__background-info_1vjtp {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_7sflj {
+        } .bottom-sheet__background-attention-muted_1vjtp {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_7sflj {
+        } .bottom-sheet__background-positive-muted_1vjtp {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_7sflj {
+        } .bottom-sheet__background-negative-muted_1vjtp {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_7sflj {
+        } .bottom-sheet__background-primary_1vjtp {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_7sflj {
+        } .bottom-sheet__background-primary-inverted_1vjtp {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_7sflj {
+        } .bottom-sheet__background-secondary_1vjtp {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_7sflj {
+        } .bottom-sheet__background-secondary-inverted_1vjtp {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_7sflj {
+        } .bottom-sheet__background-tertiary_1vjtp {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_7sflj {
+        } .bottom-sheet__background-tertiary-inverted_1vjtp {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_7sflj {
+        } .bottom-sheet__background-quaternary_1vjtp {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_7sflj {
+        } .bottom-sheet__background-quaternary-inverted_1vjtp {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_7sflj {
+        } .bottom-sheet__background-specialbg-component_1vjtp {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_7sflj {
+        } .bottom-sheet__background-specialbg-component-inverted_1vjtp {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_7sflj {
+        } .bottom-sheet__background-specialbg-primary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_7sflj {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_7sflj {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1vjtp {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_7sflj {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1vjtp {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_7sflj {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1vjtp {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_7sflj {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1vjtp {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_7sflj {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1vjtp {
             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');