@alfalab/core-components-bottom-sheet 4.5.1 → 4.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/CHANGELOG.md +43 -0
  2. package/{component-f022c60b.d.ts → component-640abf82.d.ts} +13 -0
  3. package/{component-f022c60b.js → component-640abf82.js} +5 -10
  4. package/component.js +2 -2
  5. package/components/backer/Component.js +2 -2
  6. package/components/backer/index.css +3 -3
  7. package/components/closer/Component.js +2 -2
  8. package/components/closer/index.css +3 -3
  9. package/components/footer/Component.js +1 -1
  10. package/components/footer/index.css +4 -4
  11. package/components/header/Component.js +2 -2
  12. package/components/header/index.css +17 -17
  13. package/components/swipeable-backdrop/Component.js +1 -1
  14. package/{esm/component-d7d8fd5e.d.ts → cssm/component-78755a1d.d.ts} +13 -0
  15. package/cssm/{component-eb26b84c.js → component-78755a1d.js} +4 -9
  16. package/cssm/component.js +5 -5
  17. package/cssm/components/backer/Component.js +1 -1
  18. package/cssm/components/closer/Component.js +2 -2
  19. package/cssm/components/footer/Component.js +1 -1
  20. package/cssm/components/header/Component.js +5 -5
  21. package/cssm/components/swipeable-backdrop/Component.js +1 -1
  22. package/cssm/index.d.ts +1 -1
  23. package/cssm/index.js +5 -5
  24. package/cssm/index.module.css +3 -3
  25. package/{cssm/component-eb26b84c.d.ts → esm/component-ccb0592e.d.ts} +13 -0
  26. package/esm/{component-d7d8fd5e.js → component-ccb0592e.js} +7 -12
  27. package/esm/component.js +6 -6
  28. package/esm/components/backer/Component.js +3 -3
  29. package/esm/components/backer/index.css +3 -3
  30. package/esm/components/closer/Component.js +4 -4
  31. package/esm/components/closer/index.css +3 -3
  32. package/esm/components/footer/Component.js +2 -2
  33. package/esm/components/footer/index.css +4 -4
  34. package/esm/components/header/Component.js +6 -6
  35. package/esm/components/header/index.css +17 -17
  36. package/esm/components/swipeable-backdrop/Component.js +2 -2
  37. package/esm/index.css +19 -19
  38. package/esm/index.d.ts +1 -1
  39. package/esm/index.js +6 -6
  40. package/esm/{tslib.es6-fb144452.d.ts → tslib.es6-7bd2d41b.d.ts} +0 -0
  41. package/esm/{tslib.es6-fb144452.js → tslib.es6-7bd2d41b.js} +0 -0
  42. package/index.css +19 -19
  43. package/index.d.ts +1 -1
  44. package/index.js +2 -2
  45. package/modern/{component-9e2002e4.d.ts → component-1c3da841.d.ts} +13 -0
  46. package/modern/{component-9e2002e4.js → component-1c3da841.js} +7 -6
  47. package/modern/component.js +5 -5
  48. package/modern/components/backer/Component.js +2 -2
  49. package/modern/components/backer/index.css +3 -3
  50. package/modern/components/closer/Component.js +3 -3
  51. package/modern/components/closer/index.css +3 -3
  52. package/modern/components/footer/Component.js +2 -2
  53. package/modern/components/footer/index.css +4 -4
  54. package/modern/components/header/Component.js +5 -5
  55. package/modern/components/header/index.css +17 -17
  56. package/modern/components/swipeable-backdrop/Component.js +1 -1
  57. package/modern/index.css +19 -19
  58. package/modern/index.d.ts +1 -1
  59. package/modern/index.js +5 -5
  60. package/package.json +6 -6
  61. /package/{tslib.es6-545c30b9.d.ts → tslib.es6-fd688139.d.ts} +0 -0
  62. /package/{tslib.es6-545c30b9.js → tslib.es6-fd688139.js} +0 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,48 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [4.6.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-bottom-sheet@4.6.1...@alfalab/core-components-bottom-sheet@4.6.2) (2022-07-25)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **bottom-sheet:** fix component border-radius ([#157](https://github.com/core-ds/core-components/issues/157)) ([57b767e](https://github.com/core-ds/core-components/commit/57b767e43e40e9170967e3a53481e21f92cb0190))
12
+ * **bottom-sheet:** fix doc ([#163](https://github.com/core-ds/core-components/issues/163)) ([cbf3282](https://github.com/core-ds/core-components/commit/cbf32828bc2fe472d59d52c1e5644e7934262d73))
13
+
14
+
15
+
16
+
17
+
18
+ ## [4.6.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-bottom-sheet@4.6.0...@alfalab/core-components-bottom-sheet@4.6.1) (2022-07-18)
19
+
20
+ **Note:** Version bump only for package @alfalab/core-components-bottom-sheet
21
+
22
+
23
+
24
+
25
+
26
+ # [4.6.0](https://github.com/core-ds/core-components/compare/@alfalab/core-components-bottom-sheet@4.5.2...@alfalab/core-components-bottom-sheet@4.6.0) (2022-07-15)
27
+
28
+
29
+ ### Features
30
+
31
+ * **bottom-sheet:** add props for disable blocking scroll and modal wrapper classname ([#147](https://github.com/core-ds/core-components/issues/147)) ([a873c20](https://github.com/core-ds/core-components/commit/a873c2035d4885c1b8e5ffae02ce75c4826d1e71))
32
+
33
+
34
+
35
+
36
+
37
+ ## [4.5.2](https://github.com/core-ds/core-components/compare/@alfalab/core-components-bottom-sheet@4.5.1...@alfalab/core-components-bottom-sheet@4.5.2) (2022-07-15)
38
+
39
+
40
+ ### Bug Fixes
41
+
42
+ * bump packages version ([#153](https://github.com/core-ds/core-components/issues/153)) ([fd3e082](https://github.com/core-ds/core-components/commit/fd3e08205672129cdce04e1000c673f2cd9c10da))
43
+
44
+
45
+
46
+
47
+
6
48
  ## [4.5.1](https://github.com/core-ds/core-components/compare/@alfalab/core-components-bottom-sheet@4.5.0...@alfalab/core-components-bottom-sheet@4.5.1) (2022-07-14)
7
49
 
8
50
  **Note:** Version bump only for package @alfalab/core-components-bottom-sheet
@@ -278,4 +320,5 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
278
320
 
279
321
  ### Features
280
322
 
323
+
281
324
  * **bottom-sheet:** new component (PDS-228) ([#645](https://github.com/core-ds/core-components/issues/645)) ([1f7391d](https://github.com/core-ds/core-components/commit/1f7391df16a270d8a3a28b8ebaf98d0ed0928bc8)), closes [#642](https://github.com/core-ds/core-components/issues/642) [#642](https://github.com/core-ds/core-components/issues/642) [#646](https://github.com/core-ds/core-components/issues/646) [#646](https://github.com/core-ds/core-components/issues/646) [#634](https://github.com/core-ds/core-components/issues/634) [#635](https://github.com/core-ds/core-components/issues/635) [#634](https://github.com/core-ds/core-components/issues/634) [#635](https://github.com/core-ds/core-components/issues/635) [#648](https://github.com/core-ds/core-components/issues/648) [#647](https://github.com/core-ds/core-components/issues/647) [#630](https://github.com/core-ds/core-components/issues/630) [#648](https://github.com/core-ds/core-components/issues/648) [#630](https://github.com/core-ds/core-components/issues/630) [#669](https://github.com/core-ds/core-components/issues/669)
@@ -4,6 +4,7 @@ import React from "react";
4
4
  import { FC, ReactNode, HTMLAttributes } from "react";
5
5
  import { BottomSheetTitleAlign } from "./index";
6
6
  import { TransitionProps } from 'react-transition-group/Transition';
7
+ import { BaseModalProps } from "@alfalab/core-components-base-modal";
7
8
  type HeaderProps = {
8
9
  /**
9
10
  * Заголовок
@@ -121,6 +122,10 @@ type BottomSheetProps = {
121
122
  * Дополнительный класс для компонента модального окна
122
123
  */
123
124
  modalClassName?: string;
125
+ /**
126
+ * Дополнительный класс для обертки модального окна
127
+ */
128
+ modalWrapperClassName?: string;
124
129
  /**
125
130
  * TransitionProps, прокидываются в компонент CSSTransitionProps.
126
131
  */
@@ -190,10 +195,18 @@ type BottomSheetProps = {
190
195
  * Запретить закрытие шторки кликом на оверлэй
191
196
  */
192
197
  disableOverlayClick?: boolean;
198
+ /**
199
+ * Отключает блокировку скролла при открытии модального окна
200
+ */
201
+ disableBlockingScroll?: boolean;
193
202
  /**
194
203
  * Не анимировать шторку при изменении размера вьюпорта
195
204
  */
196
205
  ignoreScreenChange?: boolean;
206
+ /**
207
+ * Свойства для Бэкдропа
208
+ */
209
+ backdropProps?: BaseModalProps['backdropProps'];
197
210
  /**
198
211
  * Обработчик закрытия
199
212
  */
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var tslib_es6 = require('./tslib.es6-545c30b9.js');
3
+ var tslib_es6 = require('./tslib.es6-fd688139.js');
4
4
  var React = require('react');
5
5
  var cn = require('classnames');
6
6
  var reactDiv100vh = require('react-div-100vh');
@@ -17,7 +17,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
17
17
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
18
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
19
19
 
20
- var styles = {"headerWrapper":"bottom-sheet__headerWrapper_1xjmw","header":"bottom-sheet__header_1xjmw","sticky":"bottom-sheet__sticky_1xjmw","highlighted":"bottom-sheet__highlighted_1xjmw","justifyEnd":"bottom-sheet__justifyEnd_1xjmw","addon":"bottom-sheet__addon_1xjmw","addonFixed":"bottom-sheet__addonFixed_1xjmw","addonLeft":"bottom-sheet__addonLeft_1xjmw","addonRight":"bottom-sheet__addonRight_1xjmw","title":"bottom-sheet__title_1xjmw","titleCenter":"bottom-sheet__titleCenter_1xjmw","titleLeft":"bottom-sheet__titleLeft_1xjmw","trimTitle":"bottom-sheet__trimTitle_1xjmw","titleBigIndentHorizontal":"bottom-sheet__titleBigIndentHorizontal_1xjmw","titleIndentRight":"bottom-sheet__titleIndentRight_1xjmw","titleIndentLeft":"bottom-sheet__titleIndentLeft_1xjmw"};
20
+ var styles = {"headerWrapper":"bottom-sheet__headerWrapper_1hskz","header":"bottom-sheet__header_1hskz","sticky":"bottom-sheet__sticky_1hskz","highlighted":"bottom-sheet__highlighted_1hskz","justifyEnd":"bottom-sheet__justifyEnd_1hskz","addon":"bottom-sheet__addon_1hskz","addonFixed":"bottom-sheet__addonFixed_1hskz","addonLeft":"bottom-sheet__addonLeft_1hskz","addonRight":"bottom-sheet__addonRight_1hskz","title":"bottom-sheet__title_1hskz","titleCenter":"bottom-sheet__titleCenter_1hskz","titleLeft":"bottom-sheet__titleLeft_1hskz","trimTitle":"bottom-sheet__trimTitle_1hskz","titleBigIndentHorizontal":"bottom-sheet__titleBigIndentHorizontal_1hskz","titleIndentRight":"bottom-sheet__titleIndentRight_1hskz","titleIndentLeft":"bottom-sheet__titleIndentLeft_1hskz"};
21
21
  require('./components/header/index.css')
22
22
 
23
23
  var Header = function (_a) {
@@ -67,7 +67,7 @@ var Header = function (_a) {
67
67
  bottomAddons));
68
68
  };
69
69
 
70
- var styles$1 = {"modal":"bottom-sheet__modal_14cdf","component":"bottom-sheet__component_14cdf","withTransition":"bottom-sheet__withTransition_14cdf","withZeroTransition":"bottom-sheet__withZeroTransition_14cdf","scrollableContainer":"bottom-sheet__scrollableContainer_14cdf","marker":"bottom-sheet__marker_14cdf","content":"bottom-sheet__content_14cdf","noHeader":"bottom-sheet__noHeader_14cdf","noFooter":"bottom-sheet__noFooter_14cdf","scrollLocked":"bottom-sheet__scrollLocked_14cdf","appear":"bottom-sheet__appear_14cdf","enter":"bottom-sheet__enter_14cdf","appearActive":"bottom-sheet__appearActive_14cdf","enterActive":"bottom-sheet__enterActive_14cdf","enterDone":"bottom-sheet__enterDone_14cdf","appearDone":"bottom-sheet__appearDone_14cdf","exit":"bottom-sheet__exit_14cdf","exitActive":"bottom-sheet__exitActive_14cdf"};
70
+ var styles$1 = {"modal":"bottom-sheet__modal_1dcpm","component":"bottom-sheet__component_1dcpm","withTransition":"bottom-sheet__withTransition_1dcpm","withZeroTransition":"bottom-sheet__withZeroTransition_1dcpm","scrollableContainer":"bottom-sheet__scrollableContainer_1dcpm","marker":"bottom-sheet__marker_1dcpm","content":"bottom-sheet__content_1dcpm","noHeader":"bottom-sheet__noHeader_1dcpm","noFooter":"bottom-sheet__noFooter_1dcpm","scrollLocked":"bottom-sheet__scrollLocked_1dcpm","appear":"bottom-sheet__appear_1dcpm","enter":"bottom-sheet__enter_1dcpm","appearActive":"bottom-sheet__appearActive_1dcpm","enterActive":"bottom-sheet__enterActive_1dcpm","enterDone":"bottom-sheet__enterDone_1dcpm","appearDone":"bottom-sheet__appearDone_1dcpm","exit":"bottom-sheet__exit_1dcpm","exitActive":"bottom-sheet__exitActive_1dcpm"};
71
71
  require('./index.css')
72
72
 
73
73
  var TIMEOUT = 300;
@@ -80,7 +80,7 @@ var HEADER_OFFSET = 24;
80
80
  var CLOSE_OFFSET = 0.2;
81
81
  var BottomSheet = React.forwardRef(function (_a, ref) {
82
82
  var _b, _c, _d;
83
- var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, _k = _a.ignoreScreenChange, ignoreScreenChange = _k === void 0 ? false : _k, onClose = _a.onClose, onBack = _a.onBack;
83
+ var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, _k = _a.ignoreScreenChange, ignoreScreenChange = _k === void 0 ? false : _k, backdropProps = _a.backdropProps, onClose = _a.onClose, onBack = _a.onBack;
84
84
  var _l = React.useState(0), sheetOffset = _l[0], setSheetOffset = _l[1];
85
85
  var _m = React.useState(1), backdropOpacity = _m[0], setBackdropOpacity = _m[1];
86
86
  var _o = React.useState(false), scrollLocked = _o[0], setScrollLocked = _o[1];
@@ -232,12 +232,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
232
232
  height: initialHeight === 'full' ? targetHeight : 'unset',
233
233
  maxHeight: targetHeight,
234
234
  }); };
235
- return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, { open: open, ref: ref, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: components_swipeableBackdrop_Component.SwipeableBackdrop, backdropProps: {
236
- opacity: backdropOpacity,
237
- handlers: swipeable ? backdropSwipeablehandlers : false,
238
- opacityTimeout: TIMEOUT,
239
- invisible: initialHeight === 'full' ? false : hideOverlay,
240
- }, disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: cn__default['default'](styles$1.modal, modalClassName), transitionProps: tslib_es6.__assign(tslib_es6.__assign({ appear: true, timeout: TIMEOUT, classNames: styles$1 }, transitionProps), { onExited: handleExited, onEntered: handleEntered }) },
235
+ return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, { open: open, ref: ref, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: components_swipeableBackdrop_Component.SwipeableBackdrop, backdropProps: tslib_es6.__assign(tslib_es6.__assign({}, backdropProps), { opacity: backdropOpacity, handlers: swipeable ? backdropSwipeablehandlers : false, opacityTimeout: TIMEOUT, invisible: initialHeight === 'full' ? false : hideOverlay }), disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: cn__default['default'](styles$1.modal, modalClassName), wrapperClassName: modalWrapperClassName, disableBlockingScroll: disableBlockingScroll, transitionProps: tslib_es6.__assign(tslib_es6.__assign({ appear: true, timeout: TIMEOUT, classNames: styles$1 }, transitionProps), { onExited: handleExited, onEntered: handleEntered }) },
241
236
  React__default['default'].createElement("div", tslib_es6.__assign({ className: cn__default['default'](styles$1.component, className, (_b = {},
242
237
  _b[transitionClassName] = !sheetOffset,
243
238
  _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeablehandlers),
package/component.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('./tslib.es6-545c30b9.js');
5
+ require('./tslib.es6-fd688139.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  require('react-div-100vh');
@@ -14,7 +14,7 @@ require('@alfalab/icons-glyph/CrossMIcon');
14
14
  require('./components/closer/Component.js');
15
15
  require('@alfalab/icons-glyph/ArrowBackMIcon');
16
16
  require('./components/backer/Component.js');
17
- var components_header_Component = require('./component-f022c60b.js');
17
+ var components_header_Component = require('./component-640abf82.js');
18
18
  require('./components/footer/Component.js');
19
19
  require('@alfalab/core-components-backdrop');
20
20
  require('./components/swipeable-backdrop/Component.js');
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-545c30b9.js');
5
+ var tslib_es6 = require('../../tslib.es6-fd688139.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
8
  var coreComponentsIconButton = require('@alfalab/core-components-icon-button');
@@ -13,7 +13,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
15
15
 
16
- var styles = {"backer":"bottom-sheet__backer_r1cya","button":"bottom-sheet__button_r1cya"};
16
+ var styles = {"backer":"bottom-sheet__backer_14xzk","button":"bottom-sheet__button_14xzk"};
17
17
  require('./index.css')
18
18
 
19
19
  var Backer = function (_a) {
@@ -1,9 +1,9 @@
1
- /* hash: it13w */
1
+ /* hash: 1hgxs */
2
2
  :root {
3
3
  --bottom-sheet-backer-bg-color: var(--color-light-bg-primary-inverted-alpha-3);
4
4
  }
5
5
 
6
- .bottom-sheet__backer_r1cya {
6
+ .bottom-sheet__backer_14xzk {
7
7
  width: 32px;
8
8
  height: 32px;
9
9
  display: flex;
@@ -13,7 +13,7 @@
13
13
  color: var(--color-light-graphic-primary);
14
14
  }
15
15
 
16
- .bottom-sheet__button_r1cya {
16
+ .bottom-sheet__button_14xzk {
17
17
  background: var(--bottom-sheet-backer-bg-color);
18
18
  -webkit-backdrop-filter: blur(10px);
19
19
  backdrop-filter: blur(10px);
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-545c30b9.js');
5
+ var tslib_es6 = require('../../tslib.es6-fd688139.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
8
  var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
@@ -14,7 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
14
14
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
15
15
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
16
16
 
17
- var styles = {"closer":"bottom-sheet__closer_1pec2","button":"bottom-sheet__button_1pec2"};
17
+ var styles = {"closer":"bottom-sheet__closer_1yeo9","button":"bottom-sheet__button_1yeo9"};
18
18
  require('./index.css')
19
19
 
20
20
  var Closer = function (_a) {
@@ -1,9 +1,9 @@
1
- /* hash: tj8z2 */
1
+ /* hash: 1jhck */
2
2
  :root {
3
3
  --bottom-sheet-closer-bg-color: var(--color-light-bg-primary-inverted-alpha-3);
4
4
  }
5
5
 
6
- .bottom-sheet__closer_1pec2 {
6
+ .bottom-sheet__closer_1yeo9 {
7
7
  width: 32px;
8
8
  height: 32px;
9
9
  display: flex;
@@ -13,7 +13,7 @@
13
13
  color: var(--color-light-graphic-primary);
14
14
  }
15
15
 
16
- .bottom-sheet__button_1pec2 {
16
+ .bottom-sheet__button_1yeo9 {
17
17
  background: var(--bottom-sheet-closer-bg-color);
18
18
  -webkit-backdrop-filter: blur(10px);
19
19
  backdrop-filter: blur(10px);
@@ -11,7 +11,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
12
12
  var cn__default = /*#__PURE__*/_interopDefaultLegacy(cn);
13
13
 
14
- var styles = {"footer":"bottom-sheet__footer_es7e8","sticky":"bottom-sheet__sticky_es7e8","highlighted":"bottom-sheet__highlighted_es7e8"};
14
+ var styles = {"footer":"bottom-sheet__footer_1fcyh","sticky":"bottom-sheet__sticky_1fcyh","highlighted":"bottom-sheet__highlighted_1fcyh"};
15
15
  require('./index.css')
16
16
 
17
17
  var Footer = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 1jo20 */
1
+ /* hash: 1jlm4 */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  --color-light-border-primary: #dbdee1;
@@ -18,15 +18,15 @@
18
18
  --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-primary);
19
19
  --bottom-sheet-footer-background-color: var(--color-light-bg-primary);
20
20
  }
21
- .bottom-sheet__footer_es7e8 {
21
+ .bottom-sheet__footer_1fcyh {
22
22
  padding: var(--gap-m) var(--gap-m);
23
23
  background-color: var(--color-light-bg-primary);
24
24
  }
25
- .bottom-sheet__sticky_es7e8 {
25
+ .bottom-sheet__sticky_1fcyh {
26
26
  position: sticky;
27
27
  bottom: 0;
28
28
  }
29
- .bottom-sheet__highlighted_es7e8 {
29
+ .bottom-sheet__highlighted_1fcyh {
30
30
  border-top: var(--bottom-sheet-footer-border-top);
31
31
  background-color: var(--bottom-sheet-footer-background-color);
32
32
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('../../tslib.es6-545c30b9.js');
5
+ require('../../tslib.es6-fd688139.js');
6
6
  require('react');
7
7
  require('classnames');
8
8
  require('react-div-100vh');
@@ -14,7 +14,7 @@ require('@alfalab/icons-glyph/CrossMIcon');
14
14
  require('../closer/Component.js');
15
15
  require('@alfalab/icons-glyph/ArrowBackMIcon');
16
16
  require('../backer/Component.js');
17
- var components_header_Component = require('../../component-f022c60b.js');
17
+ var components_header_Component = require('../../component-640abf82.js');
18
18
  require('../footer/Component.js');
19
19
  require('@alfalab/core-components-backdrop');
20
20
  require('../swipeable-backdrop/Component.js');
@@ -1,4 +1,4 @@
1
- /* hash: 18qz5 */
1
+ /* hash: a32gl */
2
2
  :root {
3
3
  --color-light-bg-primary: #fff;
4
4
  }
@@ -30,7 +30,7 @@
30
30
  --bottom-sheet-title-font-family: var(--font-family-system);
31
31
  --bottom-sheet-title-margin-vertical: var(--gap-2xs);
32
32
  }
33
- .bottom-sheet__headerWrapper_1xjmw {
33
+ .bottom-sheet__headerWrapper_1hskz {
34
34
  padding: var(--gap-xs);
35
35
  padding-bottom: 0;
36
36
  background-color: var(--color-light-bg-primary);
@@ -38,38 +38,38 @@
38
38
  border-top-left-radius: var(--border-radius-xl);
39
39
  z-index: 1;
40
40
  }
41
- .bottom-sheet__header_1xjmw {
41
+ .bottom-sheet__header_1hskz {
42
42
  display: flex;
43
43
  }
44
- .bottom-sheet__sticky_1xjmw {
44
+ .bottom-sheet__sticky_1hskz {
45
45
  position: sticky;
46
46
  top: 0;
47
47
  }
48
- .bottom-sheet__highlighted_1xjmw {
48
+ .bottom-sheet__highlighted_1hskz {
49
49
  border-bottom: var(--bottom-sheet-header-border-bottom);
50
50
  }
51
- .bottom-sheet__justifyEnd_1xjmw {
51
+ .bottom-sheet__justifyEnd_1hskz {
52
52
  justify-content: flex-end;
53
53
  }
54
- .bottom-sheet__addon_1xjmw {
54
+ .bottom-sheet__addon_1hskz {
55
55
  display: flex;
56
56
  justify-content: center;
57
57
  align-items: center;
58
58
  min-width: 48px;
59
59
  height: 48px;
60
60
  }
61
- .bottom-sheet__addonFixed_1xjmw {
61
+ .bottom-sheet__addonFixed_1hskz {
62
62
  position: fixed;
63
63
  }
64
- .bottom-sheet__addonLeft_1xjmw {
64
+ .bottom-sheet__addonLeft_1hskz {
65
65
  left: 0;
66
66
  margin-left: var(--gap-xs);
67
67
  }
68
- .bottom-sheet__addonRight_1xjmw {
68
+ .bottom-sheet__addonRight_1hskz {
69
69
  right: 0;
70
70
  margin-right: var(--gap-xs);
71
71
  }
72
- .bottom-sheet__title_1xjmw {
72
+ .bottom-sheet__title_1hskz {
73
73
  padding: var(--gap-xs) var(--gap-xs);
74
74
  margin: var(--bottom-sheet-title-margin-vertical) 0;
75
75
  width: 100%;
@@ -78,23 +78,23 @@
78
78
  line-height: var(--bottom-sheet-title-line-height);
79
79
  font-family: var(--bottom-sheet-title-font-family);
80
80
  }
81
- .bottom-sheet__titleCenter_1xjmw {
81
+ .bottom-sheet__titleCenter_1hskz {
82
82
  text-align: center;
83
83
  }
84
- .bottom-sheet__titleLeft_1xjmw {
84
+ .bottom-sheet__titleLeft_1hskz {
85
85
  text-align: left;
86
86
  }
87
- .bottom-sheet__trimTitle_1xjmw {
87
+ .bottom-sheet__trimTitle_1hskz {
88
88
  white-space: nowrap;
89
89
  overflow: hidden;
90
90
  text-overflow: ellipsis;
91
91
  }
92
- .bottom-sheet__titleBigIndentHorizontal_1xjmw {
92
+ .bottom-sheet__titleBigIndentHorizontal_1hskz {
93
93
  margin: var(--bottom-sheet-title-margin-vertical) var(--gap-4xl);
94
94
  }
95
- .bottom-sheet__titleIndentRight_1xjmw {
95
+ .bottom-sheet__titleIndentRight_1hskz {
96
96
  margin-right: var(--gap-4xl);
97
97
  }
98
- .bottom-sheet__titleIndentLeft_1xjmw {
98
+ .bottom-sheet__titleIndentLeft_1hskz {
99
99
  margin-left: var(--gap-4xl);
100
100
  }
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var tslib_es6 = require('../../tslib.es6-545c30b9.js');
5
+ var tslib_es6 = require('../../tslib.es6-fd688139.js');
6
6
  var React = require('react');
7
7
  var coreComponentsBackdrop = require('@alfalab/core-components-backdrop');
8
8
 
@@ -4,6 +4,7 @@ import React from "react";
4
4
  import { FC, ReactNode, HTMLAttributes } from "react";
5
5
  import { BottomSheetTitleAlign } from "./index";
6
6
  import { TransitionProps } from 'react-transition-group/Transition';
7
+ import { BaseModalProps } from "@alfalab/core-components-base-modal";
7
8
  type HeaderProps = {
8
9
  /**
9
10
  * Заголовок
@@ -121,6 +122,10 @@ type BottomSheetProps = {
121
122
  * Дополнительный класс для компонента модального окна
122
123
  */
123
124
  modalClassName?: string;
125
+ /**
126
+ * Дополнительный класс для обертки модального окна
127
+ */
128
+ modalWrapperClassName?: string;
124
129
  /**
125
130
  * TransitionProps, прокидываются в компонент CSSTransitionProps.
126
131
  */
@@ -190,10 +195,18 @@ type BottomSheetProps = {
190
195
  * Запретить закрытие шторки кликом на оверлэй
191
196
  */
192
197
  disableOverlayClick?: boolean;
198
+ /**
199
+ * Отключает блокировку скролла при открытии модального окна
200
+ */
201
+ disableBlockingScroll?: boolean;
193
202
  /**
194
203
  * Не анимировать шторку при изменении размера вьюпорта
195
204
  */
196
205
  ignoreScreenChange?: boolean;
206
+ /**
207
+ * Свойства для Бэкдропа
208
+ */
209
+ backdropProps?: BaseModalProps['backdropProps'];
197
210
  /**
198
211
  * Обработчик закрытия
199
212
  */
@@ -5,8 +5,8 @@ var React = require('react');
5
5
  var cn = require('classnames');
6
6
  var reactDiv100vh = require('react-div-100vh');
7
7
  var reactSwipeable = require('react-swipeable');
8
- var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/dist/cssm');
9
- var coreComponentsTypography = require('@alfalab/core-components-typography/dist/cssm');
8
+ var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
9
+ var coreComponentsTypography = require('@alfalab/core-components-typography/cssm');
10
10
  var components_closer_Component = require('./components/closer/Component.js');
11
11
  var components_backer_Component = require('./components/backer/Component.js');
12
12
  var styles = require('./components/header/index.module.css');
@@ -78,7 +78,7 @@ var HEADER_OFFSET = 24;
78
78
  var CLOSE_OFFSET = 0.2;
79
79
  var BottomSheet = React.forwardRef(function (_a, ref) {
80
80
  var _b, _c, _d;
81
- var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, _k = _a.ignoreScreenChange, ignoreScreenChange = _k === void 0 ? false : _k, onClose = _a.onClose, onBack = _a.onBack;
81
+ var open = _a.open, title = _a.title, actionButton = _a.actionButton, contentClassName = _a.contentClassName, containerClassName = _a.containerClassName, containerProps = _a.containerProps, headerClassName = _a.headerClassName, footerClassName = _a.footerClassName, addonClassName = _a.addonClassName, closerClassName = _a.closerClassName, backerClassName = _a.backerClassName, modalClassName = _a.modalClassName, modalWrapperClassName = _a.modalWrapperClassName, className = _a.className, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, bottomAddons = _a.bottomAddons, hasCloser = _a.hasCloser, hasBacker = _a.hasBacker, _e = _a.titleAlign, titleAlign = _e === void 0 ? 'left' : _e, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _f = _a.stickyFooter, stickyFooter = _f === void 0 ? true : _f, _g = _a.initialHeight, initialHeight = _g === void 0 ? 'default' : _g, hideOverlay = _a.hideOverlay, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, children = _a.children, zIndex = _a.zIndex, _h = _a.transitionProps, transitionProps = _h === void 0 ? {} : _h, dataTestId = _a.dataTestId, _j = _a.swipeable, swipeable = _j === void 0 ? true : _j, _k = _a.ignoreScreenChange, ignoreScreenChange = _k === void 0 ? false : _k, backdropProps = _a.backdropProps, onClose = _a.onClose, onBack = _a.onBack;
82
82
  var _l = React.useState(0), sheetOffset = _l[0], setSheetOffset = _l[1];
83
83
  var _m = React.useState(1), backdropOpacity = _m[0], setBackdropOpacity = _m[1];
84
84
  var _o = React.useState(false), scrollLocked = _o[0], setScrollLocked = _o[1];
@@ -230,12 +230,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
230
230
  height: initialHeight === 'full' ? targetHeight : 'unset',
231
231
  maxHeight: targetHeight,
232
232
  }); };
233
- return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, { open: open, ref: ref, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: components_swipeableBackdrop_Component.SwipeableBackdrop, backdropProps: {
234
- opacity: backdropOpacity,
235
- handlers: swipeable ? backdropSwipeablehandlers : false,
236
- opacityTimeout: TIMEOUT,
237
- invisible: initialHeight === 'full' ? false : hideOverlay,
238
- }, disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: cn__default['default'](styles__default$1['default'].modal, modalClassName), transitionProps: tslib_es6.__assign(tslib_es6.__assign({ appear: true, timeout: TIMEOUT, classNames: styles__default$1['default'] }, transitionProps), { onExited: handleExited, onEntered: handleEntered }) },
233
+ return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, { open: open, ref: ref, dataTestId: dataTestId, zIndex: zIndex, onClose: onClose, scrollHandler: scrollableContainer, Backdrop: components_swipeableBackdrop_Component.SwipeableBackdrop, backdropProps: tslib_es6.__assign(tslib_es6.__assign({}, backdropProps), { opacity: backdropOpacity, handlers: swipeable ? backdropSwipeablehandlers : false, opacityTimeout: TIMEOUT, invisible: initialHeight === 'full' ? false : hideOverlay }), disableBackdropClick: hideOverlay ? true : disableOverlayClick, className: cn__default['default'](styles__default$1['default'].modal, modalClassName), wrapperClassName: modalWrapperClassName, disableBlockingScroll: disableBlockingScroll, transitionProps: tslib_es6.__assign(tslib_es6.__assign({ appear: true, timeout: TIMEOUT, classNames: styles__default$1['default'] }, transitionProps), { onExited: handleExited, onEntered: handleEntered }) },
239
234
  React__default['default'].createElement("div", tslib_es6.__assign({ className: cn__default['default'](styles__default$1['default'].component, className, (_b = {},
240
235
  _b[transitionClassName] = !sheetOffset,
241
236
  _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeablehandlers),
package/cssm/component.js CHANGED
@@ -7,9 +7,9 @@ require('react');
7
7
  require('classnames');
8
8
  require('react-div-100vh');
9
9
  require('react-swipeable');
10
- require('@alfalab/core-components-base-modal/dist/cssm');
11
- require('@alfalab/core-components-typography/dist/cssm');
12
- require('@alfalab/core-components-icon-button/dist/cssm');
10
+ require('@alfalab/core-components-base-modal/cssm');
11
+ require('@alfalab/core-components-typography/cssm');
12
+ require('@alfalab/core-components-icon-button/cssm');
13
13
  require('@alfalab/icons-glyph/CrossMIcon');
14
14
  require('./components/closer/index.module.css');
15
15
  require('./components/closer/Component.js');
@@ -17,10 +17,10 @@ require('@alfalab/icons-glyph/ArrowBackMIcon');
17
17
  require('./components/backer/index.module.css');
18
18
  require('./components/backer/Component.js');
19
19
  require('./components/header/index.module.css');
20
- var components_header_Component = require('./component-eb26b84c.js');
20
+ var components_header_Component = require('./component-78755a1d.js');
21
21
  require('./components/footer/index.module.css');
22
22
  require('./components/footer/Component.js');
23
- require('@alfalab/core-components-backdrop/dist/cssm');
23
+ require('@alfalab/core-components-backdrop/cssm');
24
24
  require('./components/swipeable-backdrop/Component.js');
25
25
  require('./index.module.css');
26
26
 
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../tslib.es6-ce870b46.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
- var coreComponentsIconButton = require('@alfalab/core-components-icon-button/dist/cssm');
8
+ var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
9
9
  var ArrowBackMIcon = require('@alfalab/icons-glyph/ArrowBackMIcon');
10
10
  var styles = require('./index.module.css');
11
11
 
@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var tslib_es6 = require('../../tslib.es6-ce870b46.js');
6
6
  var React = require('react');
7
7
  var cn = require('classnames');
8
- var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/dist/cssm');
9
- var coreComponentsIconButton = require('@alfalab/core-components-icon-button/dist/cssm');
8
+ var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
9
+ var coreComponentsIconButton = require('@alfalab/core-components-icon-button/cssm');
10
10
  var CrossMIcon = require('@alfalab/icons-glyph/CrossMIcon');
11
11
  var styles = require('./index.module.css');
12
12
 
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
6
  var cn = require('classnames');
7
- var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/dist/cssm');
7
+ var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
8
8
  var styles = require('./index.module.css');
9
9
 
10
10
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -7,9 +7,9 @@ require('react');
7
7
  require('classnames');
8
8
  require('react-div-100vh');
9
9
  require('react-swipeable');
10
- require('@alfalab/core-components-base-modal/dist/cssm');
11
- require('@alfalab/core-components-typography/dist/cssm');
12
- require('@alfalab/core-components-icon-button/dist/cssm');
10
+ require('@alfalab/core-components-base-modal/cssm');
11
+ require('@alfalab/core-components-typography/cssm');
12
+ require('@alfalab/core-components-icon-button/cssm');
13
13
  require('@alfalab/icons-glyph/CrossMIcon');
14
14
  require('../closer/index.module.css');
15
15
  require('../closer/Component.js');
@@ -17,10 +17,10 @@ require('@alfalab/icons-glyph/ArrowBackMIcon');
17
17
  require('../backer/index.module.css');
18
18
  require('../backer/Component.js');
19
19
  require('./index.module.css');
20
- var components_header_Component = require('../../component-eb26b84c.js');
20
+ var components_header_Component = require('../../component-78755a1d.js');
21
21
  require('../footer/index.module.css');
22
22
  require('../footer/Component.js');
23
- require('@alfalab/core-components-backdrop/dist/cssm');
23
+ require('@alfalab/core-components-backdrop/cssm');
24
24
  require('../swipeable-backdrop/Component.js');
25
25
  require('../../index.module.css');
26
26
 
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib_es6 = require('../../tslib.es6-ce870b46.js');
6
6
  var React = require('react');
7
- var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/dist/cssm');
7
+ var coreComponentsBackdrop = require('@alfalab/core-components-backdrop/cssm');
8
8
 
9
9
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
10
 
package/cssm/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from "./component-eb26b84c";
1
+ export * from "./component-78755a1d";
package/cssm/index.js CHANGED
@@ -7,9 +7,9 @@ require('react');
7
7
  require('classnames');
8
8
  require('react-div-100vh');
9
9
  require('react-swipeable');
10
- require('@alfalab/core-components-base-modal/dist/cssm');
11
- require('@alfalab/core-components-typography/dist/cssm');
12
- require('@alfalab/core-components-icon-button/dist/cssm');
10
+ require('@alfalab/core-components-base-modal/cssm');
11
+ require('@alfalab/core-components-typography/cssm');
12
+ require('@alfalab/core-components-icon-button/cssm');
13
13
  require('@alfalab/icons-glyph/CrossMIcon');
14
14
  require('./components/closer/index.module.css');
15
15
  require('./components/closer/Component.js');
@@ -17,10 +17,10 @@ require('@alfalab/icons-glyph/ArrowBackMIcon');
17
17
  require('./components/backer/index.module.css');
18
18
  require('./components/backer/Component.js');
19
19
  require('./components/header/index.module.css');
20
- var components_header_Component = require('./component-eb26b84c.js');
20
+ var components_header_Component = require('./component-78755a1d.js');
21
21
  require('./components/footer/index.module.css');
22
22
  require('./components/footer/Component.js');
23
- require('@alfalab/core-components-backdrop/dist/cssm');
23
+ require('@alfalab/core-components-backdrop/cssm');
24
24
  require('./components/swipeable-backdrop/Component.js');
25
25
  require('./index.module.css');
26
26