@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.
package/esm/component.js CHANGED
@@ -13,7 +13,7 @@ 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_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"};
16
+ 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"};
17
17
  require('./index.css')
18
18
 
19
19
  var isNil = fnUtils.isNil;
@@ -34,7 +34,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
34
34
  var lastMagneticArea = magneticAreas[magneticAreas.length - 1];
35
35
  var _t = useState(0), sheetOffset = _t[0], setSheetOffset = _t[1];
36
36
  var _u = useState(1), backdropOpacity = _u[0], setBackdropOpacity = _u[1];
37
- var _v = useState(0), activeArea = _v[0], setActiveArea = _v[1];
37
+ var _v = useState(-1), activeAreaIdx = _v[0], setActiveAreaIdx = _v[1];
38
38
  var _w = useState(null), swipingInProgress = _w[0], setSwipingInProgress = _w[1];
39
39
  var scrollOccurred = useRef(false);
40
40
  var headerRef = useRef(null);
@@ -42,6 +42,7 @@ var BottomSheet = forwardRef(function (_a, ref) {
42
42
  var sheetHeight = useRef(0);
43
43
  var sheetRef = useRef(null);
44
44
  var scrollableContainer = useRef(null);
45
+ var activeArea = magneticAreas[activeAreaIdx];
45
46
  var emptyHeader = !hasCloser && !leftAddons && !title && !hasBacker && !rightAddons;
46
47
  var titleIsReactElement = React.isValidElement(title);
47
48
  var headerProps = __assign(__assign({}, (titleIsReactElement
@@ -95,56 +96,53 @@ var BottomSheet = forwardRef(function (_a, ref) {
95
96
  var scrollToArea = function (idx) {
96
97
  stopSwiping(null);
97
98
  var nextArea = magneticAreas[idx];
99
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
98
100
  if (nextArea === 0) {
99
101
  onClose();
100
102
  return;
101
103
  }
102
- if (nextArea) {
103
- setActiveArea(nextArea);
104
+ if (nextAreaIdx !== -1) {
105
+ setActiveAreaIdx(nextAreaIdx);
104
106
  setSheetOffset(lastMagneticArea - nextArea);
105
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(getActiveAreaIndex(nextArea));
107
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
106
108
  }
107
109
  };
108
110
  var magnetize = function (velocity, deltaY) {
109
111
  var shouldMagnetizeDownByVelocity = deltaY >= 0 && velocity >= SWIPE_VELOCITY;
110
112
  var shouldMagnetizeUpByVelocity = deltaY < 0 && velocity >= SWIPE_VELOCITY;
113
+ var updatePosition = function (nextOffset, nextAreaIdx) {
114
+ setSheetOffset(nextOffset);
115
+ setActiveAreaIdx(function (prevState) { return (nextAreaIdx === -1 ? prevState : nextAreaIdx); });
116
+ if (nextAreaIdx !== -1) {
117
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
118
+ // Если nextOffset == offset, то onTransitionEnd не отработает и onMagnetizeEnd не вызовется
119
+ if (sheetOffset === nextOffset) {
120
+ onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
121
+ setSheetHeight();
122
+ }
123
+ }
124
+ };
111
125
  if (shouldMagnetizeDownByVelocity) {
112
- var nextArea_1 = magneticAreas
126
+ var nextArea = magneticAreas
113
127
  .slice()
114
128
  .reverse()
115
129
  .find(function (area) { return area < activeArea; });
116
- if (nextArea_1 === 0) {
130
+ if (nextArea === 0) {
117
131
  onClose();
118
132
  return;
119
133
  }
120
- var nextOffset = nextArea_1
121
- ? lastMagneticArea - nextArea_1
134
+ var nextOffset = nextArea
135
+ ? lastMagneticArea - nextArea
122
136
  : lastMagneticArea - activeArea;
123
- setSheetOffset(nextOffset);
124
- setActiveArea(function (prevState) { return nextArea_1 !== null && nextArea_1 !== void 0 ? nextArea_1 : prevState; });
125
- if (nextArea_1) {
126
- var nextAreaIdx = getActiveAreaIndex(nextArea_1);
127
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
128
- if (sheetOffset === nextOffset) {
129
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
130
- setSheetHeight();
131
- }
132
- }
137
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
138
+ updatePosition(nextOffset, nextAreaIdx);
133
139
  return;
134
140
  }
135
141
  if (shouldMagnetizeUpByVelocity) {
136
- var nextArea_2 = magneticAreas.find(function (area) { return area > activeArea; });
137
- var nextOffset = nextArea_2 ? lastMagneticArea - nextArea_2 : 0;
138
- setSheetOffset(nextOffset);
139
- setActiveArea(function (prevState) { return nextArea_2 !== null && nextArea_2 !== void 0 ? nextArea_2 : prevState; });
140
- if (nextArea_2) {
141
- var nextAreaIdx = getActiveAreaIndex(nextArea_2);
142
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
143
- if (sheetOffset === nextOffset) {
144
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
145
- setSheetHeight();
146
- }
147
- }
142
+ var nextArea = magneticAreas.find(function (area) { return area > activeArea; });
143
+ var nextAreaIdx = getActiveAreaIndex(nextArea);
144
+ var nextOffset = nextArea ? lastMagneticArea - nextArea : 0;
145
+ updatePosition(nextOffset, nextAreaIdx);
148
146
  return;
149
147
  }
150
148
  var offset = getSheetOffset(deltaY);
@@ -173,15 +171,8 @@ var BottomSheet = forwardRef(function (_a, ref) {
173
171
  else {
174
172
  var nextOffset = lastMagneticArea - nearestArea;
175
173
  var nextAreaIdx = getActiveAreaIndex(nearestArea);
176
- setSheetOffset(nextOffset);
177
- setActiveArea(nearestArea);
178
174
  setBackdropOpacity(1);
179
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(nextAreaIdx);
180
- // Если nextOffset == offset, то onTransitionEnd не отработает и onMagnetizeEnd не вызовется
181
- if (sheetOffset === nextOffset) {
182
- onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(nextAreaIdx);
183
- setSheetHeight();
184
- }
175
+ updatePosition(nextOffset, nextAreaIdx);
185
176
  }
186
177
  };
187
178
  /**
@@ -190,13 +181,11 @@ var BottomSheet = forwardRef(function (_a, ref) {
190
181
  */
191
182
  var shouldSkipSwiping = function (deltaY, startY, event) {
192
183
  var _a;
193
- if (!swipeable)
194
- return true;
184
+ if (scrollLockedProp || swipingInProgress)
185
+ return false;
195
186
  if (!swipeableContent && ((_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
196
187
  return true;
197
188
  }
198
- if (scrollLockedProp || swipingInProgress)
199
- return false;
200
189
  var scrollableNode = scrollableContainer.current;
201
190
  // Точка верхней границы (y координата)
202
191
  var bottomSheetTopY = fullHeight - sheetHeight.current;
@@ -255,21 +244,21 @@ var BottomSheet = forwardRef(function (_a, ref) {
255
244
  onSwiped: handleSheetSwipe,
256
245
  onTouchEndOrOnMouseUp: handleTouchEnd,
257
246
  trackMouse: swipeable,
247
+ trackTouch: swipeable,
258
248
  delta: swipeThreshold,
259
249
  });
260
250
  var handleExited = function (node) {
261
251
  var idx = initialActiveAreaIndex;
262
- var nextArea = isNil(idx) ? lastMagneticArea : magneticAreas[idx];
263
252
  setBackdropOpacity(1);
264
253
  setSheetOffset(isNil(idx) ? magneticAreas[0] : lastMagneticArea - magneticAreas[idx]);
265
- setActiveArea(nextArea);
254
+ setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
266
255
  onMagnetizeEnd === null || onMagnetizeEnd === void 0 ? void 0 : onMagnetizeEnd(0);
267
256
  if (transitionProps.onExited) {
268
257
  transitionProps.onExited(node);
269
258
  }
270
259
  };
271
260
  var handleEnter = function (node, isAppearing) {
272
- onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex || magneticAreas.length - 1);
261
+ onMagnetize === null || onMagnetize === void 0 ? void 0 : onMagnetize(initialActiveAreaIndex !== null && initialActiveAreaIndex !== void 0 ? initialActiveAreaIndex : magneticAreas.length - 1);
273
262
  if (transitionProps.onEnter) {
274
263
  transitionProps.onEnter(node, isAppearing);
275
264
  }
@@ -291,13 +280,19 @@ var BottomSheet = forwardRef(function (_a, ref) {
291
280
  }
292
281
  };
293
282
  useEffect(function () {
294
- // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
295
283
  if (!isFirstRender) {
296
- var idx = initialActiveAreaIndex;
297
- setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
298
- setActiveArea(isNil(idx) ? lastMagneticArea : magneticAreas[idx]);
284
+ // Инициализируем стейт только после того, как была рассчитана высота вьюпорта
285
+ if (activeAreaIdx === -1) {
286
+ var idx = initialActiveAreaIndex;
287
+ setSheetOffset(isNil(idx) ? 0 : lastMagneticArea - magneticAreas[idx]);
288
+ setActiveAreaIdx(isNil(idx) ? magneticAreas.length - 1 : idx);
289
+ }
290
+ else {
291
+ setSheetOffset(activeArea ? lastMagneticArea - activeArea : 0);
292
+ }
299
293
  }
300
- }, [initialActiveAreaIndex, isFirstRender, lastMagneticArea, magneticAreas]);
294
+ // eslint-disable-next-line react-hooks/exhaustive-deps
295
+ }, [isFirstRender, magneticAreas, lastMagneticArea]);
301
296
  useEffect(function () {
302
297
  if (!sheetRef.current)
303
298
  return;
@@ -313,7 +308,9 @@ var BottomSheet = forwardRef(function (_a, ref) {
313
308
  return sheetOffset ? { transform: "translateY(".concat(sheetOffset, "px)") } : {};
314
309
  };
315
310
  var getHeightStyles = function () { return ({
316
- height: !isFirstRender && initialHeight === 'full' ? "".concat(lastMagneticArea, "px") : 'unset',
311
+ height: !isFirstRender && (initialHeight === 'full' || magneticAreasProp)
312
+ ? "".concat(lastMagneticArea, "px")
313
+ : 'unset',
317
314
  maxHeight: isFirstRender ? 0 : "".concat(lastMagneticArea, "px"),
318
315
  }); };
319
316
  var renderMarker = function () {
@@ -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_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"};
5
+ 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"};
6
6
  require('./index.css')
7
7
 
8
8
  var Footer = function (_a) {
@@ -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
  }
@@ -4,7 +4,7 @@ import cn from 'classnames';
4
4
  import { BaseModalContext } from '@alfalab/core-components-base-modal/esm';
5
5
  import { NavigationBar } from '@alfalab/core-components-navigation-bar/esm';
6
6
 
7
- 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"};
7
+ 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"};
8
8
  require('./index.css')
9
9
 
10
10
  var Header = function (_a) {
@@ -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/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1xju9 */
1
+ /* hash: 1w970 */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-bg-accent: #ef3124;
@@ -51,22 +51,24 @@
51
51
  /* header */
52
52
 
53
53
  /* footer */
54
- } .bottom-sheet__modal_1nk6m {
54
+ } .bottom-sheet__modal_s4kzq {
55
55
  background-color: transparent;
56
56
  position: fixed;
57
57
  bottom: 0;
58
58
  width: 100%;
59
59
  max-width: 600px;
60
60
  pointer-events: none;
61
- } .bottom-sheet__wrapper_1nk6m {
61
+ touch-action: none;
62
+ } .bottom-sheet__wrapper_s4kzq {
62
63
  transform: translateY(100%);
63
64
  pointer-events: none;
65
+ touch-action: none;
64
66
  border-top-right-radius: var(--bottom-sheet-top-radius);
65
67
  border-top-left-radius: var(--bottom-sheet-top-radius);
66
68
  transition: border-radius 0.3s ease;
67
- } .bottom-sheet__fullscreen_1nk6m {
69
+ } .bottom-sheet__fullscreen_s4kzq {
68
70
  border-radius: 0;
69
- } .bottom-sheet__component_1nk6m {
71
+ } .bottom-sheet__component_s4kzq {
70
72
  position: relative;
71
73
  display: flex;
72
74
  flex-direction: column;
@@ -74,9 +76,9 @@
74
76
  background-color: var(--color-light-bg-primary);
75
77
  pointer-events: all;
76
78
  box-shadow: var(--bottom-sheet-shadow);
77
- } .bottom-sheet__withTransition_1nk6m {
79
+ } .bottom-sheet__withTransition_s4kzq {
78
80
  transition: var(--bottom-sheet-out-transition);
79
- } .bottom-sheet__scrollableContainer_1nk6m {
81
+ } .bottom-sheet__scrollableContainer_s4kzq {
80
82
  overflow: auto;
81
83
  display: flex;
82
84
  flex-direction: column;
@@ -84,7 +86,8 @@
84
86
  height: 100%;
85
87
  background-color: inherit;
86
88
  border-radius: inherit;
87
- } .bottom-sheet__marker_1nk6m {
89
+ overscroll-behavior: contain;
90
+ } .bottom-sheet__marker_s4kzq {
88
91
  position: fixed;
89
92
  top: var(--gap-2xs);
90
93
  right: 0;
@@ -92,11 +95,11 @@
92
95
  z-index: 1000;
93
96
  width: 36px;
94
97
  margin: 0 auto;
95
- } .bottom-sheet__defaultMarker_1nk6m {
98
+ } .bottom-sheet__defaultMarker_s4kzq {
96
99
  height: 4px;
97
100
  border-radius: var(--border-radius-xxl);
98
101
  background-color: var(--color-light-graphic-quaternary);
99
- } .bottom-sheet__content_1nk6m {
102
+ } .bottom-sheet__content_s4kzq {
100
103
  position: relative;
101
104
  z-index: 0;
102
105
  display: flex;
@@ -105,73 +108,74 @@
105
108
  padding: 0 var(--gap-m);
106
109
  color: var(--color-light-text-primary);
107
110
  background-color: inherit;
108
- } .bottom-sheet__noHeader_1nk6m {
111
+ border-radius: inherit;
112
+ } .bottom-sheet__noHeader_s4kzq {
109
113
  padding-top: var(--gap-m);
110
- } .bottom-sheet__noFooter_1nk6m {
114
+ } .bottom-sheet__noFooter_s4kzq {
111
115
  padding-bottom: var(--gap-m);
112
- } .bottom-sheet__scrollLocked_1nk6m {
116
+ } .bottom-sheet__scrollLocked_s4kzq {
113
117
  overflow: hidden;
114
- } .bottom-sheet__hiddenScrollbar_1nk6m {
118
+ } .bottom-sheet__hiddenScrollbar_s4kzq {
115
119
  scrollbar-width: none
116
- } .bottom-sheet__hiddenScrollbar_1nk6m::-webkit-scrollbar {
120
+ } .bottom-sheet__hiddenScrollbar_s4kzq::-webkit-scrollbar {
117
121
  width: 0;
118
122
  height: 0;
119
- } .bottom-sheet__disabledPointerEvents_1nk6m {
123
+ } .bottom-sheet__disabledPointerEvents_s4kzq {
120
124
  pointer-events: none;
121
- } .bottom-sheet__appear_1nk6m .bottom-sheet__wrapper_1nk6m, .bottom-sheet__enter_1nk6m .bottom-sheet__wrapper_1nk6m {
125
+ } .bottom-sheet__appear_s4kzq .bottom-sheet__wrapper_s4kzq, .bottom-sheet__enter_s4kzq .bottom-sheet__wrapper_s4kzq {
122
126
  transition: none;
123
- } .bottom-sheet__appearActive_1nk6m .bottom-sheet__wrapper_1nk6m, .bottom-sheet__enterActive_1nk6m .bottom-sheet__wrapper_1nk6m {
127
+ } .bottom-sheet__appearActive_s4kzq .bottom-sheet__wrapper_s4kzq, .bottom-sheet__enterActive_s4kzq .bottom-sheet__wrapper_s4kzq {
124
128
  transition: var(--bottom-sheet-in-transition);
125
129
  transform: translateY(0);
126
- } .bottom-sheet__enterDone_1nk6m .bottom-sheet__wrapper_1nk6m, .bottom-sheet__appearDone_1nk6m .bottom-sheet__wrapper_1nk6m {
130
+ } .bottom-sheet__enterDone_s4kzq .bottom-sheet__wrapper_s4kzq, .bottom-sheet__appearDone_s4kzq .bottom-sheet__wrapper_s4kzq {
127
131
  transform: translateY(0);
128
- } .bottom-sheet__exit_1nk6m .bottom-sheet__wrapper_1nk6m {
132
+ } .bottom-sheet__exit_s4kzq .bottom-sheet__wrapper_s4kzq {
129
133
  transform: translateY(0);
130
- } .bottom-sheet__exitActive_1nk6m .bottom-sheet__wrapper_1nk6m {
134
+ } .bottom-sheet__exitActive_s4kzq .bottom-sheet__wrapper_s4kzq {
131
135
  transition: var(--bottom-sheet-out-transition);
132
136
  transform: translateY(100%);
133
- } .bottom-sheet__background-accent_1nk6m {
137
+ } .bottom-sheet__background-accent_s4kzq {
134
138
  background-color: var(--color-light-bg-accent);
135
- } .bottom-sheet__background-info_1nk6m {
139
+ } .bottom-sheet__background-info_s4kzq {
136
140
  background-color: var(--color-light-bg-info);
137
- } .bottom-sheet__background-attention-muted_1nk6m {
141
+ } .bottom-sheet__background-attention-muted_s4kzq {
138
142
  background-color: var(--color-light-bg-attention-muted);
139
- } .bottom-sheet__background-positive-muted_1nk6m {
143
+ } .bottom-sheet__background-positive-muted_s4kzq {
140
144
  background-color: var(--color-light-bg-positive-muted);
141
- } .bottom-sheet__background-negative-muted_1nk6m {
145
+ } .bottom-sheet__background-negative-muted_s4kzq {
142
146
  background-color: var(--color-light-bg-negative-muted);
143
- } .bottom-sheet__background-primary_1nk6m {
147
+ } .bottom-sheet__background-primary_s4kzq {
144
148
  background-color: var(--color-light-bg-primary);
145
- } .bottom-sheet__background-primary-inverted_1nk6m {
149
+ } .bottom-sheet__background-primary-inverted_s4kzq {
146
150
  background-color: var(--color-light-bg-primary-inverted);
147
- } .bottom-sheet__background-secondary_1nk6m {
151
+ } .bottom-sheet__background-secondary_s4kzq {
148
152
  background-color: var(--color-light-bg-secondary);
149
- } .bottom-sheet__background-secondary-inverted_1nk6m {
153
+ } .bottom-sheet__background-secondary-inverted_s4kzq {
150
154
  background-color: var(--color-light-bg-secondary-inverted);
151
- } .bottom-sheet__background-tertiary_1nk6m {
155
+ } .bottom-sheet__background-tertiary_s4kzq {
152
156
  background-color: var(--color-light-bg-tertiary);
153
- } .bottom-sheet__background-tertiary-inverted_1nk6m {
157
+ } .bottom-sheet__background-tertiary-inverted_s4kzq {
154
158
  background-color: var(--color-light-bg-tertiary-inverted);
155
- } .bottom-sheet__background-quaternary_1nk6m {
159
+ } .bottom-sheet__background-quaternary_s4kzq {
156
160
  background-color: var(--color-light-bg-quaternary);
157
- } .bottom-sheet__background-quaternary-inverted_1nk6m {
161
+ } .bottom-sheet__background-quaternary-inverted_s4kzq {
158
162
  background-color: var(--color-light-bg-quaternary-inverted);
159
- } .bottom-sheet__background-specialbg-component_1nk6m {
163
+ } .bottom-sheet__background-specialbg-component_s4kzq {
160
164
  background-color: var(--color-light-specialbg-component);
161
- } .bottom-sheet__background-specialbg-component-inverted_1nk6m {
165
+ } .bottom-sheet__background-specialbg-component-inverted_s4kzq {
162
166
  background-color: var(--color-light-specialbg-component-inverted);
163
- } .bottom-sheet__background-specialbg-primary-grouped_1nk6m {
167
+ } .bottom-sheet__background-specialbg-primary-grouped_s4kzq {
164
168
  background-color: var(--color-light-specialbg-primary-grouped);
165
- } .bottom-sheet__background-specialbg-secondary-grouped_1nk6m {
169
+ } .bottom-sheet__background-specialbg-secondary-grouped_s4kzq {
166
170
  background-color: var(--color-light-specialbg-secondary-grouped);
167
- } .bottom-sheet__background-specialbg-tertiary-grouped_1nk6m {
171
+ } .bottom-sheet__background-specialbg-tertiary-grouped_s4kzq {
168
172
  background-color: var(--color-light-specialbg-tertiary-grouped);
169
- } .bottom-sheet__background-specialbg-secondary-transparent_1nk6m {
173
+ } .bottom-sheet__background-specialbg-secondary-transparent_s4kzq {
170
174
  background-color: var(--color-light-specialbg-secondary-transparent);
171
- } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1nk6m {
175
+ } .bottom-sheet__background-specialbg-secondary-transparent-inverted_s4kzq {
172
176
  background-color: var(--color-light-specialbg-secondary-transparent-inverted);
173
- } .bottom-sheet__background-specialbg-tertiary-transparent_1nk6m {
177
+ } .bottom-sheet__background-specialbg-tertiary-transparent_s4kzq {
174
178
  background-color: var(--color-light-specialbg-tertiary-transparent);
175
- } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1nk6m {
179
+ } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_s4kzq {
176
180
  background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
177
181
  }