@alfalab/core-components-bottom-sheet 6.11.0 → 6.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/component.js +49 -52
  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 +48 -51
  7. package/cssm/index.module.css +4 -0
  8. package/esm/component.js +49 -52
  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 +47 -43
  14. package/index.css +47 -43
  15. package/modern/component.js +43 -46
  16. package/modern/components/footer/Component.js +1 -1
  17. package/modern/components/footer/index.css +26 -26
  18. package/modern/components/header/Component.js +1 -1
  19. package/modern/components/header/index.css +13 -13
  20. package/modern/index.css +47 -43
  21. package/package.json +1 -1
  22. package/src/component.tsx +46 -55
  23. package/src/index.module.css +4 -0
package/component.js CHANGED
@@ -23,7 +23,7 @@ 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_1nk6m","wrapper":"bottom-sheet__wrapper_1nk6m","fullscreen":"bottom-sheet__fullscreen_1nk6m","component":"bottom-sheet__component_1nk6m","withTransition":"bottom-sheet__withTransition_1nk6m","scrollableContainer":"bottom-sheet__scrollableContainer_1nk6m","marker":"bottom-sheet__marker_1nk6m","defaultMarker":"bottom-sheet__defaultMarker_1nk6m","content":"bottom-sheet__content_1nk6m","noHeader":"bottom-sheet__noHeader_1nk6m","noFooter":"bottom-sheet__noFooter_1nk6m","scrollLocked":"bottom-sheet__scrollLocked_1nk6m","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_1nk6m","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_1nk6m","appear":"bottom-sheet__appear_1nk6m","enter":"bottom-sheet__enter_1nk6m","appearActive":"bottom-sheet__appearActive_1nk6m","enterActive":"bottom-sheet__enterActive_1nk6m","enterDone":"bottom-sheet__enterDone_1nk6m","appearDone":"bottom-sheet__appearDone_1nk6m","exit":"bottom-sheet__exit_1nk6m","exitActive":"bottom-sheet__exitActive_1nk6m","background-accent":"bottom-sheet__background-accent_1nk6m","background-info":"bottom-sheet__background-info_1nk6m","background-attention-muted":"bottom-sheet__background-attention-muted_1nk6m","background-positive-muted":"bottom-sheet__background-positive-muted_1nk6m","background-negative-muted":"bottom-sheet__background-negative-muted_1nk6m","background-primary":"bottom-sheet__background-primary_1nk6m","background-primary-inverted":"bottom-sheet__background-primary-inverted_1nk6m","background-secondary":"bottom-sheet__background-secondary_1nk6m","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_1nk6m","background-tertiary":"bottom-sheet__background-tertiary_1nk6m","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_1nk6m","background-quaternary":"bottom-sheet__background-quaternary_1nk6m","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_1nk6m","background-specialbg-component":"bottom-sheet__background-specialbg-component_1nk6m","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_1nk6m","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_1nk6m","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_1nk6m","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_1nk6m","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_1nk6m","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_1nk6m","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_1nk6m","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_1nk6m"};
26
+ var styles = {"modal":"bottom-sheet__modal_s4kzq","wrapper":"bottom-sheet__wrapper_s4kzq","fullscreen":"bottom-sheet__fullscreen_s4kzq","component":"bottom-sheet__component_s4kzq","withTransition":"bottom-sheet__withTransition_s4kzq","scrollableContainer":"bottom-sheet__scrollableContainer_s4kzq","marker":"bottom-sheet__marker_s4kzq","defaultMarker":"bottom-sheet__defaultMarker_s4kzq","content":"bottom-sheet__content_s4kzq","noHeader":"bottom-sheet__noHeader_s4kzq","noFooter":"bottom-sheet__noFooter_s4kzq","scrollLocked":"bottom-sheet__scrollLocked_s4kzq","hiddenScrollbar":"bottom-sheet__hiddenScrollbar_s4kzq","disabledPointerEvents":"bottom-sheet__disabledPointerEvents_s4kzq","appear":"bottom-sheet__appear_s4kzq","enter":"bottom-sheet__enter_s4kzq","appearActive":"bottom-sheet__appearActive_s4kzq","enterActive":"bottom-sheet__enterActive_s4kzq","enterDone":"bottom-sheet__enterDone_s4kzq","appearDone":"bottom-sheet__appearDone_s4kzq","exit":"bottom-sheet__exit_s4kzq","exitActive":"bottom-sheet__exitActive_s4kzq","background-accent":"bottom-sheet__background-accent_s4kzq","background-info":"bottom-sheet__background-info_s4kzq","background-attention-muted":"bottom-sheet__background-attention-muted_s4kzq","background-positive-muted":"bottom-sheet__background-positive-muted_s4kzq","background-negative-muted":"bottom-sheet__background-negative-muted_s4kzq","background-primary":"bottom-sheet__background-primary_s4kzq","background-primary-inverted":"bottom-sheet__background-primary-inverted_s4kzq","background-secondary":"bottom-sheet__background-secondary_s4kzq","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_s4kzq","background-tertiary":"bottom-sheet__background-tertiary_s4kzq","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_s4kzq","background-quaternary":"bottom-sheet__background-quaternary_s4kzq","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_s4kzq","background-specialbg-component":"bottom-sheet__background-specialbg-component_s4kzq","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_s4kzq","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_s4kzq","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_s4kzq","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_s4kzq","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_s4kzq","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_s4kzq","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_s4kzq","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_s4kzq"};
27
27
  require('./index.css')
28
28
 
29
29
  var isNil = coreComponentsShared.fnUtils.isNil;
@@ -44,7 +44,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
44
44
  var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
45
45
  var _t = React.useState(0), sheetOffset = _t[0], setSheetOffset = _t[1];
46
46
  var _u = React.useState(1), backdropOpacity = _u[0], setBackdropOpacity = _u[1];
47
- var _v = React.useState(0), activeArea = _v[0], setActiveArea = _v[1];
47
+ var _v = React.useState(-1), activeAreaIdx = _v[0], setActiveAreaIdx = _v[1];
48
48
  var _w = React.useState(null), swipingInProgress = _w[0], setSwipingInProgress = _w[1];
49
49
  var scrollOccurred = React.useRef(false);
50
50
  var headerRef = React.useRef(null);
@@ -52,6 +52,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
52
52
  var sheetHeight = React.useRef(0);
53
53
  var sheetRef = React.useRef(null);
54
54
  var scrollableContainer = React.useRef(null);
55
+ var activeArea = magneticAreas[activeAreaIdx];
55
56
  var emptyHeader = !hasCloser && !leftAddons && !title && !hasBacker && !rightAddons;
56
57
  var titleIsReactElement = React__default.default.isValidElement(title);
57
58
  var headerProps = tslib.__assign(tslib.__assign({}, (titleIsReactElement
@@ -105,56 +106,53 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
105
106
  var scrollToArea = function (idx) {
106
107
  stopSwiping(null);
107
108
  var nextArea = magneticAreas[idx];
109
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
108
110
  if (nextArea === 0) {
109
111
  onClose();
110
112
  return;
111
113
  }
112
- if (nextArea) {
113
- setActiveArea(nextArea);
114
+ if (nextAreaIdx !== -1) {
115
+ setActiveAreaIdx(nextAreaIdx);
114
116
  setSheetOffset(lastMagneticArea - nextArea);
115
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(getActiveAreaIndex(nextArea));
117
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
116
118
  }
117
119
  };
118
120
  var magnetize = function (velocity, deltaY) {
119
121
  var shouldMagnetizeDownByVelocity = deltaY >= 0 && velocity >= utils.SWIPE_VELOCITY;
120
122
  var shouldMagnetizeUpByVelocity = deltaY < 0 && velocity >= utils.SWIPE_VELOCITY;
123
+ var updatePosition = function (nextOffset, nextAreaIdx) {
124
+ setSheetOffset(nextOffset);
125
+ setActiveAreaIdx(function (prevState) { return (nextAreaIdx === -1 ? prevState : nextAreaIdx); });
126
+ if (nextAreaIdx !== -1) {
127
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
128
+ // Если nextOffset == offset, то onTransitionEnd не отработает и onMagnetizeEnd не вызовется
129
+ if (sheetOffset === nextOffset) {
130
+ onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
131
+ setSheetHeight();
132
+ }
133
+ }
134
+ };
121
135
  if (shouldMagnetizeDownByVelocity) {
122
- var nextArea_1 = magneticAreas
136
+ var nextArea = magneticAreas
123
137
  .slice()
124
138
  .reverse()
125
139
  .find(function (area) { return area < activeArea; });
126
- if (nextArea_1 === 0) {
140
+ if (nextArea === 0) {
127
141
  onClose();
128
142
  return;
129
143
  }
130
- var nextOffset = nextArea_1
131
- ? lastMagneticArea - nextArea_1
144
+ var nextOffset = nextArea
145
+ ? lastMagneticArea - nextArea
132
146
  : lastMagneticArea - activeArea;
133
- setSheetOffset(nextOffset);
134
- setActiveArea(function (prevState) { return nextArea_1 !== null && nextArea_1 !== void 0 ? nextArea_1 : prevState; });
135
- if (nextArea_1) {
136
- var nextAreaIdx = getActiveAreaIndex(nextArea_1);
137
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
138
- if (sheetOffset === nextOffset) {
139
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
140
- setSheetHeight();
141
- }
142
- }
147
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
148
+ updatePosition(nextOffset, nextAreaIdx);
143
149
  return;
144
150
  }
145
151
  if (shouldMagnetizeUpByVelocity) {
146
- var nextArea_2 = magneticAreas.find(function (area) { return area > activeArea; });
147
- var nextOffset = nextArea_2 ? lastMagneticArea - nextArea_2 : 0;
148
- setSheetOffset(nextOffset);
149
- setActiveArea(function (prevState) { return nextArea_2 !== null && nextArea_2 !== void 0 ? nextArea_2 : prevState; });
150
- if (nextArea_2) {
151
- var nextAreaIdx = getActiveAreaIndex(nextArea_2);
152
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
153
- if (sheetOffset === nextOffset) {
154
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
155
- setSheetHeight();
156
- }
157
- }
152
+ var nextArea = magneticAreas.find(function (area) { return area > activeArea; });
153
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
154
+ var nextOffset = nextArea ? lastMagneticArea - nextArea : 0;
155
+ updatePosition(nextOffset, nextAreaIdx);
158
156
  return;
159
157
  }
160
158
  var offset = getSheetOffset(deltaY);
@@ -183,15 +181,8 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
183
181
  else {
184
182
  var nextOffset = lastMagneticArea - nearestArea;
185
183
  var nextAreaIdx = getActiveAreaIndex(nearestArea);
186
- setSheetOffset(nextOffset);
187
- setActiveArea(nearestArea);
188
184
  setBackdropOpacity(1);
189
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
190
- // Если nextOffset == offset, то onTransitionEnd не отработает и onMagnetizeEnd не вызовется
191
- if (sheetOffset === nextOffset) {
192
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
193
- setSheetHeight();
194
- }
185
+ updatePosition(nextOffset, nextAreaIdx);
195
186
  }
196
187
  };
197
188
  /**
@@ -200,13 +191,11 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
200
191
  */
201
192
  var shouldSkipSwiping = function (deltaY, startY, event) {
202
193
  var _a;
203
- if (!swipeable)
204
- return true;
194
+ if (scrollLockedProp || swipingInProgress)
195
+ return false;
205
196
  if (!swipeableContent && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
206
197
  return true;
207
198
  }
208
- if (scrollLockedProp || swipingInProgress)
209
- return false;
210
199
  var scrollableNode = scrollableContainer.current;
211
200
  // Точка верхней границы (y координата)
212
201
  var bottomSheetTopY = fullHeight - sheetHeight.current;
@@ -265,21 +254,21 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
265
254
  onSwiped: handleSheetSwipe,
266
255
  onTouchEndOrOnMouseUp: handleTouchEnd,
267
256
  trackMouse: swipeable,
257
+ trackTouch: swipeable,
268
258
  delta: swipeThreshold,
269
259
  });
270
260
  var handleExited = function (node) {
271
261
  var idx = initialActiveAreaIndex;
272
- var nextArea = isNil(idx) ? lastMagneticArea : magneticAreas[idx];
273
262
  setBackdropOpacity(1);
274
263
  setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
275
- setActiveArea(nextArea);
264
+ setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
276
265
  onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(0);
277
266
  if (transitionProps.onExited) {
278
267
  transitionProps.onExited(node);
279
268
  }
280
269
  };
281
270
  var handleEnter = function (node, isAppearing) {
282
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex || magneticAreas.length - 1);
271
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex !== null && initialActiveAreaIndex !== void 0 ? initialActiveAreaIndex : magneticAreas.length - 1);
283
272
  if (transitionProps.onEnter) {
284
273
  transitionProps.onEnter(node, isAppearing);
285
274
  }
@@ -301,13 +290,19 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
301
290
  }
302
291
  };
303
292
  React.useEffect(function () {
304
- // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
305
293
  if (!isFirstRender) {
306
- var idx = initialActiveAreaIndex;
307
- setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
308
- setActiveArea(isNil(idx) ? lastMagneticArea : magneticAreas[idx]);
294
+ // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
295
+ if (activeAreaIdx === -1) {
296
+ var idx = initialActiveAreaIndex;
297
+ setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
298
+ setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
299
+ }
300
+ else {
301
+ setSheetOffset(activeArea ? lastMagneticArea - activeArea : 0);
302
+ }
309
303
  }
310
- }, [initialActiveAreaIndex, isFirstRender, lastMagneticArea, magneticAreas]);
304
+ // eslint-disable-next-line react-hooks/exhaustive-deps
305
+ }, [isFirstRender, magneticAreas, lastMagneticArea]);
311
306
  React.useEffect(function () {
312
307
  if (!sheetRef.current)
313
308
  return;
@@ -323,7 +318,9 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
323
318
  return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
324
319
  };
325
320
  var getHeightStyles = function () { return ({
326
- height: !isFirstRender && initialHeight === 'full' ? "".concat(lastMagneticArea, "px") : 'unset',
321
+ height: !isFirstRender && (initialHeight === 'full' || magneticAreasProp)
322
+ ? "".concat(lastMagneticArea, "px")
323
+ : 'unset',
327
324
  maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
328
325
  }); };
329
326
  var renderMarker = function () {
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_prru6","sticky":"bottom-sheet__sticky_prru6","highlighted":"bottom-sheet__highlighted_prru6","background-accent":"bottom-sheet__background-accent_prru6","background-info":"bottom-sheet__background-info_prru6","background-attention-muted":"bottom-sheet__background-attention-muted_prru6","background-positive-muted":"bottom-sheet__background-positive-muted_prru6","background-negative-muted":"bottom-sheet__background-negative-muted_prru6","background-primary":"bottom-sheet__background-primary_prru6","background-primary-inverted":"bottom-sheet__background-primary-inverted_prru6","background-secondary":"bottom-sheet__background-secondary_prru6","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_prru6","background-tertiary":"bottom-sheet__background-tertiary_prru6","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_prru6","background-quaternary":"bottom-sheet__background-quaternary_prru6","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_prru6","background-specialbg-component":"bottom-sheet__background-specialbg-component_prru6","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_prru6","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_prru6","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_prru6","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_prru6","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_prru6","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_prru6","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_prru6","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_prru6"};
14
+ var styles = {"footer":"bottom-sheet__footer_jxytq","sticky":"bottom-sheet__sticky_jxytq","highlighted":"bottom-sheet__highlighted_jxytq","background-accent":"bottom-sheet__background-accent_jxytq","background-info":"bottom-sheet__background-info_jxytq","background-attention-muted":"bottom-sheet__background-attention-muted_jxytq","background-positive-muted":"bottom-sheet__background-positive-muted_jxytq","background-negative-muted":"bottom-sheet__background-negative-muted_jxytq","background-primary":"bottom-sheet__background-primary_jxytq","background-primary-inverted":"bottom-sheet__background-primary-inverted_jxytq","background-secondary":"bottom-sheet__background-secondary_jxytq","background-secondary-inverted":"bottom-sheet__background-secondary-inverted_jxytq","background-tertiary":"bottom-sheet__background-tertiary_jxytq","background-tertiary-inverted":"bottom-sheet__background-tertiary-inverted_jxytq","background-quaternary":"bottom-sheet__background-quaternary_jxytq","background-quaternary-inverted":"bottom-sheet__background-quaternary-inverted_jxytq","background-specialbg-component":"bottom-sheet__background-specialbg-component_jxytq","background-specialbg-component-inverted":"bottom-sheet__background-specialbg-component-inverted_jxytq","background-specialbg-primary-grouped":"bottom-sheet__background-specialbg-primary-grouped_jxytq","background-specialbg-secondary-grouped":"bottom-sheet__background-specialbg-secondary-grouped_jxytq","background-specialbg-tertiary-grouped":"bottom-sheet__background-specialbg-tertiary-grouped_jxytq","background-specialbg-secondary-transparent":"bottom-sheet__background-specialbg-secondary-transparent_jxytq","background-specialbg-secondary-transparent-inverted":"bottom-sheet__background-specialbg-secondary-transparent-inverted_jxytq","background-specialbg-tertiary-transparent":"bottom-sheet__background-specialbg-tertiary-transparent_jxytq","background-specialbg-tertiary-transparent-inverted":"bottom-sheet__background-specialbg-tertiary-transparent-inverted_jxytq"};
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: oxp47 */
1
+ /* hash: trkge */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-accent: #ef3124;
@@ -45,58 +45,58 @@
45
45
  /* footer */
46
46
  --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-secondary);
47
47
  --bottom-sheet-footer-background-color: var(--color-light-bg-primary);
48
- } .bottom-sheet__footer_prru6 {
48
+ } .bottom-sheet__footer_jxytq {
49
49
  padding: var(--gap-m) var(--gap-m);
50
50
  background-color: var(--color-light-bg-primary);
51
- } .bottom-sheet__sticky_prru6 {
51
+ } .bottom-sheet__sticky_jxytq {
52
52
  position: sticky;
53
53
  bottom: 0;
54
54
  z-index: 1;
55
- } .bottom-sheet__highlighted_prru6 {
55
+ } .bottom-sheet__highlighted_jxytq {
56
56
  border-top: var(--bottom-sheet-footer-border-top);
57
57
  background-color: var(--bottom-sheet-footer-background-color);
58
- } .bottom-sheet__background-accent_prru6 {
58
+ } .bottom-sheet__background-accent_jxytq {
59
59
  background-color: var(--color-light-bg-accent);
60
- } .bottom-sheet__background-info_prru6 {
60
+ } .bottom-sheet__background-info_jxytq {
61
61
  background-color: var(--color-light-bg-info);
62
- } .bottom-sheet__background-attention-muted_prru6 {
62
+ } .bottom-sheet__background-attention-muted_jxytq {
63
63
  background-color: var(--color-light-bg-attention-muted);
64
- } .bottom-sheet__background-positive-muted_prru6 {
64
+ } .bottom-sheet__background-positive-muted_jxytq {
65
65
  background-color: var(--color-light-bg-positive-muted);
66
- } .bottom-sheet__background-negative-muted_prru6 {
66
+ } .bottom-sheet__background-negative-muted_jxytq {
67
67
  background-color: var(--color-light-bg-negative-muted);
68
- } .bottom-sheet__background-primary_prru6 {
68
+ } .bottom-sheet__background-primary_jxytq {
69
69
  background-color: var(--color-light-bg-primary);
70
- } .bottom-sheet__background-primary-inverted_prru6 {
70
+ } .bottom-sheet__background-primary-inverted_jxytq {
71
71
  background-color: var(--color-light-bg-primary-inverted);
72
- } .bottom-sheet__background-secondary_prru6 {
72
+ } .bottom-sheet__background-secondary_jxytq {
73
73
  background-color: var(--color-light-bg-secondary);
74
- } .bottom-sheet__background-secondary-inverted_prru6 {
74
+ } .bottom-sheet__background-secondary-inverted_jxytq {
75
75
  background-color: var(--color-light-bg-secondary-inverted);
76
- } .bottom-sheet__background-tertiary_prru6 {
76
+ } .bottom-sheet__background-tertiary_jxytq {
77
77
  background-color: var(--color-light-bg-tertiary);
78
- } .bottom-sheet__background-tertiary-inverted_prru6 {
78
+ } .bottom-sheet__background-tertiary-inverted_jxytq {
79
79
  background-color: var(--color-light-bg-tertiary-inverted);
80
- } .bottom-sheet__background-quaternary_prru6 {
80
+ } .bottom-sheet__background-quaternary_jxytq {
81
81
  background-color: var(--color-light-bg-quaternary);
82
- } .bottom-sheet__background-quaternary-inverted_prru6 {
82
+ } .bottom-sheet__background-quaternary-inverted_jxytq {
83
83
  background-color: var(--color-light-bg-quaternary-inverted);
84
- } .bottom-sheet__background-specialbg-component_prru6 {
84
+ } .bottom-sheet__background-specialbg-component_jxytq {
85
85
  background-color: var(--color-light-specialbg-component);
86
- } .bottom-sheet__background-specialbg-component-inverted_prru6 {
86
+ } .bottom-sheet__background-specialbg-component-inverted_jxytq {
87
87
  background-color: var(--color-light-specialbg-component-inverted);
88
- } .bottom-sheet__background-specialbg-primary-grouped_prru6 {
88
+ } .bottom-sheet__background-specialbg-primary-grouped_jxytq {
89
89
  background-color: var(--color-light-specialbg-primary-grouped);
90
- } .bottom-sheet__background-specialbg-secondary-grouped_prru6 {
90
+ } .bottom-sheet__background-specialbg-secondary-grouped_jxytq {
91
91
  background-color: var(--color-light-specialbg-secondary-grouped);
92
- } .bottom-sheet__background-specialbg-tertiary-grouped_prru6 {
92
+ } .bottom-sheet__background-specialbg-tertiary-grouped_jxytq {
93
93
  background-color: var(--color-light-specialbg-tertiary-grouped);
94
- } .bottom-sheet__background-specialbg-secondary-transparent_prru6 {
94
+ } .bottom-sheet__background-specialbg-secondary-transparent_jxytq {
95
95
  background-color: var(--color-light-specialbg-secondary-transparent);
96
- } .bottom-sheet__background-specialbg-secondary-transparent-inverted_prru6 {
96
+ } .bottom-sheet__background-specialbg-secondary-transparent-inverted_jxytq {
97
97
  background-color: var(--color-light-specialbg-secondary-transparent-inverted);
98
- } .bottom-sheet__background-specialbg-tertiary-transparent_prru6 {
98
+ } .bottom-sheet__background-specialbg-tertiary-transparent_jxytq {
99
99
  background-color: var(--color-light-specialbg-tertiary-transparent);
100
- } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_prru6 {
100
+ } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_jxytq {
101
101
  background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
102
102
  }
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_ewh7e","hasContent":"bottom-sheet__hasContent_ewh7e","header":"bottom-sheet__header_ewh7e","sticky":"bottom-sheet__sticky_ewh7e","highlighted":"bottom-sheet__highlighted_ewh7e","justifyEnd":"bottom-sheet__justifyEnd_ewh7e","addon":"bottom-sheet__addon_ewh7e","addonFixed":"bottom-sheet__addonFixed_ewh7e","title":"bottom-sheet__title_ewh7e","titleCenter":"bottom-sheet__titleCenter_ewh7e","titleLeft":"bottom-sheet__titleLeft_ewh7e","trimTitle":"bottom-sheet__trimTitle_ewh7e"};
16
+ var styles = {"headerWrapper":"bottom-sheet__headerWrapper_68phn","hasContent":"bottom-sheet__hasContent_68phn","header":"bottom-sheet__header_68phn","sticky":"bottom-sheet__sticky_68phn","highlighted":"bottom-sheet__highlighted_68phn","justifyEnd":"bottom-sheet__justifyEnd_68phn","addon":"bottom-sheet__addon_68phn","addonFixed":"bottom-sheet__addonFixed_68phn","title":"bottom-sheet__title_68phn","titleCenter":"bottom-sheet__titleCenter_68phn","titleLeft":"bottom-sheet__titleLeft_68phn","trimTitle":"bottom-sheet__trimTitle_68phn"};
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: 2bds5 */
1
+ /* hash: 7594c */
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 */
@@ -30,42 +30,42 @@
30
30
  --bottom-sheet-title-font-family: var(--font-family-system);
31
31
 
32
32
  /* footer */
33
- } .bottom-sheet__headerWrapper_ewh7e {
33
+ } .bottom-sheet__headerWrapper_68phn {
34
34
  padding: var(--gap-s) var(--gap-xs) var(--gap-2xs);
35
35
  border-top-left-radius: inherit;
36
36
  border-top-right-radius: inherit;
37
37
  z-index: 1;
38
- } .bottom-sheet__hasContent_ewh7e {
38
+ } .bottom-sheet__hasContent_68phn {
39
39
  background-color: inherit;
40
- } .bottom-sheet__header_ewh7e {
40
+ } .bottom-sheet__header_68phn {
41
41
  display: flex;
42
- } .bottom-sheet__sticky_ewh7e {
42
+ } .bottom-sheet__sticky_68phn {
43
43
  position: sticky;
44
44
  top: 0;
45
- } .bottom-sheet__highlighted_ewh7e {
45
+ } .bottom-sheet__highlighted_68phn {
46
46
  border-bottom: var(--bottom-sheet-header-border-bottom);
47
- } .bottom-sheet__justifyEnd_ewh7e {
47
+ } .bottom-sheet__justifyEnd_68phn {
48
48
  justify-content: flex-end;
49
- } .bottom-sheet__addon_ewh7e {
49
+ } .bottom-sheet__addon_68phn {
50
50
  display: flex;
51
51
  justify-content: center;
52
52
  align-items: center;
53
53
  min-width: 48px;
54
54
  height: 48px;
55
- } .bottom-sheet__addonFixed_ewh7e {
55
+ } .bottom-sheet__addonFixed_68phn {
56
56
  position: fixed;
57
- } .bottom-sheet__title_ewh7e {
57
+ } .bottom-sheet__title_68phn {
58
58
  padding: var(--gap-s) var(--gap-xs);
59
59
  width: 100%;
60
60
  font-size: var(--bottom-sheet-title-font-size);
61
61
  font-weight: var(--bottom-sheet-title-font-weight);
62
62
  line-height: var(--bottom-sheet-title-line-height);
63
63
  font-family: var(--bottom-sheet-title-font-family);
64
- } .bottom-sheet__titleCenter_ewh7e {
64
+ } .bottom-sheet__titleCenter_68phn {
65
65
  text-align: center;
66
- } .bottom-sheet__titleLeft_ewh7e {
66
+ } .bottom-sheet__titleLeft_68phn {
67
67
  text-align: left;
68
- } .bottom-sheet__trimTitle_ewh7e {
68
+ } .bottom-sheet__trimTitle_68phn {
69
69
  white-space: nowrap;
70
70
  overflow: hidden;
71
71
  text-overflow: ellipsis;
package/cssm/component.js CHANGED
@@ -45,7 +45,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
45
45
  var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
46
46
  var _t = React.useState(0), sheetOffset = _t[0], setSheetOffset = _t[1];
47
47
  var _u = React.useState(1), backdropOpacity = _u[0], setBackdropOpacity = _u[1];
48
- var _v = React.useState(0), activeArea = _v[0], setActiveArea = _v[1];
48
+ var _v = React.useState(-1), activeAreaIdx = _v[0], setActiveAreaIdx = _v[1];
49
49
  var _w = React.useState(null), swipingInProgress = _w[0], setSwipingInProgress = _w[1];
50
50
  var scrollOccurred = React.useRef(false);
51
51
  var headerRef = React.useRef(null);
@@ -53,6 +53,7 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
53
53
  var sheetHeight = React.useRef(0);
54
54
  var sheetRef = React.useRef(null);
55
55
  var scrollableContainer = React.useRef(null);
56
+ var activeArea = magneticAreas[activeAreaIdx];
56
57
  var emptyHeader = !hasCloser && !leftAddons && !title && !hasBacker && !rightAddons;
57
58
  var titleIsReactElement = React__default.default.isValidElement(title);
58
59
  var headerProps = tslib.__assign(tslib.__assign({}, (titleIsReactElement
@@ -106,56 +107,53 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
106
107
  var scrollToArea = function (idx) {
107
108
  stopSwiping(null);
108
109
  var nextArea = magneticAreas[idx];
110
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
109
111
  if (nextArea === 0) {
110
112
  onClose();
111
113
  return;
112
114
  }
113
- if (nextArea) {
114
- setActiveArea(nextArea);
115
+ if (nextAreaIdx !== -1) {
116
+ setActiveAreaIdx(nextAreaIdx);
115
117
  setSheetOffset(lastMagneticArea - nextArea);
116
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(getActiveAreaIndex(nextArea));
118
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
117
119
  }
118
120
  };
119
121
  var magnetize = function (velocity, deltaY) {
120
122
  var shouldMagnetizeDownByVelocity = deltaY >= 0 && velocity >= utils.SWIPE_VELOCITY;
121
123
  var shouldMagnetizeUpByVelocity = deltaY < 0 && velocity >= utils.SWIPE_VELOCITY;
124
+ var updatePosition = function (nextOffset, nextAreaIdx) {
125
+ setSheetOffset(nextOffset);
126
+ setActiveAreaIdx(function (prevState) { return (nextAreaIdx === -1 ? prevState : nextAreaIdx); });
127
+ if (nextAreaIdx !== -1) {
128
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
129
+ // Если nextOffset == offset, то onTransitionEnd не отработает и onMagnetizeEnd не вызовется
130
+ if (sheetOffset === nextOffset) {
131
+ onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
132
+ setSheetHeight();
133
+ }
134
+ }
135
+ };
122
136
  if (shouldMagnetizeDownByVelocity) {
123
- var nextArea_1 = magneticAreas
137
+ var nextArea = magneticAreas
124
138
  .slice()
125
139
  .reverse()
126
140
  .find(function (area) { return area < activeArea; });
127
- if (nextArea_1 === 0) {
141
+ if (nextArea === 0) {
128
142
  onClose();
129
143
  return;
130
144
  }
131
- var nextOffset = nextArea_1
132
- ? lastMagneticArea - nextArea_1
145
+ var nextOffset = nextArea
146
+ ? lastMagneticArea - nextArea
133
147
  : lastMagneticArea - activeArea;
134
- setSheetOffset(nextOffset);
135
- setActiveArea(function (prevState) { return nextArea_1 !== null && nextArea_1 !== void 0 ? nextArea_1 : prevState; });
136
- if (nextArea_1) {
137
- var nextAreaIdx = getActiveAreaIndex(nextArea_1);
138
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
139
- if (sheetOffset === nextOffset) {
140
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
141
- setSheetHeight();
142
- }
143
- }
148
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
149
+ updatePosition(nextOffset, nextAreaIdx);
144
150
  return;
145
151
  }
146
152
  if (shouldMagnetizeUpByVelocity) {
147
- var nextArea_2 = magneticAreas.find(function (area) { return area > activeArea; });
148
- var nextOffset = nextArea_2 ? lastMagneticArea - nextArea_2 : 0;
149
- setSheetOffset(nextOffset);
150
- setActiveArea(function (prevState) { return nextArea_2 !== null && nextArea_2 !== void 0 ? nextArea_2 : prevState; });
151
- if (nextArea_2) {
152
- var nextAreaIdx = getActiveAreaIndex(nextArea_2);
153
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
154
- if (sheetOffset === nextOffset) {
155
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
156
- setSheetHeight();
157
- }
158
- }
153
+ var nextArea = magneticAreas.find(function (area) { return area > activeArea; });
154
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
155
+ var nextOffset = nextArea ? lastMagneticArea - nextArea : 0;
156
+ updatePosition(nextOffset, nextAreaIdx);
159
157
  return;
160
158
  }
161
159
  var offset = getSheetOffset(deltaY);
@@ -184,15 +182,8 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
184
182
  else {
185
183
  var nextOffset = lastMagneticArea - nearestArea;
186
184
  var nextAreaIdx = getActiveAreaIndex(nearestArea);
187
- setSheetOffset(nextOffset);
188
- setActiveArea(nearestArea);
189
185
  setBackdropOpacity(1);
190
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
191
- // Если nextOffset == offset, то onTransitionEnd не отработает и onMagnetizeEnd не вызовется
192
- if (sheetOffset === nextOffset) {
193
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
194
- setSheetHeight();
195
- }
186
+ updatePosition(nextOffset, nextAreaIdx);
196
187
  }
197
188
  };
198
189
  /**
@@ -201,13 +192,11 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
201
192
  */
202
193
  var shouldSkipSwiping = function (deltaY, startY, event) {
203
194
  var _a;
204
- if (!swipeable)
205
- return true;
195
+ if (scrollLockedProp || swipingInProgress)
196
+ return false;
206
197
  if (!swipeableContent && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
207
198
  return true;
208
199
  }
209
- if (scrollLockedProp || swipingInProgress)
210
- return false;
211
200
  var scrollableNode = scrollableContainer.current;
212
201
  // Точка верхней границы (y координата)
213
202
  var bottomSheetTopY = fullHeight - sheetHeight.current;
@@ -266,21 +255,21 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
266
255
  onSwiped: handleSheetSwipe,
267
256
  onTouchEndOrOnMouseUp: handleTouchEnd,
268
257
  trackMouse: swipeable,
258
+ trackTouch: swipeable,
269
259
  delta: swipeThreshold,
270
260
  });
271
261
  var handleExited = function (node) {
272
262
  var idx = initialActiveAreaIndex;
273
- var nextArea = isNil(idx) ? lastMagneticArea : magneticAreas[idx];
274
263
  setBackdropOpacity(1);
275
264
  setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
276
- setActiveArea(nextArea);
265
+ setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
277
266
  onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(0);
278
267
  if (transitionProps.onExited) {
279
268
  transitionProps.onExited(node);
280
269
  }
281
270
  };
282
271
  var handleEnter = function (node, isAppearing) {
283
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex || magneticAreas.length - 1);
272
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex !== null && initialActiveAreaIndex !== void 0 ? initialActiveAreaIndex : magneticAreas.length - 1);
284
273
  if (transitionProps.onEnter) {
285
274
  transitionProps.onEnter(node, isAppearing);
286
275
  }
@@ -302,13 +291,19 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
302
291
  }
303
292
  };
304
293
  React.useEffect(function () {
305
- // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
306
294
  if (!isFirstRender) {
307
- var idx = initialActiveAreaIndex;
308
- setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
309
- setActiveArea(isNil(idx) ? lastMagneticArea : magneticAreas[idx]);
295
+ // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
296
+ if (activeAreaIdx === -1) {
297
+ var idx = initialActiveAreaIndex;
298
+ setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
299
+ setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
300
+ }
301
+ else {
302
+ setSheetOffset(activeArea ? lastMagneticArea - activeArea : 0);
303
+ }
310
304
  }
311
- }, [initialActiveAreaIndex, isFirstRender, lastMagneticArea, magneticAreas]);
305
+ // eslint-disable-next-line react-hooks/exhaustive-deps
306
+ }, [isFirstRender, magneticAreas, lastMagneticArea]);
312
307
  React.useEffect(function () {
313
308
  if (!sheetRef.current)
314
309
  return;
@@ -324,7 +319,9 @@ var BottomSheet = React.forwardRef(function (_a, ref) {
324
319
  return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
325
320
  };
326
321
  var getHeightStyles = function () { return ({
327
- height: !isFirstRender && initialHeight === 'full' ? "".concat(lastMagneticArea, "px") : 'unset',
322
+ height: !isFirstRender && (initialHeight === 'full' || magneticAreasProp)
323
+ ? "".concat(lastMagneticArea, "px")
324
+ : 'unset',
328
325
  maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
329
326
  }); };
330
327
  var renderMarker = function () {
package/cssm/index.module.css CHANGED
@@ -57,9 +57,11 @@
57
57
  width: 100%;
58
58
  max-width: 600px;
59
59
  pointer-events: none;
60
+ touch-action: none;
60
61
  } .wrapper {
61
62
  transform: translateY(100%);
62
63
  pointer-events: none;
64
+ touch-action: none;
63
65
  border-top-right-radius: var(--bottom-sheet-top-radius);
64
66
  border-top-left-radius: var(--bottom-sheet-top-radius);
65
67
  transition: border-radius 0.3s ease;
@@ -83,6 +85,7 @@
83
85
  height: 100%;
84
86
  background-color: inherit;
85
87
  border-radius: inherit;
88
+ overscroll-behavior: contain;
86
89
  } .marker {
87
90
  position: fixed;
88
91
  top: var(--gap-2xs);
@@ -104,6 +107,7 @@
104
107
  padding: 0 var(--gap-m);
105
108
  color: var(--color-light-text-primary);
106
109
  background-color: inherit;
110
+ border-radius: inherit;
107
111
  } .noHeader {
108
112
  padding-top: var(--gap-m);
109
113
  } .noFooter {