@alfalab/core-components-bottom-sheet 4.8.1 → 5.0.0

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 (56) hide show
  1. package/{component-90672837.d.ts → component-081431eb.d.ts} +1 -0
  2. package/{component-90672837.js → component-081431eb.js} +22 -37
  3. package/component.js +2 -2
  4. package/components/backer/Component.js +2 -2
  5. package/components/backer/index.css +3 -3
  6. package/components/closer/Component.js +2 -2
  7. package/components/closer/index.css +3 -3
  8. package/components/footer/Component.js +1 -1
  9. package/components/footer/index.css +4 -4
  10. package/components/header/Component.js +2 -2
  11. package/components/header/index.css +17 -17
  12. package/components/swipeable-backdrop/Component.js +1 -1
  13. package/{esm/component-19d1d5d1.d.ts → cssm/component-486b5783.d.ts} +1 -0
  14. package/cssm/{component-c65ae511.js → component-486b5783.js} +19 -34
  15. package/cssm/component.js +1 -1
  16. package/cssm/components/header/Component.js +1 -1
  17. package/cssm/index.d.ts +1 -1
  18. package/cssm/index.js +1 -1
  19. package/cssm/index.module.css +0 -3
  20. package/{cssm/component-c65ae511.d.ts → esm/component-a6da8768.d.ts} +1 -0
  21. package/esm/{component-19d1d5d1.js → component-a6da8768.js} +22 -37
  22. package/esm/component.js +2 -2
  23. package/esm/components/backer/Component.js +2 -2
  24. package/esm/components/backer/index.css +3 -3
  25. package/esm/components/closer/Component.js +2 -2
  26. package/esm/components/closer/index.css +3 -3
  27. package/esm/components/footer/Component.js +1 -1
  28. package/esm/components/footer/index.css +4 -4
  29. package/esm/components/header/Component.js +2 -2
  30. package/esm/components/header/index.css +17 -17
  31. package/esm/components/swipeable-backdrop/Component.js +1 -1
  32. package/esm/index.css +15 -18
  33. package/esm/index.d.ts +1 -1
  34. package/esm/index.js +2 -2
  35. package/esm/{tslib.es6-5b0f031b.d.ts → tslib.es6-d5ff3006.d.ts} +0 -0
  36. package/esm/{tslib.es6-5b0f031b.js → tslib.es6-d5ff3006.js} +0 -0
  37. package/index.css +15 -18
  38. package/index.d.ts +1 -1
  39. package/index.js +2 -2
  40. package/modern/{component-5e4ff82e.d.ts → component-fed5de6d.d.ts} +1 -0
  41. package/modern/{component-5e4ff82e.js → component-fed5de6d.js} +21 -36
  42. package/modern/component.js +1 -1
  43. package/modern/components/backer/Component.js +1 -1
  44. package/modern/components/backer/index.css +3 -3
  45. package/modern/components/closer/Component.js +1 -1
  46. package/modern/components/closer/index.css +3 -3
  47. package/modern/components/footer/Component.js +1 -1
  48. package/modern/components/footer/index.css +4 -4
  49. package/modern/components/header/Component.js +1 -1
  50. package/modern/components/header/index.css +17 -17
  51. package/modern/index.css +15 -18
  52. package/modern/index.d.ts +1 -1
  53. package/modern/index.js +1 -1
  54. package/package.json +5 -5
  55. /package/{tslib.es6-c03fa1a2.d.ts → tslib.es6-2fdacaa4.d.ts} +0 -0
  56. /package/{tslib.es6-c03fa1a2.js → tslib.es6-2fdacaa4.js} +0 -0
@@ -205,6 +205,7 @@ type BottomSheetProps = {
205
205
  */
206
206
  disableBlockingScroll?: boolean;
207
207
  /**
208
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
208
209
  * Не анимировать шторку при изменении размера вьюпорта
209
210
  */
210
211
  ignoreScreenChange?: boolean;
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var tslib_es6 = require('./tslib.es6-c03fa1a2.js');
3
+ var tslib_es6 = require('./tslib.es6-2fdacaa4.js');
4
4
  var React = require('react');
5
5
  var cn = require('classnames');
6
6
  var reactDiv100vh = require('react-div-100vh');
@@ -22,7 +22,7 @@ var getDataTestId = function (dataTestId, element) {
22
22
  return dataTestId ? "" + dataTestId + elementPart : undefined;
23
23
  };
24
24
 
25
- var styles = {"headerWrapper":"bottom-sheet__headerWrapper_18fxg","header":"bottom-sheet__header_18fxg","sticky":"bottom-sheet__sticky_18fxg","highlighted":"bottom-sheet__highlighted_18fxg","justifyEnd":"bottom-sheet__justifyEnd_18fxg","addon":"bottom-sheet__addon_18fxg","addonFixed":"bottom-sheet__addonFixed_18fxg","addonLeft":"bottom-sheet__addonLeft_18fxg","addonRight":"bottom-sheet__addonRight_18fxg","title":"bottom-sheet__title_18fxg","titleCenter":"bottom-sheet__titleCenter_18fxg","titleLeft":"bottom-sheet__titleLeft_18fxg","trimTitle":"bottom-sheet__trimTitle_18fxg","titleBigIndentHorizontal":"bottom-sheet__titleBigIndentHorizontal_18fxg","titleIndentRight":"bottom-sheet__titleIndentRight_18fxg","titleIndentLeft":"bottom-sheet__titleIndentLeft_18fxg"};
25
+ var styles = {"headerWrapper":"bottom-sheet__headerWrapper_1j3ft","header":"bottom-sheet__header_1j3ft","sticky":"bottom-sheet__sticky_1j3ft","highlighted":"bottom-sheet__highlighted_1j3ft","justifyEnd":"bottom-sheet__justifyEnd_1j3ft","addon":"bottom-sheet__addon_1j3ft","addonFixed":"bottom-sheet__addonFixed_1j3ft","addonLeft":"bottom-sheet__addonLeft_1j3ft","addonRight":"bottom-sheet__addonRight_1j3ft","title":"bottom-sheet__title_1j3ft","titleCenter":"bottom-sheet__titleCenter_1j3ft","titleLeft":"bottom-sheet__titleLeft_1j3ft","trimTitle":"bottom-sheet__trimTitle_1j3ft","titleBigIndentHorizontal":"bottom-sheet__titleBigIndentHorizontal_1j3ft","titleIndentRight":"bottom-sheet__titleIndentRight_1j3ft","titleIndentLeft":"bottom-sheet__titleIndentLeft_1j3ft"};
26
26
  require('./components/header/index.css')
27
27
 
28
28
  var Header = function (_a) {
@@ -72,7 +72,7 @@ var Header = function (_a) {
72
72
  bottomAddons));
73
73
  };
74
74
 
75
- var styles$1 = {"modal":"bottom-sheet__modal_1gf4k","component":"bottom-sheet__component_1gf4k","withTransition":"bottom-sheet__withTransition_1gf4k","withZeroTransition":"bottom-sheet__withZeroTransition_1gf4k","scrollableContainer":"bottom-sheet__scrollableContainer_1gf4k","marker":"bottom-sheet__marker_1gf4k","content":"bottom-sheet__content_1gf4k","noHeader":"bottom-sheet__noHeader_1gf4k","noFooter":"bottom-sheet__noFooter_1gf4k","scrollLocked":"bottom-sheet__scrollLocked_1gf4k","appear":"bottom-sheet__appear_1gf4k","enter":"bottom-sheet__enter_1gf4k","appearActive":"bottom-sheet__appearActive_1gf4k","enterActive":"bottom-sheet__enterActive_1gf4k","enterDone":"bottom-sheet__enterDone_1gf4k","appearDone":"bottom-sheet__appearDone_1gf4k","exit":"bottom-sheet__exit_1gf4k","exitActive":"bottom-sheet__exitActive_1gf4k"};
75
+ var styles$1 = {"modal":"bottom-sheet__modal_1enkg","component":"bottom-sheet__component_1enkg","withTransition":"bottom-sheet__withTransition_1enkg","scrollableContainer":"bottom-sheet__scrollableContainer_1enkg","marker":"bottom-sheet__marker_1enkg","content":"bottom-sheet__content_1enkg","noHeader":"bottom-sheet__noHeader_1enkg","noFooter":"bottom-sheet__noFooter_1enkg","scrollLocked":"bottom-sheet__scrollLocked_1enkg","appear":"bottom-sheet__appear_1enkg","enter":"bottom-sheet__enter_1enkg","appearActive":"bottom-sheet__appearActive_1enkg","enterActive":"bottom-sheet__enterActive_1enkg","enterDone":"bottom-sheet__enterDone_1enkg","appearDone":"bottom-sheet__appearDone_1enkg","exit":"bottom-sheet__exit_1enkg","exitActive":"bottom-sheet__exitActive_1enkg"};
76
76
  require('./index.css')
77
77
 
78
78
  var TIMEOUT = 300;
@@ -85,15 +85,14 @@ var HEADER_OFFSET = 24;
85
85
  var CLOSE_OFFSET = 0.2;
86
86
  var BottomSheet = React.forwardRef(function (_a, ref) {
87
87
  var _b, _c, _d;
88
- 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;
89
- var _l = React.useState(0), sheetOffset = _l[0], setSheetOffset = _l[1];
90
- var _m = React.useState(1), backdropOpacity = _m[0], setBackdropOpacity = _m[1];
91
- var _o = React.useState(false), scrollLocked = _o[0], setScrollLocked = _o[1];
88
+ 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, backdropProps = _a.backdropProps, onClose = _a.onClose, onBack = _a.onBack;
89
+ var _k = React.useState(0), sheetOffset = _k[0], setSheetOffset = _k[1];
90
+ var _l = React.useState(1), backdropOpacity = _l[0], setBackdropOpacity = _l[1];
91
+ var _m = React.useState(false), scrollLocked = _m[0], setScrollLocked = _m[1];
92
92
  var sheetHeight = React.useRef(0);
93
93
  var scrollableContainer = React.useRef(null);
94
94
  var scrollableContainerScrollValue = React.useRef(0);
95
95
  var emptyHeader = !hasCloser && !hasBacker && !leftAddons && !rightAddons && !title;
96
- var _p = React.useState(styles$1.withTransition), transitionClassName = _p[0], setTransitionClassName = _p[1];
97
96
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
98
97
  var fullHeight = reactDiv100vh.use100vh();
99
98
  var targetHeight = fullHeight - HEADER_OFFSET + "px";
@@ -159,12 +158,6 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
159
158
  onClose();
160
159
  }
161
160
  else {
162
- /**
163
- * Установить мгновенную анимацию шторке если она не закрыта при свайпе и установлен проп ignoreScreenChange
164
- */
165
- if (ignoreScreenChange) {
166
- setTransitionClassName(styles$1.withZeroTransition);
167
- }
168
161
  setSheetOffset(0);
169
162
  setBackdropOpacity(1);
170
163
  }
@@ -188,12 +181,6 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
188
181
  */
189
182
  if (offset > 0) {
190
183
  setScrollLocked(true);
191
- /**
192
- * Вернуть плавную анимацию шторке при свайпе
193
- */
194
- if (transitionClassName === styles$1.withZeroTransition) {
195
- setTransitionClassName(styles$1.withTransition);
196
- }
197
184
  }
198
185
  };
199
186
  var backdropSwipeablehandlers = reactSwipeable.useSwipeable({
@@ -227,10 +214,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
227
214
  if (!open) {
228
215
  setSheetOffset(0);
229
216
  }
230
- if (ignoreScreenChange && open) {
231
- setTransitionClassName(styles$1.withZeroTransition);
232
- }
233
- }, [open, ignoreScreenChange]);
217
+ }, [open]);
234
218
  var getSwipeStyles = function () { return ({
235
219
  transform: sheetOffset ? "translateY(" + sheetOffset + "px)" : '',
236
220
  }); };
@@ -239,19 +223,20 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
239
223
  maxHeight: targetHeight,
240
224
  }); };
241
225
  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 }) },
242
- React__default['default'].createElement("div", tslib_es6.__assign({ className: cn__default['default'](styles$1.component, className, (_b = {},
243
- _b[transitionClassName] = !sheetOffset,
244
- _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeablehandlers),
245
- React__default['default'].createElement("div", tslib_es6.__assign({}, containerProps, { className: cn__default['default'](styles$1.scrollableContainer, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, containerClassName, (_c = {},
246
- _c[styles$1.scrollLocked] = scrollLocked,
247
- _c)), ref: scrollableContainer }),
248
- swipeable && React__default['default'].createElement("div", { className: cn__default['default'](styles$1.marker) }),
249
- !hideHeader && !emptyHeader && React__default['default'].createElement(Header, tslib_es6.__assign({}, headerProps)),
250
- React__default['default'].createElement("div", { className: cn__default['default'](styles$1.content, contentClassName, (_d = {},
251
- _d[styles$1.noHeader] = hideHeader || emptyHeader,
252
- _d[styles$1.noFooter] = !actionButton,
253
- _d)) }, children),
254
- actionButton && (React__default['default'].createElement(components_footer_Component.Footer, { sticky: stickyFooter, className: footerClassName }, actionButton))))));
226
+ React__default['default'].createElement("div", { style: tslib_es6.__assign({}, getHeightStyles()) },
227
+ React__default['default'].createElement("div", tslib_es6.__assign({ className: cn__default['default'](styles$1.component, className, (_b = {},
228
+ _b[styles$1.withTransition] = !sheetOffset,
229
+ _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeablehandlers),
230
+ React__default['default'].createElement("div", tslib_es6.__assign({}, containerProps, { className: cn__default['default'](styles$1.scrollableContainer, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, containerClassName, (_c = {},
231
+ _c[styles$1.scrollLocked] = scrollLocked,
232
+ _c)), ref: scrollableContainer }),
233
+ swipeable && React__default['default'].createElement("div", { className: cn__default['default'](styles$1.marker) }),
234
+ !hideHeader && !emptyHeader && React__default['default'].createElement(Header, tslib_es6.__assign({}, headerProps)),
235
+ React__default['default'].createElement("div", { className: cn__default['default'](styles$1.content, contentClassName, (_d = {},
236
+ _d[styles$1.noHeader] = hideHeader || emptyHeader,
237
+ _d[styles$1.noFooter] = !actionButton,
238
+ _d)) }, children),
239
+ actionButton && (React__default['default'].createElement(components_footer_Component.Footer, { sticky: stickyFooter, className: footerClassName }, actionButton)))))));
255
240
  });
256
241
 
257
242
  exports.BottomSheet = BottomSheet;
package/component.js CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- require('./tslib.es6-c03fa1a2.js');
5
+ require('./tslib.es6-2fdacaa4.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-90672837.js');
17
+ var components_header_Component = require('./component-081431eb.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-c03fa1a2.js');
5
+ var tslib_es6 = require('../../tslib.es6-2fdacaa4.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_1dfmr","button":"bottom-sheet__button_1dfmr"};
16
+ var styles = {"backer":"bottom-sheet__backer_168ue","button":"bottom-sheet__button_168ue"};
17
17
  require('./index.css')
18
18
 
19
19
  var Backer = function (_a) {
@@ -1,9 +1,9 @@
1
- /* hash: 1m24z */
1
+ /* hash: 14oyo */
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_1dfmr {
6
+ .bottom-sheet__backer_168ue {
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_1dfmr {
16
+ .bottom-sheet__button_168ue {
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-c03fa1a2.js');
5
+ var tslib_es6 = require('../../tslib.es6-2fdacaa4.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_2fz5k","button":"bottom-sheet__button_2fz5k"};
17
+ var styles = {"closer":"bottom-sheet__closer_of1dk","button":"bottom-sheet__button_of1dk"};
18
18
  require('./index.css')
19
19
 
20
20
  var Closer = function (_a) {
@@ -1,9 +1,9 @@
1
- /* hash: 1w8dm */
1
+ /* hash: 1nl0f */
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_2fz5k {
6
+ .bottom-sheet__closer_of1dk {
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_2fz5k {
16
+ .bottom-sheet__button_of1dk {
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_1opm0","sticky":"bottom-sheet__sticky_1opm0","highlighted":"bottom-sheet__highlighted_1opm0"};
14
+ var styles = {"footer":"bottom-sheet__footer_1gnta","sticky":"bottom-sheet__sticky_1gnta","highlighted":"bottom-sheet__highlighted_1gnta"};
15
15
  require('./index.css')
16
16
 
17
17
  var Footer = function (_a) {
@@ -1,4 +1,4 @@
1
- /* hash: 1wcn7 */
1
+ /* hash: eopfq */
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_1opm0 {
21
+ .bottom-sheet__footer_1gnta {
22
22
  padding: var(--gap-m) var(--gap-m);
23
23
  background-color: var(--color-light-bg-primary);
24
24
  }
25
- .bottom-sheet__sticky_1opm0 {
25
+ .bottom-sheet__sticky_1gnta {
26
26
  position: sticky;
27
27
  bottom: 0;
28
28
  }
29
- .bottom-sheet__highlighted_1opm0 {
29
+ .bottom-sheet__highlighted_1gnta {
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-c03fa1a2.js');
5
+ require('../../tslib.es6-2fdacaa4.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-90672837.js');
17
+ var components_header_Component = require('../../component-081431eb.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: 1d9qf */
1
+ /* hash: 1umwq */
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_18fxg {
33
+ .bottom-sheet__headerWrapper_1j3ft {
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_18fxg {
41
+ .bottom-sheet__header_1j3ft {
42
42
  display: flex;
43
43
  }
44
- .bottom-sheet__sticky_18fxg {
44
+ .bottom-sheet__sticky_1j3ft {
45
45
  position: sticky;
46
46
  top: 0;
47
47
  }
48
- .bottom-sheet__highlighted_18fxg {
48
+ .bottom-sheet__highlighted_1j3ft {
49
49
  border-bottom: var(--bottom-sheet-header-border-bottom);
50
50
  }
51
- .bottom-sheet__justifyEnd_18fxg {
51
+ .bottom-sheet__justifyEnd_1j3ft {
52
52
  justify-content: flex-end;
53
53
  }
54
- .bottom-sheet__addon_18fxg {
54
+ .bottom-sheet__addon_1j3ft {
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_18fxg {
61
+ .bottom-sheet__addonFixed_1j3ft {
62
62
  position: fixed;
63
63
  }
64
- .bottom-sheet__addonLeft_18fxg {
64
+ .bottom-sheet__addonLeft_1j3ft {
65
65
  left: 0;
66
66
  margin-left: var(--gap-xs);
67
67
  }
68
- .bottom-sheet__addonRight_18fxg {
68
+ .bottom-sheet__addonRight_1j3ft {
69
69
  right: 0;
70
70
  margin-right: var(--gap-xs);
71
71
  }
72
- .bottom-sheet__title_18fxg {
72
+ .bottom-sheet__title_1j3ft {
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_18fxg {
81
+ .bottom-sheet__titleCenter_1j3ft {
82
82
  text-align: center;
83
83
  }
84
- .bottom-sheet__titleLeft_18fxg {
84
+ .bottom-sheet__titleLeft_1j3ft {
85
85
  text-align: left;
86
86
  }
87
- .bottom-sheet__trimTitle_18fxg {
87
+ .bottom-sheet__trimTitle_1j3ft {
88
88
  white-space: nowrap;
89
89
  overflow: hidden;
90
90
  text-overflow: ellipsis;
91
91
  }
92
- .bottom-sheet__titleBigIndentHorizontal_18fxg {
92
+ .bottom-sheet__titleBigIndentHorizontal_1j3ft {
93
93
  margin: var(--bottom-sheet-title-margin-vertical) var(--gap-4xl);
94
94
  }
95
- .bottom-sheet__titleIndentRight_18fxg {
95
+ .bottom-sheet__titleIndentRight_1j3ft {
96
96
  margin-right: var(--gap-4xl);
97
97
  }
98
- .bottom-sheet__titleIndentLeft_18fxg {
98
+ .bottom-sheet__titleIndentLeft_1j3ft {
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-c03fa1a2.js');
5
+ var tslib_es6 = require('../../tslib.es6-2fdacaa4.js');
6
6
  var React = require('react');
7
7
  var coreComponentsBackdrop = require('@alfalab/core-components-backdrop');
8
8
 
@@ -205,6 +205,7 @@ type BottomSheetProps = {
205
205
  */
206
206
  disableBlockingScroll?: boolean;
207
207
  /**
208
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
208
209
  * Не анимировать шторку при изменении размера вьюпорта
209
210
  */
210
211
  ignoreScreenChange?: boolean;
@@ -83,15 +83,14 @@ var HEADER_OFFSET = 24;
83
83
  var CLOSE_OFFSET = 0.2;
84
84
  var BottomSheet = React.forwardRef(function (_a, ref) {
85
85
  var _b, _c, _d;
86
- 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;
87
- var _l = React.useState(0), sheetOffset = _l[0], setSheetOffset = _l[1];
88
- var _m = React.useState(1), backdropOpacity = _m[0], setBackdropOpacity = _m[1];
89
- var _o = React.useState(false), scrollLocked = _o[0], setScrollLocked = _o[1];
86
+ 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, backdropProps = _a.backdropProps, onClose = _a.onClose, onBack = _a.onBack;
87
+ var _k = React.useState(0), sheetOffset = _k[0], setSheetOffset = _k[1];
88
+ var _l = React.useState(1), backdropOpacity = _l[0], setBackdropOpacity = _l[1];
89
+ var _m = React.useState(false), scrollLocked = _m[0], setScrollLocked = _m[1];
90
90
  var sheetHeight = React.useRef(0);
91
91
  var scrollableContainer = React.useRef(null);
92
92
  var scrollableContainerScrollValue = React.useRef(0);
93
93
  var emptyHeader = !hasCloser && !hasBacker && !leftAddons && !rightAddons && !title;
94
- var _p = React.useState(styles__default$1['default'].withTransition), transitionClassName = _p[0], setTransitionClassName = _p[1];
95
94
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
96
95
  var fullHeight = reactDiv100vh.use100vh();
97
96
  var targetHeight = fullHeight - HEADER_OFFSET + "px";
@@ -157,12 +156,6 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
157
156
  onClose();
158
157
  }
159
158
  else {
160
- /**
161
- * Установить мгновенную анимацию шторке если она не закрыта при свайпе и установлен проп ignoreScreenChange
162
- */
163
- if (ignoreScreenChange) {
164
- setTransitionClassName(styles__default$1['default'].withZeroTransition);
165
- }
166
159
  setSheetOffset(0);
167
160
  setBackdropOpacity(1);
168
161
  }
@@ -186,12 +179,6 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
186
179
  */
187
180
  if (offset > 0) {
188
181
  setScrollLocked(true);
189
- /**
190
- * Вернуть плавную анимацию шторке при свайпе
191
- */
192
- if (transitionClassName === styles__default$1['default'].withZeroTransition) {
193
- setTransitionClassName(styles__default$1['default'].withTransition);
194
- }
195
182
  }
196
183
  };
197
184
  var backdropSwipeablehandlers = reactSwipeable.useSwipeable({
@@ -225,10 +212,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
225
212
  if (!open) {
226
213
  setSheetOffset(0);
227
214
  }
228
- if (ignoreScreenChange && open) {
229
- setTransitionClassName(styles__default$1['default'].withZeroTransition);
230
- }
231
- }, [open, ignoreScreenChange]);
215
+ }, [open]);
232
216
  var getSwipeStyles = function () { return ({
233
217
  transform: sheetOffset ? "translateY(" + sheetOffset + "px)" : '',
234
218
  }); };
@@ -237,19 +221,20 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
237
221
  maxHeight: targetHeight,
238
222
  }); };
239
223
  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 }) },
240
- React__default['default'].createElement("div", tslib_es6.__assign({ className: cn__default['default'](styles__default$1['default'].component, className, (_b = {},
241
- _b[transitionClassName] = !sheetOffset,
242
- _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeablehandlers),
243
- React__default['default'].createElement("div", tslib_es6.__assign({}, containerProps, { className: cn__default['default'](styles__default$1['default'].scrollableContainer, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, containerClassName, (_c = {},
244
- _c[styles__default$1['default'].scrollLocked] = scrollLocked,
245
- _c)), ref: scrollableContainer }),
246
- swipeable && React__default['default'].createElement("div", { className: cn__default['default'](styles__default$1['default'].marker) }),
247
- !hideHeader && !emptyHeader && React__default['default'].createElement(Header, tslib_es6.__assign({}, headerProps)),
248
- React__default['default'].createElement("div", { className: cn__default['default'](styles__default$1['default'].content, contentClassName, (_d = {},
249
- _d[styles__default$1['default'].noHeader] = hideHeader || emptyHeader,
250
- _d[styles__default$1['default'].noFooter] = !actionButton,
251
- _d)) }, children),
252
- actionButton && (React__default['default'].createElement(components_footer_Component.Footer, { sticky: stickyFooter, className: footerClassName }, actionButton))))));
224
+ React__default['default'].createElement("div", { style: tslib_es6.__assign({}, getHeightStyles()) },
225
+ React__default['default'].createElement("div", tslib_es6.__assign({ className: cn__default['default'](styles__default$1['default'].component, className, (_b = {},
226
+ _b[styles__default$1['default'].withTransition] = !sheetOffset,
227
+ _b)), style: tslib_es6.__assign(tslib_es6.__assign({}, getSwipeStyles()), getHeightStyles()) }, sheetSwipeablehandlers),
228
+ React__default['default'].createElement("div", tslib_es6.__assign({}, containerProps, { className: cn__default['default'](styles__default$1['default'].scrollableContainer, containerProps === null || containerProps === void 0 ? void 0 : containerProps.className, containerClassName, (_c = {},
229
+ _c[styles__default$1['default'].scrollLocked] = scrollLocked,
230
+ _c)), ref: scrollableContainer }),
231
+ swipeable && React__default['default'].createElement("div", { className: cn__default['default'](styles__default$1['default'].marker) }),
232
+ !hideHeader && !emptyHeader && React__default['default'].createElement(Header, tslib_es6.__assign({}, headerProps)),
233
+ React__default['default'].createElement("div", { className: cn__default['default'](styles__default$1['default'].content, contentClassName, (_d = {},
234
+ _d[styles__default$1['default'].noHeader] = hideHeader || emptyHeader,
235
+ _d[styles__default$1['default'].noFooter] = !actionButton,
236
+ _d)) }, children),
237
+ actionButton && (React__default['default'].createElement(components_footer_Component.Footer, { sticky: stickyFooter, className: footerClassName }, actionButton)))))));
253
238
  });
254
239
 
255
240
  exports.BottomSheet = BottomSheet;
package/cssm/component.js CHANGED
@@ -16,7 +16,7 @@ require('./components/closer/Component.js');
16
16
  require('@alfalab/icons-glyph/ArrowBackMIcon');
17
17
  require('./components/backer/index.module.css');
18
18
  require('./components/backer/Component.js');
19
- var components_header_Component = require('./component-c65ae511.js');
19
+ var components_header_Component = require('./component-486b5783.js');
20
20
  require('./components/header/index.module.css');
21
21
  require('./components/footer/index.module.css');
22
22
  require('./components/footer/Component.js');
@@ -16,7 +16,7 @@ require('../closer/Component.js');
16
16
  require('@alfalab/icons-glyph/ArrowBackMIcon');
17
17
  require('../backer/index.module.css');
18
18
  require('../backer/Component.js');
19
- var components_header_Component = require('../../component-c65ae511.js');
19
+ var components_header_Component = require('../../component-486b5783.js');
20
20
  require('./index.module.css');
21
21
  require('../footer/index.module.css');
22
22
  require('../footer/Component.js');
package/cssm/index.d.ts CHANGED
@@ -1 +1 @@
1
- export * from "./component-c65ae511";
1
+ export * from "./component-486b5783";
package/cssm/index.js CHANGED
@@ -16,7 +16,7 @@ require('./components/closer/Component.js');
16
16
  require('@alfalab/icons-glyph/ArrowBackMIcon');
17
17
  require('./components/backer/index.module.css');
18
18
  require('./components/backer/Component.js');
19
- var components_header_Component = require('./component-c65ae511.js');
19
+ var components_header_Component = require('./component-486b5783.js');
20
20
  require('./components/header/index.module.css');
21
21
  require('./components/footer/index.module.css');
22
22
  require('./components/footer/Component.js');
@@ -43,9 +43,6 @@
43
43
  .withTransition {
44
44
  transition: var(--bottom-sheet-out-transition);
45
45
  }
46
- .withZeroTransition {
47
- transition: 0s linear;
48
- }
49
46
  .scrollableContainer {
50
47
  overflow: auto;
51
48
  display: flex;
@@ -205,6 +205,7 @@ type BottomSheetProps = {
205
205
  */
206
206
  disableBlockingScroll?: boolean;
207
207
  /**
208
+ * @deprecated данный проп больше не используется, временно оставлен для обратной совместимости
208
209
  * Не анимировать шторку при изменении размера вьюпорта
209
210
  */
210
211
  ignoreScreenChange?: boolean;