@alfalab/core-components-bottom-sheet 6.7.1 → 6.9.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 (26) hide show
  1. package/component.js +31 -16
  2. package/components/footer/Component.js +1 -1
  3. package/components/footer/index.css +26 -26
  4. package/components/header/Component.js +1 -1
  5. package/components/header/index.css +13 -13
  6. package/cssm/component.js +30 -15
  7. package/cssm/types.d.ts +9 -0
  8. package/esm/component.js +32 -17
  9. package/esm/components/footer/Component.js +1 -1
  10. package/esm/components/footer/index.css +26 -26
  11. package/esm/components/header/Component.js +1 -1
  12. package/esm/components/header/index.css +13 -13
  13. package/esm/index.css +43 -43
  14. package/esm/types.d.ts +9 -0
  15. package/index.css +43 -43
  16. package/modern/component.js +30 -18
  17. package/modern/components/footer/Component.js +1 -1
  18. package/modern/components/footer/index.css +26 -26
  19. package/modern/components/header/Component.js +1 -1
  20. package/modern/components/header/index.css +13 -13
  21. package/modern/index.css +43 -43
  22. package/modern/types.d.ts +9 -0
  23. package/package.json +3 -3
  24. package/src/component.tsx +33 -23
  25. package/src/types.ts +11 -0
  26. package/types.d.ts +9 -0
package/component.js CHANGED
@@ -23,13 +23,13 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
23
23
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
24
24
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
25
25
 
26
- var styles = {"modal":"bottom-sheet__modal_6oydx","wrapper":"bottom-sheet__wrapper_6oydx","fullscreen":"bottom-sheet__fullscreen_6oydx","component":"bottom-sheet__component_6oydx","withTransition":"bottom-sheet__withTransition_6oydx","scrollableContainer":"bottom-sheet__scrollableContainer_6oydx","marker":"bottom-sheet__marker_6oydx","defaultMarker":"bottom-sheet__defaultMarker_6oydx","content":"bottom-sheet__content_6oydx","noHeader":"bottom-sheet__noHeader_6oydx","noFooter":"bottom-sheet__noFooter_6oydx","scrollLocked":"bottom-sheet__scrollLocked_6oydx","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_6oydx","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_6oydx","appear":"bottom-sheet__appear_6oydx","enter":"bottom-sheet__enter_6oydx","appearActive":"bottom-sheet__appearActive_6oydx","enterActive":"bottom-sheet__enterActive_6oydx","enterDone":"bottom-sheet__enterDone_6oydx","appearDone":"bottom-sheet__appearDone_6oydx","exit":"bottom-sheet__exit_6oydx","exitActive":"bottom-sheet__exitActive_6oydx","background-accent":"bottom-sheet__background-accent_6oydx","background-info":"bottom-sheet__background-info_6oydx","background-attention-muted":"bottom-sheet__background-attention-muted_6oydx","background-positive-muted":"bottom-sheet__background-positive-muted_6oydx","background-negative-muted":"bottom-sheet__background-negative-muted_6oydx","background-primary":"bottom-sheet__background-primary_6oydx","background-primary-inverted":"bottom-sheet__background-primary-inverted_6oydx","background-secondary":"bottom-sheet__background-secondary_6oydx","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_6oydx","background-tertiary":"bottom-sheet__background-tertiary_6oydx","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_6oydx","background-quaternary":"bottom-sheet__background-quaternary_6oydx","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_6oydx","background-specialbg-component":"bottom-sheet__background-specialbg-component_6oydx","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_6oydx","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_6oydx","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_6oydx","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_6oydx","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_6oydx","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_6oydx","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_6oydx","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_6oydx"};
26
+ var styles = {"modal":"bottom-sheet__modal_1fnli","wrapper":"bottom-sheet__wrapper_1fnli","fullscreen":"bottom-sheet__fullscreen_1fnli","component":"bottom-sheet__component_1fnli","withTransition":"bottom-sheet__withTransition_1fnli","scrollableContainer":"bottom-sheet__scrollableContainer_1fnli","marker":"bottom-sheet__marker_1fnli","defaultMarker":"bottom-sheet__defaultMarker_1fnli","content":"bottom-sheet__content_1fnli","noHeader":"bottom-sheet__noHeader_1fnli","noFooter":"bottom-sheet__noFooter_1fnli","scrollLocked":"bottom-sheet__scrollLocked_1fnli","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1fnli","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1fnli","appear":"bottom-sheet__appear_1fnli","enter":"bottom-sheet__enter_1fnli","appearActive":"bottom-sheet__appearActive_1fnli","enterActive":"bottom-sheet__enterActive_1fnli","enterDone":"bottom-sheet__enterDone_1fnli","appearDone":"bottom-sheet__appearDone_1fnli","exit":"bottom-sheet__exit_1fnli","exitActive":"bottom-sheet__exitActive_1fnli","background-accent":"bottom-sheet__background-accent_1fnli","background-info":"bottom-sheet__background-info_1fnli","background-attention-muted":"bottom-sheet__background-attention-muted_1fnli","background-positive-muted":"bottom-sheet__background-positive-muted_1fnli","background-negative-muted":"bottom-sheet__background-negative-muted_1fnli","background-primary":"bottom-sheet__background-primary_1fnli","background-primary-inverted":"bottom-sheet__background-primary-inverted_1fnli","background-secondary":"bottom-sheet__background-secondary_1fnli","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1fnli","background-tertiary":"bottom-sheet__background-tertiary_1fnli","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1fnli","background-quaternary":"bottom-sheet__background-quaternary_1fnli","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1fnli","background-specialbg-component":"bottom-sheet__background-specialbg-component_1fnli","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1fnli","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1fnli","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1fnli","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1fnli","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1fnli","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1fnli","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1fnli","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1fnli"};
27
27
  require('./index.css')
28
28
 
29
+ var isNil = coreComponentsShared.fnUtils.isNil;
29
30
  var BottomSheet = React.forwardRef(function (_a, ref) {
30
31
  var _b, _c, _d, _e, _f;
31
- var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, 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, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName;
32
- var hasInitialIdx = initialActiveAreaIndex !== undefined;
32
+ var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, 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, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName;
33
33
  var fullHeight = reactDiv100vh.use100vh() || 0;
34
34
  // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
35
35
  var isFirstRender = fullHeight === 0;
@@ -57,6 +57,21 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
57
57
  var headerProps = tslib.__assign(tslib.__assign({}, (titleIsReactElement
58
58
  ? { children: title }
59
59
  : { title: title ? title === null || title === void 0 ? void 0 : title.toString() : undefined })), { scrollableParentRef: scrollableContainer, headerRef: headerRef, headerOffset: headerOffset, className: headerClassName, addonClassName: addonClassName, closerClassName: closerClassName, backButtonClassName: backerClassName, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons, hasCloser: hasCloser, hasBackButton: hasBacker, align: titleAlign, trim: trimTitle, sticky: stickyHeader, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'header'), onBack: onBack, titleSize: titleSize, subtitle: subtitle, onClose: onClose });
60
+ var startSwiping = function (event) {
61
+ setSwipingInProgress(function (p) {
62
+ if (!p)
63
+ onSwipeStart === null || onSwipeStart === void 0 ? void 0 : onSwipeStart(event);
64
+ return true;
65
+ });
66
+ };
67
+ var stopSwiping = function (event) {
68
+ setSwipingInProgress(function (p) {
69
+ if (p)
70
+ onSwipeEnd === null || onSwipeEnd === void 0 ? void 0 : onSwipeEnd(event);
71
+ return false;
72
+ });
73
+ scrollOccurred.current = false;
74
+ };
60
75
  var getBackdropOpacity = function (offset) {
61
76
  var canClose = magneticAreas[0] === 0;
62
77
  var secondArea = magneticAreas[1];
@@ -88,7 +103,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
88
103
  }
89
104
  };
90
105
  var scrollToArea = function (idx) {
91
- setSwipingInProgress(false);
106
+ stopSwiping(null);
92
107
  var nextArea = magneticAreas[idx];
93
108
  if (nextArea === 0) {
94
109
  onClose();
@@ -208,11 +223,11 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
208
223
  if (shouldSkipSwiping(deltaY, initial[1], event)) {
209
224
  return;
210
225
  }
211
- setSwipingInProgress(true);
226
+ startSwiping(event);
212
227
  };
213
- var handleTouchEnd = function () {
214
- setSwipingInProgress(false);
215
- scrollOccurred.current = false;
228
+ var handleTouchEnd = function (_a) {
229
+ var event = _a.event;
230
+ return stopSwiping(event);
216
231
  };
217
232
  var handleSheetSwiping = function (_a) {
218
233
  var initial = _a.initial, deltaY = _a.deltaY, event = _a.event;
@@ -220,7 +235,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
220
235
  return;
221
236
  }
222
237
  if (!swipingInProgress) {
223
- setSwipingInProgress(true);
238
+ startSwiping(event);
224
239
  }
225
240
  var offset = getSheetOffset(deltaY);
226
241
  var opacity = getBackdropOpacity(offset);
@@ -237,9 +252,9 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
237
252
  });
238
253
  var handleExited = function (node) {
239
254
  var idx = initialActiveAreaIndex;
240
- var nextArea = hasInitialIdx ? magneticAreas[idx] : lastMagneticArea;
255
+ var nextArea = isNil(idx) ? lastMagneticArea : magneticAreas[idx];
241
256
  setBackdropOpacity(1);
242
- setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0]);
257
+ setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
243
258
  setActiveArea(nextArea);
244
259
  onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
245
260
  if (transitionProps.onExited) {
@@ -269,13 +284,13 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
269
284
  }
270
285
  };
271
286
  React.useEffect(function () {
272
- // Инициализируем стейт только после того, как была рассчитана высота вьюпорта.
287
+ // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
273
288
  if (!isFirstRender) {
274
- setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[initialActiveAreaIndex] : 0);
275
- setActiveArea(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea);
289
+ var idx = initialActiveAreaIndex;
290
+ setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
291
+ setActiveArea(isNil(idx) ? lastMagneticArea : magneticAreas[idx]);
276
292
  }
277
- // eslint-disable-next-line react-hooks/exhaustive-deps
278
- }, [isFirstRender]);
293
+ }, [initialActiveAreaIndex, isFirstRender, lastMagneticArea, magneticAreas]);
279
294
  React.useEffect(function () {
280
295
  if (!sheetRef.current)
281
296
  return;
package/components/footer/Component.js CHANGED
@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
13
13
 
14
- var styles = {"footer":"bottom-sheet__footer_walol","sticky":"bottom-sheet__sticky_walol","highlighted":"bottom-sheet__highlighted_walol","background-accent":"bottom-sheet__background-accent_walol","background-info":"bottom-sheet__background-info_walol","background-attention-muted":"bottom-sheet__background-attention-muted_walol","background-positive-muted":"bottom-sheet__background-positive-muted_walol","background-negative-muted":"bottom-sheet__background-negative-muted_walol","background-primary":"bottom-sheet__background-primary_walol","background-primary-inverted":"bottom-sheet__background-primary-inverted_walol","background-secondary":"bottom-sheet__background-secondary_walol","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_walol","background-tertiary":"bottom-sheet__background-tertiary_walol","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_walol","background-quaternary":"bottom-sheet__background-quaternary_walol","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_walol","background-specialbg-component":"bottom-sheet__background-specialbg-component_walol","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_walol","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_walol","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_walol","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_walol","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_walol","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_walol","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_walol","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_walol"};
14
+ var styles = {"footer":"bottom-sheet__footer_u9y6k","sticky":"bottom-sheet__sticky_u9y6k","highlighted":"bottom-sheet__highlighted_u9y6k","background-accent":"bottom-sheet__background-accent_u9y6k","background-info":"bottom-sheet__background-info_u9y6k","background-attention-muted":"bottom-sheet__background-attention-muted_u9y6k","background-positive-muted":"bottom-sheet__background-positive-muted_u9y6k","background-negative-muted":"bottom-sheet__background-negative-muted_u9y6k","background-primary":"bottom-sheet__background-primary_u9y6k","background-primary-inverted":"bottom-sheet__background-primary-inverted_u9y6k","background-secondary":"bottom-sheet__background-secondary_u9y6k","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_u9y6k","background-tertiary":"bottom-sheet__background-tertiary_u9y6k","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_u9y6k","background-quaternary":"bottom-sheet__background-quaternary_u9y6k","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_u9y6k","background-specialbg-component":"bottom-sheet__background-specialbg-component_u9y6k","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_u9y6k","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_u9y6k","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_u9y6k","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_u9y6k","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_u9y6k","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_u9y6k","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_u9y6k","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_u9y6k"};
15
15
  require('./index.css')
16
16
 
17
17
  var Footer = function (_a) {
package/components/footer/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1n2cw */
1
+ /* hash: 85c0a */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-accent: #ef3124;
@@ -41,58 +41,58 @@
41
41
  } :root {
42
42
  --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-secondary);
43
43
  --bottom-sheet-footer-background-color: var(--color-light-bg-primary);
44
- } .bottom-sheet__footer_walol {
44
+ } .bottom-sheet__footer_u9y6k {
45
45
  padding: var(--gap-m) var(--gap-m);
46
46
  background-color: var(--color-light-bg-primary);
47
- } .bottom-sheet__sticky_walol {
47
+ } .bottom-sheet__sticky_u9y6k {
48
48
  position: sticky;
49
49
  bottom: 0;
50
50
  z-index: 1;
51
- } .bottom-sheet__highlighted_walol {
51
+ } .bottom-sheet__highlighted_u9y6k {
52
52
  border-top: var(--bottom-sheet-footer-border-top);
53
53
  background-color: var(--bottom-sheet-footer-background-color);
54
- } .bottom-sheet__background-accent_walol {
54
+ } .bottom-sheet__background-accent_u9y6k {
55
55
  background-color: var(--color-light-bg-accent);
56
- } .bottom-sheet__background-info_walol {
56
+ } .bottom-sheet__background-info_u9y6k {
57
57
  background-color: var(--color-light-bg-info);
58
- } .bottom-sheet__background-attention-muted_walol {
58
+ } .bottom-sheet__background-attention-muted_u9y6k {
59
59
  background-color: var(--color-light-bg-attention-muted);
60
- } .bottom-sheet__background-positive-muted_walol {
60
+ } .bottom-sheet__background-positive-muted_u9y6k {
61
61
  background-color: var(--color-light-bg-positive-muted);
62
- } .bottom-sheet__background-negative-muted_walol {
62
+ } .bottom-sheet__background-negative-muted_u9y6k {
63
63
  background-color: var(--color-light-bg-negative-muted);
64
- } .bottom-sheet__background-primary_walol {
64
+ } .bottom-sheet__background-primary_u9y6k {
65
65
  background-color: var(--color-light-bg-primary);
66
- } .bottom-sheet__background-primary-inverted_walol {
66
+ } .bottom-sheet__background-primary-inverted_u9y6k {
67
67
  background-color: var(--color-light-bg-primary-inverted);
68
- } .bottom-sheet__background-secondary_walol {
68
+ } .bottom-sheet__background-secondary_u9y6k {
69
69
  background-color: var(--color-light-bg-secondary);
70
- } .bottom-sheet__background-secondary-inverted_walol {
70
+ } .bottom-sheet__background-secondary-inverted_u9y6k {
71
71
  background-color: var(--color-light-bg-secondary-inverted);
72
- } .bottom-sheet__background-tertiary_walol {
72
+ } .bottom-sheet__background-tertiary_u9y6k {
73
73
  background-color: var(--color-light-bg-tertiary);
74
- } .bottom-sheet__background-tertiary-inverted_walol {
74
+ } .bottom-sheet__background-tertiary-inverted_u9y6k {
75
75
  background-color: var(--color-light-bg-tertiary-inverted);
76
- } .bottom-sheet__background-quaternary_walol {
76
+ } .bottom-sheet__background-quaternary_u9y6k {
77
77
  background-color: var(--color-light-bg-quaternary);
78
- } .bottom-sheet__background-quaternary-inverted_walol {
78
+ } .bottom-sheet__background-quaternary-inverted_u9y6k {
79
79
  background-color: var(--color-light-bg-quaternary-inverted);
80
- } .bottom-sheet__background-specialbg-component_walol {
80
+ } .bottom-sheet__background-specialbg-component_u9y6k {
81
81
  background-color: var(--color-light-specialbg-component);
82
- } .bottom-sheet__background-specialbg-component-inverted_walol {
82
+ } .bottom-sheet__background-specialbg-component-inverted_u9y6k {
83
83
  background-color: var(--color-light-specialbg-component-inverted);
84
- } .bottom-sheet__background-specialbg-primary-grouped_walol {
84
+ } .bottom-sheet__background-specialbg-primary-grouped_u9y6k {
85
85
  background-color: var(--color-light-specialbg-primary-grouped);
86
- } .bottom-sheet__background-specialbg-secondary-grouped_walol {
86
+ } .bottom-sheet__background-specialbg-secondary-grouped_u9y6k {
87
87
  background-color: var(--color-light-specialbg-secondary-grouped);
88
- } .bottom-sheet__background-specialbg-tertiary-grouped_walol {
88
+ } .bottom-sheet__background-specialbg-tertiary-grouped_u9y6k {
89
89
  background-color: var(--color-light-specialbg-tertiary-grouped);
90
- } .bottom-sheet__background-specialbg-secondary-transparent_walol {
90
+ } .bottom-sheet__background-specialbg-secondary-transparent_u9y6k {
91
91
  background-color: var(--color-light-specialbg-secondary-transparent);
92
- } .bottom-sheet__background-specialbg-secondary-transparent-inverted_walol {
92
+ } .bottom-sheet__background-specialbg-secondary-transparent-inverted_u9y6k {
93
93
  background-color: var(--color-light-specialbg-secondary-transparent-inverted);
94
- } .bottom-sheet__background-specialbg-tertiary-transparent_walol {
94
+ } .bottom-sheet__background-specialbg-tertiary-transparent_u9y6k {
95
95
  background-color: var(--color-light-specialbg-tertiary-transparent);
96
- } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_walol {
96
+ } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_u9y6k {
97
97
  background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
98
98
  }
package/components/header/Component.js CHANGED
@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
13
13
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
14
14
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
15
15
 
16
- var styles = {"headerWrapper":"bottom-sheet__headerWrapper_1g7lc","hasContent":"bottom-sheet__hasContent_1g7lc","header":"bottom-sheet__header_1g7lc","sticky":"bottom-sheet__sticky_1g7lc","highlighted":"bottom-sheet__highlighted_1g7lc","justifyEnd":"bottom-sheet__justifyEnd_1g7lc","addon":"bottom-sheet__addon_1g7lc","addonFixed":"bottom-sheet__addonFixed_1g7lc","title":"bottom-sheet__title_1g7lc","titleCenter":"bottom-sheet__titleCenter_1g7lc","titleLeft":"bottom-sheet__titleLeft_1g7lc","trimTitle":"bottom-sheet__trimTitle_1g7lc"};
16
+ var styles = {"headerWrapper":"bottom-sheet__headerWrapper_109hy","hasContent":"bottom-sheet__hasContent_109hy","header":"bottom-sheet__header_109hy","sticky":"bottom-sheet__sticky_109hy","highlighted":"bottom-sheet__highlighted_109hy","justifyEnd":"bottom-sheet__justifyEnd_109hy","addon":"bottom-sheet__addon_109hy","addonFixed":"bottom-sheet__addonFixed_109hy","title":"bottom-sheet__title_109hy","titleCenter":"bottom-sheet__titleCenter_109hy","titleLeft":"bottom-sheet__titleLeft_109hy","trimTitle":"bottom-sheet__trimTitle_109hy"};
17
17
  require('./index.css')
18
18
 
19
19
  var Header = function (_a) {
package/components/header/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: ald0e */
1
+ /* hash: 12fxk */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-secondary: #e9e9eb; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -27,42 +27,42 @@
27
27
  --bottom-sheet-title-font-weight: 700;
28
28
  --bottom-sheet-title-line-height: 24px;
29
29
  --bottom-sheet-title-font-family: var(--font-family-system);
30
- } .bottom-sheet__headerWrapper_1g7lc {
30
+ } .bottom-sheet__headerWrapper_109hy {
31
31
  padding: var(--gap-s) var(--gap-xs) var(--gap-2xs);
32
32
  border-top-right-radius: var(--border-radius-xl);
33
33
  border-top-left-radius: var(--border-radius-xl);
34
34
  z-index: 1;
35
- } .bottom-sheet__hasContent_1g7lc {
35
+ } .bottom-sheet__hasContent_109hy {
36
36
  background-color: inherit;
37
- } .bottom-sheet__header_1g7lc {
37
+ } .bottom-sheet__header_109hy {
38
38
  display: flex;
39
- } .bottom-sheet__sticky_1g7lc {
39
+ } .bottom-sheet__sticky_109hy {
40
40
  position: sticky;
41
41
  top: 0;
42
- } .bottom-sheet__highlighted_1g7lc {
42
+ } .bottom-sheet__highlighted_109hy {
43
43
  border-bottom: var(--bottom-sheet-header-border-bottom);
44
- } .bottom-sheet__justifyEnd_1g7lc {
44
+ } .bottom-sheet__justifyEnd_109hy {
45
45
  justify-content: flex-end;
46
- } .bottom-sheet__addon_1g7lc {
46
+ } .bottom-sheet__addon_109hy {
47
47
  display: flex;
48
48
  justify-content: center;
49
49
  align-items: center;
50
50
  min-width: 48px;
51
51
  height: 48px;
52
- } .bottom-sheet__addonFixed_1g7lc {
52
+ } .bottom-sheet__addonFixed_109hy {
53
53
  position: fixed;
54
- } .bottom-sheet__title_1g7lc {
54
+ } .bottom-sheet__title_109hy {
55
55
  padding: var(--gap-s) var(--gap-xs);
56
56
  width: 100%;
57
57
  font-size: var(--bottom-sheet-title-font-size);
58
58
  font-weight: var(--bottom-sheet-title-font-weight);
59
59
  line-height: var(--bottom-sheet-title-line-height);
60
60
  font-family: var(--bottom-sheet-title-font-family);
61
- } .bottom-sheet__titleCenter_1g7lc {
61
+ } .bottom-sheet__titleCenter_109hy {
62
62
  text-align: center;
63
- } .bottom-sheet__titleLeft_1g7lc {
63
+ } .bottom-sheet__titleLeft_109hy {
64
64
  text-align: left;
65
- } .bottom-sheet__trimTitle_1g7lc {
65
+ } .bottom-sheet__trimTitle_109hy {
66
66
  white-space: nowrap;
67
67
  overflow: hidden;
68
68
  text-overflow: ellipsis;
package/cssm/component.js CHANGED
@@ -27,10 +27,10 @@ var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
27
27
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
28
28
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
29
29
 
30
+ var isNil = coreComponentsShared.fnUtils.isNil;
30
31
  var BottomSheet = React.forwardRef(function (_a, ref) {
31
32
  var _b, _c, _d, _e, _f;
32
- var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, 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, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName;
33
- var hasInitialIdx = initialActiveAreaIndex !== undefined;
33
+ var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, 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, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName;
34
34
  var fullHeight = reactDiv100vh.use100vh() || 0;
35
35
  // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
36
36
  var isFirstRender = fullHeight === 0;
@@ -58,6 +58,21 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
58
58
  var headerProps = tslib.__assign(tslib.__assign({}, (titleIsReactElement
59
59
  ? { children: title }
60
60
  : { title: title ? title === null || title === void 0 ? void 0 : title.toString() : undefined })), { scrollableParentRef: scrollableContainer, headerRef: headerRef, headerOffset: headerOffset, className: headerClassName, addonClassName: addonClassName, closerClassName: closerClassName, backButtonClassName: backerClassName, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons, hasCloser: hasCloser, hasBackButton: hasBacker, align: titleAlign, trim: trimTitle, sticky: stickyHeader, dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'header'), onBack: onBack, titleSize: titleSize, subtitle: subtitle, onClose: onClose });
61
+ var startSwiping = function (event) {
62
+ setSwipingInProgress(function (p) {
63
+ if (!p)
64
+ onSwipeStart === null || onSwipeStart === void 0 ? void 0 : onSwipeStart(event);
65
+ return true;
66
+ });
67
+ };
68
+ var stopSwiping = function (event) {
69
+ setSwipingInProgress(function (p) {
70
+ if (p)
71
+ onSwipeEnd === null || onSwipeEnd === void 0 ? void 0 : onSwipeEnd(event);
72
+ return false;
73
+ });
74
+ scrollOccurred.current = false;
75
+ };
61
76
  var getBackdropOpacity = function (offset) {
62
77
  var canClose = magneticAreas[0] === 0;
63
78
  var secondArea = magneticAreas[1];
@@ -89,7 +104,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
89
104
  }
90
105
  };
91
106
  var scrollToArea = function (idx) {
92
- setSwipingInProgress(false);
107
+ stopSwiping(null);
93
108
  var nextArea = magneticAreas[idx];
94
109
  if (nextArea === 0) {
95
110
  onClose();
@@ -209,11 +224,11 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
209
224
  if (shouldSkipSwiping(deltaY, initial[1], event)) {
210
225
  return;
211
226
  }
212
- setSwipingInProgress(true);
227
+ startSwiping(event);
213
228
  };
214
- var handleTouchEnd = function () {
215
- setSwipingInProgress(false);
216
- scrollOccurred.current = false;
229
+ var handleTouchEnd = function (_a) {
230
+ var event = _a.event;
231
+ return stopSwiping(event);
217
232
  };
218
233
  var handleSheetSwiping = function (_a) {
219
234
  var initial = _a.initial, deltaY = _a.deltaY, event = _a.event;
@@ -221,7 +236,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
221
236
  return;
222
237
  }
223
238
  if (!swipingInProgress) {
224
- setSwipingInProgress(true);
239
+ startSwiping(event);
225
240
  }
226
241
  var offset = getSheetOffset(deltaY);
227
242
  var opacity = getBackdropOpacity(offset);
@@ -238,9 +253,9 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
238
253
  });
239
254
  var handleExited = function (node) {
240
255
  var idx = initialActiveAreaIndex;
241
- var nextArea = hasInitialIdx ? magneticAreas[idx] : lastMagneticArea;
256
+ var nextArea = isNil(idx) ? lastMagneticArea : magneticAreas[idx];
242
257
  setBackdropOpacity(1);
243
- setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0]);
258
+ setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
244
259
  setActiveArea(nextArea);
245
260
  onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
246
261
  if (transitionProps.onExited) {
@@ -270,13 +285,13 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
270
285
  }
271
286
  };
272
287
  React.useEffect(function () {
273
- // Инициализируем стейт только после того, как была рассчитана высота вьюпорта.
288
+ // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
274
289
  if (!isFirstRender) {
275
- setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[initialActiveAreaIndex] : 0);
276
- setActiveArea(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea);
290
+ var idx = initialActiveAreaIndex;
291
+ setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
292
+ setActiveArea(isNil(idx) ? lastMagneticArea : magneticAreas[idx]);
277
293
  }
278
- // eslint-disable-next-line react-hooks/exhaustive-deps
279
- }, [isFirstRender]);
294
+ }, [initialActiveAreaIndex, isFirstRender, lastMagneticArea, magneticAreas]);
280
295
  React.useEffect(function () {
281
296
  if (!sheetRef.current)
282
297
  return;
package/cssm/types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  /// <reference types="react-transition-group" />
2
2
  import { HTMLAttributes, ReactElement, ReactNode, RefObject } from 'react';
3
+ import { HandledEvents } from 'react-swipeable/es/types';
3
4
  import { TransitionProps } from 'react-transition-group/Transition';
4
5
  import { BaseModalProps } from "@alfalab/core-components-base-modal";
5
6
  import { NavigationBarProps } from "@alfalab/core-components-navigation-bar";
@@ -263,5 +264,13 @@ type BottomSheetProps = {
263
264
  * Вызывается при изменении положения шторки
264
265
  */
265
266
  onOffsetChange?: (offset: number, percent: number) => void;
267
+ /**
268
+ * Вызывается в начале свайпа
269
+ */
270
+ onSwipeStart?: (event: HandledEvents) => void;
271
+ /**
272
+ * Вызывается после окончания свайпа
273
+ */
274
+ onSwipeEnd?: (event: HandledEvents | null) => void;
266
275
  };
267
276
  export { BottomSheetTitleAlign, BottomSheetProps };
package/esm/component.js CHANGED
@@ -5,7 +5,7 @@ import mergeRefs from 'react-merge-refs';
5
5
  import { useSwipeable } from 'react-swipeable';
6
6
  import cn from 'classnames';
7
7
  import { BaseModal } from '@alfalab/core-components-base-modal/esm';
8
- import { getDataTestId } from '@alfalab/core-components-shared/esm';
8
+ import { fnUtils, getDataTestId } from '@alfalab/core-components-shared/esm';
9
9
  import { Footer } from './components/footer/Component.js';
10
10
  import { Header } from './components/header/Component.js';
11
11
  import { SwipeableBackdrop } from './components/swipeable-backdrop/Component.js';
@@ -13,13 +13,13 @@ import { convertPercentToNumber, TIMEOUT, MARKER_HEIGHT, SCROLL_OFFSET, SWIPE_VE
13
13
  import '@alfalab/core-components-navigation-bar/esm';
14
14
  import '@alfalab/core-components-backdrop/esm';
15
15
 
16
- var styles = {"modal":"bottom-sheet__modal_6oydx","wrapper":"bottom-sheet__wrapper_6oydx","fullscreen":"bottom-sheet__fullscreen_6oydx","component":"bottom-sheet__component_6oydx","withTransition":"bottom-sheet__withTransition_6oydx","scrollableContainer":"bottom-sheet__scrollableContainer_6oydx","marker":"bottom-sheet__marker_6oydx","defaultMarker":"bottom-sheet__defaultMarker_6oydx","content":"bottom-sheet__content_6oydx","noHeader":"bottom-sheet__noHeader_6oydx","noFooter":"bottom-sheet__noFooter_6oydx","scrollLocked":"bottom-sheet__scrollLocked_6oydx","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_6oydx","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_6oydx","appear":"bottom-sheet__appear_6oydx","enter":"bottom-sheet__enter_6oydx","appearActive":"bottom-sheet__appearActive_6oydx","enterActive":"bottom-sheet__enterActive_6oydx","enterDone":"bottom-sheet__enterDone_6oydx","appearDone":"bottom-sheet__appearDone_6oydx","exit":"bottom-sheet__exit_6oydx","exitActive":"bottom-sheet__exitActive_6oydx","background-accent":"bottom-sheet__background-accent_6oydx","background-info":"bottom-sheet__background-info_6oydx","background-attention-muted":"bottom-sheet__background-attention-muted_6oydx","background-positive-muted":"bottom-sheet__background-positive-muted_6oydx","background-negative-muted":"bottom-sheet__background-negative-muted_6oydx","background-primary":"bottom-sheet__background-primary_6oydx","background-primary-inverted":"bottom-sheet__background-primary-inverted_6oydx","background-secondary":"bottom-sheet__background-secondary_6oydx","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_6oydx","background-tertiary":"bottom-sheet__background-tertiary_6oydx","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_6oydx","background-quaternary":"bottom-sheet__background-quaternary_6oydx","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_6oydx","background-specialbg-component":"bottom-sheet__background-specialbg-component_6oydx","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_6oydx","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_6oydx","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_6oydx","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_6oydx","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_6oydx","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_6oydx","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_6oydx","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_6oydx"};
16
+ var styles = {"modal":"bottom-sheet__modal_1fnli","wrapper":"bottom-sheet__wrapper_1fnli","fullscreen":"bottom-sheet__fullscreen_1fnli","component":"bottom-sheet__component_1fnli","withTransition":"bottom-sheet__withTransition_1fnli","scrollableContainer":"bottom-sheet__scrollableContainer_1fnli","marker":"bottom-sheet__marker_1fnli","defaultMarker":"bottom-sheet__defaultMarker_1fnli","content":"bottom-sheet__content_1fnli","noHeader":"bottom-sheet__noHeader_1fnli","noFooter":"bottom-sheet__noFooter_1fnli","scrollLocked":"bottom-sheet__scrollLocked_1fnli","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1fnli","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1fnli","appear":"bottom-sheet__appear_1fnli","enter":"bottom-sheet__enter_1fnli","appearActive":"bottom-sheet__appearActive_1fnli","enterActive":"bottom-sheet__enterActive_1fnli","enterDone":"bottom-sheet__enterDone_1fnli","appearDone":"bottom-sheet__appearDone_1fnli","exit":"bottom-sheet__exit_1fnli","exitActive":"bottom-sheet__exitActive_1fnli","background-accent":"bottom-sheet__background-accent_1fnli","background-info":"bottom-sheet__background-info_1fnli","background-attention-muted":"bottom-sheet__background-attention-muted_1fnli","background-positive-muted":"bottom-sheet__background-positive-muted_1fnli","background-negative-muted":"bottom-sheet__background-negative-muted_1fnli","background-primary":"bottom-sheet__background-primary_1fnli","background-primary-inverted":"bottom-sheet__background-primary-inverted_1fnli","background-secondary":"bottom-sheet__background-secondary_1fnli","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1fnli","background-tertiary":"bottom-sheet__background-tertiary_1fnli","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1fnli","background-quaternary":"bottom-sheet__background-quaternary_1fnli","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1fnli","background-specialbg-component":"bottom-sheet__background-specialbg-component_1fnli","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1fnli","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1fnli","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1fnli","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1fnli","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1fnli","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1fnli","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1fnli","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1fnli"};
17
17
  require('./index.css')
18
18
 
19
+ var isNil = fnUtils.isNil;
19
20
  var BottomSheet = forwardRef(function (_a, ref) {
20
21
  var _b, _c, _d, _e, _f;
21
- var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, 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, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName;
22
- var hasInitialIdx = initialActiveAreaIndex !== undefined;
22
+ var open = _a.open, title = _a.title, container = _a.container, usePortal = _a.usePortal, backgroundColor = _a.backgroundColor, _g = _a.titleSize, titleSize = _g === void 0 ? 'default' : _g, subtitle = _a.subtitle, 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, _h = _a.titleAlign, titleAlign = _h === void 0 ? 'left' : _h, trimTitle = _a.trimTitle, stickyHeader = _a.stickyHeader, _j = _a.stickyFooter, stickyFooter = _j === void 0 ? true : _j, _k = _a.initialHeight, initialHeight = _k === void 0 ? 'default' : _k, hideOverlay = _a.hideOverlay, hideScrollbar = _a.hideScrollbar, hideHeader = _a.hideHeader, disableOverlayClick = _a.disableOverlayClick, disableBlockingScroll = _a.disableBlockingScroll, disableFocusLock = _a.disableFocusLock, children = _a.children, zIndex = _a.zIndex, _l = _a.transitionProps, transitionProps = _l === void 0 ? {} : _l, magneticAreasProp = _a.magneticAreas, initialActiveAreaIndex = _a.initialActiveAreaIndex, dataTestId = _a.dataTestId, _m = _a.swipeable, swipeable = _m === void 0 ? true : _m, _o = _a.swipeableContent, swipeableContent = _o === void 0 ? true : _o, _p = _a.swipeThreshold, swipeThreshold = _p === void 0 ? 5 : _p, scrollLockedProp = _a.scrollLocked, backdropProps = _a.backdropProps, _q = _a.scrollableContainerRef, scrollableContainerRef = _q === void 0 ? function () { return null; } : _q, bottomSheetInstanceRef = _a.bottomSheetInstanceRef, _r = _a.sheetContainerRef, sheetContainerRef = _r === void 0 ? function () { return null; } : _r, _s = _a.headerOffset, headerOffset = _s === void 0 ? 24 : _s, onClose = _a.onClose, onBack = _a.onBack, onMagnetize = _a.onMagnetize, onSwipeStart = _a.onSwipeStart, onSwipeEnd = _a.onSwipeEnd, disableRestoreFocus = _a.disableRestoreFocus, disableAutoFocus = _a.disableAutoFocus, disableEscapeKeyDown = _a.disableEscapeKeyDown, keepMounted = _a.keepMounted, onMagnetizeEnd = _a.onMagnetizeEnd, onOffsetChange = _a.onOffsetChange, swipeableMarker = _a.swipeableMarker, swipeableMarkerClassName = _a.swipeableMarkerClassName;
23
23
  var fullHeight = use100vh() || 0;
24
24
  // Хук use100vh рассчитывает высоту вьюпорта в useEffect, поэтому на первый рендер всегда возвращает null.
25
25
  var isFirstRender = fullHeight === 0;
@@ -47,6 +47,21 @@ var BottomSheet = forwardRef(function (_a, ref) {
47
47
  var headerProps = __assign(__assign({}, (titleIsReactElement
48
48
  ? { children: title }
49
49
  : { title: title ? title === null || title === void 0 ? void 0 : title.toString() : undefined })), { scrollableParentRef: scrollableContainer, headerRef: headerRef, headerOffset: headerOffset, className: headerClassName, addonClassName: addonClassName, closerClassName: closerClassName, backButtonClassName: backerClassName, leftAddons: leftAddons, rightAddons: rightAddons, bottomAddons: bottomAddons, hasCloser: hasCloser, hasBackButton: hasBacker, align: titleAlign, trim: trimTitle, sticky: stickyHeader, dataTestId: getDataTestId(dataTestId, 'header'), onBack: onBack, titleSize: titleSize, subtitle: subtitle, onClose: onClose });
50
+ var startSwiping = function (event) {
51
+ setSwipingInProgress(function (p) {
52
+ if (!p)
53
+ onSwipeStart === null || onSwipeStart === void 0 ? void 0 : onSwipeStart(event);
54
+ return true;
55
+ });
56
+ };
57
+ var stopSwiping = function (event) {
58
+ setSwipingInProgress(function (p) {
59
+ if (p)
60
+ onSwipeEnd === null || onSwipeEnd === void 0 ? void 0 : onSwipeEnd(event);
61
+ return false;
62
+ });
63
+ scrollOccurred.current = false;
64
+ };
50
65
  var getBackdropOpacity = function (offset) {
51
66
  var canClose = magneticAreas[0] === 0;
52
67
  var secondArea = magneticAreas[1];
@@ -78,7 +93,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
78
93
  }
79
94
  };
80
95
  var scrollToArea = function (idx) {
81
- setSwipingInProgress(false);
96
+ stopSwiping(null);
82
97
  var nextArea = magneticAreas[idx];
83
98
  if (nextArea === 0) {
84
99
  onClose();
@@ -198,11 +213,11 @@ var BottomSheet = forwardRef(function (_a, ref) {
198
213
  if (shouldSkipSwiping(deltaY, initial[1], event)) {
199
214
  return;
200
215
  }
201
- setSwipingInProgress(true);
216
+ startSwiping(event);
202
217
  };
203
- var handleTouchEnd = function () {
204
- setSwipingInProgress(false);
205
- scrollOccurred.current = false;
218
+ var handleTouchEnd = function (_a) {
219
+ var event = _a.event;
220
+ return stopSwiping(event);
206
221
  };
207
222
  var handleSheetSwiping = function (_a) {
208
223
  var initial = _a.initial, deltaY = _a.deltaY, event = _a.event;
@@ -210,7 +225,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
210
225
  return;
211
226
  }
212
227
  if (!swipingInProgress) {
213
- setSwipingInProgress(true);
228
+ startSwiping(event);
214
229
  }
215
230
  var offset = getSheetOffset(deltaY);
216
231
  var opacity = getBackdropOpacity(offset);
@@ -227,9 +242,9 @@ var BottomSheet = forwardRef(function (_a, ref) {
227
242
  });
228
243
  var handleExited = function (node) {
229
244
  var idx = initialActiveAreaIndex;
230
- var nextArea = hasInitialIdx ? magneticAreas[idx] : lastMagneticArea;
245
+ var nextArea = isNil(idx) ? lastMagneticArea : magneticAreas[idx];
231
246
  setBackdropOpacity(1);
232
- setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[idx] : magneticAreas[0]);
247
+ setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
233
248
  setActiveArea(nextArea);
234
249
  onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd();
235
250
  if (transitionProps.onExited) {
@@ -259,13 +274,13 @@ var BottomSheet = forwardRef(function (_a, ref) {
259
274
  }
260
275
  };
261
276
  useEffect(function () {
262
- // Инициализируем стейт только после того, как была рассчитана высота вьюпорта.
277
+ // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
263
278
  if (!isFirstRender) {
264
- setSheetOffset(hasInitialIdx ? lastMagneticArea - magneticAreas[initialActiveAreaIndex] : 0);
265
- setActiveArea(hasInitialIdx ? magneticAreas[initialActiveAreaIndex] : lastMagneticArea);
279
+ var idx = initialActiveAreaIndex;
280
+ setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
281
+ setActiveArea(isNil(idx) ? lastMagneticArea : magneticAreas[idx]);
266
282
  }
267
- // eslint-disable-next-line react-hooks/exhaustive-deps
268
- }, [isFirstRender]);
283
+ }, [initialActiveAreaIndex, isFirstRender, lastMagneticArea, magneticAreas]);
269
284
  useEffect(function () {
270
285
  if (!sheetRef.current)
271
286
  return;
package/esm/components/footer/Component.js CHANGED
@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
2
2
  import cn from 'classnames';
3
3
  import { BaseModalContext } from '@alfalab/core-components-base-modal/esm';
4
4
 
5
- var styles = {"footer":"bottom-sheet__footer_walol","sticky":"bottom-sheet__sticky_walol","highlighted":"bottom-sheet__highlighted_walol","background-accent":"bottom-sheet__background-accent_walol","background-info":"bottom-sheet__background-info_walol","background-attention-muted":"bottom-sheet__background-attention-muted_walol","background-positive-muted":"bottom-sheet__background-positive-muted_walol","background-negative-muted":"bottom-sheet__background-negative-muted_walol","background-primary":"bottom-sheet__background-primary_walol","background-primary-inverted":"bottom-sheet__background-primary-inverted_walol","background-secondary":"bottom-sheet__background-secondary_walol","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_walol","background-tertiary":"bottom-sheet__background-tertiary_walol","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_walol","background-quaternary":"bottom-sheet__background-quaternary_walol","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_walol","background-specialbg-component":"bottom-sheet__background-specialbg-component_walol","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_walol","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_walol","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_walol","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_walol","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_walol","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_walol","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_walol","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_walol"};
5
+ var styles = {"footer":"bottom-sheet__footer_u9y6k","sticky":"bottom-sheet__sticky_u9y6k","highlighted":"bottom-sheet__highlighted_u9y6k","background-accent":"bottom-sheet__background-accent_u9y6k","background-info":"bottom-sheet__background-info_u9y6k","background-attention-muted":"bottom-sheet__background-attention-muted_u9y6k","background-positive-muted":"bottom-sheet__background-positive-muted_u9y6k","background-negative-muted":"bottom-sheet__background-negative-muted_u9y6k","background-primary":"bottom-sheet__background-primary_u9y6k","background-primary-inverted":"bottom-sheet__background-primary-inverted_u9y6k","background-secondary":"bottom-sheet__background-secondary_u9y6k","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_u9y6k","background-tertiary":"bottom-sheet__background-tertiary_u9y6k","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_u9y6k","background-quaternary":"bottom-sheet__background-quaternary_u9y6k","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_u9y6k","background-specialbg-component":"bottom-sheet__background-specialbg-component_u9y6k","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_u9y6k","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_u9y6k","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_u9y6k","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_u9y6k","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_u9y6k","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_u9y6k","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_u9y6k","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_u9y6k"};
6
6
  require('./index.css')
7
7
 
8
8
  var Footer = function (_a) {